/*
 * Card list: the slider / grid shared by Cards, Resource cards and Article cards.
 * Cards across: --cards-per-d / -t / -m (desktop, tablet, phone; set inline from the block's
 * settings). A slider runs to the screen edges, its first card lined up with the heading,
 * unless it's kept within the page width (optionally fading its edges); on tablets and
 * phones it shows a peek of the next card.
 */

.card-list {
    --cards-gap: 40px;
}

.card-list__heading {
    --body-width: 600px;
}

.card-list__buttons {
    justify-content: center;
    margin-top: var(--step-7);
}

/* ---------- Grid ----------
   A wrapping row (so a last row that isn't full can sit left or centred), --cards-per
   across. Cards beyond the max rows are left out per screen size (.is-over-d / -t / -m). */

.card-list {
    --cards-per: var(--cards-per-d, 3);
}

.card-list__track {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cards-gap);
    margin: 0;
    padding: var(--step-10) 0;
    list-style: none;
}

.card-list--center .card-list__track {
    justify-content: center;
}

.card-list__item {
    flex: 0 0 calc((100% - (var(--cards-per) - 1) * var(--cards-gap)) / var(--cards-per));
    min-width: 0;
    margin: 0;
}

/* Cards drawn inside the item (e.g. article cards) fill its height */
.card-list__item > :only-child {
    height: 100%;
}

@media (min-width: 1025px) {
    .card-list__item.is-over-d {
        display: none;
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    .card-list__item.is-over-t {
        display: none;
    }
}

@media (max-width: 1024px) {
    .card-list {
        --cards-per: var(--cards-per-t, 2);
    }

    .card-list__track {
        padding-bottom: var(--step-7);
    }
}

@media (max-width: 600px) {
    .card-list {
        --cards-per: var(--cards-per-m, 1);
    }

    .card-list__item.is-over-m {
        display: none;
    }
}

/* ---------- Slider ---------- */

.card-list--slider {
    --cards-gap: 24px;
    --cards-peek: 0;
    /* the page's content width, so the cards line up with the heading */
    --cards-content: calc(min(var(--vw, 100vw), var(--page-width)) - 2 * var(--gutter));
    --cards-width: calc((var(--cards-content) - (var(--cards-per) - 1) * var(--cards-gap)) / (var(--cards-per) + var(--cards-peek)));
    /* from the screen edge to the content edge */
    --cards-edge: calc((var(--vw, 100vw) - var(--cards-content)) / 2);
    overflow-x: clip;
}

.card-list--slider .card-list__track {
    display: flex;
    flex-wrap: nowrap;   /* one row that scrolls (the grid above lets cards wrap) */
    margin-inline: calc(50% - var(--vw, 100vw) / 2);
    padding: var(--step-8) var(--cards-edge) 0;
    scroll-padding-inline: var(--cards-edge);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.card-list--slider .card-list__track::-webkit-scrollbar {
    display: none;
}

.card-list--slider .card-list__track:focus-visible {
    outline: 2px solid var(--tertiary-600);
    outline-offset: 4px;
}

.card-list--slider .card-list__item {
    flex: 0 0 var(--cards-width);
    scroll-snap-align: start;
}

.card-list--contained .card-list__track {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
}

/* Fading edges: a mask (so it works on any background), only on sides with more cards */
.card-list--fade {
    --cards-fade: 64px;
}

.card-list--fade .card-list__track {
    --fade-left: 0px;
    --fade-right: 0px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent 100%);
}

.card-list--fade .card-list__track.has-more-left {
    --fade-left: var(--cards-fade);
}

.card-list--fade .card-list__track.has-more-right {
    --fade-right: var(--cards-fade);
}

@media (max-width: 1024px) {
    .card-list--slider {
        --cards-peek: .2;
    }
}

@media (max-width: 600px) {
    .card-list--slider {
        --cards-gap: 16px;
    }

    .card-list--fade {
        --cards-fade: 32px;
    }

    .card-list--slider .card-list__track {
        padding-top: var(--step-7);
    }
}

/* ---------- Dots and arrows ---------- */

.card-list__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--step-6);
    margin-top: var(--step-7);
}

