/* ============================================================
   SSN ELITE - Homepage banner slideshow (loaded after home.css)
   Desktop: slides fill the hero; headline/buttons overlay only the slides that have text on.
   Phones/tablets (<= 1024px): the slideshow is a clean 16:9 stage (videos shown WHOLE), headline sits below it.
   ============================================================ */

.hero-stage {
  position: absolute;
  top: var(--nav-height);
  left: 0;
  width: 100%;
  height: calc(100% - var(--nav-height));
  overflow: hidden;
  background: #050712;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.hero-stage:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.85); outline-offset: -6px; }

.hero-slides { position: absolute; inset: 0; }

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0s;
}

.hero-slide-media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: #050712;
}
.hero-slide[data-type="video"] .hero-slide-media { object-position: center; background: #000; }

/* Text over the banner is only for slides that have it switched on (see admin > Banner) */
.hero-banner-overlay,
.hero-banner-container { transition: opacity 0.6s ease; }

@media (min-width: 1025px) {
  .hero-banner-section[data-text="off"] .hero-banner-overlay,
  .hero-banner-section[data-text="off"] .hero-banner-container { opacity: 0; pointer-events: none; }
}

/* dots */
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 6px;
  cursor: default;
}
.hero-dots[hidden] { display: none; }
.hero-dots button {
  width: 34px;
  height: 22px;
  padding: 9px 0;
  border: 0;
  background: rgba(255, 255, 255, 0.4);
  background-clip: content-box;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.hero-dots button:hover { background-color: rgba(255, 255, 255, 0.7); }
.hero-dots button.is-active { background-color: #fff; }
.hero-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* brief play / pause feedback after a tap (not a button - it fades out by itself) */
.hero-tap-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.hero-tap-flash svg { width: 38px; height: 38px; fill: #fff; display: none; }
.hero-tap-flash[data-icon="play"] .ico-play,
.hero-tap-flash[data-icon="pause"] .ico-pause { display: block; }
.hero-tap-flash.show { animation: heroFlash 0.75s ease-out; }
@keyframes heroFlash {
  0% { opacity: 0; transform: scale(0.7); }
  25% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.25); }
}

.hero-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- phones & tablets: clean 16:9 stage, headline underneath ---- */
@media (max-width: 1024px) {
  section#hero.hero-banner-section {
    display: block;
    aspect-ratio: auto;
    min-height: 0;
    padding: var(--nav-height) 0 0;
  }
  #hero .hero-stage {
    position: relative;
    top: auto;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  #hero .hero-slide-media { object-fit: cover; object-position: center; }
  #hero .hero-slide[data-type="video"] .hero-slide-media { object-fit: contain; }   /* the whole video, never cropped */
  #hero .hero-banner-overlay { display: none; }
  #hero .hero-banner-container {
    position: relative;
    padding: var(--space-8) var(--container-padding) var(--space-10);
    opacity: 1;
    pointer-events: auto;
  }
  .hero-dots { bottom: 6px; }
  .hero-tap-flash { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .hero-tap-flash svg { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide.is-active { transition: none; }
  .hero-tap-flash.show { animation-duration: 0.01s; }
}