/*
 * layout.css
 * Containers, section rhythm and reusable grids.
 */

.container {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--page-padding);
}

.container--narrow {
	max-width: calc(var(--content-width-narrow) + (var(--page-padding) * 2));
}

/* Full width, no max — for edge-to-edge media. */
.container--bleed {
	max-width: none;
	padding-inline: 0;
}

.section {
	padding-block: var(--space-xl);
}

.section--tall {
	padding-block: var(--space-2xl);
}

.section--flush-top {
	padding-block-start: 0;
}

.section--flush-bottom {
	padding-block-end: 0;
}

/* Offsets content that would otherwise sit under the fixed header. */
.site-main {
	padding-block-start: var(--header-height);
}

/* Stack: vertical rhythm without collapsing-margin surprises. */
.stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.stack--sm {
	gap: var(--space-xs);
}

.stack--lg {
	gap: var(--space-md);
}

/*
 * Auto-fitting grid used by the portfolio and any card-like listing.
 * --grid-min controls the breakpoint behaviour without media queries.
 */
.grid {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 22rem), 100%), 1fr));
}

.grid--2 {
	--grid-min: 30rem;
}

.grid--tight {
	gap: var(--space-sm);
}

/* Editorial two-column split: label left, content right. */
.split {
	display: grid;
	gap: var(--space-md);
}

@media (min-width: 56rem) {
	.split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		gap: var(--space-lg);
	}
}

.page-header {
	margin-block-end: var(--space-md);
}