/*
 * c-slider — default basic slider (scroll-snap + prev/next)
 * Visuals (color, background, border): Etch styles only.
 * JS: core/js/etch-alpine.js — initDataSliders
 * Hook: [data-slider] or [data-slider-type] on .c-slider
 *
 * Slide width (mobile-first, matches u-col-*--from-* breakpoints):
 *   data-slider-col           base (all viewports) — on .c-slider root only
 *   data-slider-col--from-s   ≥700px
 *   data-slider-col--from-m   ≥1025px
 *   data-slider-col--from-l   ≥1280px
 * Values 1–12 → var(--col-n). Track inherits --slider-slide-width from root.
 */

.c-slider:is([data-slider], [data-slider-type]) {
    --slider-slide-width: 100%;
}

.c-slider:is([data-slider], [data-slider-type]):not(:has(> .c-slider__track[data-slider-track])),
.c-slider__track[data-slider-track] {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

/* Wrapper — attrs + col tokens only; track is the scrollport */
.c-slider:is([data-slider], [data-slider-type]):has(> .c-slider__track[data-slider-track]) {
    display: block;
    overflow: visible;
    width: 100%;
}

.c-slider__track[data-slider-track] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    width: 100%;
}

.c-slider:is([data-slider], [data-slider-type]):not(.u-bleed),
.c-slider__track[data-slider-track]:not(.u-bleed) {
    width: 100%;
}

.c-slider:is([data-slider], [data-slider-type])::-webkit-scrollbar,
.c-slider__track[data-slider-track]::-webkit-scrollbar {
    display: none;
}

/* Default peek when no col / width attrs */
@media (min-width: 700px) {
    .c-slider:is([data-slider], [data-slider-type]):not([data-slider-col]):not([data-slider-col--from-s]):not([data-slider-col--from-m]):not([data-slider-col--from-l]):not([data-slider-width]) {
        --slider-slide-width: var(--col-6);
    }
}

@media (min-width: 1025px) {
    .c-slider:is([data-slider], [data-slider-type]):not([data-slider-col]):not([data-slider-col--from-s]):not([data-slider-col--from-m]):not([data-slider-col--from-l]):not([data-slider-width]) {
        --slider-slide-width: var(--col-4);
    }
}

/* Legacy width presets */
.c-slider:is([data-slider], [data-slider-type])[data-slider-width="full"] {
    --slider-slide-width: 100%;
}

.c-slider:is([data-slider], [data-slider-type])[data-slider-width="half"] {
    --slider-slide-width: var(--col-6);
}

.c-slider:is([data-slider], [data-slider-type])[data-slider-width="third"] {
    --slider-slide-width: var(--col-4);
}

/* Base — data-slider-col (mobile-first; attrs live on .c-slider root only) */
.c-slider:is([data-slider], [data-slider-type])[data-slider-col="1"] { --slider-slide-width: var(--col-1); }
.c-slider:is([data-slider], [data-slider-type])[data-slider-col="2"] { --slider-slide-width: var(--col-2); }
.c-slider:is([data-slider], [data-slider-type])[data-slider-col="3"] { --slider-slide-width: var(--col-3); }
.c-slider:is([data-slider], [data-slider-type])[data-slider-col="4"] { --slider-slide-width: var(--col-4); }
.c-slider:is([data-slider], [data-slider-type])[data-slider-col="5"] { --slider-slide-width: var(--col-5); }
.c-slider:is([data-slider], [data-slider-type])[data-slider-col="6"] { --slider-slide-width: var(--col-6); }
.c-slider:is([data-slider], [data-slider-type])[data-slider-col="7"] { --slider-slide-width: var(--col-7); }
.c-slider:is([data-slider], [data-slider-type])[data-slider-col="8"] { --slider-slide-width: var(--col-8); }
.c-slider:is([data-slider], [data-slider-type])[data-slider-col="9"] { --slider-slide-width: var(--col-9); }
.c-slider:is([data-slider], [data-slider-type])[data-slider-col="10"] { --slider-slide-width: var(--col-10); }
.c-slider:is([data-slider], [data-slider-type])[data-slider-col="11"] { --slider-slide-width: var(--col-11); }
.c-slider:is([data-slider], [data-slider-type])[data-slider-col="12"] { --slider-slide-width: var(--col-12); }

