/* ==========================================================
   Layout utilities — containers, grids, spacing
   ========================================================== */

.container {
	width: 100%;
	max-width: var(--w-container);
	margin-inline: auto;
	padding-inline: var(--sp-xl);
}

.container--wide {
	max-width: var(--w-wide);
}

.container--narrow {
	max-width: var(--w-narrow);
}

/* --- Site main wrapper --- */
.site-main {
	padding-top: var(--sp-3xl);
	padding-bottom: var(--sp-section);
}

/* --- Section spacing --- */
.section {
	padding-block: var(--sp-section);
}

/* --- Flex helpers --- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-center { align-items: center; justify-content: center; }
.flex-between { align-items: center; justify-content: space-between; }
.gap-sm { gap: var(--sp-sm); }
.gap-md { gap: var(--sp-md); }
.gap-lg { gap: var(--sp-lg); }
.gap-xl { gap: var(--sp-xl); }

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

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* --- Text alignment --- */
.text-center { text-align: center; }

/* --- Screen-reader only --- */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}