/**
 * css/components/split.css — Website 2.0 shared component library (#122)
 *
 * Two-column section head: eyebrow + statement (left, up to 600px) /
 * body copy (right, remaining space), 105px max gap. Stacks to one
 * column at <=1024px. Reference: media.html `.cols` (`minmax(0,600px)
 * minmax(0,1fr)`), NOT tokens/components.css's `.cg-split` (1.05fr/0.95fr
 * — that value diverged from the shipped reference pages; the pages win
 * per docs/design/03-website-2.0-build-plan.md DECISION 1).
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-split {
	display: grid;
	grid-template-columns: minmax( 0, var( --split-left ) ) minmax( 0, 1fr );
	gap: clamp( 48px, 7vw, var( --split-gap ) );
	align-items: start;
}

.cg-split--bottom {
	align-items: end;
}

/* Right-hand body column starts level with the statement (reference:
   .cols .body{padding-top:60px} — the visual gap between eyebrow+
   statement and the aligned body baseline). */
.cg-split__body {
	padding-top: 60px;
}

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

	.cg-split__body {
		padding-top: 0;
	}
}