/**
 * css/components/callout-stats.css — Website 2.0 shared component
 * library (#124)
 *
 * "Fresh work constantly in market" pattern — one bordered frame box,
 * 50/50 split: dashed callout list left, 2x2 stat grid right. Reference:
 * tech-ai.html `.velbox`/`.velleft`/`.callouts`/`.velgrid`/`.vcell`.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-callout-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: var( --hairline ) solid var( --cg-border );
	border-bottom: var( --hairline ) solid var( --cg-border );
}

.cg-callout-stats__left {
	padding: 44px 44px 44px 0;
}

.cg-callout-stats__left .cg-statement {
	margin-top: 38px;
	max-width: 11ch;
}

/*
 * Optional paragraph between the statement and the callout list (CD review,
 * 2026-08-07). Typeset by the shared `.cg-body` — the same face, size, colour
 * and paragraph rhythm as every other block of copy on this page — so only
 * the two things `.cg-body` cannot know are set here:
 *
 *   - its own measure. `.cg-statement` above is clamped to 11ch, which is
 *     right for a three-word display line and unreadable for a sentence. This
 *     is NOT inherited: the rule above targets `.cg-statement`, so the reset
 *     is a positive value here rather than an override.
 *   - the gap above. The list already owns the 44px below it, so this only
 *     supplies the space between the headline and the paragraph.
 */
.cg-callout-stats__body {
	margin-top: 26px;
	max-width: 48ch;
}

.cg-callout-stats__list {
	list-style: none;
	margin: 44px 0 0;
	padding: 0;
	border-top: var( --hairline ) solid var( --cg-border );
}

.cg-callout-stats__list li {
	position: relative;
	padding: 16px 0 16px 28px;
	border-bottom: var( --hairline ) solid var( --cg-border );
	font-family: var( --font-body );
	font-weight: 500;
	font-size: 14px;
	line-height: 1.5;
	color: var( --cg-ink );
}

.cg-callout-stats__list li::before {
	content: "\2014";
	position: absolute;
	left: 0;
	top: 16px;
	font-family: var( --font-body );
	font-size: 13px;
	color: var( --accent );
}

.cg-callout-stats__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-left: var( --hairline ) solid var( --cg-border );
	border-right: var( --hairline ) solid var( --cg-border );
}

.cg-callout-stats__cell {
	min-height: clamp( 220px, 16vw, 301px );
	padding: 44px;
	border-left: var( --hairline ) solid var( --cg-border );
	border-top: var( --hairline ) solid var( --cg-border );
	transition: background-color var( --fade-out ) var( --fade-ease );
}

.cg-callout-stats__cell:nth-child( -n + 2 ) {
	border-top: 0;
}

.cg-callout-stats__cell:nth-child( odd ) {
	border-left: 0;
}

.cg-callout-stats__cell:hover {
	background-color: var( --box-hover-cream );
}

/* #323: Tungsten Narrow Semibold, off Averta Std 400 (--font-body), per the
   CD's numerals note. Worth recording that this one was NOT Averta *Bold*
   like the other numeral surfaces #304 moved — it was Averta Regular, a
   lighter treatment — so "change Averta Bold numerals" didn't strictly
   reach it. Included on the CD's explicit call (2026-08-05) that the whole
   big-value slot reads as one typeface: this cell holds "6×" and "10×"
   beside the word "Days" on /technology/, and leaving the row half-condensed
   looked like a defect. letter-spacing drops from -2.88px to 0 — that
   tracking was tuned for Averta's wide digits and closes Tungsten's
   counters at this size. */
.cg-callout-stats__num {
	display: block;
	font-family: var( --font-condensed );
	font-weight: 600;
	font-size: clamp( 52px, 4.8vw, 72px );
	line-height: 1;
	letter-spacing: 0;
	color: var( --accent );
}

.cg-callout-stats__lbl {
	display: block;
	margin-top: 24px;
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var( --accent );
}

/* #402 — the fifth reviewer comment. These are the four sub-captions in
   the stat cells under "Creative Velocity" on /technology/, and they were
   --cg-muted (#6B6860) where the cream band's body copy is --cg-ink-70
   (#3A3A36). Same change, same reason, as the two accordion components in
   PR #420: match the body-copy colour used across the cream modules.

   Note the comment does NOT refer to a drop-down — /technology/ has no
   accordion at all. An earlier reading of this issue chased
   `.cg-actlist__item`, which is a different component on an INK band where
   #3A3A36 measures 1.69:1. This band is cream (rgb(245,245,245)).

   (1.69:1, not the ~1.1:1 first written here — the conclusion is unchanged,
   both are far under 4.5:1, but this comment is the record of why that
   component was left alone and the number should be the measured one.) */
.cg-callout-stats__sub {
	display: block;
	margin-top: 9px;
	font-family: var( --font-body );
	font-size: 13px;
	line-height: 1.5;
	color: var( --cg-ink-70 );
}

@media ( max-width: 1024px ) {
	.cg-callout-stats,
	.cg-callout-stats__grid {
		grid-template-columns: 1fr;
	}

	.cg-callout-stats__left {
		padding: 44px 0;
		border-bottom: var( --hairline ) solid var( --cg-border );
	}

	.cg-callout-stats__cell:nth-child( 2 ) {
		border-top: 0;
	}

	.cg-callout-stats__cell:nth-child( odd ) {
		border-left: 0;
	}

	.cg-callout-stats__cell:not( :first-child ) {
		border-top: var( --hairline ) solid var( --cg-border );
	}
}