/*
 * layout.css — Container, page body offset, section spacing utilities
 *
 * Content width: 1240px (matches theme.json contentSize).
 * References tokens from tokens.css.
 */

/* ─── Body top offset for fixed header ─────────────────── */

/* The site header is fixed (position: fixed). All page content
   must be offset by the header height to prevent overlap.
   Applied globally on the body. */

body {
	padding-top: var(--header-height);
}

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

/* Used in every section and template. Constrains content width
   and adds consistent horizontal padding. */

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

/* ─── Section spacing ──────────────────────────────────── */

/* Default vertical section rhythm.
   Applied to content sections via these utility classes.
   Component CSS overrides where section-specific spacing differs. */

.section {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-xl);
}

.section--sm {
	padding-top: var(--space-lg);
	padding-bottom: var(--space-lg);
}

/* ─── Section background variants ──────────────────────── */

.bg-white   { background-color: var(--white); }
.bg-cream   { background-color: var(--cream); }
.bg-green   { background-color: var(--green); }
.bg-green-dark { background-color: var(--green-dark); }

/* ─── Grid utilities ───────────────────────────────────── */

/* Two-column equal grid */
.grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md);
}

/* Three-column equal grid */
.grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

/* ─── Responsive container adjustments ─────────────────── */

@media ( max-width: 1024px ) {

	.container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

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

@media ( max-width: 640px ) {

	.container {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

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