/* ==========================================================================
   Hero slider, HLP variant (.wr-slider.hlp-hero), to the handoff spec and the
   approved design:

   - hold 6400 ms, crossfade 2600 ms, and NO dark dip: the outgoing slide stays
     at full opacity (a delayed zero-length transition) while the incoming one
     fades in above it on a higher z-index;
   - Ken Burns on the active slide only (scale 1.07 -> 1 over ~7 s). Inactive
     slides rest at 1.07 and reset only once hidden, so nothing snaps back;
   - white wash .40 / .13 / .40 plus a top band for the header, and a local
     radial glow behind the title and caption; a slide with .wr-tone-light gets
     the same washes in dark, with light text;
   - never pauses on hover or focus (js/hero-slider.js); the pause button is
     the explicit control.

   Change the timing here, not in the script.
   ========================================================================== */
.wr-slider.hlp-hero {
	--wr-hold: 6400ms;
	--wr-fade: 2600ms;
	--wr-drift: 7000ms;
	--w: 255, 255, 255;                      /* wash colour (white, or dark on light-text slides) */
	--hero-pad: clamp(96px, 12vh, 136px);    /* from the bottom edge to the caption */
	--hero-left: max(var(--hlp-gut), calc((100% - 1200px) / 2 + var(--hlp-gut)));
	--hlp-ctrl-h: 0px;                       /* controls share the caption's row on desktop */
	--bar: 44px;
	min-height: max(600px, var(--wr-hero-h, 100vh)) !important;   /* full viewport (100svh), never under 600px */
}
.wr-slider.hlp-hero[data-tone="light"] { --w: 28, 26, 23; }
/* the legacy dark top band from style.css */
.wr-slider.hlp-hero::before { content: none; }

/* ---------- slides: stacked, crossfade without a dip ---------- */
.wr-slider.hlp-hero > .wr-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	z-index: 1;
	transition: opacity 0s linear var(--wr-fade), visibility 0s linear var(--wr-fade);
}
.wr-slider.hlp-hero > .wr-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
	transition: opacity var(--wr-fade) ease, visibility 0s linear 0s;
}
/* Before the script runs (or without it) the first slide simply shows. */
.wr-slider.hlp-hero:not([data-wr-slider-ready]) > .wr-slide:first-child { opacity: 1; visibility: visible; transition: none; }

/* ---------- photograph + Ken Burns ---------- */
.wr-slider.hlp-hero .wr-slide > .wr-slide-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	animation: none;
	transform: scale(1.07);
	transform-origin: 50% 50%;
	transition: transform 0s linear var(--wr-fade);   /* reset only once hidden */
	will-change: transform;
}
.wr-slider.hlp-hero .wr-slide.is-active > .wr-slide-media {
	animation: none;
	transform: scale(1);
	transition: transform var(--wr-drift) ease-out;
}
.wr-slider.hlp-hero .wr-slide-media > .elementor-widget-image,
.wr-slider.hlp-hero .wr-slide-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
}
.wr-slider.hlp-hero .wr-slide-media img { object-fit: cover; object-position: 50% 50%; }

/* ---------- wash + top band, per slide so they crossfade with the photo ---------- */
.wr-slider.hlp-hero > .wr-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	z-index: 1;
	pointer-events: none;
	--sw: 255, 255, 255;
	background:
		/* top band: the header keeps dark text on every slide */
		linear-gradient(180deg, rgba(255, 255, 255, .52) 0, rgba(255, 255, 255, 0) 18%),
		linear-gradient(180deg, rgba(var(--sw), .40) 0%, rgba(var(--sw), .13) 50%, rgba(var(--sw), .40) 100%);
}
/* Light caption text (.wr-tone-light, Sample 2's look): no white wash on the
   photo at all, just a dark gradient rising from the bottom behind the caption. */
.wr-slider.hlp-hero > .wr-slide.wr-tone-light::before {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .52) 0, rgba(255, 255, 255, 0) 18%),
		linear-gradient(180deg, rgba(20, 19, 17, 0) 38%, rgba(20, 19, 17, .38) 62%, rgba(20, 19, 17, .66) 100%);
}

/* ---------- caption: kicker, hotel name (large), location ----------
   Sample 2's editorial caption on the page grid, bottom left. Each slide has
   its own, so it crossfades with its photograph. */
.wr-slider.hlp-hero .wr-slide > .wr-slide-caption {
	position: absolute;
	left: var(--hero-left);
	right: var(--hero-left);
	bottom: calc(var(--hero-pad) + var(--hlp-ctrl-h));
	width: auto;
	max-width: 900px;
	z-index: 6;
	opacity: 0;
	isolation: isolate;
	transition: opacity .7s ease;
}
.wr-slider.hlp-hero .wr-slide.is-active > .wr-slide-caption { opacity: 1; transition: opacity 1.2s ease 1s; }
.wr-slider.hlp-hero:not([data-wr-slider-ready]) > .wr-slide:first-child > .wr-slide-caption { opacity: 1; transition: none; }
/* cancel the legacy rise-and-sharpen reveal from style.css */
.wr-slider.hlp-hero .wr-slide-caption > * { opacity: 1; transform: none; filter: none; transition: none; width: auto; }

/* No glow or patch behind the caption (the user asked for less white): the
   tight halo on the letters carries the contrast. */
.wr-slider.hlp-hero .wr-slide > .wr-slide-caption::before { content: none; }

