/* ===== Tour Hero widget (widgets/tour-hero-widget.php) - featured image +
   title + a compact facts/price row, replacing the older plain image+title
   section followed by the separate Tour Overview widget. ===== */

.tour_hero_box {
	position: relative;
	width: 100%;
	/* Flat 70vh floor, not calc(70vh - var(--header-height)) any more - that
	   subtracted the header's own height from the 70vh budget (so hero+header
	   together filled 70vh, not the hero alone), which meant the hero itself
	   shrank whenever the header measured taller - confirmed live as exactly
	   "the hero got smaller somehow". This is simpler and doesn't depend on
	   header-height.js having measured anything correctly at all: the hero is
	   always at least 70vh, full stop, and can run under/behind a
	   taller-than-usual header rather than shrinking to avoid it. */
	min-height: 70vh;
	background-size: cover;
	background-position: center;
	background-color: var(--ink, #2b2420);
	display: flex;
	align-items: flex-end;
	/* A CSS background-image, not a real <img> - without this, click-dragging
	   across it (or its price/title text, which inherits this) shows a
	   "not-allowed"/no-drop cursor, since the browser reads the drag as an
	   attempted select/drop over non-selectable content. The real buttons
	   inside (.tour_hero_cta_btn) set their own cursor: pointer, which wins
	   over this on the element itself, so they're unaffected. */
	user-select: none;
	cursor: default;
}

/* Dark gradient toward the bottom, not a flat tint over the whole image -
   same reasoning as .hero_tour_search's own overlay (see hero-tour-search-widget.php):
   keeps the photo readable at the top while the text block at the bottom
   still has enough contrast to read against any part of the photo.
   Left/right padding is a max() of the usual 32px gutter and however much
   inset a real 1340px-wide centered container would have at this viewport -
   on a wide screen that's the 1340px figure, keeping the hero's own title/
   price text aligned with the normal page content below it (confirmed
   against that content's own rendered left edge) instead of just hugging
   32px from the true viewport edge regardless of how wide the screen is;
   on a narrow screen the formula goes negative/tiny and max() falls back to
   the plain 32px gutter every other section already uses. */
.tour_hero_overlay {
	width: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.75) 100%);
	padding-top: 60px;
	padding-bottom: 32px;
	padding-left: max(32px, calc((100% - 1340px) / 2));
	padding-right: max(32px, calc((100% - 1340px) / 2));
	box-sizing: border-box;
}

.tour_hero_content {
	max-width: 900px;
	color: #fff;
}

/* Desktop only - hidden on mobile (v3: "hero has no buttons" on mobile, and
   the breadcrumb is dropped there too to keep the hero calm on a small
   screen; still in the DOM either way, just visually hidden - see the
   max-width:767px block below). */
.tour_hero_breadcrumb {
	display: flex;
	flex-wrap: wrap;
	/* Confirmed live: a sitewide typography rule now collapses <a> line-height
	   to ~1px (nothing close to the span separator's own inherited ~27px
	   body line-height, which that sitewide rule doesn't touch), so "Home"/
	   "Central Asia Tours" and the "/" between them no longer share a common
	   text baseline within the same flex row - the "/" visually reads as a
	   row below the link text even though it's the same line. align-items:
	   center is the layout-level backstop (keeps every child vertically
	   centered on this row regardless of how tall its own line box computes
	   to); the explicit line-height overrides below are the direct fix. */
	align-items: center;
	gap: 8px;
	font-size: 13px;
	margin-bottom: 20px;
}

.tour_hero_breadcrumb a {
	color: rgba(255, 255, 255, 0.8);
	/* !important - a sitewide "underline links" style added after this was
	   written otherwise wins over the plain version here, same fight as
	   .tour_hero_cta_btn below. */
	text-decoration: none !important;
	/* !important - the same sitewide change also collapsed this element's own
	   line-height to ~1px (see the comment on .tour_hero_breadcrumb above) -
	   restores a normal reading line-height regardless of it. */
	line-height: 1.4 !important;
}

.tour_hero_breadcrumb a:hover {
	color: #fff;
	text-decoration: underline;
}

.tour_hero_breadcrumb span {
	color: rgba(255, 255, 255, 0.45);
	/* Explicit, not left inherited - matches the <a> line-height above so the
	   "/" separator sits on the same baseline as the links either side of it. */
	line-height: 1.4;
}

/* No text-transform here on purpose - this site's own global heading style
   (Elementor Kit) decides casing; hard-coding uppercase would stop following
   it the moment that's changed there instead of here. */
.tour_hero_title {
	margin: 0 0 14px;
	font-family: "Noto Sans", sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 1.15;
	color: #fff;
}

.tour_hero_meta_row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 18px;
}

.tour_hero_meta_sep {
	opacity: 0.6;
}

