/* =========================================================================
   ISON Travel — hero override
   The ONLY departure from the original theme styling. Everything below the
   hero is the site's own markup and CSS, untouched.

   Loaded after style.css so it layers on top. Maps to one Etch section.
   ========================================================================= */

/* Bariol (the brand title face) was not included in the page save and the
   staging site is access-restricted, so it cannot be fetched. Quicksand Light
   is the closest free stand-in and is appended as a FALLBACK only — the moment
   real Bariol webfont files exist, they win and this line does nothing. */
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap");

:root{
  --hero-gold:#ae9064;
  --hero-ease:cubic-bezier(.22,.61,.36,1);
}
body{ --font-titles:"Bariol","Quicksand",var(--wp--preset--font-family--titles); }

/* ---------- Header sits over the video -------------------------------- */
body.home .site-header,
body.home #masthead{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:transparent;
  transition:background .4s var(--hero-ease),backdrop-filter .4s var(--hero-ease);
}
body.home.has-scrolled .site-header,
body.home.has-scrolled #masthead{
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(14px);
}

/* ---------- Hero ------------------------------------------------------- */
.hero{
  position:relative;
  min-height:92svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 clamp(1.25rem,4vw,4.5rem) clamp(2.5rem,5vw,4.5rem);
  margin:0;
  overflow:hidden;
  isolation:isolate;
  background:#000;
}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media video,
.hero__media img{width:100%;height:100%;object-fit:cover;display:block}

/* Grade the clip down rather than flattening it with one opaque overlay,
   so the sun still reads through. */
.hero__media video{filter:saturate(.88) contrast(1.04) brightness(.82)}

/* Two-part scrim: bottom-weighted ramp carries the copy, lighter top ramp
   keeps the fixed header legible against the sky. */
.hero__scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 22%,rgba(0,0,0,.28) 48%,rgba(0,0,0,0) 72%),
    linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 26%);
}

.hero__inner{
  width:100%;max-width:1600px;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;gap:2rem clamp(2rem,5vw,5rem);
}
.hero h1{
  font-family:var(--font-titles);
  font-weight:300;
  font-size:clamp(2.75rem,6.2vw,6.5rem);
  line-height:1.04;
  letter-spacing:-0.03em;
  color:#fff;
  margin:0 0 clamp(1.25rem,2vw,1.75rem);
  max-width:14ch;
  text-wrap:balance;
}
.hero__rule{
  display:block;width:clamp(56px,7vw,110px);height:2px;
  background:var(--hero-gold);
  margin-bottom:clamp(1.25rem,2.4vw,2rem);
}
.hero__support{
  max-width:52ch;margin:0;
  font-size:clamp(1.05rem,1.35vw,1.4rem);
  line-height:1.5;
  color:rgba(255,255,255,.86);
}
.hero__hl{color:var(--hero-gold)}

/* Scroll cue */
.hero__cue{
  display:inline-flex;flex-direction:column;align-items:center;gap:.9rem;
  font-size:.8125rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.8);white-space:nowrap;
  text-decoration:none;padding-bottom:.25rem;
}
.hero__cue-dot{
  width:2.75rem;height:2.75rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  display:grid;place-items:center;
  transition:background .35s var(--hero-ease),border-color .35s var(--hero-ease),transform .35s var(--hero-ease);
}
.hero__cue:hover .hero__cue-dot{background:var(--hero-gold);border-color:var(--hero-gold);transform:translateY(3px)}
.hero__cue-dot svg{width:14px;height:14px;animation:hero-nudge 2.4s var(--hero-ease) infinite}
@keyframes hero-nudge{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(4px)}}

@media (max-width:700px){
  .hero{min-height:88svh}
  .hero__inner{grid-template-columns:1fr}
  .hero h1{max-width:100%}
  .hero__cue{flex-direction:row;gap:.75rem;align-self:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .hero__cue-dot svg{animation:none}
}