/*
Structural layout primitives. No visual personality beyond spacing rules.

- Page-level layouts
- Grid systems
- Flexbox layouts
- Responsive patterns
- Container styles
- Sidebar positioning
- Header/footer layouts
- Full-width sections

Rule: layout controls flow and spacing, not color or decoration.
*/

.container {
	max-inline-size: var(--container);
	padding-inline: var(--gutter);
	margin-inline: auto;
}

.container--narrow {
	--container: 48rem;
}
.container--wide {
	--container: 88rem;
}

.stack > * + * {
	margin-block-start: var(--stack-space, var(--s-4));
}

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

.grid {
	display: grid;
	gap: var(--grid-gap, var(--s-4));
	grid-template-columns: repeat(var(--grid-cols, 12), minmax(0, 1fr));
}
.col-span {
	grid-column: span var(--col-span, 12);
}

.sidebar {
	display: grid;
	gap: var(--s-5);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
	.sidebar {
		grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
	}
}