/* Hero slider height is driven entirely by the banners' own aspect
   ratio (1920x850, ~2.259:1 - see the width/height attributes on the
   <img> in section-hero-slider.php, the real source dimensions) rather
   than any viewport-height or fixed-pixel value. That's a deliberate
   choice: the banners are flat promotional images with their headline/
   CTA baked directly into the artwork, not photos with room to crop -
   any height forced independently of the image's own ratio (100vh on
   desktop, a fixed rem value on mobile, tried both) has to fall back to
   object-fit: cover or contain to reconcile the mismatch, which either
   crops that baked-in text/CTA (cover) or leaves visible letterboxing
   around it (contain). Sizing the box from the ratio itself needs
   neither - the image always fills its box exactly, at every viewport
   width, with zero cropping and zero empty space, and the resulting
   height (viewport width / 2.259) simply scales down smoothly from large
   monitors to small phones the same way any responsive banner does. */
.hs-hero-slider {
  position: relative;
}

.hs-hero-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.hs-hero-slider__track::-webkit-scrollbar {
  display: none;
}

.hs-hero-slider__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

.hs-hero-slider__slide picture {
  display: block;
  width: 100%;
}

.hs-hero-slider__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 850;
}

.hs-hero-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--hs-radius-full);
  background: rgba(255, 255, 255, .85);
  color: var(--hs-color-gray-900);
  box-shadow: var(--hs-shadow-medium);
  transition: background-color var(--hs-transition-fast) var(--hs-ease);
}
.hs-hero-slider__nav:hover {
  background: #fff;
}
.hs-hero-slider__nav--prev {
  inset-inline-start: var(--hs-space-16);
}
.hs-hero-slider__nav--next {
  inset-inline-end: var(--hs-space-16);
}

/* Physical, not logical: the icon itself must flip in RTL (an arrow
   pointing "back" points right in RTL, left in LTR) while the *button*
   stays in its inline-start/end slot above. */
:root[dir="rtl"] .hs-hero-slider__nav svg {
  transform: scaleX(-1);
}

.hs-hero-slider__dots {
  position: absolute;
  bottom: var(--hs-space-20);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: var(--hs-space-8);
}

.hs-hero-slider__dot {
  width: .5rem;
  height: .5rem;
  border-radius: var(--hs-radius-full);
  background: rgba(255, 255, 255, .6);
  transition: background-color var(--hs-transition-fast) var(--hs-ease),
    width var(--hs-transition-fast) var(--hs-ease);
}
.hs-hero-slider__dot.is-active {
  width: 1.5rem;
  background: #fff;
}

@media (max-width: 48rem) {
  .hs-hero-slider__nav {
    width: 2.25rem;
    height: 2.25rem;
  }
}