/* Webbo Container Background Aspect Ratio fallback -------------------------
 * Elementor normally writes the responsive aspect-ratio rule into the current
 * document's generated CSS. JetEngine can render a Listing Item inside another
 * Elementor document without carrying that generated stylesheet into the nested
 * preview. The render-time custom property below travels with the Container and
 * keeps the saved desktop ratio intact. Elementor's generated per-element rule
 * has higher specificity, so normal responsive Tablet/Mobile CSS remains in
 * charge whenever it is available. */
.webbo-background-aspect-ratio {
    aspect-ratio: var(--webbo-background-aspect-ratio-fallback, auto);
}

/* Webbo Image Carousel: Soft Slide -----------------------------------------
 * Swiper remains responsible for track movement. Webbo only animates the image
 * inside the neighbouring slides, combining a short counter-translation with
 * opacity. The counter-motion softens Swiper's native travel without adding to
 * the user's real slide gap. This avoids replacing Elementor's carousel engine. */
.webbo-carousel-effect-soft-slide {
    --webbo-carousel-transition-duration: 500ms;
    --webbo-carousel-soft-travel: 22px;
    --webbo-carousel-soft-easing: cubic-bezier(0.16, 1, 0.3, 1);
}


/* Keep Soft Slide motion inside each real Swiper frame. Without clipping, the
 * neighbouring image can counter-translate into the active slide and appear as
 * a thin overlapping strip when Gap Size is 0. */
.webbo-carousel-effect-soft-slide .elementor-image-carousel-wrapper,
.webbo-carousel-effect-soft-slide .elementor-image-carousel .swiper-slide {
    overflow: hidden;
}

.webbo-carousel-effect-soft-slide .elementor-image-carousel .swiper-slide .swiper-slide-image {
    opacity: .28;
    transform: translate3d(0, 0, 0);
    transition-property: opacity, transform;
    transition-duration: var(--webbo-carousel-transition-duration);
    transition-timing-function: var(--webbo-carousel-soft-easing);
    will-change: opacity, transform;
}

.webbo-carousel-effect-soft-slide .elementor-image-carousel .swiper-slide-prev .swiper-slide-image {
    opacity: .28;
    transform: translate3d(var(--webbo-carousel-soft-travel), 0, 0);
}

.webbo-carousel-effect-soft-slide .elementor-image-carousel .swiper-slide-active .swiper-slide-image,
.webbo-carousel-effect-soft-slide .elementor-image-carousel .swiper-slide-duplicate-active .swiper-slide-image {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.webbo-carousel-effect-soft-slide .elementor-image-carousel .swiper-slide-next .swiper-slide-image {
    opacity: .28;
    transform: translate3d(calc(var(--webbo-carousel-soft-travel) * -1), 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .webbo-carousel-effect-soft-slide .elementor-image-carousel .swiper-slide .swiper-slide-image {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        will-change: auto;
    }
}