/* ============================
 * CAROUSEL CONTROLS
 * Only exist in the compact layout; the track itself lives in grid.css.
 * ============================ */

.carousel {
    display: none;
}

@media (max-width: 1023px) {
    .carousel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
        height: 60px;
        pointer-events: none;
    }

    .carousel__arrow,
    .carousel__dot {
        pointer-events: auto;
        cursor: pointer;
        padding: 0;
        border: none;
        background: none;
    }

    .carousel__arrow {
        position: relative;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        color: var(--color-text);
    }

    /* Chevrons drawn from a rotated border corner -- no icon font, no SVG. */
    .carousel__arrow::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 9px;
        height: 9px;
        border-top: 1.8px solid currentColor;
        border-right: 1.8px solid currentColor;
    }

    .carousel__arrow[data-carousel-next]::before {
        transform: translateX(-2px) rotate(45deg);
    }

    .carousel__arrow[data-carousel-prev]::before {
        transform: translateX(2px) rotate(-135deg);
    }

    .carousel__arrow:disabled {
        opacity: 0.28;
        cursor: default;
    }

    .carousel__dots {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    /* 44px hit area, small visible dot drawn inside it. */
    .carousel__dot {
        position: relative;
        width: 26px;
        height: 44px;
    }

    .carousel__dot::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: color-mix(in srgb, var(--color-text) 28%, transparent);
        transition: background var(--transition-fast), transform var(--transition-fast);
    }

    .carousel__dot.is-active::before {
        background: var(--color-accent-blue);
        transform: scale(1.32);
    }

    .carousel__dot:focus-visible,
    .carousel__arrow:focus-visible {
        outline: 2px solid var(--color-accent-blue);
        outline-offset: -6px;
        border-radius: 12px;
    }

    /* Reading a card should not also offer swiping. */
    body:has(:is(.card--expanded, .card--closing)) .carousel {
        display: none;
    }
}