/**
 * XamanSlider - base styles.
 *
 * Uses CSS scroll-snap. The browser handles drag/swipe/inertia natively,
 * so we keep CSS small and avoid JS-driven transforms.
 *
 * Browser support: Chrome 84+, Safari 14.1+, Firefox 99+.
 * Older browsers degrade gracefully (instant scroll instead of smooth,
 * no snap if scroll-snap-type unsupported) without breaking.
 *
 * Key custom properties (set by JS from options):
 *   --xs-per-page  number of slides visible at once (supports decimals, e.g. 4.9)
 *   --xs-gap       gap between slides (any CSS length)
 */

.xaman-slider {
    position: relative;
    display: block;
    /* Kill the blue tap flash on iOS Safari when clicking arrows/dots/slides. */
    -webkit-tap-highlight-color: transparent;
}

.xaman-slider__track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;         /* Firefox 64+, Safari 18+ */
    -ms-overflow-style: none;      /* Edge Legacy */
    -webkit-overflow-scrolling: touch; /* iOS < 13 momentum */
    /* overscroll-behavior: physical first (Safari 16+, iOS 16+),
       then logical (newer browsers). Prevents the slider scroll from
       chaining to the page/body scroll on overscroll. */
    overscroll-behavior-x: contain;
    overscroll-behavior-inline: contain;
    /* Padding via custom properties (JS-driven from the `padding` option).
       Vertical padding lets slide box-shadows breathe without being clipped by
       overflow-y: hidden. Horizontal padding + matching scroll-padding keeps
       snap points aligned so slide 0 "snaps" inside the left padding, not flush
       against the border-box edge. */
    padding-top:    var(--xs-pad-top,    0);
    padding-right:  var(--xs-pad-right,  0);
    padding-bottom: var(--xs-pad-bottom, 0);
    padding-left:   var(--xs-pad-left,   0);
    scroll-padding-left:  var(--xs-pad-left,  0);
    scroll-padding-right: var(--xs-pad-right, 0);
}

.xaman-slider__track::-webkit-scrollbar {
    display: none;
}

/* Drag cursor affordance on devices with a fine pointer (desktop/mouse). */
@media (hover: hover) and (pointer: fine) {
    .xaman-slider__track {
        cursor: grab;
    }
}

.xaman-slider__track.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    /* Prevent text/image selection flicker mid-drag. */
    user-select: none;
    -webkit-user-select: none;
}

.xaman-slider__track.is-dragging .xaman-slider__slide,
.xaman-slider__track.is-dragging a,
.xaman-slider__track.is-dragging img {
    pointer-events: none;
}

.xaman-slider__list {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--xs-gap, 0px);
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 100%;
}

.xaman-slider__slide {
    flex: 0 0 calc(
        (100% - (var(--xs-gap, 0px) * (var(--xs-per-page, 1) - 1)))
        / var(--xs-per-page, 1)
    );
    min-width: 0;
    min-height: 0;
    scroll-snap-align: start;
    /* Intentionally omit `scroll-snap-stop: always` — on iOS Safari 14–15 it
       interferes with momentum scrolling and causes abrupt stops mid-flick.
       The default `normal` still snaps reliably and feels native. */
}

.xaman-slider__track[data-xs-focus="center"] .xaman-slider__slide {
    scroll-snap-align: center;
}

/**
 * Vertical direction. The user must give the root an explicit height
 * (or max-height) for the scroll container to work — without it the track
 * would size to content and there'd be nothing to scroll.
 *
 *   <div class="xaman-slider" style="height: 360px"
 *        data-xaman-slider='{"direction":"vertical","perPage":3,"gap":"1rem"}'>
 */
.xaman-slider[data-xs-direction="vertical"] .xaman-slider__track {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overscroll-behavior-x: auto;
    overscroll-behavior-y: contain;
    overscroll-behavior-inline: auto;
    overscroll-behavior-block: contain;
    height: 100%;
}

.xaman-slider[data-xs-direction="vertical"] .xaman-slider__list {
    flex-direction: column;
    flex-wrap: nowrap;
    min-width: 0;
    width: 100%;
    min-height: 100%;
}

/* autoHeight: slides take their natural height (content-driven) instead of being
   forced to a calc() share of the track height. The track height is set by JS
   to perPage × first slide's height, so `perPage` slides fit exactly. */
.xaman-slider[data-xs-auto-height="true"] .xaman-slider__slide {
    flex: 0 0 auto;
    height: auto;
}

/* Auto-width mode: slides size to their content (pills, chips, variable-width cards). */
.xaman-slider__track[data-xs-auto-width="true"] .xaman-slider__slide {
    flex: 0 0 auto;
    width: auto;
}

/* Arrows */

.xaman-slider__arrows {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Vertical: stack prev (top) / next (bottom) instead of left/right. */
.xaman-slider[data-xs-direction="vertical"] .xaman-slider__arrows {
    flex-direction: column;
}

.xaman-slider__arrow {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.9);
    color: #111;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: opacity .2s ease, transform .2s ease;
}

.xaman-slider__arrow:hover {
    transform: scale(1.05);
}

.xaman-slider__arrow.is-disabled,
.xaman-slider__arrow[disabled] {
    opacity: 0;
    pointer-events: none;
}

.xaman-slider__arrow svg {
    width: 1.25rem;
    height: 1.25rem;
}

.xaman-slider__arrow--prev {
    margin-left: .5rem;
}

.xaman-slider__arrow--next {
    margin-right: .5rem;
}

/* Vertical: arrows along the block axis. */
.xaman-slider[data-xs-direction="vertical"] .xaman-slider__arrow--prev {
    margin-left: 0;
    margin-top: .5rem;
}

.xaman-slider[data-xs-direction="vertical"] .xaman-slider__arrow--next {
    margin-right: 0;
    margin-bottom: .5rem;
}

/* Pagination */

.xaman-slider__pagination {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
}

.xaman-slider__page {
    width: .625rem;
    height: .625rem;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: currentColor;
    opacity: .3;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
}

.xaman-slider__page.is-active {
    width: 3rem;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .xaman-slider__track {
        scroll-behavior: auto;
    }
}

/**
 * Hyvä PageBuilder compatibility.
 * Themes based on Hyvä ship a fallback grid+scroll-snap layout via
 * `[data-content-type="slider"]:not(:has(.snap-track)) { display: grid; ... }`.
 * Since XamanSlider handles its own snap/scroll, we disable that fallback on
 * the root when our slider has mounted, regardless of whether a `.snap-track`
 * descendant exists.
 */
[data-content-type="slider"].xaman-slider.is-initialized {
    display: block;
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    padding-block: 0;
    overflow: visible;
    overscroll-behavior: auto;
    scroll-snap-type: none;
}

[data-content-type="slider"].xaman-slider.is-initialized > * {
    scroll-snap-align: unset;
}