/**
 * css/components/logo-grid.css — About page restyle (#68)
 *
 * Ink partner-logo wall (blocks/about_content/partners.php) — a bordered
 * grid (same "full-bleed bordered box" convention as stats.css, #122) on
 * a dark band, logos forced to a flat cream silhouette so mixed-source
 * brand marks read consistently on ink. 5-up desktop, 2-up mobile.
 * Also rendered by blocks/future_content/contributors.php and
 * blocks/work_content/clients.php — three callers, one component.
 *
 * EVERY BOUNDARY IS PAINTED EXACTLY ONCE, BY EXACTLY ONE BOX (#466,
 * superseding #450's gap mechanism — see "HOW THIS ARRIVED HERE" below).
 * The work is split so that no two boxes ever draw the same line:
 *
 *   - each CELL draws `border-right` + `border-bottom`. That closes the cell
 *     on the two sides it shares with a later neighbour, and on the two outer
 *     edges when it has no later neighbour;
 *   - the CONTAINER draws `border-top` + `border-left`, and nothing else.
 *     Those are the only two edges no cell can own, because the first row and
 *     the first column have no earlier neighbour to draw them.
 *
 * Between them that is all four sides of every cell and all four sides of the
 * box, with zero overlap and no `nth-child` anywhere.
 *
 * This replaced a per-cell `border-top`/`border-left` scheme whose "which
 * cell starts a row" resets were hard-coded per breakpoint —
 * `:nth-child(5n + 1)` / `:nth-child(-n + 5)` for the 5-up grid, mirrored by
 * hand inside the 680px media query for the 2-up one. Two things were wrong
 * with it and both were visible on /about-us/:
 *
 *   1. The mobile block set `border-left: 0` on EVERY item, so the 2-up grid
 *      had no vertical rule between its two columns at all.
 *   2. The desktop `:nth-child(-n + 5) { border-top: 0 }` rule (0,2,0)
 *      outranked the mobile block's plain `.cg-logogrid__item` (0,1,0)
 *      restatement, so items 3, 4 and 5 kept `border-top: 0` at 2-up and
 *      lost the horizontal rule under mobile row 1.
 *
 * HOW THIS ARRIVED HERE, because the shape of the fix is not obvious and the
 * obvious version is wrong.
 *
 * #450 replaced that nth-child scheme with a gap mechanism: the container
 * painted itself in the rule colour, the cells painted themselves in the band
 * colour, and the visible lines were the container showing through a
 * `--hairline` grid gap. That fixed both defects and had no per-breakpoint
 * arithmetic to get wrong. But it REQUIRES a rectangular grid — a short final
 * row shows the container's rule colour as a solid slab — so the callers
 * padded the last row with empty cells via `cg_logogrid_fillers()`.
 *
 * Those empty cells are what the Creative Director objected to (review r1,
 * 2026-09-01, About and Awards & Testimonials): "remove boxes when no logo
 * appears... Each logo needs a box vs the col and row div have a border so
 * that the last line doesn't have a bunch of empty boxes." Measured on Dev
 * 2026-09-02: /about-us/ renders 16 logos in a 5-up grid, so the fourth row
 * was one logo followed by FOUR empty bordered boxes.
 *
 * So the border moves onto the cell, which is what the CD asked for in as many
 * words, and the fillers go. The cell keeps its own box; a short final row
 * simply stops.
 *
 * WHY NOT SIMPLY GIVE EVERY CELL ALL FOUR BORDERS. Because then every
 * internal rule is drawn twice, by the two cells that share it, and the
 * obvious repair for that — overlapping the pair with a negative margin so
 * they land on "the same pixel" — DOES NOT WORK. It was built that way first
 * and measured on /awards-and-testimonials/:
 *
 *     working tree  row dividers (y / thickness):  301/1px  595/1px  889/2px  1184/1px
 *     main          row dividers (y / thickness):  300/1px  594/1px  889/1px  1183/1px
 *
 * The overlap is exact in CSS — card 4's top edge and card 3's bottom edge
 * coincide to a hundredth of a pixel — but they belong to two different
 * boxes, and the engine snaps each box to device pixels independently. Where
 * the shared edge falls near a half pixel the two snap to different rows and
 * paint two adjacent full-ink lines. It reproduced at 1440, 1024, 768 and 390,
 * and at DPR 2 (where the affected rules went to 4px, not 2), i.e. it does not
 * wash out on a retina display. Two borders on one edge cannot be made to snap
 * identically from CSS; the only reliable fix is for one box to own each line.
 *
 * A pleasant consequence: because nothing overlaps, the rule colour can stay
 * the TRANSLUCENT `--rule-on-dark`. An earlier draft of this change had to
 * introduce an opaque token, since compositing `rgba(245,245,245,0.16)` over
 * itself gives 1-(1-0.16)^2 = 0.2944 — every internal rule ~84% brighter than
 * the outer edge. Same class of bug as the `background-clip: padding-box` note
 * below, which this file already carries because it was got wrong once. Paint
 * each line once and the question disappears.
 *
 * All three callers put this grid on a `.cg-band--ink` section, which is why
 * the cell fill can be the flat `--surface-dark` token. A cream-band caller
 * would need its own fill; there isn't one.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-logogrid-wrap {
	text-align: center;
}

.cg-logogrid-wrap__eyebrow {
	margin-bottom: var( --eyebrow-gap );
}

.cg-logogrid {
	display: grid;
	/* `minmax( 0, 1fr )`, not `1fr`: a bare `1fr` track floors at min-content,
	   so a single wide brand mark pushed the right-hand columns outside the
	   box (measured 1684px of content in a 1270px container at 1440). The
	   overflowing cells took the container's rule colour with them and the
	   "perfect grid" was open on the right. */
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	/* No gap. Under #450 the gap WAS the rules — the container's background
	   showing through between cells — and that is exactly what painted a solid
	   slab across a short final row. The rules are borders now, so any gap here
	   would just prise them apart. */
	gap: 0;
	margin-top: 48px;
	/* The container's whole remaining job: the top and left edges, the only two
	   lines no cell can own. Not `border-top`/`border-left` shorthands — those
	   would be equivalent today, but longhands keep the colour in one place if
	   this ever moves onto a band that needs a different one. No background: a
	   background is what showed through the empty slots of a short final row
	   under #450, which is the defect #466 exists to remove. */
	border-top: var( --hairline ) solid var( --rule-on-dark );
	border-left: var( --hairline ) solid var( --rule-on-dark );
}

