/**
 * css/components/split-cards.css — Website 2.0 shared component library (#122/#123)
 *
 * "Built for CPG" pattern: two-subcolumn FULL-BLEED bordered box under
 * the standard split header (border + divider reach the screen edge,
 * content stays frame-aligned — bordered-box law's full-bleed clause).
 * Reference: media.html `.subcols`/`.subcol`.
 *
 * Box-hover: subcolumns fade to the band's lighter shade on rollover,
 * per docs/Common Good website 2.0/CLAUDE.md's global box-hover list
 * ("Built-for-CPG sub-columns").
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-subcols {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 0;
	margin-top: 118px;
	margin-inline: calc( -1 * var( --pad-x ) );
	border: var( --hairline ) solid var( --rule );
}

.cg-subcol {
	padding: var( --box-pad );
	border-left: var( --hairline ) solid var( --rule );
	transition: background-color var( --fade-out ) var( --fade-ease );
}

.cg-subcol:first-child {
	border-left: 0;
	padding-left: calc( var( --pad-x ) + var( --box-pad ) );
}

.cg-subcol:last-child {
	padding-right: calc( var( --pad-x ) + var( --box-pad ) );
}

.cg-subcol__eyebrow {
	margin: 0 0 28px;
}

.cg-subcol__title {
	font-size: clamp( 28px, 2.6vw, 40px );
	line-height: 1.06;
	letter-spacing: -1.2px;
}

.cg-subcol__body {
	margin-top: 30px;
}

/* cream (default) — hover fades to the cream box-hover shade. */
.cg-subcols--cream .cg-subcol:hover {
	background-color: var( --box-hover-cream );
}

/* ink — full-bleed border reads too faint at --rule on a dark band. */
.cg-subcols--ink {
	border-color: var( --rule-on-dark );
}

.cg-subcols--ink .cg-subcol {
	border-color: var( --rule-on-dark );
}

.cg-subcols--ink .cg-subcol:hover {
	background-color: var( --box-hover-ink );
}

/* rust. */
.cg-subcols--rust {
	border-color: var( --cg-cream );
}

.cg-subcols--rust .cg-subcol {
	border-color: var( --cg-cream );
}

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

@media ( max-width: 1024px ) {
	.cg-subcols {
		grid-template-columns: 1fr;
		gap: 0;
		margin-top: 72px;
	}

	.cg-subcol {
		border-left: 0;
		border-top: var( --hairline ) solid var( --rule );
		padding-left: var( --box-pad );
		padding-right: var( --box-pad );
	}

	.cg-subcols--ink .cg-subcol {
		border-top-color: var( --rule-on-dark );
	}

	.cg-subcols--rust .cg-subcol {
		border-top-color: var( --cg-cream );
	}

	.cg-subcol:first-child {
		border-top: 0;
		padding-left: var( --box-pad );
	}

	.cg-subcol:last-child {
		padding-right: var( --box-pad );
	}
}

/* #485 — same defect as `.cg-statement` (css/components/type.css), found
   by measurement rather than by the audit list in the issue, which came
   from a grep that missed this file. `.cg-subcol__title` clamps to 28px
   at 390, where the flat -1.2px is -4.29% of the em against -3.21% at
   1440. Measured on /media/ at 390: 21 of 48 and 19 of 47 adjacent
   character pairs render as touching ink, 2 and 4 at zero — the residue
   is pairs Noe Text joins at any tracking.

   Both elements are `<h3 class="cg-statement cg-subcol__title">`, so
   they are already inside the `.cg-statement` population above; this
   rule is still needed, because `.cg-subcol__title` wins on source order
   (split-cards is enqueued after type in inc/scripts.php) and would
   otherwise put the -1.2px straight back.

   Renders on /media/ only (56-page sitemap sweep, 2026-09-03). */
@media ( max-width: 680px ) {
	.cg-subcol__title {
		letter-spacing: 0;
	}
}