/**
 * "Built for Accuracy. Engineered for Performance." — the eSPT Auto Hammer rig
 * list on the About page.
 *
 * v1 built each line as a flex group holding a "✓" paragraph beside a rig-name
 * paragraph, one group per rig, each centred on its own. Three problems, all
 * visible:
 *
 *   1. The check never lined up. It was a `large` preset paragraph next to a
 *      body-size paragraph, so the two line boxes had different heights and the
 *      glyph floated above the text it belonged to. `verticalAlignment: top`
 *      aligned the BOXES, which is not the same as aligning the marks.
 *   2. Every row was independently centred, so the names started at four
 *      different x positions — a ragged column with no left edge for the eye.
 *   3. The rows sat at the section's blockGap (1.5rem) apart, which reads as four
 *      unrelated statements rather than one list.
 *
 * The badge is now a CSS pseudo-element on the row, matching
 * .pd-specialize__card — same circle, same size, same accent fill. That is what
 * keeps it aligned: the row is a two-column grid, so the badge and the text are
 * placed by the same layout rather than left to line-box arithmetic. It also
 * halves the block count per rig and keeps the glyph decorative, so a screen
 * reader does not announce "check mark" ahead of every rig name.
 */

/**
 * SPECIFICITY: tag-qualified. theme.json emits `:root :where(h3) { font-size:
 * var(--wp--preset--font-size--large) }` at (0,1,0); a lone class only ties it
 * and loses on load order, which would leave this label at full h3 size.
 */
h3.pd-espt__label {
	margin-bottom: 0;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8125rem;
	font-weight: 700;
	opacity: 0.7;
}

/**
 * SPECIFICITY: descended from .pd-espt rather than written as a lone class.
 * Core's constrained layout emits
 * `:root :where(.is-layout-constrained) > :where(:not(.alignleft)…) { max-width:
 * … ; margin-inline: auto }` at (0,1,0) — a single class only TIES that, and
 * because theme stylesheets are enqueued before core's block-support styles the
 * tie resolves in core's favour, leaving the list at the section's full 800px.
 */
.pd-espt .pd-espt__list {
	display: grid;

	/* Two columns of two on a desktop, one column on a phone. auto-fit rather
	   than a fixed 2 so a fifth rig needs no CSS change. */
	grid-template-columns: repeat( auto-fit, minmax( min( 260px, 100% ), 1fr ) );
	gap: 1.15rem var( --wp--preset--spacing--40 );

	/* Narrower than the 800px section: the rig names are short, and at full
	   width the two columns drift so far apart they stop reading as a pair.
	   Centred as a block, but the rows inside stay left-aligned to each other —
	   that shared left edge is the point. */
	max-width: 620px;
	margin-inline: auto;
	text-align: left;
}

.pd-espt__list > .pd-espt__rig {
	/* Kill core's flow-layout block margin — the grid gap owns spacing. */
	margin-top: 0;

	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.85rem;
	row-gap: 0.15rem;
	align-items: center;
}

/* Circular check badge. Sized and coloured to match .pd-specialize__card::before
   so the two lists read as the same component in different sections. */
.pd-espt__list > .pd-espt__rig::before {
	content: "✓";

	/* Spans both text rows and centres against them, so the badge sits with the
	   pair rather than with either line. */
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;

	display: grid;
	place-items: center;
	width: 2.125rem;
	height: 2.125rem;
	border-radius: 50%;
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--base );
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
}

/**
 * The Fraste "Mantis" is not equipped yet, so it does not get a check — a tick
 * beside a rig that has not arrived claims something untrue. An empty ring reads
 * the way an unticked checkbox does: same list, not yet done. The wording carries
 * it too; the ring alone is not the only signal.
 *
 * Gold rather than accent, and border-only: gold text at this size is well under
 * AA on cream, but a 2px shape is not text and can carry the colour safely.
 */
.pd-espt__list > .pd-espt__rig--soon::before {
	content: "";
	background-color: transparent;
	border: 2px solid var( --wp--preset--color--gold );
}

/* Child selectors for specificity: core's flow layout puts a margin-block-start
   on both paragraphs at (0,1,0), which a lone class would only tie. */
.pd-espt__rig > .pd-espt__name {
	grid-column: 2;
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
}

.pd-espt__rig > .pd-espt__meta {
	grid-column: 2;
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.7;
}

/* Stagger the reveal across the grid. */
.pd-espt__list > .pd-espt__rig:nth-child( 2 ) { --pd-reveal-delay: 90ms; }
.pd-espt__list > .pd-espt__rig:nth-child( 3 ) { --pd-reveal-delay: 180ms; }
.pd-espt__list > .pd-espt__rig:nth-child( 4 ) { --pd-reveal-delay: 270ms; }