/* Optional campaign frames — visitor-controlled and motion-safe. */
[data-media-carousel] { position: relative; }

#home .explore-teaser-media { display: block; position: relative; overflow: hidden; min-height: 0; background: var(--lve-surface, #f1f3f5); }
#home .explore-teaser-media .media-carousel__stage { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; border-radius: inherit; }
#home .explore-teaser-media .media-carousel__stage > img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 52%; opacity: 0; transform: scale(1.015);
  transition: opacity 360ms ease-out, transform 360ms ease-out;
}
#home .explore-teaser-media .media-carousel__stage > img.is-active { opacity: 1; transform: none; }

/* The Explore carousel is media, not an inset card. This final geometry guard
   neutralises earlier editorial experiments that left a pale strip beside it. */
#home .explore-teaser-media {
  padding: 0 !important;
}

#home .explore-teaser-media::before {
  display: none !important;
  content: none !important;
}

#home .explore-teaser-media .media-carousel__stage {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#home .explore-teaser-media .media-carousel__stage > img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}

.media-carousel__controls, .hero-carousel-controls { display: inline-flex; align-items: center; gap: 2px; }
.media-carousel__controls { position: absolute; z-index: 4; right: 18px; bottom: 18px; }
.media-carousel__controls button, .hero-carousel-controls button {
  position: relative; width: 44px; height: 44px; margin: 0; padding: 0; border: 0;
  border-radius: 999px; background: transparent; cursor: pointer; touch-action: manipulation;
}
.media-carousel__controls button::after, .hero-carousel-controls button::after {
  position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; content: "";
  border: 1px solid rgba(255, 255, 255, .88); border-radius: 999px; background: rgba(10, 11, 13, .42);
  transform: translate(-50%, -50%); transition: transform 180ms ease-out, background-color 180ms ease-out, border-color 180ms ease-out;
}
.media-carousel__controls button.is-active::after, .hero-carousel-controls button.is-active::after { border-color: #e5bd3e; background: #e5bd3e; transform: translate(-50%, -50%) scaleX(2.65); }
.media-carousel__controls button:focus-visible, .hero-carousel-controls button:focus-visible, .media-carousel__toggle:focus-visible { outline: 2px solid #e5bd3e; outline-offset: 2px; }
.media-carousel__toggle {
  position: relative; display: grid; width: 44px; height: 44px; margin: 0 0 0 2px; padding: 0;
  place-items: center; border: 0; border-radius: 999px; color: rgba(255, 255, 255, .88);
  background: transparent; cursor: pointer; font: 700 12px/1 system-ui, sans-serif; touch-action: manipulation;
}

.hero-carousel { position: absolute; z-index: -3; inset: 0; }
.hero-carousel .hero-media { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 360ms ease-out; }
.hero-carousel .hero-media.is-active { opacity: 1; }
.hero-carousel .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; }
.hero-carousel-controls { position: absolute; z-index: 2; right: clamp(24px, 5vw, 72px); bottom: clamp(26px, 4vw, 54px); }
.hero-carousel-toggle { right: clamp(84px, calc(5vw + 62px), 134px); bottom: clamp(26px, 4vw, 54px); }

@media (max-width: 680px) {
  #home .explore-teaser-media .media-carousel__stage > img { object-position: 58% center; }
  .hero-carousel .hero-media:nth-child(2) img { object-position: 62% center; }
}

@media (prefers-reduced-motion: reduce) {
  #home .explore-teaser-media .media-carousel__stage > img, .hero-carousel .hero-media,
  .media-carousel__controls button::after, .hero-carousel-controls button::after { transition: none; }
}