/* Homepage hero carousel (2026-10).
   Own file, not new-style.css: /css/* is served immutable for a year, so changes
   to an existing filename never reach returning visitors. Rename on the next change. */

/* new-style.css forces .hero-bg to 16:6 on small screens (sized for the old cropped
   banner). The slides set their own ratio, so the wrapper must follow them. */
.hero-carousel.hero-bg {
  aspect-ratio: auto;
}

.hero-carousel .hero-slides {
  position: relative;
  width: 100%;
  aspect-ratio: 2000 / 525;
  overflow: hidden;
  background: #0b1f4d;
}

.hero-carousel .hero-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}

.hero-carousel .hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease, visibility 0s;
  z-index: 1;
}

.hero-carousel .hero-slide picture,
.hero-carousel .hero-bg-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Dots only work once the script has started; without JS the first slide stands alone. */
.hero-carousel:not(.is-ready) .slider-indicators {
  display: none;
}

.hero-carousel .slider-indicators {
  z-index: 2;
}

.hero-carousel.is-paused .indicator.active::before {
  animation-play-state: paused;
}

@media (max-width: 768px) {
  .hero-carousel .hero-slides {
    aspect-ratio: 1080 / 312;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel .hero-slide,
  .hero-carousel .hero-slide.is-active {
    transition: none;
  }

  .hero-carousel .indicator.active::before {
    animation: none;
  }
}