/**
 * Tours archive — SPA-canonical styles.
 *
 * Mirrors components/Tours.jsx#ToursPage exactly. The previous WP hero used
 * a full-bleed dark image overlay with white display H1 — SPA instead renders
 * a plain padding section with breadcrumb + black H1 + italic lede on paper.
 * One of the more dramatic before/after of the Phase-2 ports.
 *
 * SPA breakpoint: window.innerWidth <= 900 → @media (max-width: 900px).
 */

/* ── Hero ──────────────────────────────────────────────────────── */
.va-tours-hero {
	/* Reset the legacy image-hero positioning. SPA hero is just a padding
	   section — no image, no overlay, no negative margin-top. */
	position: static;
	height: auto;
	min-height: 0;
	margin: 0;
	overflow: visible;
	padding: 64px 48px 34px;
	background: var(--paper);
	color: var(--ink);
	display: block;
}
.va-tours-hero-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}
.va-tours-hero-breadcrumb a {
	color: var(--muted);
	text-decoration: none;
}
.va-tours-hero-breadcrumb a:hover { color: var(--ink); }
.va-tours-hero-breadcrumb .sep { color: var(--line); }
.va-tours-hero-title {
	margin: 14px 0 0;
	font-size: clamp(60px, 6vw, 96px);
	line-height: 0.96;
	letter-spacing: -0.025em;
	color: var(--ink);
	font-weight: 400;
}
.va-tours-hero-lede {
	margin: 22px 0 0;
	max-width: 680px;
	font-size: 18px;
	/* `.lede` class supplies font-family display + italic + font-weight 300. */
}

/* Mobile branch (SPA window.innerWidth <= 900) */
@media (max-width: 900px) {
	.va-tours-hero { padding: 26px 24px 18px; }
	.va-tours-hero-title { font-size: clamp(40px, 11vw, 58px); }
	.va-tours-hero-lede { font-size: 16px; }
}