/*------------------------------------------------------------------*\
    MEDIA CAROUSEL — .rb-media-carousel  (shortcode [media_carousel])
    Centered Swiper carousel: the active slide is large and centered while the
    neighbouring slides peek at the edges and are dimmed. The fractional
    slidesPerView + centeredSlides are set in JS (media-carousel.js); the dim /
    recede of the inactive slides lives here. Mobile-first.
\*------------------------------------------------------------------*/

.rb-media-carousel {
    width: 100%;
    height: 1408px;              /* match the slide height so the carousel reserves
                                    its full layout space (parent grows with it and
                                    it stops overlapping the next page elements) */
    overflow: hidden;            /* clip only the horizontal peek of the neighbours;
                                    vertically the height matches the slides, so the
                                    1408px image is shown in full, never clipped */
}

/* Dim (only) the non-active slides; the active one resets it. No scale — the
   neighbours keep their full/normal height, they're just dimmed back. */
.rb-media-carousel .swiper-slide {
    opacity: 0.6;
    transition: opacity 0.5s ease;
}

.rb-media-carousel .swiper-slide-active {
    opacity: 1;
}

/* Fixed slide height so every slide keeps a consistent height regardless of
   the source image dimensions. Width comes from Swiper (slidesPerView). */
.rb-media-carousel__slide {
    height: 1408px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* contain (not cover) so portrait/vertical images show in full, never cropped.
   The image fits inside the fixed-height slide; verticals end up narrower with
   space on the sides, landscapes fill the width. */
.rb-media-carousel__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}