/* ==========================================================================
   layout.css — container, section spacing, grid helpers.
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--max-w);
	margin: 0 auto;
	padding: 0 var(--s-24);
}

.container--narrow {
	max-width: 760px;
}

.container--extra-narrow {
	max-width: 640px;
}

main {
	display: block;
	min-height: 60vh;
	padding-top: var(--header-h);
}

.section {
	padding: var(--s-64) 0;
}

.section--sm {
	padding: var(--s-48) 0;
}

.section--lg {
	padding: var(--s-96) 0 var(--s-80);
}

.section--special {
	background: var(--c-special);
}

.section--surface {
	background: var(--c-surface);
}

.section__header {
	margin-bottom: var(--s-40);
}

.section__header--center {
	text-align: center;
}

.section__lead {
	font-size: 1.0625rem;
	color: var(--c-text-dim);
	max-width: 640px;
	margin: 0 auto var(--s-24);
}

/* --- Grid helpers --- */
.grid {
	display: grid;
	gap: var(--s-32);
}

.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--5 {
	grid-template-columns: repeat(5, 1fr);
}

.grid--two-col-60-40 {
	grid-template-columns: 60% 40%;
	gap: var(--s-64);
}

.grid--two-col-50 {
	grid-template-columns: 1fr 1fr;
	gap: var(--s-48);
}

.stack > * + * {
	margin-top: var(--s-16);
}

.stack-lg > * + * {
	margin-top: var(--s-32);
}

/* --- Breadcrumbs --- */
.breadcrumbs {
	font-family: var(--f-body);
	font-size: 0.8125rem;
	color: var(--c-text-dim);
	padding: var(--s-24) 0 var(--s-16);
	border-bottom: 1px solid var(--c-border);
	margin-bottom: var(--s-32);
}

.breadcrumbs a {
	color: var(--c-text-dim);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--c-accent);
}

.breadcrumbs__sep {
	margin: 0 var(--s-8);
	color: var(--c-border);
}

.breadcrumbs__current {
	color: var(--c-text);
}

/* --- Spacing utilities --- */
.mt-0  { margin-top: 0 !important; }
.mt-16 { margin-top: var(--s-16); }
.mt-24 { margin-top: var(--s-24); }
.mt-32 { margin-top: var(--s-32); }
.mt-48 { margin-top: var(--s-48); }
.mt-64 { margin-top: var(--s-64); }

.mb-0  { margin-bottom: 0 !important; }
.mb-16 { margin-bottom: var(--s-16); }
.mb-24 { margin-bottom: var(--s-24); }
.mb-32 { margin-bottom: var(--s-32); }
.mb-48 { margin-bottom: var(--s-48); }

.text-center { text-align: center; }
.text-right  { text-align: right; }