/* ==========================================================================
   streamit-single-polish.css
   --------------------------------------------------------------------------
   Polish layer for Streamit single pages (movie / tvshow / episode / video)
   and the player page (/movies/{slug}/player/). Loaded AFTER streamit-hubs
   and streamit-redesign, so var(--asp-*) tokens are guaranteed available.

   Scope discipline:
     - Person card rules target .streamit-person-section / .streamit-person-card
       (which exist ONLY in the cast/crew slider markup) — safe everywhere.
     - .ash-grid adjustments live under body.st-*-single + body.st-media-player-single
       so the hub page (/movies/genre/horror/, which has .ash-page on its own
       wrapper) is NEVER touched by these rules.
     - Section-header normalization is scoped to the single-page body classes
       so the homepage / archive sliders keep their current spacing.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CAST / CREW PERSON CARDS — modern surface + typography + hover
   -------------------------------------------------------------------------- */

.streamit-person-section {
    position: relative;
}

.streamit-person-card {
    background: var(--asp-surface, #13171f);
    border: 1px solid var(--asp-border, #252b3a);
    border-radius: 12px;
    padding: 8px 8px 12px;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1),
                border-color .25s ease,
                box-shadow   .25s ease;
    box-sizing: border-box;
    height: 100%;
}

.streamit-person-card:hover,
.streamit-person-card:focus-within {
    transform: translateY(-4px);
    border-color: var(--asp-yellow, #f4c542);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}

.streamit-person-card .streamit-person-media {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 1 / 1.3;
    background: linear-gradient(135deg,
                                var(--asp-surface-3, #232a39),
                                var(--asp-bg, #07090f));
    margin-bottom: .65rem;
}

.streamit-person-card .streamit-person-media:empty::after,
.streamit-person-card .streamit-person-media > a:empty::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 38%, rgba(255,255,255,.18) 0 14%, transparent 15%),
        radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.16) 0 38%, transparent 40%);
}

.streamit-person-card .streamit-person-media img {
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    display: block;
}

.streamit-person-card:hover .streamit-person-media img,
.streamit-person-card:focus-within .streamit-person-media img {
    transform: scale(1.06);
}

.streamit-person-card .streamit-person-detail {
    padding: .35rem .25rem 0;
    text-align: center;
}

.streamit-person-card .streamit-person-name {
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 .15rem;
    color: var(--asp-text, #e9ecf2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.streamit-person-card .streamit-person-name a,
.streamit-person-card .streamit-person-name a.color-inherit {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.streamit-person-card .streamit-person-name a:hover,
.streamit-person-card .streamit-person-name a:focus-visible {
    color: var(--asp-yellow, #f4c542);
}

.streamit-person-card .streamit-person-meta {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--asp-muted, #8d93a3);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.streamit-person-card .streamit-person-meta .list-inline-item {
    display: inline;
}

.streamit-person-card .streamit-person-meta .list-inline-item + .list-inline-item::before {
    content: " \00B7 ";
    color: var(--asp-muted, #8d93a3);
    opacity: .7;
}

.streamit-person-card .streamit-person-meta a {
    color: inherit;
    text-decoration: none;
    transition: color .2s ease;
}

.streamit-person-card .streamit-person-meta a:hover,
.streamit-person-card .streamit-person-meta a:focus-visible {
    color: var(--asp-text, #e9ecf2);
}

.streamit-person-card a:focus-visible {
    outline: 2px solid var(--asp-yellow, #f4c542);
    outline-offset: 3px;
    border-radius: 6px;
}

.streamit-person-section .swiper-slide,
.streamit-person-slider .swiper-slide {
    padding-inline: 4px;
}


/* --------------------------------------------------------------------------
   2. EMPTY CAST/CREW SECTION — hide the residual wrapper
   -------------------------------------------------------------------------- */

.cast-section:has(> .single_page_slick:empty) {
    display: none;
}

.cast-section:empty {
    display: none;
}


/* --------------------------------------------------------------------------
   3. SECTION HEADERS — consistent spacing + accent across cast/crew + morelike
   -------------------------------------------------------------------------- */

body.st-movie-single .streamit-section-header,
body.st-tvshow-single .streamit-section-header,
body.st-video-single .streamit-section-header,
body.st-media-player-single .streamit-section-header,
.asp-page .streamit-section-header {
    margin-bottom: 1.25rem;
}

body.st-movie-single .streamit-section-header .streamit-section-title,
body.st-tvshow-single .streamit-section-header .streamit-section-title,
body.st-video-single .streamit-section-header .streamit-section-title,
body.st-media-player-single .streamit-section-header .streamit-section-title,
.asp-page .streamit-section-header .streamit-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--asp-text, #e9ecf2);
    border-inline-start: 3px solid var(--asp-yellow, #f4c542);
    padding-inline-start: .65rem;
    margin: 0;
}

@media (max-width: 600px) {
    body.st-movie-single .streamit-section-header,
    body.st-tvshow-single .streamit-section-header,
    body.st-video-single .streamit-section-header,
    body.st-media-player-single .streamit-section-header,
    .asp-page .streamit-section-header {
        margin-bottom: .9rem;
    }
    body.st-movie-single .streamit-section-header .streamit-section-title,
    body.st-tvshow-single .streamit-section-header .streamit-section-title,
    body.st-video-single .streamit-section-header .streamit-section-title,
    body.st-media-player-single .streamit-section-header .streamit-section-title,
    .asp-page .streamit-section-header .streamit-section-title {
        font-size: 1rem;
        padding-inline-start: .5rem;
    }
}


/* --------------------------------------------------------------------------
   4. .ash-grid ON SINGLE / PLAYER PAGES
   -------------------------------------------------------------------------- */

body.st-movie-single .ash-grid,
body.st-tvshow-single .ash-grid,
body.st-video-single .ash-grid,
body.st-media-player-single .ash-grid,
.asp-page .ash-grid {
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    max-width: unset;
    margin-inline: auto;
}

body.st-movie-single .ash-card,
body.st-tvshow-single .ash-card,
body.st-video-single .ash-card,
body.st-media-player-single .ash-card,
.asp-page .ash-card {
    font-family: 'Cairo', 'Tajawal', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

body.st-movie-single .ash-card .ash-card-rating,
body.st-tvshow-single .ash-card .ash-card-rating,
body.st-video-single .ash-card .ash-card-rating,
body.st-media-player-single .ash-card .ash-card-rating,
.asp-page .ash-card .ash-card-rating {
    z-index: 3;
}

body.st-movie-single .ash-card .ash-card-play,
body.st-tvshow-single .ash-card .ash-card-play,
body.st-video-single .ash-card .ash-card-play,
body.st-media-player-single .ash-card .ash-card-play,
.asp-page .ash-card .ash-card-play {
    z-index: 2;
}

/* Streamit's premium / upcoming badges sit at top:8px inset-inline-start:8px.
   On .ash-card the rating chip is already there — move the streamit badges
   to the opposite corner so they don't collide. */
body.st-movie-single .ash-card .streamit-badge-premium,
body.st-movie-single .ash-card .streamit-badge-ppv,
body.st-movie-single .ash-card .streamit-badge-ppv-rented,
body.st-movie-single .ash-card .streamit-badge-upcoming,
body.st-tvshow-single .ash-card .streamit-badge-premium,
body.st-tvshow-single .ash-card .streamit-badge-ppv,
body.st-tvshow-single .ash-card .streamit-badge-ppv-rented,
body.st-tvshow-single .ash-card .streamit-badge-upcoming,
body.st-video-single .ash-card .streamit-badge-premium,
body.st-video-single .ash-card .streamit-badge-ppv,
body.st-video-single .ash-card .streamit-badge-ppv-rented,
body.st-video-single .ash-card .streamit-badge-upcoming,
body.st-media-player-single .ash-card .streamit-badge-premium,
body.st-media-player-single .ash-card .streamit-badge-ppv,
body.st-media-player-single .ash-card .streamit-badge-ppv-rented,
body.st-media-player-single .ash-card .streamit-badge-upcoming,
.asp-page .ash-card .streamit-badge-premium,
.asp-page .ash-card .streamit-badge-ppv,
.asp-page .ash-card .streamit-badge-ppv-rented,
.asp-page .ash-card .streamit-badge-upcoming {
    inset-inline-start: auto;
    inset-inline-end: 8px;
    top: 8px;
    z-index: 3;
}

/* Touch — surface the play overlay (no :hover). */
@media (hover: none) {
    body.st-movie-single .ash-card .ash-card-play,
    body.st-tvshow-single .ash-card .ash-card-play,
    body.st-video-single .ash-card .ash-card-play,
    body.st-media-player-single .ash-card .ash-card-play,
    .asp-page .ash-card .ash-card-play {
        opacity: 1;
        background: rgba(0, 0, 0, .25);
    }
    body.st-movie-single .ash-card .ash-card-play i,
    body.st-tvshow-single .ash-card .ash-card-play i,
    body.st-video-single .ash-card .ash-card-play i,
    body.st-media-player-single .ash-card .ash-card-play i,
    .asp-page .ash-card .ash-card-play i {
        opacity: .85;
    }
}

/* Soften hover lift inside .single_page_slick — clipping by .slick-list. */
.single_page_slick .ash-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .45);
}

body.st-movie-single .ash-card:focus-visible,
body.st-tvshow-single .ash-card:focus-visible,
body.st-video-single .ash-card:focus-visible,
body.st-media-player-single .ash-card:focus-visible,
.asp-page .ash-card:focus-visible {
    outline: 2px solid var(--asp-yellow, #f4c542);
    outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   5. RTL SAFETY for the parent theme's person-slider arrow positioning
   -------------------------------------------------------------------------- */

[dir="rtl"] .streamit-person-slider .swiper-arrow .icon-arrow-left,
[dir="rtl"] .streamit-person-slider .swiper-arrow .icon-arrow-right,
[dir="rtl"] .streamit-person-section .swiper-arrow .icon-arrow-left,
[dir="rtl"] .streamit-person-section .swiper-arrow .icon-arrow-right {
    transform: scaleX(-1);
    display: inline-block;
}

@media (hover: none) {
    .streamit-person-slider .swiper-arrow.swiper-button-prev,
    .streamit-person-slider .swiper-arrow.swiper-button-next,
    .streamit-person-section .swiper-arrow.swiper-button-prev,
    .streamit-person-section .swiper-arrow.swiper-button-next {
        opacity: .85;
    }
}


/* --------------------------------------------------------------------------
   6. RESPONSIVE — person card on small screens
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
    .streamit-person-card {
        padding: 6px 6px 10px;
        border-radius: 10px;
    }
    .streamit-person-card .streamit-person-media {
        border-radius: 6px;
        margin-bottom: .5rem;
    }
    .streamit-person-card .streamit-person-name {
        font-size: .85rem;
    }
    .streamit-person-card .streamit-person-meta {
        font-size: .72rem;
    }
}

/* --------------------------------------------------------------------------
   7. HIDE the parent theme's old breadcrumb on every page that emits our
   own .ash-breadcrumbs (the new hub-style archives + term-single pages).
   Streamit's main template includes template-parts/breadcrumb/breadcrumb.php
   for any sub_template !== 'single', producing
   .css_prefix-breadcrumb.css_prefix-breadcrumb-style-one — that duplicates
   what we already render inside .ash-container.
   -------------------------------------------------------------------------- */

body.st-movie-archive .css_prefix-breadcrumb,
body.st-tvshow-archive .css_prefix-breadcrumb,
body.st-video-archive .css_prefix-breadcrumb,
body.st-movie-genre-single .css_prefix-breadcrumb,
body.st-movie-tag-single .css_prefix-breadcrumb,
body.st-tvshow-genre-single .css_prefix-breadcrumb,
body.st-tvshow-tag-single .css_prefix-breadcrumb,
body.st-video-tag-single .css_prefix-breadcrumb,
body.st-video-category-single .css_prefix-breadcrumb {
    display: none;
}


/* --------------------------------------------------------------------------
   8. Filter action bar + offcanvas — minimal polish so they sit naturally
   inside .ash-container. The bulk of the styling comes from the parent
   theme (the same classes are used there), so this is just RTL alignment
   + a few tweaks.
   -------------------------------------------------------------------------- */

.ash-page .ash-actionbar {
    background: var(--asp-surface, #13171f);
    border: 1px solid var(--asp-border, #252b3a);
    border-radius: var(--asp-radius, 16px);
    padding: 14px 18px;
    margin-bottom: 22px;
}

.ash-page .ash-actionbar .results-count {
    color: var(--asp-muted, #8d93a3);
}

.ash-page .ash-actionbar .filter-btn {
    background: var(--asp-surface-2, #1b202b);
    border: 1px solid var(--asp-border, #252b3a);
    color: var(--asp-text, #e9ecf2);
    padding: 8px 14px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.ash-page .ash-actionbar .filter-btn:hover {
    border-color: var(--asp-yellow, #f4c542);
    color: var(--asp-yellow, #f4c542);
}

.ash-page .ash-actionbar .filter-btn .filter-count {
    background: var(--asp-red, #e50914);
    color: #fff;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    min-width: 22px;
    text-align: center;
}

/* End streamit-single-polish.css */