/**
 * Villa Hero — fixed video/still background, oversized wordmark, and the glass
 * "Check Availability" bar. Home-page hero. Self-contained (own tokens) since it
 * renders in the header template, not inside a .vo-sec.
 *
 * @package Villa_Addon
 */

.vo-herofix, .vo-hero-space {
  --dark: #123536;
  --cream: #e9ece9;
  --teal-ink: #097370;
  --display: "Cormorant", Georgia, serif;
  --sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pad-x: clamp(22px, 3.6vw, 100px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---- Hero background: absolute inside the 100vh hero, so it scrolls away with
   the page (matches the approved live site) instead of staying pinned. The
   widget container is the positioning context; .vo-hero-space (100vh, in flow)
   gives it height. This also removes any chance of the video leaking behind
   later sections / the footer. ---- */
.elementor-widget-villa-hero > .elementor-widget-container { position: relative; overflow: hidden; }
.vo-herofix { position: absolute; inset: 0; height: 100vh; z-index: 0; overflow: hidden; pointer-events: none; background: var(--dark); }
.vo-herofix::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 53, 54, .30) 0%, rgba(18, 53, 54, .02) 26%, rgba(6, 28, 30, .10) 54%, rgba(6, 28, 30, .40) 80%, rgba(6, 28, 30, .60) 100%);
}
.vo-hero-still, .vo-hero-still img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 45%; z-index: 0; background: var(--dark); }
.vo-hero-vidw { position: absolute; inset: 0; z-index: 1; }
.vo-hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
/* Elementor ships `.elementor img { height: auto }` (specificity 0,1,1), which outranks
   `.vo-hero-still` (0,1,0) above and collapses the hero still-image to its intrinsic
   height, leaving an empty gap below the hero wherever the video poster does not paint
   (real iOS Safari). This higher-specificity rule (0,2,1) guarantees the still fills. */
.vo-herofix img.vo-hero-still { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }

.vo-word {
  position: absolute;
  left: 50%;
  bottom: 1.2vw;
  transform: translateX(-50%);
  z-index: 2;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 600;
  line-height: .7;
  /* Sized purely in vw so it rescales on every resize frame (no JS lag) and
     never overflows or cuts off. ~88% of viewport width, centred. */
  font-size: 16vw;
  color: #f7f8f5;
  text-shadow: 0 2px 10px rgba(6, 28, 30, .55), 0 10px 46px rgba(6, 28, 30, .60);
  isolation: isolate;
}
.vo-word::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  width: 118%;
  height: 300%;
  background: radial-gradient(ellipse 58% 46% at 50% 50%, rgba(6, 28, 30, .52) 0%, rgba(6, 28, 30, .30) 42%, rgba(6, 28, 30, 0) 72%);
  pointer-events: none;
}

/* ---- 100vh spacer that holds the availability bar ---- */
.vo-hero-space { position: relative; z-index: 1; height: 100vh; }

/* ---- Glass availability bar ---- */
.abar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--word-h, 170px) + clamp(40px, 5vh, 76px));
  z-index: 3;
  width: min(1000px, calc(100% - 2 * var(--pad-x)));
}
.abar__inner {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 6px;
  border-radius: 100px;
  background: linear-gradient(rgba(9, 34, 36, .30), rgba(9, 34, 36, .44)), rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .30);
  box-shadow: 0 18px 50px -12px rgba(6, 28, 30, .45), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.abar__f { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 22px; line-height: normal; border-radius: 100px; border: 0; background: none; cursor: pointer; transition: background .3s var(--ease); }
