/* =========================================================
  hero.css – Full-bleed auto sliding background images
   ========================================================= */

.sb-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--sb-primary-dark);
  min-height: calc(100vh - var(--sb-top-banner-h) - var(--sb-navbar-h));
}

.sb-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -1;
  opacity: 0;
  animation: sbHeroBgSlide 12s infinite ease-in-out;
}

.sb-hero__bg--1 {
  background-image: var(--sb-hero-bg-1);
  animation-delay: 0s;
}

.sb-hero__bg--2 {
  background-image: var(--sb-hero-bg-2);
  animation-delay: 4s;
}

.sb-hero__bg--3 {
  background-image: var(--sb-hero-bg-3);
  animation-delay: 8s;
  background-size: cover;
  background-position: center center;
}

@keyframes sbHeroBgSlide {
  0%,
  8% {
    opacity: 0;
  }
  16%,
  33% {
    opacity: 1;
  }
  42%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .sb-hero {
    min-height: 0;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .sb-hero__bg,
  .sb-hero__bg--3 {
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
}