/* Single tour detail — SPA-canonical hero overrides. Mirrors components/Tours.jsx
 * TourDetail hero (lines 739-750). Stacks on top of .va-listing-* base styles
 * via the va-tour-* class variants emitted by template-parts/shared/listing-detail.php.
 */

/* Hide the shared listing-detail.php breadcrumb above the hero — SPA renders
 * the breadcrumb inside the hero (white-on-dark) instead. The DOM breadcrumb
 * stays for screen-readers + BreadcrumbList JSON-LD. */
.va-listing-breadcrumb { display: none; }

/* ── Hero ────────────────────────────────────────────────────────── */
.va-tour-hero {
	position: relative;
	/* Mirror SPA TourDetail (Tours.jsx:739): hero pulls up under the transparent
	 * sticky nav. -96px so hero fully covers the 96px header (eliminates the
	 * cream strip above hero — hero now starts at y=0). */
	margin-top: -96px;
	height: 76vh;
	min-height: 620px;
	overflow: hidden;
	color: #fff;
	background: var(--ionian-deep);
}

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

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

/* SPA content fills the section absolutely with padding inset rather than
 * positioning bottom — mirrors `position: absolute; inset: 0; display: flex;
 * flex-direction: column; padding: 140px 48px 58px;` in Tours.jsx#739. */
.va-tour-hero-content {
	position: absolute;
	inset: 0;
	left: 0;
	right: 0;
	bottom: 0;
	max-width: none;
	display: flex;
	flex-direction: column;
	padding: 140px 48px 58px;
}

.va-tour-hero-eyebrow {
	color: rgba(255, 255, 255, 0.8);
}

/* Bottom-anchored inner stack: mirrors SPA's `<div style="margin-top: auto;
 * max-width: 940">` wrapping eyebrow + H1 + lede (Tours.jsx:744). The shared
 * listing template doesn't emit a wrapper, so we put `margin-top: auto` on the
 * eyebrow — it absorbs the flex slack, pushing eyebrow + H1 + lede as a group
 * to the bottom. Breadcrumb stays at the top in natural flow. */
.va-tour-hero-content .va-tour-hero-eyebrow {
	margin-top: auto;
}

.va-tour-hero-h1 {
	margin: 16px 0 0;
	font-size: 82px;
	line-height: 0.98;
	letter-spacing: -0.03em;
	font-weight: 400;
	color: #fff;
	max-width: 940px;
}

.va-tour-hero-eyebrow {
	max-width: 940px;
}

/* Inverted breadcrumb at top of hero — mirrors SPA invert=true Breadcrumb in
 * Tours.jsx:743. The shared listing-detail.php emits a `.va-listing-hero-breadcrumb`
 * inside `.va-listing-hero-content`; we display + invert it for tour pages.
 * Other listing types (hotel/restaurant/experience) hide it via style.css. */
.va-tour-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-tour-hero-breadcrumb a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.va-tour-hero-breadcrumb .sep { color: rgba(255, 255, 255, 0.4); }

.va-tour-hero-lede {
	margin: 20px 0 19px;
	max-width: 720px;
	font-size: 19px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.86);
}

/* ── Mobile: matches SPA at window.innerWidth <= 900 ─────────────── */
@media (max-width: 900px) {
	.va-tour-hero {
		margin-top: -64px;
		height: 68vh;
		min-height: 520px;
	}
	.va-tour-hero-content {
		padding: 100px 24px 34px;
	}
	.va-tour-hero-h1 {
		font-size: 40px;
	}
	.va-tour-hero-lede {
		font-size: 16px;
		margin-bottom: 16px;
	}
}