/* assets/css/slider.css */
/* Keep the slider stable and avoid CSS that breaks Bootstrap transitions */

#heroSlider{
  border-radius: 18px;
  overflow: hidden;
  width: 100%;
}

/* Make the slider a nice rectangle */
#heroSlider .carousel-inner{
  aspect-ratio: 16 / 9;
  max-height: 520px;
  background: #f6f6f6;
}

/* IMPORTANT: override any global rules that set .carousel-item to flex */
#heroSlider .carousel-item{
  display: block !important;
}

/* Image: full, no crop */
#heroSlider .slider-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: #f6f6f6;
}

/* Mobile: slightly taller */
@media (max-width: 991.98px){
  #heroSlider .carousel-inner{
    max-height: 320px;
  }
}

/* If only one slide, hide controls/indicators */
#heroSlider.single-slide .carousel-control-prev,
#heroSlider.single-slide .carousel-control-next,
#heroSlider.single-slide .carousel-indicators{
  display: none !important;
}