/* 1838 — layout primitives (bands, inner column, splits, grids).
   Section spacing is padding on the band, never margins (CLAUDE.md spacing rule). */

.l-band {
	padding: var(--band-y) var(--gutter);
}
.l-band--hero { padding-top: var(--hero-top); }
.l-band--lg { padding-top: var(--band-y-lg); padding-bottom: var(--band-y-lg); }
.l-band--plate {
	background: var(--c-plate);
	border-top: 1px solid var(--c-rule);
	border-bottom: 1px solid var(--c-rule);
}
.l-band--rule { border-top: 1px solid var(--c-rule); }
.l-band--plate-top { background: var(--c-plate); border-top: 1px solid var(--c-rule); }
.l-band--green { background: var(--c-band); color: var(--c-on-band); }

.l-inner {
	max-width: var(--inner);
	margin: 0 auto;
}
.l-stack { display: flex; flex-direction: column; }

/* Two-column split used across the preview: 712 / 468 proportions, wraps below ~800px. */
.l-split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px var(--col-gap);
}
.l-split--end { align-items: flex-end; }
.l-split--between { justify-content: space-between; }
.l-split__wide { flex: 712 1 440px; min-width: 0; }
.l-split__narrow { flex: 468 1 300px; min-width: 0; }

/* Card grids */
.l-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--l-grid-min, 280px)), 1fr));
	gap: var(--l-grid-gap, 40px);
}
.l-grid--portraits { --l-grid-min: 200px; --l-grid-gap: 48px 32px; }