/* =====================================================================
   LX4Tours · Layout
   Sections, containers, vertical rhythm. The cream → muted → cream → dark
   alternation lives here, but it's opt-in via class — Group blocks can
   still set their own background.
   ===================================================================== */

.section {
	padding-block: 4rem;
}
@media (min-width: 720px)  { .section { padding-block: 5.5rem; } }
@media (min-width: 1024px) { .section { padding-block: 6.875rem; } }

/* Mission intro: centered, narrow column. text-wrap: balance shapes
   short/headline lines into even widths; pretty cleans up body orphans. */
.section--mission h2,
.section--mission p:not(.lx-eyebrow) {
	text-wrap: balance;
}

/* Page intro band — clean text-only header used on archive + leaf pages
   instead of a full-bleed image hero. Tight on top because it sits
   directly below the sticky header. */
.section--intro {
	padding-block: 4rem 3rem;
}
@media (min-width: 1024px) {
	.section--intro { padding-block: 5.5rem 4rem; }
}
.section--intro h1,
.section--intro p:not(.lx-eyebrow) {
	text-wrap: balance;
}

/* Hero sits flush with the header, so kill the top section padding and
   keep generous bottom space for the feature pills. */
.section--hero {
	padding-block: 0 4rem;
}
@media (min-width: 1024px) {
	.section--hero { padding-block: 0 5.5rem; }
}

/* WP injects `:where(.wp-site-blocks) > * { margin-block-start: spacing|30 }`,
   which pushes <main> down from the sticky header. Zero it so the page
   opens flush with the header. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* Body is cream (--base), so a section with no explicit background and a
   section with .has-base-background-color render the same color. When two
   such sections sit back-to-back the combined padding looks like a huge
   empty band; collapse the top padding of the second so they read as one
   continuous color band. Same logic for muted-on-muted and dark-on-dark. */
.section:where(:not(.has-background), .has-base-background-color)
	+ .section:where(:not(.has-background), .has-base-background-color),
.section.has-muted-background-color + .section.has-muted-background-color,
.section.has-dark-background-color + .section.has-dark-background-color {
	padding-block-start: 0;
}

.lx-container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}
.lx-container--narrow { max-width: var(--container-narrow); }

/* Section header (eyebrow + h2 + sub). Centered, narrow, generous bottom space. */
.lx-section-head {
	display: grid;
	gap: 0.875rem; /* 14px */
	margin: 0 auto 3.5rem; /* 56px */
	max-width: 760px;
	text-align: center;
	justify-items: center;
}
.lx-section-head .lx-eyebrow { margin: 0; }
.lx-section-head h2 { margin: 0; }
.lx-section-head .lx-sub {
	font-size: 1.125rem; /* 18px */
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
	margin: 0;
}

/* Eyebrow — small, uppercase, primary-text, flanked by dashes. */
.lx-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem; /* 10px */
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem; /* 12px — matches standalone */
	font-weight: var(--fw-bold);
	color: var(--wp--preset--color--primary-text);
	text-transform: uppercase;
	letter-spacing: 0.22em;
}
.lx-eyebrow.on-dark { color: var(--wp--preset--color--primary); }
/* Section-head eyebrows get dashes on both sides by default. */
.lx-section-head .lx-eyebrow::before,
.lx-section-head .lx-eyebrow::after {
	content: '';
	width: 24px;
	height: 2px;
	background: var(--wp--preset--color--primary);
	display: inline-block;
}

/* Header chrome lives in components.css now (sticky + pseudo-element blur). */