/* Stay directory — SPA-canonical hero styles. Mirrors components/Directory.jsx
 * lines 217-221. The SPA hero is a paper-background section with breadcrumb +
 * H1 + lede only; filter pills + intent grid live in sibling sections.
 */

/* ── Hero ────────────────────────────────────────────────────────── */
.va-stay-hero {
	padding: 40px 48px 0;
}

.va-stay-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-stay-hero-breadcrumb a {
	color: var(--muted);
	text-decoration: none;
}

.va-stay-hero-breadcrumb .sep {
	color: var(--line);
}

.va-stay-hero-h1 {
	margin: 14px 0 12px;
	font-size: 64px;
	line-height: 1.0;
	letter-spacing: -0.02em;
}

.va-stay-hero-lede {
	font-size: 19px;
	max-width: 680px;
	margin-top: 12px;
}

/* ── City filter pills — sibling section, not part of hero ───────── */
/* SPA Directory.jsx does not render city pills at this position — they live
 * in the FilterRail aside (line 160-207) inside the directory-layout.
 * The PHP template still emits .va-stay-city-filters for back-compat;
 * hide it so the hero+intent layout matches SPA's vertical stack. */
.va-stay-city-filters {
	display: none;
}

.va-stay-city-filters .btn {
	font-size: 12px;
	padding: 8px 14px;
}

/* ── Mobile: matches SPA at window.innerWidth <= 900 ─────────────── */
@media (max-width: 900px) {
	.va-stay-hero {
		padding: 24px 24px 0;
	}
	.va-stay-hero-h1 {
		font-size: 36px;
	}
	.va-stay-hero-lede {
		font-size: 16px;
	}
	.va-stay-city-filters {
		padding: 20px 24px 0;
	}
}