.wr-slider.hlp-hero {
	--halo: 0 0 2px rgba(255, 255, 255, .7), 0 0 10px rgba(255, 255, 255, .75), 0 0 24px rgba(255, 255, 255, .5);
	--halo-small: 0 0 2px rgba(255, 255, 255, .9), 0 0 8px rgba(255, 255, 255, .85), 0 0 20px rgba(255, 255, 255, .6);
	--halo-dark: 0 0 2px rgba(0, 0, 0, .6), 0 0 10px rgba(0, 0, 0, .55), 0 0 24px rgba(0, 0, 0, .35);
}
.wr-slider.hlp-hero .wr-slide-caption .elementor-heading-title { text-shadow: var(--halo); }
/* the small lines (kicker, location) are the hardest to read over a photo */
.wr-slider.hlp-hero .wr-slide-kicker .elementor-heading-title,
.wr-slider.hlp-hero .wr-slide-place .elementor-heading-title { text-shadow: var(--halo-small); }
.wr-slider.hlp-hero .wr-slide.wr-tone-light .wr-slide-caption .elementor-heading-title { color: #fff; text-shadow: var(--halo-dark); }

.wr-slider.hlp-hero .wr-slide-hotel .elementor-heading-title { max-width: 16ch; }

/* kicker: "01 —— Recent stay" (the number and rule come from .wr-idx in the
   heading text; style.css draws the rule, full opacity here for contrast) */
.wr-slider.hlp-hero .wr-slide-kicker .wr-idx { opacity: 1; }
.wr-slider.hlp-hero .wr-slide-kicker .wr-idx::after { opacity: .7; }


/* ---------- controls: 01 / 03, progress bars, pause ---------- */
.wr-slider.hlp-hero .wr-slider-controls {
	position: absolute;
	right: var(--hero-left);
	bottom: var(--hero-pad);
	z-index: 7;
	display: flex;
	align-items: center;
	gap: 16px;
	color: var(--hlp-ink);
}
.wr-slider.hlp-hero[data-tone="light"] .wr-slider-controls { color: #fff; }

.wr-slider.hlp-hero .wr-count { font: 700 13px/1 Arial, Helvetica, sans-serif; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.wr-slider.hlp-hero .wr-count i { font-style: normal; opacity: .72; }

.wr-slider.hlp-hero .wr-slider-nav { position: static; display: flex; gap: 8px; transform: none; }

.wr-slider.hlp-hero .wr-dot,
.wr-slider.hlp-hero .wr-dot:hover,
.wr-slider.hlp-hero .wr-dot:focus,
.wr-slider.hlp-hero .wr-pause,
.wr-slider.hlp-hero .wr-pause:hover,
.wr-slider.hlp-hero .wr-pause:focus {
	background: none;
	border: 0;
	color: inherit;
}
.wr-slider.hlp-hero .wr-dot { position: relative; width: var(--bar); height: 26px; overflow: visible; }
.wr-slider.hlp-hero .wr-dot::before,
.wr-slider.hlp-hero .wr-dot::after {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	height: 2px;
	background: currentColor;
}
.wr-slider.hlp-hero .wr-dot::before { width: 100%; opacity: .25; transition: opacity .4s ease; }
.wr-slider.hlp-hero .wr-dot:hover::before { opacity: .5; }
.wr-slider.hlp-hero .wr-dot::after { width: 0; animation: none; }
.wr-slider.hlp-hero .wr-dot.is-active::after { animation: hlp-dotfill var(--wr-hold) linear forwards; }
.wr-slider.hlp-hero.is-paused .wr-dot.is-active::after { animation: none; width: 100%; }
@keyframes hlp-dotfill { from { width: 0; } to { width: 100%; } }

/* pause / play: two bars, or a triangle when paused */
.wr-slider.hlp-hero .wr-pause { position: relative; width: 26px; height: 26px; margin-left: -4px; }
.wr-slider.hlp-hero .wr-pause::before,
.wr-slider.hlp-hero .wr-pause::after {
	content: "";
	position: absolute;
	top: 8px;
	width: 2px;
	height: 10px;
	background: currentColor;
}
.wr-slider.hlp-hero .wr-pause::before { left: 10px; }
.wr-slider.hlp-hero .wr-pause::after { left: 15px; }
.wr-slider.hlp-hero .wr-pause.is-paused::before {
	left: 9px;
	top: 7px;
	width: 0;
	height: 0;
	background: none;
	border-left: 10px solid currentColor;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}
.wr-slider.hlp-hero .wr-pause.is-paused::after { display: none; }

.wr-slider.hlp-hero .wr-dot:focus-visible,
.wr-slider.hlp-hero .wr-pause:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* phone: the controls drop under the caption, left-aligned */
@media (max-width: 767px) {
	.wr-slider.hlp-hero { --hlp-ctrl-h: 54px; }   /* 26px controls + 28px gap */
	.wr-slider.hlp-hero .wr-slider-controls { right: auto; left: var(--hero-left); }
}

@media (prefers-reduced-motion: reduce) {
	.wr-slider.hlp-hero .wr-slide > .wr-slide-media,
	.wr-slider.hlp-hero .wr-slide.is-active > .wr-slide-media { transform: none; transition: none; }
	.wr-slider.hlp-hero > .wr-slide,
	.wr-slider.hlp-hero > .wr-slide.is-active,
	.wr-slider.hlp-hero .wr-slide > .wr-slide-caption,
	.wr-slider.hlp-hero .wr-slide.is-active > .wr-slide-caption { transition: none; }
	.wr-slider.hlp-hero .wr-dot.is-active::after { animation: none; width: 100%; }
}