/* ============================================================
   CAROUSEL JERK FIX — paste at very bottom of style.css
   Fixes: page jump on slide change + carousel invisible on mobile
   ============================================================ */

/* ── DESKTOP: fixed height container, all slides absolute ── */
.hero,
.hero-carousel {
  position: relative !important;
  height: calc(100vh - 88px) !important;
  min-height: 600px !important;
  overflow: hidden !important;
}

/* ALL slides stay absolute ALWAYS — never switch to relative */
.hero-slide,
.hero-slide.active {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Inactive */
.hero-slide {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.85s ease !important;
  will-change: opacity !important;
  transform: translateZ(0) !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Active — only opacity changes, ZERO layout change */
.hero-slide.active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* hero-inner fills the slide */
.hero-inner {
  height: 100% !important;
  min-height: unset !important;
}

/* ── MOBILE: hero needs a real height so slides are visible ── */
@media (max-width: 820px) {
  .hero,
  .hero-carousel {
    /* auto height — driven by inner content */
    height: auto !important;
    min-height: auto !important;
  }

  /* On mobile slides can't be absolute with auto-height parent  */
  /* Switch to relative flow — but use a SPACER trick so no reflow */
  .hero-slide {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
  }

  /* The active slide drives the height via this wrapper */
  .hero-carousel {
    /* Give carousel a fixed mobile height so slides are visible */
    height: 85vh !important;
    min-height: 520px !important;
    max-height: 820px !important;
  }

  .hero {
    height: 85vh !important;
    min-height: 520px !important;
    max-height: 820px !important;
  }

  .hero-inner {
    height: 100% !important;
    min-height: unset !important;
    padding: 48px 20px 80px !important;
    grid-template-columns: 1fr !important;
    align-content: center !important;
  }

  /* iOS Safari: fixed attachment causes white flash */
  .hero-slide {
    background-attachment: scroll !important;
    background-position: center 30% !important;
  }
}

/* ── Extra small phones ── */
@media (max-width: 480px) {
  .hero,
  .hero-carousel {
    height: 90vh !important;
    min-height: 480px !important;
  }
}