/* ================= HERO CAROUSEL ================= */
.hero-carousel{
  width:100%;
  height:75vh;
  min-height:420px;
  position:relative;
  overflow:hidden;

  /* 🔥 prevents gap under sticky header */
  margin-top:-1px;
}

/* WRAPPER */
.carousel-wrapper{
  width:100%;
  height:100%;
  position:relative;
}

/* SLIDES */
.carousel-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 0.6s ease-in-out;
  will-change:opacity;
}

.carousel-slide.active{
  opacity:1;
  z-index:1;
}

/* IMAGES */
.carousel-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ARROWS */
.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.55);
  color:#fff;
  border:none;
  width:48px;
  height:48px;
  font-size:26px;
  border-radius:50%;
  cursor:pointer;
  z-index:10;
}

.carousel-btn.prev{ left:16px; }
.carousel-btn.next{ right:16px; }

/* ================= MOBILE OPTIMIZATION ================= */
@media (max-width:768px){

  /* 🔥 REDUCE SPACE BELOW HEADER */
  .hero-carousel{
    height:45vh;
    min-height:240px;
    margin-top:-8px;  /* 🔥 FIXED GAP */
  }

  .carousel-slide img{
    object-fit:contain;
  }

  .carousel-btn{
    width:40px;
    height:40px;
    font-size:22px;
  }
}

/* ================= ACCESSIBILITY ================= */
@media (prefers-reduced-motion: reduce){
  .carousel-slide{
    transition:none;
  }
}