/* =====================================================================
   NEW FILE — Hero slider for jv-bangles.php (replaces the old .jb-hero)
   Loaded after collection.css; reuses its .crumbs, .jb-kicker, .jb-hero-title, .jb-hero-text,
   .jb-hero-actions, .jb-ordinal and .jb-count styles, and styles.css tokens/buttons
   (--navy, --gold, --gold-line, --gold-tex, --serif, --sans, .btn-gold, .btn-line, .gold-text).
   Behaviour: assets/js/hero-slider.js
   ===================================================================== */
.hs{
  --hs-pad:max(clamp(20px,4vw,40px),calc((100vw - 1457px)/2));   /* lines the copy up with .wrap */
  --hs-fade:.7s;
  position:relative;background:var(--navy);border-bottom:2px solid var(--gold-line);overflow:hidden;isolation:isolate
}

/* ---------- Breadcrumb (constant across slides) ---------- */
.hs-crumbs{position:absolute;top:clamp(22px,2.6vw,40px);left:var(--hs-pad);z-index:3}
.hs-crumbs ol{margin:0}

/* ---------- Track: every slide sits in the same grid cell, so the hero takes the tallest slide's height ---------- */
.hs-track{display:grid}
.hs-slide{
  grid-area:1/1;position:relative;display:flex;align-items:center;min-height:clamp(540px,46vw,720px);
  opacity:0;visibility:hidden;transition:opacity var(--hs-fade) ease,visibility 0s linear var(--hs-fade)
}
.hs-slide.is-active{z-index:1;opacity:1;visibility:visible;transition:opacity var(--hs-fade) ease,visibility 0s}

/* Photo: right-hand 76% on desktop, blended into the navy panel */
.hs-media{position:absolute;inset:0 0 0 auto;width:76%;margin:0;overflow:hidden}
.hs-media img{display:block;width:100%;height:100%;object-fit:cover}

/* Readability overlay: navy fade from the left + a light darkening at the bottom for the controls */
.hs-slide::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,var(--navy) 0%,var(--navy) 24%,rgba(19,39,63,.88) 34%,rgba(19,39,63,.45) 50%,rgba(19,39,63,0) 66%),
    linear-gradient(0deg,rgba(14,31,51,.55) 0%,rgba(14,31,51,0) 26%)
}

/* Copy (left-aligned on every slide) */
.hs-copy{position:relative;z-index:2;padding:clamp(96px,8vw,124px) clamp(20px,4vw,48px) clamp(116px,9vw,140px) var(--hs-pad)}
.hs-inner{position:relative;z-index:1;max-width:560px}
.hs-title{font-size:clamp(40px,4.4vw,74px);text-shadow:0 2px 18px rgba(6,14,26,.25)}
.hs .jb-ordinal{top:clamp(40px,4vw,70px);right:clamp(-40px,-2vw,0px)}

