/*
 * Shared slider skin, ported from site/public/css/sections/00-slider.css
 * (same component, same public/js/slider.js) with this project's tokens
 * swapped in. A section supplies only the slide size and where the arrows
 * hang; everything else comes from here. Loaded first so section files can
 * override it.
 */

.slider {
    --slider-gap: 1.25vw;
    position: relative;
}

.slider__viewport {
    overflow: hidden;
}

.slider__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform 0.4s ease;
}

.slider__slide {
    display: flex;
}

/*
 * Slide sizing lives here for every slider on the site: `--cards-N` is a full
 * row of N cards with N-1 gaps between them, `--fill-N` is a short row of N
 * cards sharing the whole width. A section changes only `--slider-gap` (the
 * teacher row runs 1.04vw); the two figures of a `--cards-N` width are that
 * one variable, so they cannot drift apart (static-site-css.md #7).
 *
 * `--fill-*` spends the gap as slide padding instead of track gap, and pulls
 * the viewport out by half a gap on each side, so a slide step measured by
 * slider.js is exactly viewport / N: the script then sees the whole set in
 * view, marks the slider `is-static` and drops the arrows, dots and clones.
 * A track gap would make the step wider than that share and leave the script
 * paging a row that is already whole.
 */
.slider--cards-2 .slider__track,
.slider--cards-3 .slider__track,
.slider--cards-4 .slider__track,
.slider--fill .slider__track {
    gap: 0 var(--slider-gap);
    /* Cards carry a shadow the viewport would otherwise clip. */
    padding: 0.6vw 0;
}

.slider--cards-2 .slider__slide {
    flex: 0 0 calc((100% - var(--slider-gap)) / 2);
}

.slider--cards-3 .slider__slide {
    flex: 0 0 calc((100% - var(--slider-gap) * 2) / 3);
}

.slider--cards-4 .slider__slide {
    flex: 0 0 calc((100% - var(--slider-gap) * 3) / 4);
}

.slider--fill .slider__viewport {
    margin: 0 calc(var(--slider-gap) / -2);
}

.slider--fill .slider__track {
    gap: 0;
}

.slider--fill .slider__slide {
    padding: 0 calc(var(--slider-gap) / 2);
}

.slider--fill-1 .slider__slide {
    flex: 0 0 100%;
}

/* The 1px comes off the share because offsetLeft, which slider.js measures the
   step with, is rounded to whole pixels: an exact share rounds up and the
   script reads the row as one card wider than the viewport. */
.slider--fill-2 .slider__slide {
    flex: 0 0 calc(50% - 1px);
}

.slider--fill-3 .slider__slide {
    flex: 0 0 calc(100% / 3 - 1px);
}

/* The card is the slide's only child and a flex item of it: without this it
   is sized by its own text and a card with short copy stands narrower than
   the slide it owns. */
.slider__slide > * {
    width: 100%;
}

.slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.13vw;
    height: 3.13vw;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--color-cta);
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.2s ease;
}

.slider__arrow:hover {
    background-color: var(--color-cta-dark);
}

.slider__arrow svg {
    width: 0.83vw;
    height: 1.35vw;
}

/* Hang in the page gutter, clear of the content column. */
.slider__arrow--prev {
    left: -6.3vw;
}

.slider__arrow--next {
    right: -6.3vw;
}

.slider__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 1.04vw;
    margin-top: 2.19vw;
}

.slider__dot {
    width: 0.63vw;
    height: 0.63vw;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--color-border);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.slider__dot.is-active {
    background-color: var(--color-cta);
}

/* Every slide fits at once - nothing to page through. */
.slider.is-static .slider__arrow,
.slider.is-static .slider__dots {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .slider__track {
        transition: none;
    }

    .slider__arrow {
        transition: none;
    }
}

@media only screen and (max-width: 767.98px) {
    /* Arrows have no gutter to hang in - swipe takes over. */
    .slider__arrow {
        display: none;
    }

    .slider {
        --slider-gap: 4vw;
    }

    .slider--cards-2 .slider__track,
    .slider--cards-3 .slider__track,
    .slider--cards-4 .slider__track,
    .slider--fill .slider__track {
        gap: 0 var(--slider-gap);
        padding: 2vw 0;
    }

    .slider--fill .slider__viewport {
        margin: 0;
    }

    .slider--fill .slider__slide {
        padding: 0;
    }

    .slider--cards-2 .slider__slide,
    .slider--cards-3 .slider__slide,
    .slider--cards-4 .slider__slide,
    .slider--fill-1 .slider__slide,
    .slider--fill-2 .slider__slide,
    .slider--fill-3 .slider__slide {
        flex: 0 0 100%;
    }

    /*
     * Arrows are gone, so the dots are the only control left and have to
     * meet the 44px minimum target (static-site-a11y.md). A 44px coloured
     * circle would read as a button row, not as a position indicator, so
     * the button itself becomes a transparent 44px hit box and the visible
     * 12px dot is drawn by ::before. The row gap drops to 0 because each
     * button already carries 16px of clear space on either side of its dot -
     * keeping 15px of gap on top of that would push the dots apart and let
     * the targets read as wider than they are.
     */
    .slider__dots {
        gap: 0;
        margin-top: 6.4vw;
    }

    .slider__dot,
    .slider__dot.is-active {
        position: relative;
        width: 11.73vw;
        height: 11.73vw;
        background-color: transparent;
    }

    .slider__dot::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 3.2vw;
        height: 3.2vw;
        border-radius: 50%;
        background-color: var(--color-border);
        transform: translate(-50%, -50%);
        transition: background-color 0.2s ease;
    }

    .slider__dot.is-active::before {
        background-color: var(--color-cta);
    }
}