/*
Component: LVD Swiper — Apple-style base
Version: 1.0.0
Author: Live Design

Public API = --lvd-swiper-* tokens (LVD-prefixed, consistent with the framework).
They bridge to Swiper's internal --swiper-* vars, which the library CSS reads directly
(those cannot be renamed). Override any --lvd-swiper-* per component/appearance.
*/

.lvd-cm-swiper {
    /* --- Public LVD tokens --- */
    --lvd-swiper-theme-color:                    var(--lvd-color-primary);
    --lvd-swiper-navigation-color:               var(--lvd-color-black); /* Apple-style neutral chevron, not brand primary */
    --lvd-swiper-navigation-size:                28px;
    --lvd-swiper-pagination-color:               var(--lvd-color-primary);
    --lvd-swiper-pagination-bullet-inactive:     var(--lvd-color-gray-400, #b4b4b4);
    --lvd-swiper-pagination-bullet-size:         8px;
    --lvd-swiper-pagination-bullet-gap:          6px;

    /* --- Bridge → Swiper internals (do not use these directly, tune the LVD ones above) --- */
    --swiper-theme-color:                        var(--lvd-swiper-theme-color);
    --swiper-navigation-color:                   var(--lvd-swiper-navigation-color);
    --swiper-navigation-size:                    var(--lvd-swiper-navigation-size);
    --swiper-pagination-color:                   var(--lvd-swiper-pagination-color);
    --swiper-pagination-bullet-inactive-color:   var(--lvd-swiper-pagination-bullet-inactive);
    --swiper-pagination-bullet-size:             var(--lvd-swiper-pagination-bullet-size);
    --swiper-pagination-bullet-horizontal-gap:   var(--lvd-swiper-pagination-bullet-gap);

    position: relative;
}

/* Apple feel: auto-width slides + peek come from slidesPerView:auto + spaceBetween (JS).
   Grab cursor is set via Swiper's grabCursor default; this reinforces it. */
.lvd-cm-swiper .lvd-swiper                    {cursor: grab;}
.lvd-cm-swiper .lvd-swiper:active            {cursor: grabbing;}
.lvd-cm-swiper .swiper-slide                 {height: auto;} /* let cards size to content, not the tallest slide */

/* Custom navigation (our scoped classes; minimal, no default Swiper arrow font) */
.lvd-cm-swiper .lvd-swiper-prev,
.lvd-cm-swiper .lvd-swiper-next              {cursor: pointer; user-select: none;}
.lvd-cm-swiper .lvd-swiper-prev.swiper-button-disabled,
.lvd-cm-swiper .lvd-swiper-next.swiper-button-disabled {opacity: 0.35; pointer-events: none;}

/* Dynamic bullets (core default) — Swiper manages a fixed inline width and translates
   the bullet strip; flex centering would break that. Block + auto margins center the
   fixed-width container instead. Higher specificity than any component flex rule. */
.lvd-cm-swiper .lvd-swiper-pagination.swiper-pagination-bullets-dynamic {display:block; margin-left:auto; margin-right:auto; left:auto; transform:none; overflow:hidden; white-space:nowrap;} /* neutralize the bundle's left:50% + translateX(-50%) (meant for absolutely-positioned pagination INSIDE the swiper) — on our static external container the translate just shifts it left; margin auto centers the fixed-width box instead */

/* Respect reduced motion — near-instant transitions, no momentum drama */
@media (prefers-reduced-motion: reduce) {
    .lvd-cm-swiper .swiper-wrapper           {transition-duration: 1ms !important;}
}