/* ---------- Carousel: professional restyle + thumbnails ---------- */

.carousel {
    position: relative;
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0 0.5rem;
}

/* Viewport: soft inner backdrop so letterboxed images sit on a deliberate surface
   instead of bare bars. A subtle gradient reads as intentional framing. */
.carousel__viewport {
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid var(--border);
    aspect-ratio: 16 / 9;
    width: 100%;
    position: relative;
    background:
        radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 60%),
        color-mix(in srgb, var(--bg2) 90%, var(--card));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 4%, transparent);
}

.carousel__track {
    display: flex;
    transition: transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
    height: 100%;
}

/* Images: contain so nothing is cropped, centred, with a little breathing room
   so screenshots never touch the rounded corners. */
.carousel__slide {
    width: 100%;
    flex: 0 0 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 0.75rem;
    background: transparent;
}

/* Nav buttons: larger hit area, frosted, only fully visible on hover/focus */
.carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    backdrop-filter: blur(8px);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 160ms ease, transform 160ms ease, background 160ms ease;
    z-index: 2;
}

    .carousel:hover .carousel__btn {
        opacity: 0.9;
    }

    .carousel__btn:hover {
        opacity: 1;
        background: color-mix(in srgb, var(--bg) 85%, transparent);
        transform: translateY(-50%) scale(1.06);
    }

    .carousel__btn:focus-visible {
        outline: none;
        opacity: 1;
        box-shadow: 0 0 0 4px var(--focus);
    }

.carousel__btn--prev {
    left: 12px;
}

.carousel__btn--next {
    right: 12px;
}

/* Dots */
.carousel__dots {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
}

.carousel__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: none;
    background: color-mix(in srgb, var(--text) 22%, transparent);
    cursor: pointer;
    padding: 0;
    transition: background 160ms ease, width 160ms ease;
}

    .carousel__dot.is-active {
        width: 22px;
        background: linear-gradient(135deg, var(--primary), var(--primary2));
    }

/* Thumbnail strip */
.carousel__thumbs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding: 0.25rem 0.1rem 0.4rem;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}

    .carousel__thumbs::-webkit-scrollbar {
        height: 6px;
    }

    .carousel__thumbs::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--text) 18%, transparent);
        border-radius: 999px;
    }

.carousel__thumb {
    flex: 0 0 auto;
    width: 92px;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    background: color-mix(in srgb, var(--bg2) 90%, var(--card));
    opacity: 0.55;
    transition: opacity 160ms ease, border-color 160ms ease, transform 160ms ease;
    scroll-snap-align: start;
}

    .carousel__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .carousel__thumb:hover {
        opacity: 0.85;
        transform: translateY(-1px);
    }

    .carousel__thumb.is-active {
        opacity: 1;
        border-color: color-mix(in srgb, var(--primary) 70%, var(--border));
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 50%, transparent);
    }

    .carousel__thumb:focus-visible {
        outline: none;
        opacity: 1;
        box-shadow: 0 0 0 3px var(--focus);
    }

@media (max-width: 720px) {
    .carousel__thumb {
        width: 72px;
    }

    .carousel__btn {
        width: 38px;
        height: 38px;
    }
}