/* ==========================================================================
   Banner Carousel & Multi-Banner Slot Styles
   ========================================================================== */

.banner-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

/* Stacking slides using CSS Grid */
.banner-carousel-slides {
    display: grid;
    grid-template-areas: "banner-stack";
    width: 100%;
    align-items: center;
}

.banner-carousel-slide {
    grid-area: banner-stack;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
    z-index: 1;
}

.banner-carousel-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

.banner-carousel-slide .banner-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.banner-carousel-slide .banner-image,
.banner-carousel-slide .banner-video {
    width: 100%;
    display: block;
}

/* Fixed-height banners adapt seamlessly */
.top-banner .banner-carousel,
.bottom-banner .banner-carousel,
.mobile-banner-container.top-banner .banner-carousel,
.mobile-banner-container.bottom-banner .banner-carousel {
    height: 100%;
}

.top-banner .banner-carousel-slides,
.bottom-banner .banner-carousel-slides,
.mobile-banner-container.top-banner .banner-carousel-slides,
.mobile-banner-container.bottom-banner .banner-carousel-slides {
    height: 100%;
}

.top-banner .banner-carousel-slide,
.bottom-banner .banner-carousel-slide,
.mobile-banner-container.top-banner .banner-carousel-slide,
.mobile-banner-container.bottom-banner .banner-carousel-slide {
    height: 100%;
}

.top-banner .banner-carousel-slide .banner-image,
.bottom-banner .banner-carousel-slide .banner-image,
.top-banner .banner-carousel-slide .banner-video,
.bottom-banner .banner-carousel-slide .banner-video,
.mobile-banner-container.top-banner .banner-carousel-slide .banner-image,
.mobile-banner-container.bottom-banner .banner-carousel-slide .banner-image,
.mobile-banner-container.top-banner .banner-carousel-slide .banner-video,
.mobile-banner-container.bottom-banner .banner-carousel-slide .banner-video {
    height: 100%;
    object-fit: cover;
}

/* Dots & arrows hidden for a clean banner display */
.banner-carousel-dots,
.rotator-dots,
.banner-carousel-prev,
.banner-carousel-next,
.rotator-prev,
.rotator-next {
    display: none !important;
}