/*
 * The press logos.
 *
 * Measured on Atolea at a 375px viewport: a 116px band holding a 14px heading
 * over logos pinned to 22px tall, in a centred row with a 20px gap, on the page
 * background rather than a panel.
 *
 * Sizing here is by measured ink rather than by canvas. The nine files carry
 * between 31 and 100 percent ink by height, so any shared height cap rendered
 * nine different sized marks. product-press-ink.php finds each logo's real
 * bounding box and hands this stylesheet the numbers below.
 */
.pearlory-press {
	margin: 0;
	padding: 30px 15px 32px;
	/* The hairline used by the accordion and the section rules on this page. */
	border-top: 1px solid #e8e6e1;
	text-align: center;
}

/*
 * 14px is Atolea's measured size. Sentence case rather than their all caps: the
 * accordion labels and the section headings on this page are already sentence
 * case, and the heading is set from a setting so the shop can shout if it wants.
 */
.pearlory-press__title {
	margin: 0 0 22px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.3;
	color: rgba(0, 0, 0, 0.55);
	text-transform: uppercase;
}

/*
 * Equal columns, with the logos ordered so each row holds marks of a like
 * height.
 *
 * Two things were wrong before and only one of them was the layout. Centring
 * each row on its own width left 39px of ragged edge, and spreading the rows
 * flush fixed that. What remained was that a row could hold a 24px mark beside
 * a 7px one, because at equal ink area the height follows the artwork's
 * proportions, and that stepping is what read as untidy however the edges sat.
 *
 * So the columns are fixed here and product-press.php sorts the logos by that
 * same proportion, which puts the squat marks together and the long thin ones
 * together. Even columns, even rows.
 */
.pearlory-press__list {
	--pearlory-press-u: 1px;

	display: grid;
	/*
	 * A count PHP works out from how many logos there are, never auto-fit. An
	 * auto fitting track list takes as many columns as the width allows, which
	 * at 740px came to six and left the last three logos beside 350px of
	 * nothing.
	 */
	grid-template-columns: repeat(var(--pearlory-press-cols, 3), minmax(0, 1fr));
	/*
	 * Capped and centred, so a tablet does not stretch three columns across the
	 * full width and set the logos adrift from each other.
	 */
	max-width: 480px;
	margin-inline: auto;
	/*
	 * Bottoms, not centres. Centring boxes of unlike height puts their bottoms
	 * in unlike places: the last row measured 5.2px between Cityline's baseline
	 * and Who What Wear's, which is visible as soon as anyone looks along the
	 * row. Because each box is cropped to its ink, the bottom edge is the
	 * baseline of the letterforms, so ending them together is what a typesetter
	 * would do with the same nine words.
	 */
	align-items: end;
	justify-items: center;
	/*
	 * Wider than Atolea's 20px. Their row is four logos at one size; this is
	 * nine over three rows, and the row gap leads because the rows are what
	 * close up first.
	 */
	gap: 22px 20px;
	/* Block only: the inline margins are auto above, and a shorthand here
	   would put them back to zero and take the centring with them. */
	margin-block: 0;
	padding: 0;
	list-style: none;
}

.pearlory-press__item {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
	list-style: none;
}

/*
 * The crop box.
 *
 * Sized to the logo's ink, not its file, and clipping whatever margin the file
 * carries around it. Its width comes from PHP as a count of layout units and
 * its height follows from the ink's own aspect ratio, so the box stays true
 * when the unit changes at a breakpoint or when max-width narrows it.
 */
.pearlory-press__crop {
	display: block;
	position: relative;
	width: calc(var(--pearlory-press-w, 60) * var(--pearlory-press-u));
	max-width: 100%;
	aspect-ratio: var(--pearlory-press-ar, 3);
	/*
	 * The descender hangs below the line rather than sitting on it.
	 *
	 * A negative bottom margin shortens the box the row aligns on, without
	 * moving or clipping what is drawn inside it. What ends up on the shared
	 * line is the baseline; the y of Cityline drops past it the way it would in
	 * a line of type. Every other logo here has no overhang, so the value is
	 * zero and the box is unchanged.
	 */
	margin-bottom: calc(var(--pearlory-press-drop, 0) * var(--pearlory-press-u) * -1);
	overflow: hidden;
}

/*
 * The image inside, placed by its ink.
 *
 * Every value is a percentage of the crop box, so the pair scales together and
 * nothing needs recomputing per breakpoint. Width is the file's width as a
 * multiple of the ink's; the offsets slide the file until its ink sits at the
 * box's origin. A file that could not be measured gets 100 and 0, which is the
 * whole canvas and no shift.
 *
 * max-width: none because the theme sets img { max-width: 100% } globally and
 * this image is deliberately wider than the box it sits in.
 *
 * Greyscale because four of the nine are colour originals and five are already
 * grey, and a row that is half colour reads as a mistake. The logos are a quiet
 * trust mark here, not the thing being sold.
 */
.pearlory-press__logo {
	display: block;
	position: absolute;
	top: calc(var(--pearlory-press-oy, 0) * 1%);
	left: calc(var(--pearlory-press-ox, 0) * 1%);
	width: calc(var(--pearlory-press-iw, 100) * 1%);
	height: auto;
	max-width: none;
	filter: grayscale(1);
	opacity: 0.72;
}

/* Narrow phones hold less across, so the whole row steps down together. */
@media (max-width: 359px) {
	.pearlory-press__list {
		--pearlory-press-u: 0.82px;

		gap: 18px 16px;
	}
}

/*
 * Above the phone breakpoint the nine come to about 690 units of logo plus 224
 * of gap, inside a container measured at 1020, so they settle on one line
 * without being forced onto it.
 */
@media (min-width: 850px) {
	.pearlory-press {
		padding: 32px 0 34px;
	}

	.pearlory-press__list {
		--pearlory-press-u: 1.15px;

		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: minmax(0, 1fr);
		max-width: none;
		gap: 24px 28px;
	}
}