.abar__f:hover, .abar__f:focus-visible { background: rgba(255, 255, 255, .20); }
.abar__f small { font-family: var(--sans); font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .90); line-height: normal; text-shadow: 0 1px 2px rgba(6, 28, 30, .4); }
.abar__f span { font-family: var(--sans); font-size: 16px; color: rgba(255, 255, 255, .84); line-height: normal; text-shadow: 0 1px 2px rgba(6, 28, 30, .4); transition: color .3s; }
.abar__f span.is-set { color: #fff; font-weight: 500; }
.abar__rule { width: 1px; height: 34px; background: rgba(255, 255, 255, .34); }
.abar__go {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 15px 34px; border-radius: 100px; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 17px; font-weight: 500; letter-spacing: .01em;
  background: var(--teal-ink); color: #fff;
  box-shadow: 0 10px 26px -8px rgba(16, 186, 181, .7);
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.abar__go:hover { background: #07615e; transform: translateY(-1px); box-shadow: 0 14px 32px -8px rgba(16, 186, 181, .85); }
.abar__go svg { width: 18px; height: 18px; flex: none; }
.abar__mob { display: none; }

@media (max-width: 820px) {
  /* Pin the button + wordmark to the SAME visible (svh) frame so they stack
     cleanly on real phones — button above the wordmark, both fully visible,
     never colliding behind the browser's bottom toolbar. */
  .vo-hero-space, .vo-herofix { height: 100svh; min-height: 100svh; }
  .vo-word { bottom: 3svh; font-size: 13vw; line-height: .82; }
  .abar { width: calc(100% - 2 * var(--pad-x)); bottom: calc(3svh + 11vw + 16px); }
  .abar__inner { display: none; }
  .abar__mob {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    padding: 17px 24px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, .34); cursor: pointer;
    background: var(--teal-ink);
    font-family: var(--sans); font-size: 17px; font-weight: 500; color: #fff;
    box-shadow: 0 16px 40px -12px rgba(6, 28, 30, .6);
  }
  .abar__mob svg { width: 18px; height: 18px; }
  /* Lift the glass "Play video" button clear of the availability bar so they
     no longer overlap on phones. !important beats the base .vo-hero-play rule,
     which is declared later in the file. */
  .vo-hero-play { bottom: calc(var(--word-h, 90px) + 132px) !important; }
}

/* ---- Mobile video facade: glass "Play" button ---- */
/* On phones the hero video does not autoplay (saves a ~11MB download and keeps
   LCP fast); the poster still shows and this button starts it on tap. Desktop
   never shows it (JS only builds it on mobile). */
.vo-hero-play {
  position: absolute;
  right: clamp(16px, 5vw, 28px);
  bottom: calc(var(--word-h, 90px) + 96px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px 10px 10px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, .42);
  background: linear-gradient(rgba(9, 34, 36, .28), rgba(9, 34, 36, .40)), rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 14px 36px -12px rgba(6, 28, 30, .55), inset 0 1px 0 rgba(255, 255, 255, .40);
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease);
}
.vo-hero-play:active { transform: scale(.97); }
.vo-hero-play.is-hidden { opacity: 0; pointer-events: none; transform: scale(.9); }
.vo-hero-play__ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.vo-hero-play__ic svg { width: 15px; height: 15px; margin-left: 1px; }
@media (min-width: 821px) { .vo-hero-play { display: none !important; } }

@media (prefers-reduced-motion: reduce) { .vo-hero-vid { display: none; } }

/* ---- HERO PLAY / PAUSE (Elementor "Show Play Button") ----
   Centred over the hero video. Size/colours are driven by widget controls, so
   the values here are only the fallback for an instance that has none set.
   NOTE: .vo-herofix is pointer-events:none (it is a fixed background layer), so
   the button must re-enable pointer events on itself to be clickable. */
.vo-heroplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: auto;
  width: 76px; height: 76px; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%;
  background: rgba(18, 53, 54, .55); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .3s var(--ease, ease), background .3s, opacity .3s; }
.vo-heroplay:hover { transform: translate(-50%, -50%) scale(1.06); }
.vo-heroplay:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.vo-heroplay__i { width: 42%; height: 42%; }
/* Show play OR pause, never both. */
.vo-heroplay .vo-heroplay__i--pause { display: none; }
.vo-heroplay.is-playing .vo-heroplay__i--play { display: none; }
.vo-heroplay.is-playing .vo-heroplay__i--pause { display: block; }
/* While playing, fade back so it never fights the hero; full opacity on hover/focus. */
.vo-heroplay.is-playing { opacity: 0; pointer-events: auto; }
.vo-hero-vidw:hover .vo-heroplay.is-playing,
.vo-heroplay.is-playing:focus-visible { opacity: 1; }
@media (hover: none) { .vo-heroplay.is-playing { opacity: .5; } }
/* Reduced-motion hides the video (line ~170), so hide its button too rather
   than leave a control floating over the still image. */
@media (prefers-reduced-motion: reduce) { .vo-heroplay { transition: none; display: none; } }