/* Desktop hero fade carousel (replaces the old Slick-driven fade)
   Applies only to the three ".slide-lg" slides (slide-one/two/three).
   If styles.css already defines conflicting rules for these same
   classes, those may need to be removed — this file is written to be
   self-contained so it works whether or not that cleanup happens. */

.slide-lg {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Reserve the hero's aspect ratio (1903 x 475) so nothing jumps
   as slides fade, and so there's no layout shift before JS runs. */
.slide-lg::before {
  content: "";
  display: block;
  padding-top: 24.96%; /* 475 / 1903 */
}

.slide-lg > .slide-one,
.slide-lg > .slide-two,
.slide-lg > .slide-three {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out;
}

.slide-lg > .slide-one img,
.slide-lg > .slide-two img,
.slide-lg > .slide-three img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.slide-lg > .slide-one .caption,
.slide-lg > .slide-two .caption,
.slide-lg > .slide-three .caption {
  position: relative;
  z-index: 2;
}

/* Fallback so a slide is visible even before JS runs (or if it fails
   to load) — JS takes over from here via the .hero-slide-active class */
.slide-lg > .slide-one:not(.hero-slide-active-managed) {
  opacity: 1;
  visibility: visible;
}

.slide-lg > .hero-slide-active {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .slide-lg > .slide-one,
  .slide-lg > .slide-two,
  .slide-lg > .slide-three {
    transition: none;
  }
}