/* Smartphone poster-first layout and swipeable content rails. */
.now-showing {
    background: radial-gradient(circle at 85% 0, rgba(181, 9, 25, .24), transparent 30%), #120d0f;
    border-top: 1px solid #302529;
    border-bottom: 1px solid #302529;
}

.coming-soon {
    background: radial-gradient(circle at 12% 0, rgba(84, 21, 105, .26), transparent 32%), #0d0a10;
    border-bottom: 1px solid #302529;
}

.coming-soon .section-head small {
    color: #b8aeb9;
}

.coming-soon-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 6px 9px;
    border-radius: 999px;
    background: #5e2477;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .35);
}

.release-countdown {
    color: #d7a8e9;
    font-weight: 800;
}

.now-showing .eyebrow,
.now-showing .section-head small {
    color: #d5c9cc;
}

.theater-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 6px 9px;
    border-radius: 999px;
    background: #b50919;
    color: #fff;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .35);
}

.chips .theatrical-status-chip {
    border-color: #d31828;
    background: #b50919;
    color: #fff;
    font-weight: 900;
}

.chips .theatrical-start {
    border-color: rgba(255, 255, 255, .28);
    color: #f2dadd;
}

.detail-release-banner {
    position: relative;
    z-index: 3;
    margin-top: 86px;
    background: #b50919;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}

.detail-release-banner + .detail-hero {
    padding-top: 32px;
}

.detail-release-banner.is-upcoming {
    background: linear-gradient(90deg, #502063, #27102f);
}

.detail-release-banner.is-category {
    background: #171113;
    border-top: 1px solid #392d30;
    border-bottom: 1px solid #392d30;
    box-shadow: none;
}

.detail-release-banner .shell {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 12px;
}

.release-status {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.detail-release-banner strong {
    padding: 4px 9px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    font-size: 11px;
}

.release-status b {
    padding: 6px 11px;
    border-radius: 999px;
    background: #fff;
    color: #542064;
    font-size: 12px;
}

.category-label {
    color: #a99da0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
}

.detail-category-links {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.detail-category-links a {
    padding: 6px 11px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(0, 0, 0, .16);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.detail-category-links a:hover {
    border-color: #fff;
    background: rgba(255, 255, 255, .12);
}

@media (min-width: 651px) {
    .detail-hero {
        padding-top: 105px;
    }

    .detail-hero .breadcrumb {
        margin-bottom: 18px;
    }
}

@media (min-width: 921px) {
    .hero-slide-inner {
        padding-top: 0;
    }
}

@media (max-width: 650px) {
    .detail-release-banner {
        margin-top: 64px;
    }

    .detail-release-banner + .detail-hero {
        padding-top: 28px;
    }

    .detail-release-banner .shell {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
        padding-top: 11px;
        padding-bottom: 11px;
    }

    .release-status {
        flex-wrap: wrap;
        gap: 8px;
    }

    .detail-category-links {
        width: 100%;
        margin-left: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .detail-category-links::-webkit-scrollbar {
        display: none;
    }

    .detail-category-links a {
        flex: 0 0 auto;
    }

    .hero-slider {
        height: 820px;
    }

    .hero-slide-inner {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 18px;
        padding: 58px 0 84px;
    }

    .hero-slide-poster {
        display: block;
        order: 1;
        width: min(62vw, 232px);
        height: auto;
        aspect-ratio: 2 / 3;
        margin: 0 auto;
        border-radius: 9px;
        overflow: hidden;
        transform: none;
        box-shadow: 0 18px 42px rgba(0, 0, 0, .58);
        flex: 0 0 auto;
    }

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

    .hero-slide-copy {
        order: 2;
        width: 100%;
    }

    .hero-slide-copy h1,
    .hero-slide-copy h2 {
        font-size: 32px;
        line-height: 1.18;
    }

    .hero-slide-copy > p:not(.eyebrow) {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .hero-slide-shade {
        background: linear-gradient(0deg, #090708 4%, rgba(9, 7, 8, .88) 52%, rgba(9, 7, 8, .28) 100%);
    }

    /* Let the next card peek into view so the swipe interaction is obvious. */
    .movie-row,
    .access-ranking-row,
    .person-grid,
    .detail-body .cast-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 14px;
        width: auto;
        margin-right: -16px;
        margin-left: 0;
        padding: 3px 16px 18px 4px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-padding-left: 4px;
        scrollbar-width: none;
    }

    .movie-row::-webkit-scrollbar,
    .access-ranking-row::-webkit-scrollbar,
    .person-grid::-webkit-scrollbar,
    .detail-body .cast-grid::-webkit-scrollbar {
        display: none;
    }

    .movie-row .movie-card,
    .access-ranking-row .access-rank-card,
    .person-grid .person-card {
        display: block !important;
        flex: 0 0 min(42vw, 164px);
        width: min(42vw, 164px);
        scroll-snap-align: start;
    }

    .person-photo,
    .directors .person-photo {
        height: auto;
        aspect-ratio: 2 / 3;
    }

    .detail-hero .detail-intro {
        gap: 28px;
    }

    .detail-body > article,
    .detail-body > aside {
        min-width: 0;
        max-width: 100%;
    }

    .detail-hero .detail-poster {
        width: min(62vw, 232px);
        margin: 0 auto;
        box-shadow: 0 18px 48px rgba(0, 0, 0, .62);
    }

    .detail-body .cast-grid {
        margin-bottom: 34px;
    }

    .detail-body .cast-grid a {
        flex: 0 0 112px;
        width: 112px;
        scroll-snap-align: start;
    }

    .section-head {
        align-items: flex-end;
        gap: 14px;
    }

    .section-head > a {
        flex: 0 0 auto;
    }
}