/* Single hotel detail — SPA-canonical hero overrides. Mirrors
 * components/PartnerListing.jsx hero (lines 167-195) for `type === 'stay'`
 * records. Stacks on top of .va-listing-* base styles via the .va-hotel-*
 * class variants emitted by template-parts/shared/listing-detail.php.
 *
 * Differences from .va-tour-hero (see assets/single-tour.css):
 *   - height: 64vh vs 76vh
 *   - min-height: 520 vs 620
 *   - H1 font-size: 72 vs 82
 *   - lede font-size: 18 vs 19, line-height: 1.55 vs 1.5
 *   - inner stack max-width: 900 vs 940
 *   - gradient mid-stop alpha: 0.05 vs 0.10
 *   - padding-bottom: 48 vs 58
 */

/* Hide the above-hero breadcrumb on hotel pages (matches the tour treatment).
 * SPA renders the breadcrumb inside the hero, white-on-dark. */
.va-listing-breadcrumb { display: none; }

/* ── Hero ────────────────────────────────────────────────────────── */
.va-hotel-hero {
	position: relative;
	/* -96px so hero fully covers the 96px header (no cream strip). Matches
	 * SPA PartnerListing.jsx:167 after the cream-strip elimination. */
	margin-top: -96px;
	height: 64vh;
	min-height: 520px;
	overflow: hidden;
	color: #fff;
	background: var(--ionian-deep);
}

.va-hotel-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.va-hotel-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 35, 56, 0.45) 0%, rgba(8, 35, 56, 0.05) 38%, rgba(8, 35, 56, 0.90) 100%);
}

.va-hotel-hero-content {
	position: absolute;
	inset: 0;
	left: 0;
	right: 0;
	bottom: 0;
	max-width: none;
	display: flex;
	flex-direction: column;
	padding: 140px 48px 48px;
}

.va-hotel-hero-eyebrow {
	margin-top: auto;
	color: rgba(255, 255, 255, 0.78);
	max-width: 900px;
}

.va-hotel-hero-h1 {
	margin: 14px 0 0;
	font-size: 72px;
	line-height: 1;
	letter-spacing: -0.03em;
	font-weight: 400;
	color: #fff;
	max-width: 900px;
}

.va-hotel-hero-lede {
	margin: 18px 0 16px;
	max-width: 720px;
	font-size: 18px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
}

/* Inverted in-hero breadcrumb (emitted by listing-detail.php) — mirrors SPA
 * invert=true Breadcrumb in PartnerListing.jsx:171. */
.va-hotel-hero-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}
.va-hotel-hero-breadcrumb a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.va-hotel-hero-breadcrumb .sep { color: rgba(255, 255, 255, 0.4); }

/* ── Mobile: matches SPA at window.innerWidth <= 900 ─────────────── */
@media (max-width: 900px) {
	.va-hotel-hero {
		margin-top: -64px;
		height: 58vh;
		min-height: 420px;
	}
	.va-hotel-hero-content {
		padding: 100px 24px 30px;
	}
	.va-hotel-hero-h1 {
		font-size: 40px;
	}
	.va-hotel-hero-lede {
		font-size: 15px;
		margin-bottom: 14px;
	}
}