/* Home page styles */

/* Break carousel out of container to full width */
.home-banner-carousel {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: 0;
}

.home-banner-carousel .carousel-inner {
    width: 100%;
}

.home-banner-carousel .carousel-item {
    width: 100%;
}

.home-banner-carousel .carousel-item img {
    width: 100%;
    height: auto;
    /* Reserve vertical space before the image bytes arrive so the page
       below doesn't snap down when the LCP slide loads. Most slides are
       2000x520 (3.8:1); the few that are taller will be cropped top/bottom
       via object-fit: cover. */
    aspect-ratio: 2000 / 520;
    display: block;
    object-fit: cover;
}

/* Carousel controls styling */
.home-banner-carousel .carousel-control-prev,
.home-banner-carousel .carousel-control-next {
    width: 5%;
    opacity: 0.7;
}

.home-banner-carousel .carousel-control-prev:hover,
.home-banner-carousel .carousel-control-next:hover {
    opacity: 1;
}

/* Reserve vertical space for the testimonials slider so:
   1. Before Slick initialises, the container is already tall enough.
   2. When Slick swaps to the tallest slide, the container doesn't grow.
   3. On mobile (where the right-column image stacks below and no longer
      anchors the row's height) the slider doesn't collapse to first-slide
      height then snap up when JS lands. */
.testimonials-slider {
    min-height: 500px;
}

@media (max-width: 991px) {
    .testimonials-slider {
        min-height: 620px;
    }
}