/** Flash Cards
 * Interactive flip cards for learning and memory retention
 */
.markdown-section .flash-cards {
    /* Colors */
    --flash-question-back-color:    var(--color-mono-1);
    --flash-answer-back-color:      var(--theme-color-1);

    /* Borders */
    --flash-border-color:           var(--color-mono-3);
    --flash-border-width:           2px;

    /* Typography */
    --flash-question-text-size:     min(1.5rem, 4vw);
    --flash-answer-text-size:       min(1.5rem, 4vw);
    --flash-text-size:              min(1.5rem, 4vw);
    --flash-h1-text-size:           1.8em;
    --flash-h2-text-size:           1.5em;
    --flash-h3-text-size:           1.2em;
    --flash-code-text-size:         0.9em;

    /* Card dimensions */
    --flash-card-width:             40rem;
    --flash-card-aspect:            16/9;

    /* Animation */
    --flash-flip-time:              300ms;

    /* Controls */
    --flash-control-color--low:     var(--color-mono-4);
    --flash-control-color:          var(--color-mono-5);
    --flash-control-color--high:    var(--color-mono-7);

    /* Fullscreen overlay */
    --flash-overlay-color:          #000e;

    /* Layout */
    margin: 2.5em 0 !important;
    padding: 0;
    width: 100%;
    display: grid !important;
    gap: 1em;
    align-content: center;
    font-size: var(--flash-text-size);
    perspective: 90rem;

    /* Cards */
    .flash-card {
        margin: 0 auto;
        width: 100%;
        max-width: var(--flash-card-width);
        aspect-ratio: var(--flash-card-aspect);
        position: relative;
        list-style: none;
        line-height: 1.4;

        box-shadow: var(--box-shadow);

        transform-style: preserve-3d;
        transition: transform var(--flash-flip-time) ease;
        transform: rotateX(0deg);

        &.hidden { display: none; }

        &.revealed {
            transform: rotateX(-180deg);
        }

        :is(h1, h2, h3, h4, h5, h6, p) {
            text-align: center;
            border: none;

            &:is(p)  { font-size: var(--flash-text-size); }
            &:is(h1) { font-size: var(--flash-h1-text-size); }
            &:is(h2) { font-size: var(--flash-h2-text-size); }
            &:is(h3) { font-size: var(--flash-h3-text-size); }
        }

        .card-front,
        .card-back {
            position: absolute;
            inset: 0;
            margin: 0;
            padding: 1rem;

            display: flex;
            flex-direction: column;
            gap: 1em;
            align-items: center;
            justify-content: center;

            background-color: var(--flash-question-back-color);
            border: var(--flash-border-width) solid var(--flash-border-color);
            border-radius: var(--border-radius);

            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;

            > * {
                margin: 0;
                text-wrap: balance;
            }

            &:hover {
                cursor: pointer;
            }
        }

        .card-front {
            /* font-size: var(--flash-question-text-size); */
            transform: rotateX(0deg);
        }

        .card-back {
            /* font-size: var(--flash-answer-text-size); */
            background-color: var(--flash-answer-back-color);
            transform: rotateX(180deg);
        }

        code {
            font-size: var(--flash-code-text-size);
            text-wrap: nowrap;
        }

        .background-image {
            flex: 1;
            width: 100%;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        }
    }

    /* --- Controls --- */
    .card-control-panel {
        width: 100%;
        max-width: var(--flash-card-width);
        margin: 0 auto;

        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2em;

        color: var(--flash-control-color);
        font-size: 0.8em;

        &:hover { color: var(--flash-control-color--high); }

        p { margin: 0; }

        .card-controls {
            display: flex;
            align-items: center;
            gap: 1em;
            line-height: 1;
        }

        .control {
            cursor: pointer;
            transition: transform 200ms;

            &:hover {
                color: var(--theme-color);
                transform: scale(1.2);
            }
        }
    }

    /* Dim controls at the limits of the deck */
    &[data-current-card="1"] .control.card-first,
    &[data-current-card="1"] .control.card-previous,
    &[data-final-card="true"] .control.card-next {
        cursor: default;
        color: var(--flash-control-color--low);
        pointer-events: none;
    }

    /* --- Fullscreen / zoomed state --- */
    &.zoomed {
        position: fixed;
        inset: 0;
        margin: 0 !important;
        z-index: 9999;
        background-color: var(--flash-overlay-color);

        .card-control-panel {
            color: var(--flash-control-color--low);
        }
    }
}