/**
 * References table (template-parts/references/references-table.php).
 *
 * Figma node 442:2, treated as a sketch: its paddings were inconsistent and
 * its header column was a static 250px. Both are corrected here.
 *
 * The layout rests on two CSS features rather than on measurement, and
 * neither is worked around:
 *
 *   1. Intrinsic sizing. ONE grid holds all five rows at
 *      `max-content 1fr`, so the header column sizes itself to the longest
 *      category name across every row. No fixed width, nothing measured, and
 *      it re-solves itself for the Slovak translation on its own.
 *
 *   2. Subgrid, for the list alignment. See .refs__client.
 *
 * A JavaScript version of either would have to re-run on every resize and
 * every font load, and would still be a frame behind.
 */

.refs {
	padding-block: var(--section-pad-y);
}

/* --------------------------------------------------------------------
 * The grid
 *
 * Every row's two cells live in this one grid, in source order: category,
 * clients, category, clients. That shared context is what lets column one
 * size to the longest name in the WHOLE table; five separate grids would
 * each size to their own row and the columns would step.
 * -------------------------------------------------------------------- */

.refs__table {
	display: grid;
	grid-template-columns: max-content 1fr;
}

/* Row hairlines. Children 3 and up are every cell below the first row, so
   the line runs the full width and nothing lands on the grid's outer
   edges. */
.refs__table > *:nth-child(n + 3) {
	border-top: 1px solid var(--color-border-subtle);
}

/* Header column: NO left padding, because it faces the container line and
   the container already provides that space. 48px to the divider, and the
   divider is the clients cell's own left border, so 48px again after it.

   The category is a HEADING at the h3 token, and the client name below it is
   body-lg rather than a heading, so the category is the heavy element and the
   client reads lighter. The type-label this once carried is 12px uppercase
   mono, whose cap height could never line up with either. */
.refs__cat {
	margin: 0;
	padding: 48px 48px 48px 0;
	font-family: var(--font-heading);
	font-size: var(--type-h3-size);
	line-height: var(--type-h3-line);
	letter-spacing: var(--type-h3-spacing);
	font-weight: 700;
	color: var(--color-heading-text);
}

.refs__clients {
	padding: 48px 0 48px 48px;
	border-left: 1px solid var(--color-border-subtle);

	display: grid;
	/* minmax(0, 1fr) rather than 1fr: a plain fr floors at min-content, so a
	   long unbroken word would let one client claim more than its share.
	   With this, two clients are exactly 50/50 and three exactly thirds. */
	grid-template-columns: repeat(var(--refs-cols, 1), minmax(0, 1fr));
	/* Identity, then list. Named here rather than in the client so that the
	   subgrids below have a shared track to attach to. */
	grid-template-rows: auto auto;
	column-gap: 64px;
	row-gap: 64px;
}

/* --------------------------------------------------------------------
 * Client column: the subgrid
 *
 * Each client spans both of the row's tracks and adopts them with
 * `grid-template-rows: subgrid`. Its identity therefore sits in the SAME
 * track as every other identity in that row, and its list in the same track
 * as every other list. A one-line name beside a three-line name no longer
 * produces two different list start points, because there is only one start
 * point: the shared track's edge.
 *
 * The 64px gap comes from the parent's row-gap, which the subgrid inherits.
 * -------------------------------------------------------------------- */

.refs__client {
	position: relative; /* for the divider, which must not be a grid item */
	display: grid;
	grid-row: 1 / -1;
	grid-template-rows: subgrid;
}

/* Divider centred in the 64px column gap, so text-to-divider is 32px on both
   sides, matching the node's 32px of internal padding either way. Absolutely positioned so it stays
   out of the subgrid: a static pseudo-element would be placed into one of
   the two tracks and push the copy around. */
.refs__client + .refs__client::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -32px;
	width: 1px;
	background-color: var(--color-border-subtle);
}

/* --------------------------------------------------------------------
 * Identity: logo, or the title when there is no logo. Never both.
 *
 * The logo is a real image in its own colours. It was briefly masked to a
 * flat fill, borrowed from the clients grid, and that was wrong here: that
 * section is a logo wall where uniformity is the point, whereas each logo
 * here identifies one client above its own project list.
 *
 * Capped in HEIGHT with the width left to the artwork, so nothing is
 * stretched to a common box. `width: auto` on an image with intrinsic
 * dimensions needs no ratio custom property: the browser already knows the
 * aspect, so there is nothing to pass it.
 * -------------------------------------------------------------------- */

/* Top-aligned, not bottom. The identity track is shared across the row, so
   flex-end would drop a one-line name to the bottom of a track sized by a
   taller sibling and it would no longer sit level with the category heading.
   Every logo is capped to the same height, so nothing is gained by bottom
   alignment anyway. */
.refs__identity {
	display: flex;
	align-items: flex-start;
	min-width: 0;
}

