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

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 780px; }

.section {
	padding-block: var(--section-y);
	background: var(--bg);
	color: var(--text);
	position: relative;
}
.section--alt { background: var(--bg-alt); }
.section--flush-top { padding-block-start: 0; }
.section--flush-bottom { padding-block-end: 0; }
.section--tight { padding-block: clamp(36px, 5vw, 64px); }

/* Always-dark sections (hero, CTA bands, photo sections) — fixed regardless of theme. */
.section--ink {
	background: var(--ink-bg);
	color: var(--ink-text);
	--text: var(--ink-text);
	--text-muted: var(--ink-text-muted);
	--text-faint: var(--ink-text-faint);
	--surface: var(--ink-surface);
	--surface-2: var(--ink-surface-2);
	--border: var(--ink-border);
	--card-bg: var(--ink-surface);
	--card-border: var(--ink-border);
}

/* Grid helpers */
.grid { display: grid; gap: var(--grid-gap, clamp(16px, 2vw, 28px)); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.cluster { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.stack > * + * { margin-block-start: var(--stack-space, 1rem); }

.flow > * + * { margin-block-start: 1em; }
.flow > h2 + *, .flow > h3 + * { margin-block-start: 0.5em; }

@media (max-width: 1024px) {
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
	.grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Section header (eyebrow + title + link) */
.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-block-end: clamp(28px, 4vw, 48px);
	flex-wrap: wrap;
}
.section-head__title { margin: 0; text-transform: uppercase; letter-spacing: -0.01em; }
.section-head--center {
	flex-direction: column;
	align-items: center;
	text-align: center;
}