.tour_hero_flags {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.tour_hero_flag_icon {
	border-radius: 2px;
	display: inline-block;
	vertical-align: middle;
}

.tour_hero_facts_row {
	display: flex;
	flex-wrap: wrap;
	gap: 22px 40px;
	margin-bottom: 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.tour_hero_fact {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tour_hero_fact_label {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.7);
}

.tour_hero_fact_value {
	font-size: 15px;
	font-weight: 600;
}

.tour_hero_cta_row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

/* !important on color/background - confirmed live that the theme's own
   global link-color rule was beating this on the plain (non-!important)
   version, leaving a pink button with near-black (--ink) text instead of
   white. Same fight as the button/svg overrides elsewhere in this plugin,
   just for an <a> styled as a button instead of a real <button>. */
.tour_hero_cta_btn {
	display: inline-block;
	font-family: "Noto Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	/* !important - a sitewide typography change (the same one that added the
	   link underline - see text-decoration below) also shrank the inherited
	   line-height these buttons never used to need an explicit reset for,
	   confirmed live as a visibly shorter button box despite unchanged
	   padding. Locks the text line to a fixed 1x its font-size regardless of
	   whatever the site's global line-height is set to. */
	line-height: 1 !important;
	background-color: var(--pink-action, #e8334f) !important;
	color: #fff !important;
	padding: 14px 32px;
	border-radius: 0;
	/* !important - same sitewide "underline links" fight as
	   .tour_hero_breadcrumb a above; without it this button's own label text
	   shows an underline under the solid pink fill. */
	text-decoration: none !important;
	transition: background-color 200ms;
	white-space: nowrap;
}

.tour_hero_cta_btn:hover {
	background-color: var(--e-global-color-e352649, #ca2c45) !important;
	color: #fff !important;
}

/* Mobile-only "Ask a question" - hidden on desktop by default (see the
   max-width:767px block below, which is the only place this un-hides).
   White outline, not ink - this sits on the same dark photo overlay as the
   pink CTA and the breadcrumb above, where an ink border/text would be
   unreadable. Fills solid white on hover/focus, same "outline fills solid"
   interaction as .tour_dates_book_btn (tour-info-widgets.css), just
   light-on-dark here instead of that one's dark-on-light.
   !important throughout the base rule - same reason as
   .tour_sticky_nav_contact_btn's own comment (tour-sticky-nav-widget.css):
   this also carries the shared '.tour_dates_contact_btn' trigger class,
   whose own plain-underlined-link style otherwise wins outright depending on
   stylesheet load order - confirmed live it was rendering with no border,
   underlined, gray, instead of this bordered white-on-photo button. */
.tour_hero_contact_btn {
	display: none;
	font-family: "Noto Sans", sans-serif;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-transform: none;
	text-decoration: none !important;
	background-color: transparent !important;
	color: #fff !important;
	border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
	padding: 12.5px 32px !important;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 200ms, color 200ms, border-color 200ms;
}

.tour_hero_contact_btn:hover,
.tour_hero_contact_btn:focus-visible {
	background-color: #fff !important;
	border-color: #fff !important;
	color: var(--ink, #2b2420) !important;
}

/* Desktop only (hidden on mobile below) - fills the corner "Choose dates"
   used to occupy there before it moved to the sticky nav (see
   caguide_get_tour_hero_inclusions_summary()/caguide_get_tour_hero_deposit_summary()
   in custom-elementor-widgets.php). */
.tour_hero_inclusion_summary {
	margin: 14px 0 0;
	max-width: 480px;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
}

.tour_hero_price {
	font-size: 15px;
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0 4px;
}

.tour_hero_price_original {
	opacity: 0.7;
	margin-right: 4px;
}

/* The one number a visitor is actually here for - sized to read as its own
   headline, not just bold body text, matching the v3 design reference
   (everything else on this line - "From", the struck-through original,
   "per person" - stays at the small 15px .tour_hero_price size around it). */
.tour_hero_price_main {
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
}

/* Was tinted pink to flag a sale price - per explicit request, the sale price
   now stays the same white as every other tour's price (inherited from
   .tour_hero_content), so this rule is now a deliberate no-op kept only so a
   future look for "on sale" has an obvious place to go without hunting for
   where the class is applied. */
.tour_hero_price_sale {
	color: #fff;
}

.tour_hero_price_per {
	font-size: 12.5px;
	font-weight: 400;
	opacity: 0.8;
}

/* caguide_get_tour_cost_per_day() - a quick "is this actually cheap for its
   length" comparison point, on the same line as "per person" (at least on
   desktop - see the max-width:767px block below), not a separate row. */
.tour_hero_price_per_day {
	font-size: 12.5px;
	font-weight: 400;
	opacity: 0.65;
}

.tour_hero_price_per_day::before {
	content: "·";
	margin: 0 4px;
	opacity: 0.6;
}

@media only screen and (max-width: 767px) {
	.tour_hero_breadcrumb {
		display: none;
	}

	.tour_hero_overlay {
		padding: 32px 18px 20px;
	}

	.tour_hero_title {
		font-size: 26px;
	}

	/* Scaled down roughly in step with .tour_hero_title above - 44px would
	   read bigger than this page's own H1 on a phone-width screen. */
	.tour_hero_price_main {
		font-size: 32px;
	}

	.tour_hero_meta_row {
		font-size: 13px;
	}

	/* A real 2-column grid, not flex-wrap - matches the mobile mockup's own
	   Best Time/Tour Style, Tour Type/Group Size pairing rather than however
	   flex-wrap happens to break given each fact's own text length. */
	.tour_hero_facts_row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px 20px;
	}

	.tour_hero_cta_row {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.tour_hero_cta_btn {
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}

	.tour_hero_contact_btn {
		display: block;
		width: 100%;
		text-align: center;
		box-sizing: border-box;
	}

	/* Mobile keeps "Choose dates" - this corner-filling summary is desktop
	   only (see the rule above and its own comment). */
	.tour_hero_inclusion_summary {
		display: none;
	}
}

/* Desktop - "Choose dates" moved to the sticky nav instead (see
   .tour_sticky_nav_cta_btn / .tour_sticky_nav_contact_btn in
   tour-sticky-nav-widget.css), which the hero doesn't have room to duplicate
   once its own breadcrumb/facts row is showing too. Mobile keeps both this
   and its own "Ask a question" (the block above) since there's no sticky-nav
   CTA row there at all - it's desktop-only, the fixed bottom bar handles
   booking on mobile instead. */
@media only screen and (min-width: 768px) {
	.tour_hero_cta_btn {
		display: none;
	}
}