/**
 * Dynamic Slider - Core Styles
 *
 * CSS-first approach using CSS custom properties and scroll-snap for performance.
 * JavaScript is only used for navigation buttons, autoplay, and state management.
 */

/* ==========================================================================
   CSS Custom Properties (Variables)
   ========================================================================== */

.ds-slider {
    --ds-visible-slides: 1;
    --ds-gap: 20px;
    --ds-transition-speed: 400ms;
    --ds-min-height: auto;
}

/* ==========================================================================
   Container
   ========================================================================== */

.ds-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ==========================================================================
   Track (Scrollable Area)
   ========================================================================== */

.ds-slider__track {
    display: flex;
    gap: var(--ds-gap);

    /* Native horizontal scroll with snap */
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;

    /* Smooth touch scrolling on iOS */
    -webkit-overflow-scrolling: touch;

    /* Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.ds-slider__track::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Webkit */
}

/* ==========================================================================
   Slides
   ========================================================================== */

.ds-slider__slide {
    flex: 0 0 auto;

    /*
     * Width calculation for fractional slides:
     * - Total width = 100%
     * - Total gap space = gap * (visible_slides - 1)
     * - Available width for slides = 100% - total gap space
     * - Each slide width = available width / visible_slides
     *
     * Example with 2.5 visible slides and 20px gap:
     * - Gaps between 2.5 slides = 1.5 gaps = 30px
     * - Each slide = (100% - 30px) / 2.5 = ~38.8%
     */
    width: calc(
        (100% - (var(--ds-gap) * (var(--ds-visible-slides) - 1)))
        / var(--ds-visible-slides)
    );

    /* Snap each slide to the start (left edge) */
    scroll-snap-align: start;

    /* Stop on each slide during momentum scroll */
    scroll-snap-stop: always;
}

/* ==========================================================================
   Images within Slides
   ========================================================================== */

.ds-slider__slide img,
.ds-slider__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ==========================================================================
   Content Slides
   ========================================================================== */

.ds-slider__content {
    padding: 20px;
    height: 100%;
    min-height: var(--ds-min-height);
    box-sizing: border-box;
}

.ds-slider__slide-title {
    display: block;
    margin: 0 0 10px 0;
    font-size: 1.2em;
    font-weight: 600;
}

/* Title overlay for image slides */
.ds-slider__slide .ds-slider__image + .ds-slider__slide-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #fff;
    margin: 0;
}

/* Make slide position relative for absolute title */
.ds-slider__slide:has(.ds-slider__image + .ds-slider__slide-title) {
    position: relative;
}

/* Fallback for browsers without :has() */
.ds-slider__slide {
    position: relative;
}

/* ==========================================================================
   Links
   ========================================================================== */

.ds-slider__link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.ds-slider__link:hover,
.ds-slider__link:focus {
    opacity: 0.9;
}

.ds-slider__link--content {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   Screen Reader Only (Accessibility)
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Focus Styles
   ========================================================================== */

.ds-slider:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

.ds-slider:focus:not(:focus-visible) {
    outline: none;
}

.ds-slider:focus-visible {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ds-slider__track {
        scroll-behavior: auto;
    }
}