/* ==========================================================================
   Layouts — Container, Grid, Section, Responsive Utilities
   ========================================================================== */

/* ── Container ─────────────────────────────────────────────────────────── */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
}

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

.container-wide {
	max-width: 1440px;
}

/* ── Sections ──────────────────────────────────────────────────────────── */

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

.section-alt {
	background-color: var(--color-background-alt);
}

.section-dark {
	background-color: var(--color-dark);
	color: #fff;
}

.section-primary {
	background-color: var(--color-primary);
	color: #fff;
}

.section-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto var(--space-2xl);
}

.section-title {
	font-family: var(--font-heading);
	font-size: var(--text-h1);
	line-height: var(--lh-h1);
	font-weight: 700;
	margin: 0 0 var(--space-md);
}

.section-subtitle {
	font-size: var(--text-body);
	line-height: var(--lh-body);
	color: var(--color-text-light);
	margin: 0;
}

.section-dark .section-subtitle {
	color: rgba(255, 255, 255, 0.6);
}

.section-primary .section-subtitle {
	color: rgba(255, 255, 255, 0.8);
}

.section-primary .section-title {
	color: #fff;
}

.section-dark .section-title {
	color: #fff;
}

@media (min-width: 768px) {
	.section {
		padding: var(--space-4xl) 0;
	}
}

/* ── Grid System ───────────────────────────────────────────────────────── */

.grid {
	display: grid;
	gap: var(--space-lg);
}

.grid > * {
	min-width: 0;
}

.grid-2 {
	grid-template-columns: 1fr;
}

.grid-3 {
	grid-template-columns: 1fr;
}

.grid-4 {
	grid-template-columns: 1fr;
}

/* Category grid (1 featured + smaller cards) */
.grid-categories {
	grid-template-columns: 1fr;
}

/* Two-column layout for value proposition */
.grid-split {
	grid-template-columns: 1fr;
	gap: var(--space-2xl);
	align-items: center;
}

/* Stats row */
.grid-stats {
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	text-align: center;
}

/* Testimonials grid */
.grid-testimonials {
	grid-template-columns: 1fr;
}

/* State cards */
.grid-states {
	grid-template-columns: repeat(2, 1fr);
}

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

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

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

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

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

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

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

@media (min-width: 768px) {
	.grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.grid-split {
		grid-template-columns: 1fr 1fr;
	}

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

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

	.grid-categories {
		grid-template-columns: 1.2fr 1fr 1fr;
	}

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

/* ── Flex Utilities ────────────────────────────────────────────────────── */

.flex {
	display: flex;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-wrap {
	flex-wrap: wrap;
}

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

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

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

/* ── Text Alignment ────────────────────────────────────────────────────── */

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

.text-left {
	text-align: left;
}

/* ── Visibility ────────────────────────────────────────────────────────── */

.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;
}

/* ── Site Layout ───────────────────────────────────────────────────────── */

.site-main {
	min-height: 60vh;
}