/* ---------- Controls: count · dots · pause ………… prev / next ---------- */
.hs-controls{position:absolute;left:var(--hs-pad);right:var(--hs-pad);bottom:clamp(20px,2.4vw,34px);z-index:3;display:flex;align-items:center;gap:clamp(12px,1.6vw,22px)}
.hs-count{flex:none}
.hs-dots{display:flex;gap:4px}
/* 44px-tall hit area, slim bar drawn inside */
.hs-dot{position:relative;width:36px;height:44px;padding:0;background:none;cursor:pointer;transition:width .35s ease}
.hs-dot::before{content:"";position:absolute;left:4px;right:4px;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:rgba(255,255,255,.38);transition:background-color .35s ease}
.hs-dot[aria-current="true"]{width:52px}
.hs-dot[aria-current="true"]::before{background:var(--gold) var(--gold-tex) center/cover}
.hs-pause{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 6px;background:none;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-on-navy,#9fb0c6);cursor:pointer}
.hs-pause-ico{position:relative;width:10px;height:12px}
.hs-pause-ico::before,.hs-pause-ico::after{content:"";position:absolute;top:0;width:3px;height:12px;background:currentColor}
.hs-pause-ico::before{left:0}.hs-pause-ico::after{right:0}
.hs-pause[aria-pressed="true"] .hs-pause-ico::before{left:1px;width:0;height:0;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.hs-pause[aria-pressed="true"] .hs-pause-ico::after{display:none}
.hs-arrows{display:flex;gap:12px;margin-left:auto}
.hs-arrow{display:grid;place-items:center;width:52px;height:52px;padding:0;border-radius:50%;border:1px solid rgba(214,179,116,.7);background:rgba(19,39,63,.55);color:var(--gold);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .25s,color .25s,border-color .25s}
.hs-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Keyboard focus: clearly visible on navy and on the photo */
.hs-dot:focus-visible,.hs-arrow:focus-visible,.hs-pause:focus-visible,.hs .btn:focus-visible,.hs-crumbs a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.hs-arrow:focus-visible{border-radius:50%}

@media (hover:hover){
  .hs-arrow:hover{background:var(--gold) var(--gold-tex) center/cover;border-color:transparent;color:var(--navy)}
  .hs-dot:not([aria-current="true"]):hover::before{background:rgba(255,255,255,.7)}
  .hs-pause:hover{color:var(--gold)}
}
@media (prefers-reduced-motion:no-preference){
  /* Photo: softly cross-fades over the outgoing one (no coloured strip or dark gap), then slowly settles */
  .hs-slide.is-active .hs-media{animation:hs-photo-in 1.1s ease both}
  /* No dark flash: the outgoing photo stays fully visible underneath until the new one has faded in over it;
     only its text fades out straight away */
  .hs-slide{transition:opacity 0s linear 1.1s,visibility 0s linear 1.1s}
  .hs-slide.is-active{transition:none}
  .hs-slide .hs-copy{transition:opacity .35s ease}
  .hs-slide:not(.is-active) .hs-copy{opacity:0}
  .hs-slide.is-active .hs-media img{animation:hs-settle 6.5s cubic-bezier(.2,.7,.2,1) both}
  @keyframes hs-photo-in{from{opacity:0}to{opacity:1}}
  @keyframes hs-settle{from{transform:scale(1.12)}to{transform:none}}

  /* Copy: eyebrow, title, text and buttons rise in one after another */
  .hs-slide.is-active .hs-inner > *{animation:hs-rise .9s cubic-bezier(.2,.7,.2,1) both}
  .hs-slide.is-active .hs-inner > :nth-child(1){animation-delay:.35s}
  .hs-slide.is-active .hs-inner > :nth-child(2){animation-delay:.5s}
  .hs-slide.is-active .hs-inner > :nth-child(3){animation-delay:.65s}
  .hs-slide.is-active .hs-inner > :nth-child(4){animation-delay:.8s}
  .hs-slide.is-active .jb-ordinal{animation:hs-ordinal 1.2s cubic-bezier(.2,.7,.2,1) .3s both}
  @keyframes hs-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
  @keyframes hs-ordinal{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:none}}

  /* Active dot fills up as a countdown to the next slide (freezes while paused) */
  .hs-dot::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:#fff;transform:scaleX(0);transform-origin:left;opacity:0}
  .hs-dot[aria-current="true"]::before{background:rgba(214,179,116,.45)}
  .hs-dot[aria-current="true"]::after{opacity:1;background:var(--gold) var(--gold-tex) center/cover}
  .hs:not(.is-playing) .hs-dot[aria-current="true"]::after{transform:scaleX(1)}   /* paused: solid bar */
  .hs.is-playing .hs-dot[aria-current="true"]::after{animation:hs-progress var(--hs-interval,5000ms) linear both}
  @keyframes hs-progress{to{transform:scaleX(1)}}
}
@media (prefers-reduced-motion:reduce){
  .hs{--hs-fade:0s}
  .hs-dot,.hs-dot::before{transition:none}
}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .hs-slide{min-height:clamp(540px,68vw,660px)}
  .hs-media{width:100%}
  .hs-media img{object-position:20% 50% !important}   /* nudge the jewellery right, away from the copy */
  .hs-slide::before{
    background:
      linear-gradient(90deg,rgba(19,39,63,.95) 0%,rgba(19,39,63,.82) 38%,rgba(19,39,63,.3) 64%,rgba(19,39,63,0) 86%),
      linear-gradient(0deg,rgba(14,31,51,.6) 0%,rgba(14,31,51,0) 30%)
  }
  .hs .jb-ordinal{display:none}
}

/* ---------- Mobile: photo on top, copy below on navy (overlapping the photo's faded edge) ---------- */
@media (max-width:700px){
  .hs-crumbs{position:static;padding:16px clamp(20px,4vw,40px) 14px}
  .hs-crumbs ol{font-size:12px}
  .hs-slide{display:block;min-height:0}
  .hs-slide::before{display:none}
  .hs-media{position:relative;inset:auto;width:100%;aspect-ratio:4/3}
  .hs-media img{object-position:50% 50% !important}
  .hs-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--navy) 0%,rgba(19,39,63,.6) 22%,rgba(19,39,63,0) 48%);pointer-events:none}
  .hs-copy{margin-top:-56px;padding:0 clamp(20px,4vw,40px) 96px}
  .hs-title{font-size:clamp(34px,10vw,44px)}
  .hs .jb-hero-text{font-size:16px;margin-top:16px}
  .hs .jb-hero-actions{margin-top:26px}
  .hs-controls{bottom:20px;gap:8px;right:72px}   /* clears the site's fixed scroll button */
  .hs-count{display:none}
  .hs-pause-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hs-arrows{gap:8px}
  .hs-arrow{width:44px;height:44px}
}