/**
 * css/components/stats.css — Website 2.0 shared component library (#122)
 *
 * Stats grid — a genuinely FULL-BLEED bordered box (the 1px border reaches
 * the viewport edge on both sides; only the number content re-aligns to
 * the content frame). First cell aligns to --content-edge (shared with the
 * hero's content edge); last cell pads back out to --pad-x. Reflows 4-up
 * -> 2-up at <=680px. Reference: media.html `.stats`/`.stat`.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-stats-wrap {
	/* Flush strip: media.html `.stats` has 0 vertical padding — spacing comes
	   from the hero above and the next section's top pad below. */
	padding-block: 0;
	background: var( --surface );
}

.cg-stats {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	margin: 0;
	border: var( --hairline ) solid var( --rule-strong );
	background: var( --surface );
	color: var( --text );
}

.cg-stat {
	padding: 32px 34px 36px;
	border-left: var( --hairline ) solid var( --rule-strong );
	transition: background-color var( --fade-out ) var( --fade-ease );
}

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

.cg-stat:first-child {
	border-left: 0;
	padding-left: var( --content-edge );
}

.cg-stat:last-child {
	padding-right: calc( var( --pad-x ) + 4px );
}

.cg-stat__label {
	display: block;
	margin-top: 18px;
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --cg-muted );
}

/* --- campaign image-band (Services, #125) — joins into the SAME
   full-bleed bordered box as the stat grid above it (no double border).
   Reference: services.html `.imgband`/`.imgcell`/`.icap`. --------------- */

.cg-stats--joined {
	border-bottom: 0;
}

.cg-imgband {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	border: var( --hairline ) solid var( --rule-strong );
	border-top: 0;
}

/*
 * Aspect-ratio, not a fixed height.
 *
 * 855/476 is the aspect of the images blocks/cg/stats.php now requests
 * (img_855x476 / img_1710x952), and within 0.7% of the campaign photography's
 * own 1786x1001 — so `object-fit: cover` below has essentially nothing left to
 * trim and the whole photo is visible. The previous
 * `height: clamp(220px, 17.7vw, 340px)` was a different shape from the artwork
 * at every width, which is what cut the tops and bottoms off. Keep this in step
 * with the sizes that partial asks for; changing one alone brings the crop
 * back.
 *
 * The row reads the same: cells stay equal, edge to edge, and the height
 * lands within ~13px of the old value across the range (1440: 255 -> 268;
 * 390 single-column: 219, against the old 220 floor).
 */
.cg-imgcell {
	position: relative;
	aspect-ratio: 855 / 476;
	overflow: hidden;
	border-left: var( --hairline ) solid var( --rule-strong );
}

.cg-imgcell:first-child {
	border-left: 0;
}

.cg-imgcell img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.cg-imgcell:hover img {
	transform: scale( 1.04 );
}

.cg-imgcell__cap {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	height: 48px;
	padding: 0 20px;
	/* Photo-caption scrim — literal ink-rgb gradient (matches --cg-ink
	   #0E0E0C = rgb(14,14,12)), same convention as hero.css's video-scrim
	   raw rgba() (decorative image overlay, not a UI surface token). */
	background: linear-gradient( 180deg, rgba( 14, 14, 12, 0 ) 0%, rgba( 14, 14, 12, 0.72 ) 100% );
	font-family: var( --font-body );
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var( --cg-white );
}

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

	.cg-imgcell {
		border-left: 0;
		border-top: var( --hairline ) solid var( --rule-strong );
	}

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

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

	.cg-stat {
		border-left: var( --hairline ) solid var( --rule-strong );
		border-top: var( --hairline ) solid var( --rule-strong );
	}

	.cg-stat:nth-child( odd ) {
		border-left: 0;
		padding-left: 34px;
	}

	.cg-stat:first-child {
		padding-left: var( --content-edge );
	}

	.cg-stat:nth-child( 2 ),
	.cg-stat:last-child {
		padding-right: calc( var( --pad-x ) + 4px );
	}

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