/* --from-s — data-slider-col--from-s (≥700px) */
@media (min-width: 700px) {
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-s="1"] { --slider-slide-width: var(--col-1); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-s="2"] { --slider-slide-width: var(--col-2); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-s="3"] { --slider-slide-width: var(--col-3); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-s="4"] { --slider-slide-width: var(--col-4); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-s="5"] { --slider-slide-width: var(--col-5); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-s="6"] { --slider-slide-width: var(--col-6); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-s="7"] { --slider-slide-width: var(--col-7); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-s="8"] { --slider-slide-width: var(--col-8); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-s="9"] { --slider-slide-width: var(--col-9); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-s="10"] { --slider-slide-width: var(--col-10); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-s="11"] { --slider-slide-width: var(--col-11); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-s="12"] { --slider-slide-width: var(--col-12); }
}

/* --from-m — data-slider-col--from-m (≥1025px) */
@media (min-width: 1025px) {
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-m="1"] { --slider-slide-width: var(--col-1); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-m="2"] { --slider-slide-width: var(--col-2); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-m="3"] { --slider-slide-width: var(--col-3); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-m="4"] { --slider-slide-width: var(--col-4); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-m="5"] { --slider-slide-width: var(--col-5); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-m="6"] { --slider-slide-width: var(--col-6); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-m="7"] { --slider-slide-width: var(--col-7); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-m="8"] { --slider-slide-width: var(--col-8); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-m="9"] { --slider-slide-width: var(--col-9); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-m="10"] { --slider-slide-width: var(--col-10); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-m="11"] { --slider-slide-width: var(--col-11); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-m="12"] { --slider-slide-width: var(--col-12); }
}

/* --from-l — data-slider-col--from-l (≥1280px) */
@media (min-width: 1280px) {
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-l="1"] { --slider-slide-width: var(--col-1); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-l="2"] { --slider-slide-width: var(--col-2); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-l="3"] { --slider-slide-width: var(--col-3); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-l="4"] { --slider-slide-width: var(--col-4); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-l="5"] { --slider-slide-width: var(--col-5); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-l="6"] { --slider-slide-width: var(--col-6); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-l="7"] { --slider-slide-width: var(--col-7); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-l="8"] { --slider-slide-width: var(--col-8); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-l="9"] { --slider-slide-width: var(--col-9); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-l="10"] { --slider-slide-width: var(--col-10); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-l="11"] { --slider-slide-width: var(--col-11); }
    .c-slider:is([data-slider], [data-slider-type])[data-slider-col--from-l="12"] { --slider-slide-width: var(--col-12); }
}

.c-slider:is([data-slider], [data-slider-type]):not(:has(> .c-slider__track[data-slider-track])) > *:not(.c-slider__nav, [data-slider-prev], [data-slider-next], [data-slider-region]),
.c-slider__track[data-slider-track] > *,
.c-slider__slide,
[data-slider-slide] {
    flex: 0 0 var(--slider-slide-width);
    max-width: none;
    min-width: 0;
    scroll-snap-align: start;
}

.c-slider[data-slider-centered="true"] {
    --slider-center-inset: max(0px, calc(50% - var(--slider-slide-width) / 2));
}

.c-slider[data-slider-centered="true"] .c-slider__track[data-slider-track] {
    scroll-padding-inline: var(--slider-center-inset);
}

.c-slider[data-slider-centered="true"] .c-slider__track[data-slider-track]::before,
.c-slider[data-slider-centered="true"] .c-slider__track[data-slider-track]::after {
    content: '';
    flex: 0 0 var(--slider-center-inset);
    min-width: 0;
    pointer-events: none;
    scroll-snap-align: none;
}

/* GSAP loop uses transform centering — scroll spacers break seamlessLoop width math */
.c-slider.is-slider-gsap-loop[data-slider-centered="true"] .c-slider__track[data-slider-track]::before,
.c-slider.is-slider-gsap-loop[data-slider-centered="true"] .c-slider__track[data-slider-track]::after,
.c-slider.is-slider-gsap-loop[data-slider-centered="true"]:not(:has(> .c-slider__track[data-slider-track]))::before,
.c-slider.is-slider-gsap-loop[data-slider-centered="true"]:not(:has(> .c-slider__track[data-slider-track]))::after {
    content: none;
    display: none;
    flex: 0 0 0;
    min-width: 0;
    width: 0;
}

.c-slider.is-slider-gsap-loop[data-slider-centered="true"] .c-slider__track[data-slider-track],
.c-slider.is-slider-gsap-loop[data-slider-centered="true"]:not(:has(> .c-slider__track[data-slider-track])) {
    scroll-padding-inline: 0;
}

