/**
 * Image Slider block — variant styles.
 *
 * Default variant uses inline styles in default.php; this file carries
 * only variant-specific layout. Auto-enqueued by Block_Registry.
 */

/* ── ken-burns ───────────────────────────────────────────────────
 * Subtle zoom + pan on every slide. Each slide's image animates
 * scale + translate from the rest state out to a slightly framed
 * state, then reverses — giving the slide a sense of life even
 * when autoplay is off. */
.lcms-block--image-slider.is-ken-burns .image-slider__slide img {
    animation: lcms-ken-burns 12s ease-in-out infinite alternate;
    transform-origin: 50% 50%;
    will-change: transform;
}

.lcms-block--image-slider.is-ken-burns.speed-slow   .image-slider__slide img { animation-duration: 20s; }
.lcms-block--image-slider.is-ken-burns.speed-medium .image-slider__slide img { animation-duration: 12s; }
.lcms-block--image-slider.is-ken-burns.speed-fast   .image-slider__slide img { animation-duration: 7s; }

/* Alternate the pan direction per slide so consecutive slides don't
 * all drift the same way. */
.lcms-block--image-slider.is-ken-burns .image-slider__slide:nth-child(odd) img {
    animation-name: lcms-ken-burns-left;
}
.lcms-block--image-slider.is-ken-burns .image-slider__slide:nth-child(even) img {
    animation-name: lcms-ken-burns-right;
}

@keyframes lcms-ken-burns-left {
    0%   { transform: scale(1)    translate3d(0, 0, 0); }
    100% { transform: scale(1.12) translate3d(-2%, -1%, 0); }
}

@keyframes lcms-ken-burns-right {
    0%   { transform: scale(1)    translate3d(0, 0, 0); }
    100% { transform: scale(1.12) translate3d(2%, 1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .lcms-block--image-slider.is-ken-burns .image-slider__slide img {
        animation: none;
    }
}

/* ── fade ────────────────────────────────────────────────────────
 * All slides stacked at (0,0); only opacity moves. Track has no
 * translate transform — JS toggles `.is-active` on the current slide
 * (set in ken-burns.php sibling fade.php). The active slide sits on
 * top via z-index so non-active ones don't catch pointer events. */
.lcms-block--image-slider.is-fade .image-slider__track {
    position: relative;
    display: block;
    /* Match default's 16/9 ratio so the modal height is stable. */
    aspect-ratio: 16 / 9;
}

.lcms-block--image-slider.is-fade .image-slider__slide {
    position: absolute;
    inset: 0;
    min-width: 0;
    opacity: 0;
    transition: opacity 600ms ease-in-out;
    pointer-events: none;
}

.lcms-block--image-slider.is-fade .image-slider__slide.is-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.lcms-block--image-slider.is-fade .image-slider__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
}

/* ── vertical ────────────────────────────────────────────────────
 * Same translate-based transport as default, but on the Y axis.
 * Track gets a fixed aspect ratio container (taller than wide); each
 * slide is a fixed-height row. Arrows live at top/bottom instead of
 * left/right. */
.lcms-block--image-slider.is-vertical {
    /* No section-level changes; the slider element handles axis. */
}

.lcms-block--image-slider.is-vertical .image-slider {
    /* Portrait container so vertical scrolling has somewhere to go. */
    aspect-ratio: 4 / 5;
    max-width: 32rem;
    margin: 0 auto;
}

.lcms-block--image-slider.is-vertical .image-slider__track {
    flex-direction: column;
    height: 100%;
}

.lcms-block--image-slider.is-vertical .image-slider__slide {
    min-width: 100% !important;
    min-height: 100%;
    flex-shrink: 0;
}

.lcms-block--image-slider.is-vertical .image-slider__slide img {
    height: 100%;
    aspect-ratio: auto;
}

/* Reposition arrows: top + bottom centred instead of left + right. */
.lcms-block--image-slider.is-vertical .image-slider__prev {
    left: 50% !important;
    right: auto !important;
    top: 1rem !important;
    transform: translateX(-50%) !important;
}

.lcms-block--image-slider.is-vertical .image-slider__next {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: 1rem !important;
    transform: translateX(-50%) !important;
}

/* Reposition dots: vertical stack on the right edge. */
.lcms-block--image-slider.is-vertical .image-slider__dots {
    flex-direction: column !important;
    left: auto !important;
    right: 1rem !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
}

/* ── trackslider ─────────────────────────────────────────────────
 * CSS scroll-snap track replacing the transform-based one.
 * Multiple slides are visible at once via per-slide flex-basis
 * driven by the .slides-per-* class. `.is-peek` adds horizontal
 * padding so the first/last slide visibly peek past the container
 * edge, signalling "scrollable". */
.lcms-block--image-slider.is-trackslider .image-slider {
    border-radius: 0.5rem;
}

.lcms-block--image-slider.is-trackslider .image-slider__track {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Hide the scrollbar — the arrows + drag handle navigation. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Override default's transition: transform — there's no transform. */
    transition: none !important;
}
.lcms-block--image-slider.is-trackslider .image-slider__track::-webkit-scrollbar {
    display: none;
}

.lcms-block--image-slider.is-trackslider .image-slider__slide {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* Slides-per-view: each slide claims a fraction of the visible track.
 * 1   = single slide (same as default — but with snap scrolling)
 * 1.5 = ~1.5 visible, the canonical "peek" pattern (Netflix product row)
 * 2   = side-by-side pair
 * 3   = three across (gallery-thumbnail strip feel) */
.lcms-block--image-slider.is-trackslider.slides-per-1   .image-slider__slide { min-width: 100% !important; flex: 0 0 100%; }
.lcms-block--image-slider.is-trackslider.slides-per-1-5 .image-slider__slide { min-width: 66.6667% !important; flex: 0 0 66.6667%; }
.lcms-block--image-slider.is-trackslider.slides-per-2   .image-slider__slide { min-width: 50% !important; flex: 0 0 50%; }
.lcms-block--image-slider.is-trackslider.slides-per-3   .image-slider__slide { min-width: 33.3333% !important; flex: 0 0 33.3333%; }

/* Inter-slide gap (built from a flex gap on the track). */
.lcms-block--image-slider.is-trackslider .image-slider__track {
    gap: 0.75rem;
    padding: 0;
}

/* Peek: inset padding so the first/last slide poke past the edge,
 * showing there's more to scroll. */
.lcms-block--image-slider.is-trackslider.is-peek .image-slider__track {
    padding: 0 1.5rem;
}

/* Trackslider images don't need the default 16/9 aspect-ratio lock —
 * each slide should sit in a uniform tile. */
.lcms-block--image-slider.is-trackslider .image-slider__slide img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0.375rem;
}

/* Hide dots — for a multi-visible track, dots add up to N indicators
 * which doesn't make sense per "page". Arrows are the right control. */
.lcms-block--image-slider.is-trackslider .image-slider__dots {
    display: none !important;
}

/* Mobile collapses to 1.x — multi-visible never works narrow. */
@media (max-width: 640px) {
    .lcms-block--image-slider.is-trackslider .image-slider__slide {
        min-width: 80% !important;
        flex: 0 0 80%;
    }
}