/**
 * css/components/stat-cells.css — Website 2.0 shared component library (#136)
 *
 * Full-bleed rust band, 4 big-numeral columns, no top/bottom band
 * padding — each cell carries its own 42px-top/96px-bottom rhythm and a
 * hairline divider so the numerals read as the section's own header.
 * Reference: approach.html `.sec.rust`/`.stages`/`.stagecell` ("Four
 * Stages").
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

/*
 * The band is full-bleed, so the outer cells absorb the page gutter
 * (--pad-x) while the inner ones only carry --box-pad. Four equal 1fr
 * columns therefore leave columns 1 and 4 with (--pad-x - --box-pad) less
 * room for their text than 2 and 3 — 232px vs 272px at 1440. Widen the two
 * outer columns by exactly that difference so all four text columns match.
 */
.cg-stages {
	--stage-edge: calc( var( --pad-x ) - var( --box-pad ) );
	--stage-col: calc( ( 100% - 2 * var( --stage-edge ) ) / 4 );

	display: grid;
	grid-template-columns:
		calc( var( --stage-col ) + var( --stage-edge ) )
		var( --stage-col )
		var( --stage-col )
		calc( var( --stage-col ) + var( --stage-edge ) );
	margin-inline: calc( -1 * var( --pad-x ) );
}

.cg-stagecell {
	display: flex;
	flex-direction: column;
	padding: 42px var( --box-pad ) 96px;
	border-left: var( --hairline ) solid var( --rule-on-rust );
}

.cg-stagecell:first-child {
	padding-left: var( --pad-x );
	border-left: 0;
}

.cg-stagecell:last-child {
	padding-right: var( --pad-x );
}

.cg-stagecell__num {
	display: block;
	padding: 0 0 42px;
	font-family: var( --font-condensed );
	/* Weight stays 600 deliberately (#304): this is a numeral, and the CD's
	   numeral request asks for Tungsten Narrow Semibold — 600 satisfies both
	   that and the giant-condensed-word repointing at once. Do NOT bump this
	   to 700 to match .cg-caps__word/.cg-believe__word; those are "Bold" per
	   a separate, unrelated request. See css/tokens.css --font-condensed and
	   css/components/giant-word.css for the Bold siblings. */
	font-weight: 600;
	font-size: clamp( 88px, 7vw, 132px );
	line-height: 0.9;
	letter-spacing: -1px;
	color: var( --stagenum-on-rust );
}

.cg-stagecell__label {
	display: block;
	margin-inline: calc( -1 * var( --box-pad ) );
	padding-block: 34px 0;
	padding-inline: var( --box-pad );
	border-top: var( --hairline ) solid var( --rule-on-rust );
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --cg-cream );
}

.cg-stagecell:first-child .cg-stagecell__label {
	margin-left: calc( -1 * var( --pad-x ) );
	padding-left: var( --pad-x );
}

.cg-stagecell:last-child .cg-stagecell__label {
	margin-right: calc( -1 * var( --pad-x ) );
	padding-right: var( --pad-x );
}

.cg-stagecell__title {
	margin: 20px 0 0;
	font-family: var( --font-serif );
	font-weight: 400;
	font-size: clamp( 26px, 2vw, 30px );
	line-height: 1.08;
	letter-spacing: -0.6px;
	color: var( --cg-cream );
	white-space: pre-line;
}

.cg-stagecell__text {
	margin: 24px 0 0;
	font-family: var( --font-body );
	font-size: 14px;
	line-height: 1.62;
	color: var( --body-on-rust );
}

.cg-stagecell {
	transition: background-color var( --fade-out ) var( --fade-ease );
}

.cg-stagecell:hover {
	background-color: var( --box-hover-rust );
}

@media ( max-width: 1024px ) {
	.cg-stages {
		grid-template-columns: 1fr 1fr;
		row-gap: 48px;
	}

	.cg-stagecell {
		padding: 34px 34px 64px;
	}

	.cg-stagecell:first-child {
		padding-left: 34px;
		border-left: var( --hairline ) solid var( --rule-on-rust );
	}

	.cg-stagecell:last-child {
		padding-right: 34px;
	}

	.cg-stagecell:nth-child( odd ) {
		padding-left: var( --pad-x );
		border-left: 0;
	}

	.cg-stagecell:nth-child( even ) {
		padding-right: var( --pad-x );
	}

	.cg-stagecell__num {
		padding-bottom: 34px;
	}

	.cg-stagecell__label {
		margin-inline: -34px;
		padding-inline: 34px;
	}

	.cg-stagecell:nth-child( odd ) .cg-stagecell__label {
		margin-left: calc( -1 * var( --pad-x ) );
		padding-left: var( --pad-x );
		margin-right: -34px;
		padding-right: 34px;
	}

	.cg-stagecell:nth-child( even ) .cg-stagecell__label {
		margin-right: calc( -1 * var( --pad-x ) );
		padding-right: var( --pad-x );
		margin-left: -34px;
		padding-left: 34px;
	}
}

