/* Unique World Holidays — Home page hero "destination wheel" (Step 7)
   Kensington Tours-inspired rotating tour list + background crossfade.
   Injected into .uwh-home-hero by hero-destination-wheel.js (no Elementor
   edits) — only runs at all if the ACF-driven tour query in functions.php
   returned at least one tour with a featured image. Lives in the LOWER
   ~60% of the hero (left-aligned on desktop), well clear of the giant
   "UNIQUE WORLD" title above it (which occupies roughly the top third).

   Positioning is normal hero content (position:absolute within
   .uwh-home-hero, NOT fixed) — it scrolls away with the hero section like
   the background it replaces, unlike the fixed/animated hero title. */

/* ---- Background crossfade: replaces the old Elementor image-carousel
   background once JS confirms it has tour data (see .uwh-has-wheel below);
   until then, or if JS never runs, the original carousel stays visible. ---- */
.uwh-wheel-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.uwh-wheel-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(1, 34, 69, 0.55) 0%, rgba(1, 34, 69, 0.2) 45%, rgba(1, 34, 69, 0.8) 100%);
	z-index: 1;
}
.uwh-wheel-bg-layer {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.1s ease;
}
.uwh-wheel-bg-layer.is-active {
	opacity: 1;
}

/* Once the wheel has initialized, hide the original Elementor carousel
   background it replaces (fallback stays visible until then). */
.uwh-home-hero.uwh-has-wheel .uwh-hero-bg {
	display: none;
}

/* ---- The wheel itself ---- */
.uwh-wheel {
	position: absolute;
	z-index: 3;
	left: 6%;
	top: 62%;
	transform: translateY(-50%);
	width: 460px;
	max-width: 44vw;
	height: 280px;
}

/* Decorative highlight behind the centered/active item — purely visual,
   not tied to a specific list item in the DOM. */
.uwh-wheel::before {
	content: '';
	position: absolute;
	left: 0;
	right: 64px;
	top: 50%;
	height: 56px;
	transform: translateY(-50%);
	background: rgba(253, 246, 233, 0.96);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.uwh-wheel-list {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.uwh-wheel-item {
	position: absolute;
	left: 0;
	right: 64px;
	top: 50%;
	height: 56px;
	line-height: 56px;
	padding: 0 20px;
	box-sizing: border-box;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #ffffff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	will-change: transform, opacity, filter;
}
.uwh-wheel-item.is-active {
	color: #012245;
	cursor: default;
}

.uwh-wheel-go {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #feae02;
	color: #012245 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-decoration: none !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
	transition: filter 0.2s ease, transform 0.2s ease;
}
.uwh-wheel-go:hover {
	filter: brightness(1.08);
	transform: translateY(-50%) scale(1.06);
}

/* ---- Bottom-right current-tour label ---- */
.uwh-wheel-label {
	position: absolute;
	z-index: 3;
	right: 48px;
	bottom: 40px;
	max-width: 40vw;
	text-align: right;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	opacity: 0;
	transition: opacity 0.6s ease;
}
.uwh-wheel-label.is-visible {
	opacity: 1;
}

/* ---- Responsive: simplified single-row view (active item + GO only) ---- */
@media (max-width: 1024px) {
	.uwh-wheel {
		left: 5%;
		width: 380px;
		max-width: 54vw;
	}
}

@media (max-width: 782px) {
	.uwh-wheel {
		left: 50%;
		top: 74%;
		width: min(90vw, 360px);
		max-width: none;
		height: 64px;
		transform: translate(-50%, -50%);
	}
	.uwh-wheel::before {
		right: 60px;
		height: 56px;
	}
	.uwh-wheel-item {
		right: 60px;
		font-size: 1rem;
	}
	/* Only the active item is ever shown — no visible prev/next fading
	   rows on small screens, per the simplified mobile treatment. */
	.uwh-wheel-item:not(.is-active) {
		display: none;
	}
	.uwh-wheel-label {
		right: 24px;
		bottom: 24px;
		max-width: 60vw;
	}
}