/**
 * Tour page: full-bleed hero + sticky booking bar.
 * Loaded only on single products by inc/tour-page-ui.php.
 */

/* ------------------------------------------------------------------ Hero */

/* .wrapper carries padding-top for the fixed header (150/100/80px); the hero
   cancels it so the image runs under the transparent nav, mirroring what
   .modify-header-page already does for .hero-section on the home page. */
.tm-tour-page .tm-hero {
	position: relative;
	margin-top: -150px;
	min-height: 62vh;
	max-height: 660px;
	display: flex;
	align-items: flex-end;
	padding-left: 30px;
	padding-right: 30px;
	background-color: #1a1a2e;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	transition: margin-top .3s;
}
.tm-tour-page .wrapper.active .tm-hero { margin-top: -100px; }

@media (max-width: 1024px) {
	.tm-tour-page .tm-hero,
	.tm-tour-page .wrapper.active .tm-hero { margin-top: -80px; }
	.tm-tour-page .tm-hero { min-height: 56vh; }
}

.tm-hero__scrim {
	position: absolute;
	inset: 0;
	/* Horizontal pass keeps the text side readable on bright photos; vertical
	   pass protects the white logo up top and the price line at the bottom. */
	background:
		linear-gradient(90deg, rgba(26, 26, 46, .80) 0%, rgba(26, 26, 46, .38) 46%, rgba(26, 26, 46, 0) 78%),
		linear-gradient(180deg, rgba(26, 26, 46, .58) 0%, rgba(26, 26, 46, .10) 32%, rgba(26, 26, 46, .82) 100%);
}

/* Match the product block below, not just .global-container. The theme insets
   that block with its own gutter (.tour-banner__wrap margin-inline:-27px,
   .tour-banner__block padding-inline:27px) and the information column's right
   padding is overridden to 0, so the visible column runs 27px inside on the
   left and 27px past the container on the right. Mirror both. */
.tm-hero__inner {
	position: relative;
	z-index: 2;
	/* Keep .global-container's max-width + auto centring so the hero centres on
	   wide screens exactly like the content. The product block below sits 27px
	   to the right of that container (.tour-banner__wrap margin-inline:-27px
	   against .tour-banner__block padding-inline:27px), so shift to match. */
	left: 27px;
	padding: 190px 0 46px;
	color: #fff;
}
@media (max-width: 1024px) {
	.tm-tour-page .tm-hero { padding-left: 15px; padding-right: 15px; }
	.tm-hero__inner {
		left: 0;
		padding: 130px 0 30px;
	}
}

.tm-hero__eyebrow {
	margin: 0 0 12px;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: #32BEED;
}

.tm-hero__title {
	margin: 0 0 14px;
	max-width: 20ch;
	font-family: "Century Gothic", sans-serif;
	font-size: clamp(30px, 4.4vw, 58px);
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}

.tm-hero__meta {
	margin: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 15px;
	color: #d3d7e6;
}
.tm-hero__meta span { color: #32BEED; padding: 0 8px; }

.tm-hero__price {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .18);
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	color: #b9bed2;
}
.tm-hero__price strong {
	font-family: "Century Gothic", sans-serif;
	font-size: 30px;
	font-weight: 700;
	color: #fff;
	margin: 0 6px;
}

/* The hero owns the title now, so drop the one the summary column printed. */
.tm-tour-page .tour-banner-info__main-title { display: none; }

/* ------------------------------------------------- Sticky booking bar */

.tm-stickybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	background: #1a1a2e;
	box-shadow: 0 -6px 24px rgba(26, 26, 46, .22);
	transform: translateY(105%);
	transition: transform .28s ease;
}
.tm-stickybar.is-visible { transform: translateY(0); }

.tm-stickybar__inner {
	max-width: 1680px;
	margin: 0 auto;
	padding: 12px 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.tm-stickybar__info { min-width: 0; }

.tm-stickybar__name {
	display: block;
	font-family: "Century Gothic", sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tm-stickybar__price {
	display: block;
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	color: #b9bed2;
}
.tm-stickybar__price strong {
	color: #fff;
	font-size: 17px;
	margin: 0 4px;
}

.tm-stickybar__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

.tm-stickybar__pdf,
.tm-stickybar__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 9px;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.tm-stickybar__pdf {
	padding: 11px 16px;
	border: 1.5px solid rgba(255, 255, 255, .35);
	color: #fff;
}
.tm-stickybar__pdf:hover {
	border-color: #32BEED;
	color: #32BEED;
	text-decoration: none;
}

.tm-stickybar__cta {
	padding: 12px 26px;
	background: #32BEED;
	border: 1.5px solid #32BEED;
	color: #fff;
}
.tm-stickybar__cta:hover {
	background: #24a9d6;
	border-color: #24a9d6;
	color: #fff;
	text-decoration: none;
}

@media (max-width: 767px) {
	.tm-stickybar__inner { padding: 10px 14px; gap: 12px; }
	.tm-stickybar__name { display: none; }
	.tm-stickybar__pdf { display: none; }
	.tm-stickybar__cta { padding: 12px 22px; }
}

/* The floating WhatsApp bubble would sit under the bar. */
.tm-tour-page.tm-stickybar-open .wa__button,
.tm-tour-page.tm-stickybar-open .ht-ctc {
	bottom: 92px !important;
}

/* ------------------------------------------------ Header over the hero */

/* The theme pins the dark logo on .single-product, which left both logos
   stacked at full opacity over the hero. Force the white one while the header
   is transparent, and hand back to the dark one once .active turns it solid. */
.tm-tour-page .header__logo .header-light-logo {
	opacity: 1 !important;
	visibility: visible !important;
}
.tm-tour-page .header__logo .header-dark-logo {
	opacity: 0 !important;
	visibility: hidden !important;
}
.tm-tour-page .header.active .header__logo .header-light-logo {
	opacity: 0 !important;
	visibility: hidden !important;
}
.tm-tour-page .header.active .header__logo .header-dark-logo {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Same story for the other header furniture the .single-product rules tint. */
.tm-tour-page .header:not(.active) .header__burger .icon { fill: #fff !important; }
.tm-tour-page .header:not(.active) .header__burger .fa { color: #fff !important; }
.tm-tour-page .header:not(.active) .header-mobile-account .fa { color: #fff !important; }
.tm-tour-page .header:not(.active) .header-lang__dropdown .select__trigger {
	background-color: transparent !important;
	border-color: rgba(255, 255, 255, .6) !important;
}
.tm-tour-page .header:not(.active) .switcher .selected a { color: #fff !important; }

/* ------------------------------------------------------- Breadcrumbs */

.tm-tour-page .breadcrumbs {
	padding-top: 30px;
	padding-bottom: 14px;
}
@media (max-width: 1024px) {
	.tm-tour-page .breadcrumbs {
		padding-top: 20px;
		padding-bottom: 10px;
	}
}