/* ============================================================
   Hero slider widget

   ── THIS FILE DOES NOT SET THE HERO'S HEIGHT ──

   The THEME sizes it: `body.hs-home-hero .hs-hero` cancels the 114px header
   stack with a negative margin and sets 100dvh (theme.css). Only the theme knows
   the chrome height, and the hero has to be exactly one viewport tall AND start
   at y=0 to be a full-page slider.

   Measured symptom of getting that wrong, from the prototype: the hero was 100vh
   but began below the utility bar and nav, so at 1440x900 its bottom landed at
   1014px — the primary CTA clipped by 15px and the pagination dots entirely off
   screen at 984px. A four-slide slider whose dots you cannot see does not read
   as a slider.

   What this file DOES: a sensible standalone height so the widget still looks
   right on an inner page or in the Elementor editor, where the theme's
   `.hs-home-hero` body class is absent.
   ============================================================ */

.hs-hero{
  position:relative;
  overflow:hidden;
  background:var(--hs-bg);
  /* Standalone fallback only — the theme overrides this on the home page. */
  min-height:min(86vh,720px);
  display:flex;
}

/* ---------- Slides ----------
   All stacked; opacity cross-fades between them. `visibility` is toggled with
   the opacity so a hidden slide's links are not focusable — a keyboard user
   tabbing into an invisible slide is a trap. */
.hs-hero__slide{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:flex-end;
  opacity:0;
  visibility:hidden;
  transition:opacity .9s ease,visibility .9s ease;
}
.hs-hero__slide.is-on{opacity:1;visibility:visible;z-index:2}

/* The photograph plus its scrims, behind the content.
   Two gradients, not one: the vertical pass makes cream type legible at the
   bottom and blends into the page below, the horizontal pass keeps the
   left-aligned copy readable over a busy right-hand side of the frame. */
.hs-hero__slide::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(14,15,17,.25),rgba(14,15,17,.55) 58%,var(--hs-bg)),
    linear-gradient(90deg,rgba(14,15,17,.82),transparent 62%),
    var(--hs-slide-img,none) center/cover no-repeat;
  /* Slow Ken Burns settle. Scoped to .is-on so only the visible slide animates —
     transforming four background layers at once is a lot of compositing for
     three of them nobody can see. */
  transform:scale(1.06);
  transition:transform 7s ease;
}
.hs-hero__slide.is-on::before{transform:scale(1)}

.hs-hero__in{width:100%;padding-bottom:clamp(64px,9vh,110px)}

/* ---------- Content ---------- */
.hs-hero__kick{
  font-size:clamp(20px,3vw,30px);
  font-weight:600;
  color:#fff;
  margin-bottom:6px;
}
.hs-hero__title{
  font-size:clamp(46px,8vw,104px);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin:0;
  color:var(--hs-w-heading,var(--hs-text));
}
/* The one word an editor wraps in <span> takes the accent. */
.hs-hero__title span{color:var(--hs-w-accent,var(--hs-accent))}
.hs-hero__text{
  max-width:520px;
  margin:18px 0 26px;
  font-size:17px;
  color:#d9d7d2;
}
.hs-hero__cta{display:flex;gap:14px;flex-wrap:wrap}

/* Entrance stagger. Only the active slide's children animate, and the whole
   thing is opt-out under reduced motion. */
.hs-hero__slide .hs-hero__kick,
.hs-hero__slide .hs-hero__title,
.hs-hero__slide .hs-hero__text,
.hs-hero__slide .hs-hero__cta{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease,transform .6s ease;
}
.hs-hero__slide.is-on .hs-hero__kick{opacity:1;transform:none;transition-delay:.25s}
.hs-hero__slide.is-on .hs-hero__title{opacity:1;transform:none;transition-delay:.38s}
.hs-hero__slide.is-on .hs-hero__text{opacity:1;transform:none;transition-delay:.5s}
.hs-hero__slide.is-on .hs-hero__cta{opacity:1;transform:none;transition-delay:.62s}

/* ---------- Controls ---------- */
.hs-hero__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:6;
  display:grid;
  place-items:center;
  width:52px;height:52px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.28);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  transition:background var(--hs-t),color var(--hs-t),border-color var(--hs-t);
}
.hs-hero__arrow:hover,
.hs-hero__arrow:focus-visible{
  background:var(--hs-w-accent,var(--hs-accent));
  border-color:var(--hs-w-accent,var(--hs-accent));
  color:var(--hs-accent-ink);
}
.hs-hero__arrow--prev{left:22px}
.hs-hero__arrow--next{right:22px}

.hs-hero__dots{
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  z-index:6;
  display:flex;
  gap:10px;
}
.hs-hero__dots button{
  width:40px;height:4px;
  padding:0;
  border:0;
  border-radius:2px;
  background:rgba(255,255,255,.35);
  cursor:pointer;
  transition:background .3s,width .3s;
}
.hs-hero__dots button.is-on{
  background:var(--hs-w-accent,var(--hs-accent));
  width:56px;
}
.hs-hero__dots button:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media(max-width:820px){
  /* Arrows go: they overlap the copy at this width, and swipe already works. */
  .hs-hero__arrow{display:none}
  .hs-hero__text{font-size:15.5px}
}

@media(prefers-reduced-motion:reduce){
  .hs-hero__slide,
  .hs-hero__slide::before,
  .hs-hero__slide .hs-hero__kick,
  .hs-hero__slide .hs-hero__title,
  .hs-hero__slide .hs-hero__text,
  .hs-hero__slide .hs-hero__cta{transition:none}
  .hs-hero__slide::before{transform:none}
  /* Content must still be visible with no transition to reveal it. */
  .hs-hero__slide.is-on .hs-hero__kick,
  .hs-hero__slide.is-on .hs-hero__title,
  .hs-hero__slide.is-on .hs-hero__text,
  .hs-hero__slide.is-on .hs-hero__cta{opacity:1;transform:none}
}