/* ─── Infinite Image Carousel – Frontend Styles ─────────────── */

.ice-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Default: show 4 images. Overridden per-breakpoint by Elementor. */
    --ice-per-view: 4;
    --ice-gap: 16px;
}

/* Edge fade overlays */
.ice-wrapper.ice-edge-fade::before,
.ice-wrapper.ice-edge-fade::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}
.ice-wrapper.ice-edge-fade::before {
    left: 0;
    background: linear-gradient(to right, #ffffff, transparent);
}
.ice-wrapper.ice-edge-fade::after {
    right: 0;
    background: linear-gradient(to left, #ffffff, transparent);
}

/* Scrolling track */
.ice-track {
    display: flex;
    /* gap is set via Elementor selector, but fallback here */
    gap: var(--ice-gap);
    width: max-content;
    animation: ice-scroll-left 30s linear infinite;
    will-change: transform;
}

/* Pause on hover */
.ice-track.ice-pause-hover:hover {
    animation-play-state: paused;
}

/* Keyframes: right → left */
@keyframes ice-scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Individual slide */
.ice-slide {
    flex-shrink: 0;
    line-height: 0;
    /*
     * Width = (wrapper / per-view) minus the share of gaps.
     * Total gap in one "set" = (per-view - 1) gaps across per-view items
     * → each item loses  (per-view - 1) / per-view  of one gap width.
     *
     * Formula: calc( (100vw - scrollbar) / N  -  gap * (N-1) / N )
     * We approximate wrapper width as 100% of its container.
     */
    width: calc(
        ( 100% / var(--ice-per-view) )
        - ( var(--ice-gap, 16px) * (var(--ice-per-view) - 1) / var(--ice-per-view) )
    );
}

/*
 * Because .ice-track is width:max-content and overflows the wrapper,
 * we need the slide widths relative to the *wrapper*, not the track.
 * We use a CSS trick: set the wrapper as the sizing context via
 * container queries, or simply use a known viewport-relative unit.
 *
 * Safest cross-browser approach: inline-style via PHP passes
 * --ice-wrapper-w, OR we rely on the wrapper's own offsetWidth.
 * Here we use a clean CSS-only approach with `cqw` (container query width)
 * with a fallback for older browsers.
 */

/* Modern browsers: container query units */
.ice-wrapper {
    container-type: inline-size;
}

.ice-slide {
    width: calc(
        ( 100cqw / var(--ice-per-view) )
        - ( var(--ice-gap, 16px) * (var(--ice-per-view) - 1) / var(--ice-per-view) )
    );
}

/* Fallback for browsers without container query support */
@supports not (width: 1cqw) {
    .ice-slide {
        width: calc(
            ( 100vw / var(--ice-per-view) )
            - ( var(--ice-gap, 16px) * (var(--ice-per-view) - 1) / var(--ice-per-view) )
        );
    }
}

.ice-slide a {
    display: block;
    line-height: 0;
    width: 100%;
}

/* Image fills the slide width, fixed height (height overridden by Elementor) */
.ice-slide img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Hover scale (opt-in) */
.ice-track.ice-hover-scale .ice-slide img:hover {
    transform: scale(1.05);
}

/* ─── Sync gap CSS variable so slide-width calc stays accurate ── */
/* Elementor writes: {{WRAPPER}} .ice-track { gap: Xpx }
   We mirror it to --ice-gap on the wrapper via JS (see inline script in render). */

/* ─── Responsive tweaks ──────────────────────────────────────── */
@media (max-width: 768px) {
    .ice-wrapper.ice-edge-fade::before,
    .ice-wrapper.ice-edge-fade::after {
        width: 50px;
    }
}