.refs__logo {
	display: block;
	height: var(--refs-logo-height, 64px);
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: left center;
}

/* NOT a heading. body-lg in heading-text colour, so the category above it
   stays the heavy element: an Archivo bold name beside an Archivo bold
   category inverted the hierarchy and made the client read as the label. */
.refs__name {
	font-family: var(--font-body);
	font-size: var(--type-body-lg-size);
	line-height: var(--type-body-lg-line);
	letter-spacing: var(--type-body-lg-spacing);
	font-weight: var(--type-body-lg-weight);
	color: var(--color-heading-text);
}

/* --------------------------------------------------------------------
 * Delivered list. Hairlines BETWEEN items only; the first and last edges
 * face the row's own padding and the 64px gap, which already space them.
 *
 * The list carries .marker-list for the sake of the stacked layout below the
 * breakpoint, where the accent marker is what introduces an item. At THIS
 * width the table still has a vertical divider between companies and a row
 * hairline between categories, so the borders are not doing double duty and
 * the hairline list is left as designed. The marker is therefore suppressed
 * here and switched on in the 1024 block, and the indent is pulled back with
 * it so nothing hangs off a marker that is not drawn.
 * -------------------------------------------------------------------- */

.refs__items {
	--marker-indent: 0;

	margin: 0;
	padding: 0;
	list-style: none;
	align-self: start;
}

/* Child selector for the specificity, not for the structure: the shared rule
   is .marker-list > li::before, and a bare .refs__item::before loses to it. */
.refs__items > .refs__item::before {
	content: none;
}

.refs__item {
	padding-block: 16px;
	font-size: 0.875rem; /* 14px */
	line-height: 1.45;
	font-weight: 400;
	color: var(--color-text-secondary);
}

.refs__item + .refs__item {
	border-top: 1px solid var(--color-border-subtle);
}

.refs__item:first-child {
	padding-top: 0;
}

.refs__item:last-child {
	padding-bottom: 0;
}

/* --------------------------------------------------------------------
 * Below 1024: the two-column structure cannot hold
 *
 * The category becomes a heading above its own clients and the clients
 * stack full width. Row hairlines stay, every vertical one goes. Designer's
 * ruling, not the client's.
 *
 * Both the outer grid and the inner one are re-declared rather than
 * patched: the client stops being a subgrid and becomes its own two-row
 * grid, because there is no longer a shared row to align to.
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.refs__table {
		grid-template-columns: 1fr;
	}

	/* Only the category cell opens a row now, so it alone carries the line;
	   on the clients cell it would draw a second one mid-row. */
	.refs__table > *:nth-child(n + 3) {
		border-top: 0;
	}

	/* --------------------------------------------------------------------
	 * Three boundaries, three distinct signals
	 *
	 * Stacked, this section has three nested boundaries and had two of them
	 * drawn with the same hairline: one between categories and one between
	 * every delivered item, with NOTHING between one company and the next.
	 * So the strongest signal on the page marked the smallest division, and
	 * the division a reader actually needs - which logo owns which list -
	 * was the only one left unmarked.
	 *
	 *   item to item        12px and the accent marker
	 *   company to company  32 + hairline + 32
	 *   category            128, and no line at all
	 *
	 * Each level is at least double the one inside it, so the hierarchy holds
	 * on spacing alone even before the marker and the rule are read.
	 * -------------------------------------------------------------------- */

	.refs__cat {
		padding: 0 0 32px;
	}

	/* Gap, not a rule. Two section steps: --section-pad-y is 64 at this
	   width, and a category boundary is the biggest break in the section, so
	   it gets one step on each side of the join. */
	.refs__table > .refs__cat:not(:first-child) {
		padding-top: var(--section-pad-y);
		border-top: 0;
	}

	.refs__clients {
		padding: 0 0 var(--section-pad-y);
		border-left: 0;
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		row-gap: 32px;
	}

	.refs__client {
		grid-row: auto;
		grid-template-rows: auto auto;
		row-gap: 32px;
	}

	/* The vertical divider was the desktop answer to this boundary; stacked,
	   it becomes a horizontal one. This is the line that tells a reader where
	   one company's list ends. */
	.refs__client + .refs__client {
		padding-top: 32px;
		border-top: 1px solid var(--color-border-subtle);
	}

	.refs__client + .refs__client::before {
		content: none;
	}

	/* The site's list treatment, marker and spacing both. The 16px of
	   padding-block existed to give the hairline air; with the hairline gone
	   it is only loosening the list, so the items take the 12px the job
	   posting lists use. */
	.refs__items {
		--marker-indent: 28px;
		--marker-line: 1.45; /* the item's own line height, not body's */
	}

	.refs__item {
		padding-block: 0;
	}

	.refs__items > .refs__item::before {
		content: "";
	}

	.refs__item + .refs__item {
		margin-top: 12px;
		border-top: 0;
	}
}