/* =========================================================
   HERO FINAL OVERRIDE (LOCKED) — targets #heroCarousel
   Put this AFTER bootstrap + style.css
   ========================================================= */

#heroCarousel,
#heroCarousel .carousel-inner,
#heroCarousel .carousel-item{
  position: relative !important;
  width: 100% !important;
  height: 78vh !important;
  min-height: 520px !important;
  overflow: hidden !important;
  border-radius: 0 0 26px 26px !important;
}

/* Mobile hero height */
@media (max-width: 576px){
  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item{
    height: 88vh !important;
    min-height: 560px !important;
    border-radius: 0 0 22px 22px !important;
  }
}

/* IMAGE layer */
#heroCarousel .carousel-item .hero-media{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

#heroCarousel .carousel-item .hero-media img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* OVERLAY */
#heroCarousel .carousel-item .hero-overlay{
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background: linear-gradient(
    to right,
    rgba(255,255,255,.82) 0%,
    rgba(255,255,255,.52) 46%,
    rgba(255,255,255,.10) 100%
  ) !important;
}

@media (max-width: 576px){
  #heroCarousel .carousel-item .hero-overlay{
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,.62) 55%,
      rgba(255,255,255,.95) 100%
    ) !important;
  }
}

/* CONTENT stays ON image */
#heroCarousel .carousel-item .hero-content{
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  padding: 22px 0 34px !important;
  pointer-events: none !important;
}

#heroCarousel .hero-content a,
#heroCarousel .hero-content button{
  pointer-events: auto !important;
}

@media (max-width: 576px){
  #heroCarousel .carousel-item .hero-content{
    align-items: flex-end !important;
    padding: 14px 0 54px !important;
  }
}

/* Remove any “card” feeling */
#heroCarousel .hero-content .col-lg-7{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
}

/* Make text readable even if images are bright */
#heroCarousel h1,
#heroCarousel h2{
  color: #071726 !important;
  text-shadow: 0 10px 28px rgba(0,0,0,.12) !important;
}

#heroCarousel .hero-lead{
  color: rgba(7,23,38,.78) !important;
  text-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
}

/* Remove white space after hero */
.hero-wrap + section{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* CONTROLS positioned correctly */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next{
  width: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.85) !important;
  opacity: 1 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 6 !important;
}

#heroCarousel .carousel-control-prev{ left: 14px !important; }
#heroCarousel .carousel-control-next{ right: 14px !important; }

@media (max-width: 576px){
  #heroCarousel .carousel-control-prev,
  #heroCarousel .carousel-control-next{
    top: 44% !important;
    width: 46px !important;
    height: 46px !important;
  }
}