.card-list__dots[hidden] {
    display: none;   /* one page only (sliders that move a page at a time) */
}

.card-list__dots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.card-list__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--neutral-400);
    cursor: pointer;
    transition: background-color .2s ease-in-out, transform .2s ease-in-out;
}

.card-list__dot.is-active {
    background: var(--black);
}

.is-dark .card-list__dot.is-active {
    background: var(--white);
}

@media (hover: hover) {
    .card-list__dot:hover {
        transform: scale(1.6);
    }
}

.card-list__arrows {
    display: flex;
    gap: var(--step-4);
    margin-left: auto;
}

.card-list__arrow {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--neutral-100);
    color: var(--black);
    cursor: pointer;
    transition: opacity .2s ease-in-out, background-color .2s ease-in-out;
}

.card-list__arrow--prev svg {
    transform: scaleX(-1);
}

.card-list__arrow:hover:not(:disabled) {
    background: var(--neutral-200);
}

.card-list__arrow:disabled {
    opacity: .4;
    cursor: default;
}

.card-list__arrow:focus-visible,
.card-list__dot:focus-visible {
    outline: 2px solid var(--tertiary-600);
    outline-offset: 2px;
}

/* ---------- Entrance (assets/js/card-list.js) ----------
   The heading (from the left, or up when centred), then the cards rise one after another
   in the order they're seen, then the dots pop in one by one, then the arrows. */

.card-list {
    --cards-done: calc(var(--rv-start, 0s) + (var(--rv-count, 3) - 1) * var(--reveal-stagger) + var(--reveal-text) * .7 + .4s);
}

.card-list.rv :is(.card-list__heading, .card-list__item, .card-list__buttons) {
    opacity: 0;
}

.card-list.rv.rv-from-left .card-list__heading {
    transform: translateX(calc(var(--reveal-shift) * -1));
}

.card-list.rv.rv-from-below .card-list__heading {
    transform: translateY(var(--reveal-rise));
}

.card-list.rv .card-list__item {
    translate: 0 var(--reveal-rise);
}

.card-list.rv .card-list__buttons {
    transform: translateY(calc(var(--reveal-rise) * .6));
}

/* room below the scrolling row, so rising cards aren't clipped */
.card-list.rv.card-list--slider .card-list__track {
    padding-bottom: var(--reveal-rise);
    margin-bottom: calc(var(--reveal-rise) * -1);
}

.card-list.rv-armed .card-list__heading {
    transition: opacity var(--reveal-text) ease, transform var(--reveal-text) var(--reveal-ease);
}

.card-list.rv-armed .card-list__item {
    transition:
        opacity var(--reveal-text) ease calc(var(--rv-start, 0s) + var(--rv-i, 0) * var(--reveal-stagger)),
        translate calc(var(--reveal-text) + .1s) var(--reveal-ease) calc(var(--rv-start, 0s) + var(--rv-i, 0) * var(--reveal-stagger));
}

.card-list.rv-armed .card-list__buttons {
    transition: opacity var(--reveal-text) ease var(--cards-done), transform var(--reveal-text) var(--reveal-ease) var(--cards-done);
}

.card-list.rv.rv-heading-in .card-list__heading,
.card-list.rv.rv-items-in :is(.card-list__item, .card-list__buttons) {
    opacity: 1;
    transform: none;
    translate: none;
}

/* The controls pop in (an animation, so their own transitions are untouched afterwards) */
.card-list.rv:not(.rv-items-in) :is(.card-list__dot, .card-list__arrow) {
    opacity: 0;
}

.card-list.rv.rv-items-in :is(.card-list__dot, .card-list__arrow) {
    animation: card-list-pop .5s cubic-bezier(.34, 1.56, .64, 1) backwards;
    animation-delay: calc(var(--cards-done) + var(--rv-c, 0) * .09s);
}

@keyframes card-list-pop {
    from {
        opacity: 0;
        scale: .3;
    }
}