/* Responsive system: flow tokens, reset, layout primitives, page switches.
 * SSOT: owner (breakpoint scale named in tokens.css)
 * 1. Mobile first: min-width (`width >= …`) only, never max-width.
 * 2. Fluid before breakpoint: type/space clamp in theme.json; no breakpoint for size.
 * 3. Intrinsic before breakpoint: .l-grid, .l-cluster, .l-switch reflow on their own.
 * 4. @container before viewport: .l-container for a component's own width.
 * 5. Viewport query only for the page switch (lg); components read --flow tokens.
 * 6. Viewport queries only at the bottom of this file and the header in theme.css.
 * Never branch CSS on [data-bp]; that is for JS.
 */

/* ------------------------------------------------------------ flow tokens */

/* Page weight: centred stack (here) or split desktop (lg block). */
:root {
	--flow:        center;  /* text-align, justify-items, justify-content */
	--flow-spread: center;  /* a head's title and note: centred, or pushed apart */
	--flow-lay:    row;     /* grid-auto-flow of a head: stacked, or side by side */
	--flow-fill:   1;       /* buttons in a row share its width (phones only) */
}

/* ----------------------------------------------------------------- reset */

/* Padding inside declared widths, so a 100% padded child cannot overflow. */
*, *::before, *::after { box-sizing: border-box; }

/* A class setting `display` would otherwise beat [hidden]. */
[hidden] { display: none !important; }

/* Required: width/height attributes otherwise beat a component's aspect-ratio. */
img, picture, svg, video { max-inline-size: 100%; }
img { block-size: auto; }

/* ------------------------------------------------------------- primitives */

/* Space between children only, so it composes. Override with --stack-gap. */
.l-stack > * { margin-block: 0; }
.l-stack > * + * { margin-block-start: var(--stack-gap, var(--s-2)); }

/* Wrapping row; replaces a stack-then-row breakpoint. */
.l-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cluster-gap, var(--s-2));
}

/* Columns from available width; --grid-min sets the minimum column. */
.l-grid {
	display: grid;
	gap: var(--grid-gap, var(--s-3));
	grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 18rem), 100%), 1fr));
}

/* One centred column below lg, --split-cols tracks from lg.
   A narrower child (portrait) centres via justify-self. */
.l-split {
	display: grid;
	gap: var(--split-gap, var(--s-6));
	align-items: center;
	text-align: var(--flow);
}

/* Children align with the page weight, each keeping its own width. */
.l-flow {
	display: grid;
	justify-items: var(--flow);
	align-content: start;
	text-align: var(--flow);
}

/* All in one row or all stacked, never 2 + 1; flips at the container's --switch-at. */
.l-switch {
	display: flex;
	flex-wrap: wrap;
	gap: var(--switch-gap, var(--s-3));
}
.l-switch > * {
	flex-grow: 1;
	flex-basis: calc((var(--switch-at, 40rem) - 100%) * 999);
}

/* Button row: centred with the page weight; on a phone buttons share the row. */
.l-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	justify-content: var(--flow);
}
.l-actions > * { flex-grow: var(--flow-fill); }

/* Section heading + note: stacked centred, split on desktop. */
.l-head {
	display: grid;
	grid-auto-flow: var(--flow-lay);
	justify-content: var(--flow-spread);
	align-items: baseline;
	gap: var(--s-1) var(--s-3);
	text-align: var(--flow);
	margin-block-end: var(--s-5);
}
.l-head > * { margin: 0; }

/* Centred measure. --wrap for full width, --wrap-text for reading width. */
.l-center {
	inline-size: min(100% - 2 * var(--gutter), var(--center-max, var(--wrap)));
	margin-inline: auto;
}

/* Sideways scroller for tables, code, wide embeds; the body never scrolls sideways. */
.l-scroll { overflow-x: auto; overscroll-behavior-x: contain; }

/* Opt a component into container queries. */
.l-container { container-type: inline-size; }

/* ------------------------------------------------- page-level switches */

/* md: tighter gutter, buttons keep their own width. */
@media (width >= 48em) {
	:root {
		--gutter: var(--s-3);
		--flow-fill: 0;
	}
}

/* lg — the desktop page. */
@media (width >= 64em) {
	:root {
		--flow:        start;
		--flow-spread: space-between;
		--flow-lay:    column;
	}
	.l-split { grid-template-columns: var(--split-cols, 1fr 1fr); }
}