/**
 * css/components/split-list.css — Website 2.0 shared component library
 * (#125)
 *
 * Statement + hairline list — same 600px/105px two-column proportions as
 * split.css, but the LEFT column stacks eyebrow+statement+body (no
 * right-column body offset) and the RIGHT column is a vertical list of
 * hairline-divided items (no numbering, first item flush). Reference:
 * services.html `.engine`/`.enlist`/`.en` ("We Engineer Predictable
 * Velocity").
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

.cg-split-list {
	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-list__body {
	max-width: 500px;
	margin-top: 30px;
}

.cg-enlist {
	display: flex;
	flex-direction: column;
}

.cg-enlist__item {
	padding: 32px 0;
	border-top: var( --hairline ) solid rgba( 245, 245, 245, 0.28 );
}

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

.cg-enlist__title {
	margin: 0;
	font-family: var( --font-sans );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --cg-cream );
}

.cg-enlist__text {
	margin: 14px 0 0;
	font-family: var( --font-body );
	font-size: 16px;
	line-height: 1.6;
	color: rgba( 245, 245, 245, 0.82 );
}

/* cream/ink band variants — defensive, no current caller uses them (the
   only reference instance is on a rust band), same convention as every
   other cg component's variant modifiers. */
.cg-enlist--cream .cg-enlist__item {
	border-top-color: var( --rule );
}

.cg-enlist--cream .cg-enlist__title {
	color: var( --cg-ink );
}

.cg-enlist--cream .cg-enlist__text {
	color: var( --cg-ink-70 );
}

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

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