/*
    Card deck of a skill's « Synthèse » section — templates/components/compCardDeck.html.twig
    Doc: doc/features/card-deck.md
*/

.card-deck {
    --stack-pad: 2.6rem; /* room around the pile for the rotated cards behind */
    --card-pad: 1rem;

    /*
        The site's figure width, capped on short screens so that a whole card and the arrows fit the
        viewport: 20rem is the height budget of the caption, the paddings and the arrow bar, the rest
        goes to the 4:5 image (hence × 0.8). A 1366 × 768 laptop gets a ~360 px wide image.
    */
    max-width: min(58.7rem, max(32rem, calc((100dvh - 20rem) * 0.8 + 2 * (var(--stack-pad) + var(--card-pad)))));
    margin: 3rem auto 0;
    text-align: center;

    /* On a phone the page scrolls anyway: the width matters more than the height */
    @media (max-width: 589px) {
        --stack-pad: 1.2rem;
        --card-pad: 0.6rem;

        max-width: none;
    }
}

/* Without JavaScript: a horizontal swipe strip, the next card peeking. Once connected: a pile. */
.card-deck-stack {
    display: flex;
    gap: 1.6rem;
    overflow-x: auto;
    overscroll-behavior-x: contain; /* a swipe at the end does not trigger the browser's back gesture */
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--stack-pad);
    scrollbar-width: none;
    padding: 1rem var(--stack-pad) 3.4rem; /* room for the cards' rotation and shadow */

    /*
        The strip's min-content is the sum of its cards: without it, #main (a grid item, min-width: auto)
        would widen to fit it and the page would scroll sideways on a phone before the controller connects
    */
    contain: inline-size;

    &::-webkit-scrollbar {
        display: none;
    }
}

.card-deck-card {
    position: relative; /* anchors the zoom badge */
    flex: 0 0 84%;
    min-width: 0;
    scroll-snap-align: start;
    padding: var(--card-pad) var(--card-pad) 1.2rem;
    background-color: #fff;
    border-radius: 1.6rem;
    box-shadow: var(--shadow-card), var(--shadow);
    cursor: zoom-in;

    & figure {
        margin: 0; /* html.css gives every figure 3rem */
    }

    /* compFigure's image fills the card exactly (the site's img is content-box with a 2 px border) */
    & figure picture img {
        box-sizing: border-box;
        width: 100%;
        box-shadow: none;
        -webkit-user-drag: none;
    }

    & figcaption {
        margin-top: 1.2rem;
        padding: 0 0.5rem;
        font-size: 1.6rem;
        line-height: 1.5;
        text-align: center;
        text-wrap: balance;
    }
}

.card-deck-zoom {
    position: absolute;
    z-index: 1;
    top: calc(var(--card-pad) + 0.8rem);
    right: calc(var(--card-pad) + 0.8rem);
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    color: var(--blue-dark);
    background-color: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    box-shadow: var(--shadow);
    pointer-events: none; /* the tap goes through to the card */
}

.card-deck.is-enhanced {
    & .card-deck-stack {
        display: grid;
        overflow: visible;
        touch-action: pan-y; /* vertical page scroll stays native, horizontal moves reach the script */
    }

    & .card-deck-card {
        grid-area: 1 / 1;
        translate: calc(var(--dx, 0) * 1px) 0; /* --dx: the drag distance, set by the controller */
        rotate: calc(var(--dx, 0) * 0.05deg);
        transition: translate 0.26s ease, rotate 0.26s ease, scale 0.26s ease, opacity 0.26s ease;
        user-select: none;

        &[data-position="0"] {
            z-index: 4;
            cursor: grab;
        }

        &[data-position="1"] {
            z-index: 3;
            translate: 1.4rem 1rem;
            rotate: 3deg;
            scale: 0.96;
        }

        &[data-position="2"] {
            z-index: 2;
            translate: -1.4rem 1.8rem;
            rotate: -3deg;
            scale: 0.93;
        }

        &[data-position="3"] {
            z-index: 1;
            opacity: 0;
        }

        &.is-grabbing {
            cursor: grabbing;
            transition: none;
        }

        &.is-thrown-left {
            translate: -130% 0;
            rotate: -14deg;
            opacity: 0;
        }

        &.is-thrown-right {
            translate: 130% 0;
            rotate: 14deg;
            opacity: 0;
        }

        /* A tighter pile on a phone: the image gets the width */
        @media (max-width: 589px) {
            &[data-position="1"] {
                translate: 0.8rem 0.8rem;
                rotate: 2deg;
            }

            &[data-position="2"] {
                translate: -0.8rem 1.4rem;
                rotate: -2deg;
            }
        }
    }
}

.card-deck-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
}

/* The arrows only mean something once the cards are piled up */
.card-deck:not(.is-enhanced) .card-deck-bar {
    display: none;
}

.card-deck-arrow {
    display: grid;
    place-items: center;
    width: 4.4rem;
    height: 4.4rem;
    color: var(--blue-ocean);
    background-color: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: var(--shadow-strong);
    transition: scale 0.15s ease;

    &:hover {
        scale: 1.06;
    }
}

.card-deck-count {
    min-width: 5rem;
    font-weight: 700;
    color: var(--blue-dark);
}

@media (prefers-reduced-motion: reduce) {
    .card-deck.is-enhanced .card-deck-card,
    .card-deck-arrow {
        transition: none;
    }
}