/* Reusable slider component (used by landing.html and any other template).
   Markup contract:
     .slider-wrapper[data-slider] > .slider-track (flex, slides inside)
     + optional .slider-arrow.prev / .slider-arrow.next buttons
     + optional .slider-dots container (dots are generated by slider.js)
   See static/js/slider.js for the behavior side. */

.slider-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
}
.slider-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: grab;
    user-select: none;
}
.slider-track.dragging {
    cursor: grabbing;
    transition: none;
}
.slider-track .slide {
    flex-shrink: 0;
    width: 280px;
}
@media (min-width: 640px) {
    .slider-track .slide { width: 300px; }
}

/* Nav arrows */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.2s, background 0.2s;
    border: none;
    outline: none;
    /* Hidden by default, visible on wrapper hover */
    opacity: 0;
    pointer-events: none;
}
.slider-wrapper:hover .slider-arrow {
    opacity: 1;
    pointer-events: auto;
}
.slider-arrow svg {
    width: 18px;
    height: 18px;
}
/* RTL: prev = right side (go back), next = left side (go forward) */
.slider-arrow.prev { right: 8px; }
.slider-arrow.next { left: 8px; }

/* Dots */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
}
.slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    border: none;
    padding: 0;
    background: var(--border);
}
.slider-dot.active {
    transform: scale(1.3);
    background: var(--accent);
}