/* ========================================
   Carousel design tokens
======================================== */

.streaming-section {
    --carousel-surface: #ffffff;
    --carousel-text: #0f172a;
    --carousel-text-muted: #5d6b83;
    --carousel-accent: #2563eb;
    --carousel-container: 1400px;
    --carousel-width: clamp(9rem, 28vw, 13rem);
    --carousel-height: calc(var(--carousel-width) * 1.45);
    --carousel-gap: clamp(1.25rem, 3vw, 2rem);
    --carousel-caption-height: 8.5rem;
    --carousel-radius: 0.75rem;
    --carousel-duration: 40s;

    width: min(90%, var(--carousel-container));
    margin-inline: auto;
    overflow: hidden;
}

.streaming-section,
.streaming-section *,
.streaming-section *::before,
.streaming-section *::after {
    box-sizing: border-box;
}

.streaming-section .section-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    padding-inline: clamp(1rem, 4vw, 3rem);
    margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

.streaming-section .section-header h1,
.streaming-section .section-header p {
    margin: 0;
}

.streaming-section .section-header h1 {
    margin-top: 0.35rem;
    color: var(--carousel-text);
    font-size: clamp(2.5rem, 7vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.streaming-section .eyebrow {
    color: var(--carousel-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.streaming-section .section-header > a {
    flex-shrink: 0;
    color: var(--carousel-text-muted);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.25rem;
    transition:
        color 180ms ease,
        text-decoration-color 180ms ease,
        transform 180ms ease;
}

.streaming-section .section-header > a:hover,
.streaming-section .section-header > a:focus-visible {
    color: var(--carousel-text);
    text-decoration-color: currentColor;
    transform: translateY(-0.125rem);
}

.streaming-section .section-header > a:focus-visible {
    border-radius: 0.2rem;
    outline: 0.2rem solid var(--carousel-accent);
    outline-offset: 0.35rem;
}

.streaming-section .slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding-block: 1rem 2rem;
    /* Force LTR so the track starts at the left edge and the
       translateX(-50%) animation reveals the duplicate row from the
       right.  In inherited RTL the track would start at the right edge
       and translateX(-50%) would push everything out of view. */
    direction: ltr;
}

.streaming-section .slider-track {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0;
    gap: 0;
    animation: carousel-scroll var(--carousel-duration) linear infinite;
    will-change: transform;
}

.streaming-section .slider:hover .slider-track,
.streaming-section .slider:focus-within .slider-track {
    animation-play-state: paused;
}

/* Both rows intentionally have identical geometry. The animation moves
   exactly one row width (-50% of the track), making the repeated content
   meet at the same visual position when the animation restarts. */
.streaming-section .carousel-row {
    display: flex;
    flex: 0 0 auto;
    gap: var(--carousel-gap);
    width: max-content;
    margin: 0;
    padding: 0 var(--carousel-gap);
    list-style: none;
    /* Restore RTL for text content inside each row. */
    direction: rtl;
}

.streaming-section .carousel-row li {
    flex: 0 0 var(--carousel-width);
    width: var(--carousel-width);
    height: var(--carousel-height);
    margin: 0;
}

.streaming-section .carousel-row a {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgb(15 23 42 / 10%);
    border-radius: var(--carousel-radius);
    background: var(--carousel-surface);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 0.4rem 1.25rem rgb(15 23 42 / 8%);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.streaming-section .carousel-row a:hover,
.streaming-section .carousel-row a:focus-visible {
    z-index: 2;
    border-color: rgb(37 99 235 / 60%);
    box-shadow: 0 0.8rem 2rem rgb(15 23 42 / 12%);
    outline: none;
    transform: translateY(-0.35rem);
}

.streaming-section .carousel-row a:focus-visible {
    outline: 0.2rem solid var(--carousel-accent);
    outline-offset: 0.25rem;
}

.streaming-section .carousel-row img {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}

.streaming-section .carousel-row a:hover img,
.streaming-section .carousel-row a:focus-visible img {
    transform: scale(1.05);
}

.streaming-section .carousel-item {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.3rem;
    flex: 0 0 var(--carousel-caption-height);
    height: var(--carousel-caption-height);
    margin-top: -1.75rem;
    padding: 1.85rem 1rem 0.9rem;
    overflow: hidden;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--carousel-surface) 1.75rem
    );
    color: var(--carousel-text);
}

.streaming-section .carousel-item strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.4em;
    font-size: clamp(0.95rem, 2.5vw, 1.15rem);
    line-height: 1.2;
}

.streaming-section .carousel-item small {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.8em;
    line-height: 1.4;
    color: var(--carousel-text-muted);
    font-size: 0.75rem;
}

@keyframes carousel-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (max-width: 48rem) {
    .streaming-section .section-header {
        align-items: flex-start;
    }
}

@media (max-width: 32rem) {
    .streaming-section .section-header {
        flex-direction: column;
        gap: 1rem;
    }

    .streaming-section .section-header h1 {
        font-size: clamp(2.5rem, 14vw, 4rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .streaming-section .slider {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .streaming-section .slider-track {
        animation: none;
    }

    .streaming-section .carousel-row[aria-hidden="true"] {
        display: none;
    }

    .streaming-section .carousel-row {
        padding-inline: 1rem;
    }

    .streaming-section .carousel-row a,
    .streaming-section .carousel-row img,
    .streaming-section .section-header > a {
        transition: none;
    }
}