/* Overrides pour index2.php — slideshow header & banner */

/* ── Slider track commun ── */
.slider-track {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* ── Header slider ── */
.hero-banner,
.hero-banner-v2 {
  position: relative;
  overflow: hidden;
}

.hero-banner .slide,
.hero-banner-v2 .slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  will-change: opacity;
}

.hero-banner .slide.active,
.hero-banner-v2 .slide.active {
  opacity: 1;
}

/* ── Banner slider ── */
.banner-slider-track {
  position: absolute;
  inset: 0;
}

.banner-slider-track .mario-banner-img.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  will-change: opacity;
}

.banner-slider-track .mario-banner-img.slide.active {
  opacity: 0.9;
}

/* Mobile/desktop track switching */
.mob-track { display: none; }

@media (max-width: 768px) {
  .desk-track { display: none; }
  .mob-track  { display: block; }

  .hero-banner-v2 .slide {
    background-position: center 35%;
  }
  .banner-slider-track .mario-banner-img.slide {
    object-position: 30% 15%;
  }
}

@media (max-width: 480px) {
  .banner-slider-track .mario-banner-img.slide {
    object-position: 30% 10%;
  }
}