.c-slider[data-slider-centered="true"] .c-slider__track[data-slider-track] > *,
.c-slider[data-slider-centered="true"] .c-slider__slide,
.c-slider[data-slider-centered="true"] [data-slider-slide] {
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.c-slider__track[data-slider-track] > * > :only-child {
    width: 100%;
}

.c-slider__slide > .c-review {
    height: 100%;
    width: 100%;
}

.c-slider__region {
    outline: none;
    width: 100%;
}

/* Pointer drag (desktop) + touch pan (mobile) — etch-alpine initSliderDrag */
.c-slider[data-slider-drag="true"]:not(:has(> .c-slider__track[data-slider-track])),
.c-slider[data-slider-drag="true"] .c-slider__track[data-slider-track],
.c-slider[data-slider-drag="true"] [data-slider-region],
.c-slider[data-slider-drag="true"] .c-slider__region {
    cursor: grab;
    touch-action: pan-x;
    -webkit-user-select: none;
    user-select: none;
}

.c-slider[data-slider-drag="true"].is-dragging:not(:has(> .c-slider__track[data-slider-track])),
.c-slider[data-slider-drag="true"].is-dragging .c-slider__track[data-slider-track] {
    cursor: grabbing;
    scroll-snap-type: none;
}

.c-slider[data-slider-drag="true"].is-dragging [data-slider-region],
.c-slider[data-slider-drag="true"].is-dragging .c-slider__region {
    cursor: grabbing;
}

.c-slider__nav {
    align-items: center;
    display: flex;
    gap: var(--gap-2);
    justify-content: center;
}

.c-slider__btn {
    align-items: center;
    appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    padding: 0;
}

.c-slider__btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.c-slider__btn.is-disabled,
.c-slider__btn:disabled,
[data-slider-prev].is-disabled,
[data-slider-next].is-disabled,
[data-slider-prev]:disabled,
[data-slider-next]:disabled {
    cursor: not-allowed;
    pointer-events: none;
}

.c-slider__btn--prev .c-slider__icon {
    transform: rotate(180deg);
}

.c-slider__icon {
    display: block;
    flex-shrink: 0;
}

.c-slider[data-slider-controls="false"] .c-slider__nav,
.c-slider[data-slider-controls="false"] [data-slider-prev],
.c-slider[data-slider-controls="false"] [data-slider-next],
[data-slider-group] [data-slider-controls="false"] ~ .c-slider__nav {
    display: none;
}

/* GSAP seamless loop — slider_loop.js when data-slider-loop="true" */
.c-slider.is-slider-gsap-loop:is([data-slider], [data-slider-type]):has(> .c-slider__track[data-slider-track]) {
    overflow-x: clip;
}

.c-slider.is-slider-gsap-loop .c-slider__region,
.c-slider.is-slider-gsap-loop [data-slider-region] {
    overflow-x: clip;
}

.c-slider.is-slider-gsap-loop .c-slider__track,
.c-slider.is-slider-gsap-loop:is([data-slider], [data-slider-type]):not(:has(> .c-slider__track[data-slider-track])) {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--grid-gutter);
    max-width: none;
    overflow: hidden;
    scroll-behavior: auto;
    scroll-snap-type: none;
    width: max-content;
}

.c-slider.is-slider-gsap-loop .c-slider__track,
.c-slider.is-slider-gsap-loop [data-slider-region],
.c-slider.is-slider-gsap-loop .c-slider__region {
    cursor: grab;
    touch-action: pan-x;
    -webkit-user-select: none;
    user-select: none;
}

.c-slider.is-slider-gsap-loop.is-dragging .c-slider__track,
.c-slider.is-slider-gsap-loop.is-dragging [data-slider-region],
.c-slider.is-slider-gsap-loop.is-dragging .c-slider__region {
    cursor: grabbing;
}

.c-slider.is-slider-gsap-loop .c-slider__track > *,
.c-slider.is-slider-gsap-loop .c-slider__slide,
.c-slider.is-slider-gsap-loop [data-slider-slide] {
    flex: 0 0 var(--slider-slide-width);
    margin-inline-end: var(--slider-loop-gap, 0px);
    scroll-snap-align: unset;
}

/* Promote compositor layer only while dragging (GSAP xPercent on slides) */
.c-slider.is-slider-gsap-loop.is-dragging .c-slider__track > *,
.c-slider.is-slider-gsap-loop.is-dragging .c-slider__slide,
.c-slider.is-slider-gsap-loop.is-dragging [data-slider-slide] {
    will-change: transform;
}