/*
 * GPIPL layout (Phase 3): container, sections, dark sections, primitives, grid.
 *
 * Grid: 12 columns at every size. Children span all 12 by default (mobile-first),
 * then opt into narrower spans per breakpoint:
 *   <div class="grid"><div class="col-md-6 col-lg-4">…</div></div>
 * Breakpoints: md 48em (768) · lg 64em (1024) · xl 80em (1280).
 * For repeated cards prefer .grid--auto, which needs no breakpoint classes.
 */
@layer layout {
	/* ------------------------------------------------------------ Container */
	.container {
		width: min(100% - 2 * var(--gutter), var(--container));
		margin-inline: auto;
	}
	.container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); }
	.container--text { width: min(100% - 2 * var(--gutter), var(--container-text)); }

	/* ------------------------------------------------------------ Sections */
	.section { padding-block: var(--section-pad); }
	.section--tight { padding-block: var(--section-pad-tight); }
	.section--flush-top { padding-block-start: 0; }
	.section--surface { background-color: var(--color-surface); }
	/* .section--dark: tokens are re-pointed in tokens.css; nothing else is needed here. */
	.section + .section:not(.section--surface, .section--dark) { border-top: var(--border); }

	.section__header {
		display: grid;
		gap: var(--space-s);
		max-width: var(--measure);
		margin-block-end: var(--space-xl);
	}
	.section__header > p { color: var(--color-text-muted); font-size: var(--step-1); line-height: var(--lh-snug); }

	/* ------------------------------------------------------------ Primitives */
	.flow > * + * { margin-block-start: var(--flow-space, 1em); }
	.prose { max-width: var(--measure); }
	.prose > * + * { margin-block-start: 1em; }
	.prose > :is(h2, h3, h4) { margin-block-start: 1.6em; }
	.prose > :is(h2, h3, h4) + * { margin-block-start: 0.6em; }
	.prose h2 { font-size: var(--step-3); }

	.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-s)); }
	/* Inside a stack the gap already spaces children; drop the header's own bottom margin. */
	.stack > .section__header { margin-block-end: 0; }
	.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-s)); }
	.split { display: grid; gap: var(--grid-gap); }
	@media (min-width: 64em) {
		.split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
	}

	/* ------------------------------------------------------------ Grid */
	.grid {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--grid-gap);
	}
	/* Start and span are set separately so .start-* and .col-* combine: <div class="col-lg-5 start-lg-8">. */
	.grid > * { grid-column: auto / span 12; min-width: 0; }
	.grid--dense { gap: var(--space-s); }
	.grid--align-start { align-items: start; }

	/* Auto-fill for card lists: as many columns of >= --grid-min as fit. */
	.grid--auto {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min)), 1fr));
	}
	.grid--auto > * { grid-column: auto; }

		.col-1 { grid-column-end: span 1; }
		.col-2 { grid-column-end: span 2; }
		.col-3 { grid-column-end: span 3; }
		.col-4 { grid-column-end: span 4; }
		.col-5 { grid-column-end: span 5; }
		.col-6 { grid-column-end: span 6; }
		.col-7 { grid-column-end: span 7; }
		.col-8 { grid-column-end: span 8; }
		.col-9 { grid-column-end: span 9; }
		.col-10 { grid-column-end: span 10; }
		.col-11 { grid-column-end: span 11; }
		.col-12 { grid-column-end: span 12; }
		.start-1 { grid-column-start: 1; }
		.start-2 { grid-column-start: 2; }
		.start-3 { grid-column-start: 3; }
		.start-4 { grid-column-start: 4; }
		.start-5 { grid-column-start: 5; }
		.start-6 { grid-column-start: 6; }
		.start-7 { grid-column-start: 7; }
		.start-8 { grid-column-start: 8; }
		.start-9 { grid-column-start: 9; }
		.start-10 { grid-column-start: 10; }
		.start-11 { grid-column-start: 11; }
		.start-12 { grid-column-start: 12; }

	/* md: 768px+ */
	@media (min-width: 48em) {
		.col-md-1 { grid-column-end: span 1; }
		.col-md-2 { grid-column-end: span 2; }
		.col-md-3 { grid-column-end: span 3; }
		.col-md-4 { grid-column-end: span 4; }
		.col-md-5 { grid-column-end: span 5; }
		.col-md-6 { grid-column-end: span 6; }
		.col-md-7 { grid-column-end: span 7; }
		.col-md-8 { grid-column-end: span 8; }
		.col-md-9 { grid-column-end: span 9; }
		.col-md-10 { grid-column-end: span 10; }
		.col-md-11 { grid-column-end: span 11; }
		.col-md-12 { grid-column-end: span 12; }
		.start-md-1 { grid-column-start: 1; }
		.start-md-2 { grid-column-start: 2; }
		.start-md-3 { grid-column-start: 3; }
		.start-md-4 { grid-column-start: 4; }
		.start-md-5 { grid-column-start: 5; }
		.start-md-6 { grid-column-start: 6; }
		.start-md-7 { grid-column-start: 7; }
		.start-md-8 { grid-column-start: 8; }
		.start-md-9 { grid-column-start: 9; }
		.start-md-10 { grid-column-start: 10; }
		.start-md-11 { grid-column-start: 11; }
		.start-md-12 { grid-column-start: 12; }
	}

	/* lg: 1024px+ */
	@media (min-width: 64em) {
		.col-lg-1 { grid-column-end: span 1; }
		.col-lg-2 { grid-column-end: span 2; }
		.col-lg-3 { grid-column-end: span 3; }
		.col-lg-4 { grid-column-end: span 4; }
		.col-lg-5 { grid-column-end: span 5; }
		.col-lg-6 { grid-column-end: span 6; }
		.col-lg-7 { grid-column-end: span 7; }
		.col-lg-8 { grid-column-end: span 8; }
		.col-lg-9 { grid-column-end: span 9; }
		.col-lg-10 { grid-column-end: span 10; }
		.col-lg-11 { grid-column-end: span 11; }
		.col-lg-12 { grid-column-end: span 12; }
		.start-lg-1 { grid-column-start: 1; }
		.start-lg-2 { grid-column-start: 2; }
		.start-lg-3 { grid-column-start: 3; }
		.start-lg-4 { grid-column-start: 4; }
		.start-lg-5 { grid-column-start: 5; }
		.start-lg-6 { grid-column-start: 6; }
		.start-lg-7 { grid-column-start: 7; }
		.start-lg-8 { grid-column-start: 8; }
		.start-lg-9 { grid-column-start: 9; }
		.start-lg-10 { grid-column-start: 10; }
		.start-lg-11 { grid-column-start: 11; }
		.start-lg-12 { grid-column-start: 12; }
	}

	/* xl: 1280px+ */
	@media (min-width: 80em) {
		.col-xl-1 { grid-column-end: span 1; }
		.col-xl-2 { grid-column-end: span 2; }
		.col-xl-3 { grid-column-end: span 3; }
		.col-xl-4 { grid-column-end: span 4; }
		.col-xl-5 { grid-column-end: span 5; }
		.col-xl-6 { grid-column-end: span 6; }
		.col-xl-7 { grid-column-end: span 7; }
		.col-xl-8 { grid-column-end: span 8; }
		.col-xl-9 { grid-column-end: span 9; }
		.col-xl-10 { grid-column-end: span 10; }
		.col-xl-11 { grid-column-end: span 11; }
		.col-xl-12 { grid-column-end: span 12; }
		.start-xl-1 { grid-column-start: 1; }
		.start-xl-2 { grid-column-start: 2; }
		.start-xl-3 { grid-column-start: 3; }
		.start-xl-4 { grid-column-start: 4; }
		.start-xl-5 { grid-column-start: 5; }
		.start-xl-6 { grid-column-start: 6; }
		.start-xl-7 { grid-column-start: 7; }
		.start-xl-8 { grid-column-start: 8; }
		.start-xl-9 { grid-column-start: 9; }
		.start-xl-10 { grid-column-start: 10; }
		.start-xl-11 { grid-column-start: 11; }
		.start-xl-12 { grid-column-start: 12; }
	}

	/* Site header and footer: components/site-header.css, components/site-footer.css (Phase 4). */

}