@media ( max-width: 680px ) {
	.cg-stages {
		grid-template-columns: 1fr;
	}

	.cg-stagecell {
		padding-left: var( --pad-x );
		border-left: 0;
		border-top: var( --hairline ) solid var( --rule-on-rust );
	}

	.cg-stagecell:nth-child( odd ),
	.cg-stagecell:nth-child( even ) {
		padding-left: var( --pad-x );
		padding-right: var( --pad-x );
		border-left: 0;
	}

	.cg-stagecell:first-child {
		border-top: 0;
	}

	.cg-stagecell__label,
	.cg-stagecell:nth-child( odd ) .cg-stagecell__label,
	.cg-stagecell:nth-child( even ) .cg-stagecell__label {
		margin-inline: 0;
		padding-inline: 0;
	}
}

/* ------------------------------------------------------------------ *
 * `cells` variant (Tech & AI, #124) — ink full-bleed band, 3 image
 * cells, `--accent` top border. Reference: tech-ai.html `.statcells`/
 * `.sc`.
 * ------------------------------------------------------------------ */

.cg-stages--cells {
	/* Same outer-gutter compensation as the 4-column base, over 3 columns. */
	--stage-col: calc( ( 100% - 2 * var( --stage-edge ) ) / 3 );

	grid-template-columns:
		calc( var( --stage-col ) + var( --stage-edge ) )
		var( --stage-col )
		calc( var( --stage-col ) + var( --stage-edge ) );
	border-top: 3px solid var( --accent );
}

.cg-stagecell--cells {
	padding: 64px var( --box-pad ) 72px;
	border-left: var( --hairline ) solid rgba( 245, 245, 245, 0.22 );
	border-top: 0;
}

.cg-stagecell--cells:first-child {
	padding-left: var( --pad-x );
	border-left: 0;
}

.cg-stagecell--cells:last-child {
	padding-right: var( --pad-x );
}

/* #323: Tungsten Narrow Semibold, off Averta Std 800, per the CD's numerals
   note (#304 moved the other numeral surfaces and missed this one).
   Applied to the whole slot rather than only to values that parse as
   numbers: this cell holds "24/7" and "87+" alongside the word "Live" on
   /technology/, and the CD's call (2026-08-05) was that the row reads as
   one typeface — a Tungsten "87+" beside an Averta Extrabold "Live" looked
   like a defect. letter-spacing drops from -2.5px to 0: at 64–96px that
   tracking closed the condensed face's counters (same retuning #304 applied
   to worklist-slider). */
.cg-stagecell__big {
	font-family: var( --font-condensed );
	font-weight: 600;
	font-size: clamp( 64px, 5vw, 96px );
	line-height: 0.92;
	letter-spacing: 0;
	color: var( --cg-cream );
	transition: color var( --fade-out ) var( --fade-ease );
}

.cg-stagecell__eb {
	display: block;
	margin-top: 14px;
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var( --accent );
	transition: color var( --fade-out ) var( --fade-ease );
}

.cg-stagecell__img {
	margin-top: 56px;
	border-top: 3px solid var( --accent );
	aspect-ratio: 1.85;
	background-size: cover;
	background-position: center;
	background-color: var( --cg-ink );
}

.cg-stagecell__cat {
	display: block;
	margin-top: 52px;
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var( --accent );
	transition: color var( --fade-out ) var( --fade-ease );
}

.cg-stagecell__lbl {
	margin: 16px 0 0;
	font-family: var( --font-serif );
	font-weight: 400;
	font-size: clamp( 26px, 2vw, 30px );
	letter-spacing: -0.4px;
	color: var( --cg-cream );
	transition: color var( --fade-out ) var( --fade-ease );
}

.cg-stagecell__body {
	margin: 20px 0 0;
	font-family: var( --font-body );
	font-size: 16px;
	line-height: 1.6;
	color: var( --cg-grey );
	transition: color var( --fade-out ) var( --fade-ease );
}

/* #162: on hover this ink card's fill flips to `--box-hover-rust`, but the
   cream/grey/accent text tuned for a black bg loses legibility against
   rust (grey/accent nearly disappear; cream drops below body-text
   contrast). Sync every text colour to the ink text token in the same
   0.4s transition so the hover reads clearly, matching the same
   on-rust-uses-ink-text convention as `.cg-eyebrow--ink` (type.css). */
.cg-stagecell--cells:hover .cg-stagecell__big,
.cg-stagecell--cells:hover .cg-stagecell__eb,
.cg-stagecell--cells:hover .cg-stagecell__cat,
.cg-stagecell--cells:hover .cg-stagecell__lbl,
.cg-stagecell--cells:hover .cg-stagecell__body {
	color: var( --text );
}

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

	.cg-stagecell--cells {
		border-left: 0;
		border-top: var( --hairline ) solid rgba( 245, 245, 245, 0.22 );
		padding-left: var( --pad-x );
		padding-right: var( --pad-x );
	}

	.cg-stagecell--cells:first-child {
		padding-left: var( --pad-x );
		border-top: 0;
	}

	.cg-stagecell--cells:last-child {
		padding-right: var( --pad-x );
	}
}