/**
 * LAYOUT PRIMITIVES
 *
 * Composable, content-agnostic tools. Each does one thing and they nest rather
 * than extend. Components handle looks; these handle arrangement.
 *
 * Every knob is a custom property, so a primitive can be tuned in place:
 *   <div class="cluster" style="--cluster-gap: var(--space-l)">
 */

@layer layout {

	/*
	 * Centred content column. --wrapper-max (1164px) and --gutter are measured
	 * from the design: the footer rule is exactly 1164px wide at x=138 in a
	 * 1440 frame, so 1164 IS the column and the 138px margin is just what's
	 * left over. The gutter therefore only does work below ~1230px.
	 */
	.wrapper {
		inline-size: min(100% - (var(--gutter) * 2), var(--wrapper-max));
		margin-inline: auto;
	}
	.wrapper[data-width="narrow"] { --wrapper-max: 45rem; }
	.wrapper[data-width="wide"]   { --wrapper-max: 90rem; }
	.wrapper[data-width="full"]   { --wrapper-max: 100%; }

	/*
	 * A section band. --section-space is the measured 128px desktop padding
	 * (64px on mobile), so sections are consistent without per-section values.
	 */
	.region {
		padding-block: var(--region-space, var(--section-space));
	}
	.region[data-space="tight"] { --region-space: var(--space-3xl); }
	.region[data-space="loose"] { --region-space: var(--space-5xl); }

	/*
	 * Vertical rhythm between siblings only — no stray margin at either end to
	 * collapse against a parent.
	 */
	.flow > * + * {
		margin-block-start: var(--flow-space, var(--space-s));
	}

	/*
	 * The section opener rhythm measured from the design:
	 * eyebrow → heading → body → actions.
	 */
	.section-head > * + *        { margin-block-start: var(--stack-heading); }
	.section-head > .eyebrow + * { margin-block-start: var(--stack-eyebrow); }
	.section-head > * + .actions { margin-block-start: var(--stack-action); }

	.stack {
		display: flex;
		flex-direction: column;
		gap: var(--stack-gap, var(--space-s));
	}

	.cluster {
		display: flex;
		flex-wrap: wrap;
		gap: var(--cluster-gap, var(--space-s));
		align-items: var(--cluster-align, center);
		justify-content: var(--cluster-justify, flex-start);
	}

	/* Responsive grid with no media queries — items decide when to wrap. */
	.grid-auto {
		display: grid;
		gap: var(--grid-gap, var(--space-l));
		grid-template-columns: repeat(
			auto-fit,
			minmax(min(var(--grid-min, 18rem), 100%), 1fr)
		);
	}

	/* Fixed column count once there's room, single column before that. */
	.grid-fixed {
		display: grid;
		gap: var(--grid-gap, var(--space-l));
		grid-template-columns: 1fr;
	}
	@container (min-width: 40rem) {
		.grid-fixed { grid-template-columns: repeat(var(--grid-cols, 3), 1fr); }
	}
	@supports not (container-type: inline-size) {
		@media (min-width: 40rem) {
			.grid-fixed { grid-template-columns: repeat(var(--grid-cols, 3), 1fr); }
		}
	}

	/* Two columns where the sidebar keeps its width until things get cramped. */
	.with-sidebar {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sidebar-gap, var(--space-2xl));
	}
	.with-sidebar > :first-child {
		flex-basis: var(--sidebar-width, 20rem);
		flex-grow: 1;
	}
	.with-sidebar > :last-child {
		flex-basis: 0;
		flex-grow: 999;
		min-inline-size: var(--sidebar-content-min, 50%);
	}

	/* Break a child out of the wrapper to full viewport width. */
	.full-bleed {
		inline-size: 100vw;
		margin-inline: calc(50% - 50vw);
	}

	.measure { max-inline-size: var(--measure); }

	.page-shell {
		display: flex;
		flex-direction: column;
		min-block-size: 100vh;
		min-block-size: 100svh;
	}
	.page-shell > main { flex-grow: 1; }
}