/*
 * am-section — the vertical band that wraps each stretch of the page.
 *
 * Owns the *treatment* of a section (colour pairing, vertical rhythm, the inner
 * measure), not its placement — Elementor still decides section order and where
 * widgets sit. Assign `am-section` to an Elementor Section/Container; add a
 * modifier for the surface; put content in an `am-section__inner` (or use
 * Elementor's boxed width — not both, or you double the gutter).
 *
 * The inverse modifier remaps the semantic colour tokens for its subtree, so any
 * am-card / am-cta / link inside a dark section adapts automatically — no dark
 * variant per component. Values still come from tokens.css; only the mapping flips.
 */

/* No own background — transparent by default (= page bg). Colour the band with a
   surface modifier (--surface/--alt/--soft/--inverse) OR an am-bg-* utility; both work
   now that the base doesn't paint its own background. */
.am-section {
	padding-block: var(--am-space-800);
	color: var(--am-color-text);
}

@media (min-width: 768px) {
	.am-section {
		padding-block: var(--am-space-900);
	}
}

/* Surface variants (parity with the am-bg-* utilities; --inverse is in
   am-backgrounds.css). Light → dark: (default page) · --surface · --alt · --soft. */
.am-section--surface {
	background-color: var(--am-color-surface);
}

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

.am-section--soft {
	background-color: var(--am-color-surface-soft);
}

/* Dark / orange-dominant band (e.g. footer, a focal CTA band). The dark treatment
   + token remap lives in am-backgrounds.css (shared with the .am-bg-inverse utility),
   so .am-section--inverse there gives a dark band; descendants adapt automatically. */

/* Padding modifiers — vertical rhythm from flush (none) to roomy (extra). */
.am-section--flush {
	padding-block: 0;
}

.am-section--tight {
	padding-block: var(--am-space-700);
}

.am-section--roomy {
	padding-block: var(--am-space-900);
}

@media (min-width: 768px) {
	.am-section--roomy {
		padding-block: var(--am-space-1000);
	}
}

/* Inner container — max measure, centred, with the page gutter. ------------- */
.am-section__inner {
	max-width: var(--am-container-max);
	margin-inline: auto;
	padding-inline: var(--am-container-pad);
}

/* Section intro — eyebrow + heading + lead, kept to a readable width. -------- */
.am-section__header {
	max-width: var(--am-content-narrow);
	margin-block-end: var(--am-space-700);
}

/* Centre the intro when the section wants it. */
.am-section__header--center {
	margin-inline: auto;
	text-align: center;
}

.am-section__eyebrow {
	display: block;
	margin-block-end: var(--am-space-300);
	color: var(--am-color-accent);
	font-size: var(--am-font-size-200);
	font-weight: var(--am-weight-semibold);
	letter-spacing: var(--am-tracking-wide);
	text-transform: uppercase;
}

.am-section__lead {
	margin-block-start: var(--am-space-400);
	max-width: var(--am-measure);
	color: var(--am-color-text-muted);
	font-size: var(--am-font-size-400);
	line-height: var(--am-leading-snug);
}

.am-section__header--center .am-section__lead {
	margin-inline: auto;
}