/* ==========================================================================
   Mobilný slider (scroll-snap) + stránkovacie bodky
   Na mobile (< 720 px) sa zoznam zmení na vodorovný slider, na väčších
   šírkach si layout položiek určuje stránka.
   ========================================================================== */

.slider__dots {
    display: none;
}

@media (max-width: 719px) {
    .slider__track {
        display: flex;
        gap: var(--slider-gap, 10px);
        margin: 0 calc(var(--gutter) * -1);
        padding: 0 var(--gutter) 4px;
        overflow-x: auto;
        scroll-padding: 0 var(--gutter);
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

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

    .slider__track > * {
        flex: 0 0 var(--slider-item, 82%);
        scroll-snap-align: start;
    }

    .slider__dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 18px;
    }
}

.slider__dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #d4d3e2;
    transition: width var(--duration-base), background var(--duration-base);
}

.slider__dot[aria-current='true'] {
    width: 26px;
    background: var(--gradient-dot);
}

/* Väčšia dotyková plocha bez zmeny vzhľadu */
.slider__dot::after {
    content: '';
    position: absolute;
    inset: -12px -4px;
}