/* ===== 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%;
	min-height: 420px;
	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. */
.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: 60px 40px 32px;
	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;
	gap: 8px;
	font-size: 13px;
	margin-bottom: 20px;
}

.tour_hero_breadcrumb a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
}

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

.tour_hero_breadcrumb span {
	color: rgba(255, 255, 255, 0.45);
}

/* 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;
	background-color: var(--pink-action, #e8334f) !important;
	color: #fff !important;
	padding: 14px 32px;
	border-radius: 0;
	text-decoration: none;
	transition: background-color 200ms;
	white-space: nowrap;
}

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

.tour_hero_price {
	font-size: 15px;
}

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

.tour_hero_price_sale {
	color: var(--e-global-color-48147da, #f28f9e);
}

.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 5px;
	opacity: 0.6;
}

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

	.tour_hero_box {
		min-height: 320px;
	}

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

	.tour_hero_title {
		font-size: 26px;
	}

	.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;
	}
}