/**
 * Hero Slider — GSAP edition
 * CSS handles layout and dots only.
 * Opacity + z-index are owned entirely by GSAP (inline styles).
 */

/* ── Variables ──────────────────────────────────────────────────────────── */
.hero-slider {
  --slider-dot-size      : 10px;
  --slider-dot-gap       : 10px;
  --slider-dot-color     : rgba(255, 255, 255, 0.45);
  --slider-dot-active    : #ffffff;
  --slider-dot-bottom    : clamp(18px, 3vw, 32px);
  --slider-dot-border    : 2px solid rgba(255, 255, 255, 0.6);
}

/* ── Container ──────────────────────────────────────────────────────────── */
.hero-slider {
  display    : grid;
  position   : relative;
  overflow   : hidden;
  width      : 100%;
}

/* ── Slides ─────────────────────────────────────────────────────────────── */
/*
 * Layout only — GSAP sets opacity / z-index / pointer-events via inline styles.
 * Do NOT add transition or opacity here; it would fight with GSAP.
 */
.hero-slider > .wp-block-cover {
  grid-area : 1 / 1; /* stack all slides in the same cell */
}

/* Mobile minimum height */
@media (max-width: 600px) {
  .hero-slider > .wp-block-cover {
    min-height : 260px;
  }
}

/* ── Dot navigation ─────────────────────────────────────────────────────── */
.hero-slider__dots {
  position       : absolute;
  bottom         : var(--slider-dot-bottom);
  left           : 50%;
  transform      : translateX(-50%);
  display        : flex;
  align-items    : center;
  gap            : var(--slider-dot-gap);
  z-index        : 10;
}

.hero-slider__dot {
  width              : var(--slider-dot-size);
  height             : var(--slider-dot-size);
  border-radius      : 50%;
  background         : var(--slider-dot-color);
  border             : var(--slider-dot-border);
  padding            : 0;
  cursor             : pointer;
  transition         : background 0.3s ease, transform 0.3s ease;
  appearance         : none;
  -webkit-appearance : none;
  outline            : none;
}

.hero-slider__dot:hover {
  background : rgba(255, 255, 255, 0.75);
  transform  : scale(1.2);
}

.hero-slider__dot.is-active {
  background   : var(--slider-dot-active);
  transform    : scale(1.25);
  border-color : #ffffff;
}

.hero-slider__dot:focus-visible {
  outline        : 2px solid #ffffff;
  outline-offset : 3px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-slider {
    --slider-dot-size   : 9px;
    --slider-dot-gap    : 9px;
    --slider-dot-bottom : 20px;
  }
}

@media (max-width: 600px) {
  .hero-slider {
    --slider-dot-size   : 8px;
    --slider-dot-gap    : 8px;
    --slider-dot-bottom : 14px;
  }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
/*
 * GSAP natively respects prefers-reduced-motion when using gsap.matchMedia().
 * As a CSS-side safety net, dot transitions are also disabled.
 */
@media (prefers-reduced-motion: reduce) {
  .hero-slider__dot {
    transition : none;
  }
}