/* ════════════════════════════════════════════════════════════════
 * HERO CAROUSEL
 * Adds carousel navigation (arrows + bullets) on top of the existing
 * .hero / .hero-bg / .hero-content styles in style.css.
 *
 * NOTE: We use Swiper-style class names (.swiper, .swiper-wrapper,
 * .swiper-slide) but we DO NOT load Swiper itself. The carousel is
 * powered by a small custom script in assets/js/hero-carousel.js,
 * and slide transitions are pure CSS opacity fades.
 * ════════════════════════════════════════════════════════════════ */

/* The carousel root fills the hero area. */
.hero-carousel .hero-swiper {
  position: relative;
  width: 100%;
  height: 100%;
  align-self: stretch;
  overflow: hidden;
}

/* Multi-slide carousel: kill the .hero padding so slides own the full bleed.
   Slides re-apply the original .hero padding internally. */
.hero-carousel.hero-carousel--multi {
  padding: 0;
}
.hero-carousel.hero-carousel--multi .hero-swiper,
.hero-carousel.hero-carousel--multi .swiper-wrapper {
  position: absolute;
  inset: 0;
  height: 100%;
}

/* Layout rules shared by both solo and carousel slides — reproduces the
   original .hero padding so text alignment matches the legacy hero. */
.hero-carousel .hero-slide {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: clamp(100px, 10vw, 140px) 48px clamp(80px, 8vw, 120px);
  overflow: hidden;
  box-sizing: border-box;
}

/* Solo (non-carousel) hero: slide flows in document order. */
.hero-carousel--single .hero-slide {
  position: relative;
}

/* Carousel mode: stack ALL slides absolutely on top of each other; only the
   .is-active slide is visible (others fade out via opacity). The double
   class selector (.swiper-slide.hero-slide) wins specificity over the base
   .hero-slide rule above. */
.hero-carousel--multi .swiper-slide.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms ease;
  z-index: 1;
}
.hero-carousel--multi .swiper-slide.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.hero-carousel .hero-slide .hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center center;
}

.hero-carousel .hero-slide .hero-video {
  position: absolute; top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* Re-apply the dark gradient overlay that the legacy hero used. */
.hero-carousel .hero-slide .hero-bg::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(17,17,17,0.15) 0%, rgba(17,17,17,0.4) 40%, rgba(17,17,17,0.85) 100%),
    linear-gradient(135deg, rgba(34,34,34,0.5) 0%, transparent 60%);
}

/* ── Arrows ─────────────────────────────────────────────────── */
.hero-swiper-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 17, 17, 0.45);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.hero-swiper-arrow:hover,
.hero-swiper-arrow:focus-visible {
  background: var(--brand-2, #f2e307);
  color: #111;
  outline: none;
}
.hero-swiper-arrow:focus-visible {
  box-shadow: 0 0 0 3px rgba(242, 227, 7, 0.45);
}
.hero-swiper-arrow--prev { left: clamp(12px, 2vw, 28px); }
.hero-swiper-arrow--next { right: clamp(12px, 2vw, 28px); }

/* ── Pagination bullets ─────────────────────────────────────── */
.hero-swiper-pagination {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(20px, 3vw, 36px);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none; /* let bullets opt-in to clicks individually */
}

.hero-swiper-bullet {
  pointer-events: auto;
  display: inline-block;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand-2, #f2e307);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.hero-swiper-bullet:hover {
  opacity: 0.8;
}
.hero-swiper-bullet--active {
  opacity: 1;
  transform: scale(1.15);
}
.hero-swiper-bullet:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 227, 7, 0.5);
}

/* ── Mobile tweaks ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-swiper-arrow {
    width: 42px;
    height: 42px;
  }
  .hero-carousel .hero-slide {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-carousel--multi .swiper-slide.hero-slide,
  .hero-swiper-bullet,
  .hero-swiper-arrow {
    transition: none !important;
  }
}