.cg-logogrid__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 34px;
	background: var( --surface-dark );
	/* Right and bottom only, on EVERY cell — no `nth-child`, so nothing has to
	   be re-derived when `grid-template-columns` changes at a breakpoint, which
	   is the property that made #450's mechanism worth keeping in the first
	   place. Each of these lines is either the boundary with the next cell
	   across or down, or (for the last column and the last row) an outer edge.
	   Either way this cell is the only box that draws it.
	   A short final row therefore ends after its last logo: the empty slots
	   have no cell, so nothing paints them. That is the whole issue. */
	border-right: var( --hairline ) solid var( --rule-on-dark );
	border-bottom: var( --hairline ) solid var( --rule-on-dark );
	/* `padding-box`, not the default `border-box`. `--rule-on-dark` is
	   translucent, so a fill painted under its own border composites with it
	   and the line comes out brighter than the container's — the same
	   "weird lines" defect #450's docblock recorded, arriving by a different
	   route. */
	background-clip: padding-box;
}

/*
 * A repeater whose rows all carry an empty image URL clears `have_rows()` but
 * emits no cells. The container still draws its top and left edges, so without
 * this an empty grid would leave a stray 1px corner mark under the eyebrow —
 * smaller than the 2px bar #450 left, and just as meaningless.
 */
.cg-logogrid:empty {
	display: none;
}

.cg-logogrid__item img {
	max-width: 100%;
	height: auto;
	filter: grayscale( 1 ) brightness( 0 ) invert( 1 );
	opacity: 0.75;
	transition: opacity var( --fade-out ) var( --fade-ease );
}

.cg-logogrid__item:hover img {
	opacity: 1;
}

/* The whole of the responsive story, exactly as under #450's mechanism: the
   column count changes and nothing else has to. The filler rules that used to
   live here — hiding the 5-up fillers at 2-up and revealing a narrow-only one
   — went with the fillers themselves (#466). */
@media ( max-width: 680px ) {
	.cg-logogrid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}