/* =========================================================================
   Layout primitives: container, section rhythm, grid utilities
   ========================================================================= */

.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: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.section--alt { background: var(--color-surface-alt); }
.section--wash { background: var(--c-wash); }
.section--teal {
	background: var(--c-wash-teal);
	color: #eaf6f9;
}
.section--teal h1, .section--teal h2, .section--teal h3 { color: #fff; }

.stack > * + * { margin-top: var(--sp-5); }
.stack-lg > * + * { margin-top: var(--sp-7); }

.grid { display: grid; gap: var(--sp-6); }
.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(260px, 1fr)); }

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: center;
}

.section-head {
	max-width: 720px;
	margin-bottom: clamp(2rem, 1rem + 3vw, 3.5rem);
}
.section-head--center {
	margin-inline: auto;
	text-align: center;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-eyebrow);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: var(--sp-4);
}
.eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--color-accent);
	border-radius: 2px;
}
.section-head--center .eyebrow { justify-content: center; }

.lead {
	font-size: var(--fs-lead);
	color: var(--color-text-muted);
	font-weight: var(--fw-regular);
}

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