/**
 * Rig spec cards — the equipment rosters on both location pages.
 *
 * WHAT THEY REPLACED
 *
 * Eight (California) and four (Utah) alternating image/text rows, each built from
 * a wp:columns block, each carrying a bare <ul> of specifications. Three problems:
 *
 *  1. Length. The California page ran to about eleven screens for eight machines,
 *     because a zig-zag row is as tall as its tallest column and the spec lists
 *     are long. A specifier comparing two rigs had to scroll between them.
 *  2. The specifications were prose bullets — "Weight: 10,000 lbs" as a sentence
 *     fragment. Nothing lined up, so comparing the width of two rigs meant reading
 *     two paragraphs of list rather than glancing down a column.
 *  3. Nothing said where one rig ended and the next began except a wider gap, and
 *     the alternating sides meant the eye had to re-find the text on every row.
 *
 * Two columns of cards instead: the roster fits in roughly half the height, two
 * rigs sit side by side to be compared, and each card is visibly one machine.
 *
 * NAMING: .pd-fleet / .pd-rig, deliberately NOT .pd-rigs / .pd-rig-card — those
 * belong to the homepage fleet grid in rigs.css, which is a different component
 * (a photo tile that links through). Two files, two prefixes, no collisions.
 */

.pd-fleet__grid {
	display: grid;

	/* Three up at the full content width, two below ~1190px of it, one below
	   ~785px. Was two up
	   with a 420px floor; three narrower cards display every photograph
	   smaller, which is kinder to a soft or low-resolution source. 380px is
	   the narrowest card checked for wraps: "Minimum Required Clearance / Room
	   to Walk" and "Radio Remote Controlled Tracking" still hold one line, and
	   3 x 380 + 2 x 1.5rem gap fits the 1200px content width. */
	grid-template-columns: repeat( auto-fit, minmax( min( 380px, 100% ), 1fr ) );
	gap: var( --wp--preset--spacing--40 );
	align-items: stretch;
}

/**
 * SPECIFICITY: child selector at (0,2,0). Core's flow layout emits
 * `:root :where(.is-layout-flow) > :where(*) { margin-block-start: … }` at
 * (0,1,0); a lone class ties it and loses on load order.
 */
.pd-fleet__grid > .pd-rig {
	margin-top: 0;

	display: flex;
	flex-direction: column;

	/* Containing block for the "Coming soon" flag over the photograph. */
	position: relative;

	/* No inline padding on the card — the photo runs edge to edge and the content
	   below sets its own, exactly as the service cards do. */
	padding: 0 0 1.6rem;
	border-radius: 14px;
	overflow: hidden;

	background-color: var( --wp--preset--color--base );

	box-shadow:
		0 1px 3px rgba( 0, 0, 0, 0.05 ),
		0 10px 24px rgba( 0, 0, 0, 0.06 );

	--pd-rig-pad: 1.6rem;
}

/**
 * Tag-qualified at (0,1,2): core sets `.wp-block-image img { height: auto }` at
 * (0,1,1) and its block styles load after the theme's, so a class-only selector
 * would tie and lose — and aspect-ratio would never apply.
 */
figure.pd-rig__media {
	margin: 0;
	background-color: var( --wp--preset--color--cream );
}

figure.pd-rig__media img {
	display: block;
	width: 100%;

	/* The library mixes 4:3, square and tall portraits. A uniform band is what
	   lets cards side by side line their titles up. 4:5, portrait, because a
	   drill rig is a tall subject and the tall photos are the ones a wide band
	   failed: at 6:5 the Yeti lost its mast and the Mole its ground. 4:5 holds
	   the whole Yeti and Mole, all of the Diedrich, and the Beaver's crew; the
	   wide photos give up edge width instead. Tall photos are aimed with
	   'focus'. (4:3, then 6:5, then square were tried before it.) */
	aspect-ratio: 4 / 5;
	object-fit: cover;
}


/**
 * "Coming soon" flag.
 *
 * On the photo rather than beside the name: the Utah roster's fourth rig had
 * "(Coming Soon)" appended to its title, which made an already long name longer
 * and buried the one fact a reader needs before they start comparing specs.
 *
 * Gold on dark, not gold text on white — gold type this small fails contrast on
 * a light card, but a dark pill can carry it.
 */
.pd-rig__flag {
	position: absolute;
	top: 0.9rem;
	left: 0.9rem;
	margin: 0;
	padding: 0.3rem 0.7rem;

	border-radius: 999px;
	background-color: rgba( 36, 34, 45, 0.85 );
	color: var( --wp--preset--color--gold );

	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Tag beats theme.json's `:root :where(h3)`, which a lone class would only tie. */
h3.pd-rig__name {
	margin: 1.3rem var( --pd-rig-pad ) 0;
	font-size: 1.1875rem;
	line-height: 1.3;
	text-wrap: balance;
}

.pd-rig > .pd-rig__blurb {
	margin: 0.6rem var( --pd-rig-pad ) 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	opacity: 0.85;
}

/* Section labels inside the card — "Specifications", "Services". */
.pd-rig > .pd-rig__label {
	margin: 1.35rem var( --pd-rig-pad ) 0;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	opacity: 0.6;
}

/**
 * Spec table.
 *
 * A <ul> rather than a <dl> so it stays a core list block an editor can add a row
 * to. Each row is a two-column grid: label left, value right, hairline between —
 * which is what makes a column of values comparable at a glance, and what the
 * bullet list could never do.
 */
ul.pd-rig__specs {
	margin: 0.5rem var( --pd-rig-pad ) 0;
	padding-left: 0;
	list-style: none;
}

ul.pd-rig__specs li {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1rem;
	align-items: baseline;

	padding: 0.4rem 0;
	border-bottom: 1px solid rgba( 0, 0, 0, 0.07 );

	font-size: 0.875rem;
	line-height: 1.4;
}

ul.pd-rig__specs li:last-child {
	border-bottom: 0;
}

.pd-rig__spec-key {
	opacity: 0.65;
}

.pd-rig__spec-value {
	font-weight: 700;
	text-align: right;

	/* Values are short and numeric; never break "20-100 psi" across lines. */
	white-space: nowrap;
}

/* Feature flags — the spec bullets that carry no value ("Rubber Tracks"). They
   reuse the check list from methods.css, tightened for use inside a card. */
.pd-rig > ul.pd-checklist {
	margin: 0.7rem var( --pd-rig-pad ) 0;
}

.pd-rig > ul.pd-checklist li {
	font-size: 0.875rem;
}

/**
 * Service chips.
 *
 * The methods each rig can run were a comma-separated sentence after a bold
 * "Services:" label. As chips they are countable and scannable, and a reader
 * looking for one method ("does this one core rock?") finds it without reading
 * the sentence.
 */
ul.pd-rig__services {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;

	margin: 0.6rem var( --pd-rig-pad ) 0;
	padding-left: 0;
	list-style: none;
}

ul.pd-rig__services li {
	padding: 0.25rem 0.65rem;
	border-radius: 999px;

	background-color: rgba( 51, 122, 183, 0.1 );
	color: var( --wp--preset--color--primary-darker );

	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Stagger the reveal down the grid in reading order. Eight is the longest roster
   (California); the Utah page uses the first four. */
.pd-fleet__grid > .pd-rig:nth-child( 2 ) { --pd-reveal-delay: 80ms; }
.pd-fleet__grid > .pd-rig:nth-child( 3 ) { --pd-reveal-delay: 120ms; }
.pd-fleet__grid > .pd-rig:nth-child( 4 ) { --pd-reveal-delay: 160ms; }