/* ============================================================================
   HIGHLAND VAULT — PROMO BANNER SLIDER

   Chrome ONLY. Every rule here is on .hv-promo-slider__* — nothing touches
   .hv-promo, so a banner looks identical whether it is alone on the page or
   sitting in a track with four others. That is the whole point of the split:
   the design was signed off, this file only moves it sideways.

   Loaded exclusively when there are TWO OR MORE banners. One banner renders
   the bare .hv-promo and this file is never enqueued.

   Heights: all slides live in one flex row, so the row is as tall as the
   tallest banner. Use the same aspect ratio for every banner image (the admin
   says so too) and they line up exactly.
   ========================================================================== */

.hv-promo-slider {
  position: relative;
  /* .hv-promo carries the bottom margin; the slider owns the spacing instead
     so the dots sit inside the gap rather than adding a second one. */
  margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}

/* The window. overflow-x clips the off-screen slides; overflow-y stays visible
   so the card's hover lift and focus ring are not sliced off at the top. */
.hv-promo-slider__viewport {
  overflow-x: clip;
  overflow-y: visible;
  /* clip has no fallback in older Safari — hidden is the graceful degrade. */
  overflow: hidden;
  border-radius: var(--hv-promo-radius, 16px);
}
@supports (overflow: clip) {
  .hv-promo-slider__viewport {
    overflow-x: clip;
    overflow-y: visible;
  }
}

.hv-promo-slider__track {
  display: flex;
  align-items: flex-start;
  /* Transform only — never animating width or left, so no reflow per frame. */
  will-change: transform;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
/* While a finger or mouse is down the track must track the pointer exactly,
   so the easing is dropped for the duration of the drag. */
.hv-promo-slider.is-dragging .hv-promo-slider__track {
  transition: none;
}

.hv-promo-slider__slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
}

/* The banner's own bottom margin would push the dots too far down inside the
   slider, where the slider is already providing the spacing. */
.hv-promo-slider__slide > .hv-promo {
  margin-bottom: 0;
}

/* A drag must not also open the banner it finished on. The JS suppresses the
   click, this stops the link highlighting mid-gesture. */
.hv-promo-slider.is-dragging .hv-promo__link {
  pointer-events: none;
}
/* ...and a slide the viewer cannot see must not be reachable by Tab. */
.hv-promo-slider__slide[aria-hidden="true"] a,
.hv-promo-slider__slide[aria-hidden="true"] button {
  visibility: hidden;
}

/* ---- dots ---------------------------------------------------------------- */

.hv-promo-slider__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.hv-promo-slider__dot {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  /* Tinted from the BRAND BLUE, not from a foreground/text colour. The banner
     sits on the page ground, which is white on the home page and near-black
     elsewhere — a white-tinted dot vanishes on the first and a dark one
     vanishes on the second. A mid-tone blue is legible on both, and it is the
     only choice that does not need the surface to be known.

     Elementor's global kit styles bare `button` at a higher specificity than a
     lone class, so every state is pinned here — the same pink-on-hover trap
     the draw cards and the reviews rail hit. */
  background: rgba(var(--hv-primary-rgb, 6, 91, 224), .4) !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: background .25s ease, width .25s ease, transform .25s ease;
}
.hv-promo-slider__dot:hover,
.hv-promo-slider__dot:focus,
.hv-promo-slider__dot:active {
  background: rgba(var(--hv-primary-rgb, 6, 91, 224), .6) !important;
  border: 0 !important;
}
.hv-promo-slider__dot:focus-visible {
  outline: 2px solid var(--hv-primary, #2E6FF2);
  outline-offset: 3px;
}
.hv-promo-slider__dot.is-active,
.hv-promo-slider__dot.is-active:hover,
.hv-promo-slider__dot.is-active:focus {
  /* The active dot stretches into a pill rather than just changing colour, so
     it reads at a glance without relying on hue alone. */
  width: 26px;
  border-radius: 999px;
  background: var(--hv-primary, #2E6FF2) !important;
}

@media (max-width: 480px) {
  .hv-promo-slider__dots { margin-top: 11px; gap: 7px; }
  .hv-promo-slider__dot { width: 8px; height: 8px; }
  .hv-promo-slider__dot.is-active { width: 22px; }
}

/* ---- reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .hv-promo-slider__track { transition: none; }
  .hv-promo-slider__dot { transition: none; }
}