/* =========================================================
   NEWMOVIES.ONLINE — TV SHOWS V1

   Deliberately extends the finished Movies catalog instead of
   creating a separate TV design system.
   ========================================================= */

.nm-tvshows-page .nm-movies-intro-copy p {
    max-width: 700px;
}

.nm-tvshow-card .hover-media-card__type {
    letter-spacing: .11em;
}

.nm-tvshow-card .hover-media-card__image {
    object-position: center 24%;
}

.nm-tvshow-card .hover-media-card__logo-wrap {
    max-width: 78%;
}

.nm-tvshow-card .hover-media-card__logo {
    max-height: 62px;
}

.nm-tvshow-card .hover-media-card__fallback-title {
    max-width: 80%;
}

/*
 * The TV grid remains two-up on ordinary phones, matching the
 * finished catalog behavior, while keeping touch cards readable.
 */
@media (max-width: 560px) {
    .nm-tvshows-body .nm-movie-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .nm-tvshows-body .nm-tvshow-card {
        min-height: 142px;
        border-radius: 11px;
    }

    .nm-tvshows-body .nm-tvshow-card .hover-media-card__bottom {
        left: 9px;
        right: 8px;
        bottom: 8px;
        grid-template-columns: minmax(0,1fr) 27px;
        gap: 6px;
    }

    .nm-tvshows-body .nm-tvshow-card .hover-media-card__content {
        min-height: 38px;
    }

    .nm-tvshows-body .nm-tvshow-card .hover-media-card__logo-wrap {
        width: min(110px, 78%);
        min-height: 28px;
    }

    .nm-tvshows-body .nm-tvshow-card .hover-media-card__logo {
        max-height: 36px;
    }

    .nm-tvshows-body .nm-tvshow-card .hover-media-card__fallback-title {
        max-width: 96%;
        font-size: 11.5px;
        line-height: 1.08;
    }

    .nm-tvshows-body .nm-tvshow-card .hover-media-card__type {
        top: 7px;
        left: 7px;
        min-height: 18px;
        padding: 0 6px;
        font-size: 6.5px;
    }

    .nm-tvshows-body .nm-tvshow-card .media-action {
        width: 27px;
        height: 27px;
    }

    .nm-tvshows-body .nm-tvshow-card .media-action::before {
        border-top-width: 4px;
        border-bottom-width: 4px;
        border-left-width: 6px;
    }
}

@media (max-width: 330px) {
    .nm-tvshows-body .nm-movie-grid {
        grid-template-columns: 1fr;
    }

    .nm-tvshows-body .nm-tvshow-card {
        min-height: 205px;
    }
}


/* =========================================================
   V2 — PAGE-1 NEW EPISODES STRIP
   ========================================================= */

.nm-tv-latest-section {
    padding: 28px 0 4px;
}

.nm-tv-latest-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:16px;
}

.nm-tv-latest-heading h2 {
    margin:0;
    color:#f5f7f9;
    font-size:clamp(23px,2.4vw,31px);
    line-height:1.05;
    letter-spacing:-.035em;
}

.nm-tv-latest-heading > p {
    max-width:360px;
    margin:0 0 3px;
    color:#7e8993;
    font-size:9.5px;
    line-height:1.55;
    text-align:right;
}

.nm-tv-latest-shell {
    position:relative;
}

.nm-tv-latest-track {
    display:flex;
    gap:11px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 2px 9px;
    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
    scrollbar-width:none;
}

.nm-tv-latest-track::-webkit-scrollbar {
    display:none;
}

.nm-tv-latest-card {
    flex:0 0 142px;
    min-width:0;
    scroll-snap-align:start;
    color:#fff;
    text-decoration:none;
}

.nm-tv-latest-poster-wrap {
    position:relative;
    aspect-ratio:2 / 3;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.075);
    border-radius:11px;
    background:#0a0e12;
    box-shadow:0 12px 24px rgba(0,0,0,.14);
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.nm-tv-latest-poster-wrap img {
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center top;
    transition:transform .32s ease,filter .25s ease;
}

.nm-tv-latest-poster-shade {
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(3,6,9,.01) 50%,rgba(3,6,9,.27) 75%,rgba(3,6,9,.78) 100%);
    pointer-events:none;
}

.nm-tv-latest-quality {
    position:absolute;
    left:8px;
    top:8px;
    min-height:20px;
    display:inline-flex;
    align-items:center;
    padding:0 7px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(5,8,12,.61);
    backdrop-filter:blur(8px);
    color:#e8ecef;
    font-size:7px;
    font-weight:950;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.nm-tv-latest-open {
    position:absolute;
    right:8px;
    bottom:8px;
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border:1px solid rgba(214,43,58,.42);
    border-radius:50%;
    background:rgba(87,13,23,.80);
    color:#fff;
    font-size:16px;
    opacity:.88;
}

.nm-tv-latest-copy {
    padding:9px 3px 0;
}

.nm-tv-latest-copy strong {
    display:-webkit-box;
    min-height:30px;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    line-clamp:2;
    color:#e9edf0;
    font-size:11.5px;
    font-weight:850;
    line-height:1.25;
    letter-spacing:-.015em;
}

.nm-tv-latest-copy > span {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:5px;
    margin-top:6px;
    color:#78838d;
    font-size:7.5px;
    font-weight:800;
}

.nm-tv-latest-copy i {
    width:3px;
    height:3px;
    border-radius:50%;
    background:#a6333f;
}

.nm-tv-latest-arrow {
    position:absolute;
    z-index:6;
    top:42%;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    transform:translateY(-50%);
    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
    background:rgba(5,8,12,.88);
    color:#dce1e5;
    font-size:20px;
    cursor:pointer;
    box-shadow:0 10px 26px rgba(0,0,0,.32);
    backdrop-filter:blur(10px);
}

.nm-tv-latest-arrow-left { left:-16px; }
.nm-tv-latest-arrow-right { right:-16px; }

@media (hover:hover) and (pointer:fine) {
    .nm-tv-latest-card:hover .nm-tv-latest-poster-wrap {
        transform:translateY(-3px);
        border-color:rgba(214,43,58,.30);
        box-shadow:0 18px 34px rgba(0,0,0,.23);
    }

    .nm-tv-latest-card:hover .nm-tv-latest-poster-wrap img {
        transform:scale(1.035);
        filter:saturate(1.02) brightness(.96);
    }

    .nm-tv-latest-arrow:hover {
        border-color:rgba(214,43,58,.30);
        background:rgba(72,13,21,.94);
        color:#fff;
    }
}

@media (max-width:760px) {
    .nm-tv-latest-section { padding-top:23px; }

    .nm-tv-latest-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:7px;
    }

    .nm-tv-latest-heading > p {
        max-width:520px;
        text-align:left;
    }

    .nm-tv-latest-track {
        margin-right:-14px;
        padding-right:14px;
        gap:9px;
    }

    .nm-tv-latest-card { flex-basis:118px; }

    .nm-tv-latest-copy strong { font-size:10.5px; }

    .nm-tv-latest-arrow { display:none; }
}

@media (max-width:400px) {
    .nm-tv-latest-card { flex-basis:108px; }
}


/* =========================================================
   V3 — NEW EPISODES STRIP ALIGNMENT
   One card per series + compact S1 - E20 metadata.
   ========================================================= */

.nm-tv-latest-copy {
    min-height: 58px;
    display: flex;
    flex-direction: column;
}

.nm-tv-latest-copy strong {
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    margin: 0;
}

.nm-tv-latest-copy > .nm-tv-latest-episode-code {
    min-height: 18px;
    height: 18px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #89939c;
    font-size: 7.8px;
    font-weight: 850;
    line-height: 18px;
    letter-spacing: .02em;
    white-space: nowrap;
}

.nm-tv-latest-episode-code b {
    color: #a93340;
    font-size: 8px;
    font-weight: 950;
}

/* Old dot is no longer used in the compact S/E format. */
.nm-tv-latest-episode-code i {
    display: none;
}

@media (max-width:760px) {
    .nm-tv-latest-copy {
        min-height: 55px;
    }

    .nm-tv-latest-copy strong {
        height: 28px;
        min-height: 28px;
        max-height: 28px;
    }

    .nm-tv-latest-copy > .nm-tv-latest-episode-code {
        height: 17px;
        min-height: 17px;
        line-height: 17px;
        font-size: 7.2px;
    }
}


/* =========================================================
   V4 — COMPACT LATEST EPISODE LABELS
   Title + S/E line use matching visual size and stay on one line.
   ========================================================= */

.nm-tv-latest-copy {
    min-height: 0;
    padding-top: 8px;
}

.nm-tv-latest-copy strong {
    display: block;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #e9edf0;
    font-size: 10.5px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.nm-tv-latest-copy > .nm-tv-latest-episode-code {
    display: block;
    height: auto;
    min-height: 0;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #8f99a2;
    font-size: 10.5px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.nm-tv-latest-episode-code b {
    color: #a93340;
    font-size: 10.5px;
    font-weight: 900;
}

@media (max-width:760px) {
    .nm-tv-latest-copy {
        min-height: 0;
        padding-top: 7px;
    }

    .nm-tv-latest-copy strong,
    .nm-tv-latest-copy > .nm-tv-latest-episode-code,
    .nm-tv-latest-episode-code b {
        font-size: 9.5px;
    }
}


/* =========================================================
   V5 — TV CARD BORDER / CORNER RESTORE
   Keeps the TV catalog cards consistent with the shared card system.
   Overrides the older homepage red-border rule without changing layout.
   ========================================================= */

.nm-tvshows-body .nm-tvshow-card,
.nm-tvshows-body .nm-tvshow-card.hover-media-card {
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 17px !important;
    background: #070a0e;
    box-shadow:
        0 16px 34px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.nm-tvshows-body .nm-tvshow-card .hover-media-card__image,
.nm-tvshows-body .nm-tvshow-card .nm-card__image {
    border-radius: inherit;
}

@media (hover:hover) and (pointer:fine) {
    .nm-tvshows-body .nm-tvshow-card:hover,
    .nm-tvshows-body .nm-tvshow-card.hover-media-card:hover {
        border-color: rgba(214,43,58,.28) !important;
        box-shadow: 0 24px 52px rgba(0,0,0,.28);
    }
}

@media (max-width: 560px) {
    .nm-tvshows-body .nm-tvshow-card,
    .nm-tvshows-body .nm-tvshow-card.hover-media-card {
        border-radius: 11px !important;
    }
}


/* =========================================================
   V6 — TV CARD SHAPE + HOVER DETAILS HARD FIX
   ========================================================= */

/* Force rounded clipping on the complete clickable TV card. */
.nm-tvshows-body .nm-tvshow-card,
.nm-tvshows-body .nm-tvshow-card.hover-media-card,
.nm-tvshows-body .nm-tvshow-card.nm-card {
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 17px !important;
    -webkit-clip-path: inset(0 round 17px);
    clip-path: inset(0 round 17px);
    background: #070a0e;
    box-shadow:
        0 16px 34px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.025);
}

/* Make artwork and shade inherit the exact same curve. */
.nm-tvshows-body .nm-tvshow-card > .nm-card__image,
.nm-tvshows-body .nm-tvshow-card > .hover-media-card__image,
.nm-tvshows-body .nm-tvshow-card > .hover-media-card__shade {
    border-radius: inherit !important;
}

/*
 * Force hover details without depending on pointer:fine.
 * Touch-capable desktop browsers can report a coarse pointer and
 * skip the shared card hover media query.
 */
.nm-tvshows-body .nm-tvshow-card:hover .hover-media-card__normal,
.nm-tvshows-body .nm-tvshow-card:focus-visible .hover-media-card__normal {
    opacity: 0 !important;
    transform: translateY(-5px) !important;
}

.nm-tvshows-body .nm-tvshow-card:hover .hover-media-card__details,
.nm-tvshows-body .nm-tvshow-card:focus-visible .hover-media-card__details {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.nm-tvshows-body .nm-tvshow-card:hover .hover-media-card__shade,
.nm-tvshows-body .nm-tvshow-card:focus-visible .hover-media-card__shade {
    background:
        linear-gradient(
            180deg,
            rgba(3,6,9,.08) 0%,
            rgba(3,6,9,.06) 34%,
            rgba(3,6,9,.53) 62%,
            rgba(3,6,9,.97) 100%
        ),
        linear-gradient(
            90deg,
            rgba(3,6,9,.27) 0%,
            rgba(3,6,9,.02) 64%
        ) !important;
}

.nm-tvshows-body .nm-tvshow-card:hover .hover-media-card__image,
.nm-tvshows-body .nm-tvshow-card:focus-visible .hover-media-card__image {
    transform: scale(1.035);
    filter: saturate(1) contrast(1.06) brightness(.95);
}

.nm-tvshows-body .nm-tvshow-card:hover,
.nm-tvshows-body .nm-tvshow-card:focus-visible {
    border-color: rgba(214,43,58,.26) !important;
    box-shadow: 0 24px 52px rgba(0,0,0,.28);
}

@media (max-width: 560px) {
    .nm-tvshows-body .nm-tvshow-card,
    .nm-tvshows-body .nm-tvshow-card.hover-media-card,
    .nm-tvshows-body .nm-tvshow-card.nm-card {
        border-radius: 11px !important;
        -webkit-clip-path: inset(0 round 11px);
        clip-path: inset(0 round 11px);
    }
}


/* =========================================================
   V7 — DELIBERATE HOVER DELAY
   Prevents accidental pointer passes from instantly swapping
   the TV logo/title into metadata.
   ========================================================= */

/* Mouse-out returns immediately. */
.nm-tvshows-body .nm-tvshow-card .hover-media-card__normal,
.nm-tvshows-body .nm-tvshow-card .hover-media-card__details {
    transition:
        opacity .22s ease 0s,
        transform .22s ease 0s !important;
}

/* Wait 400ms before revealing hover information. */
.nm-tvshows-body .nm-tvshow-card:hover .hover-media-card__normal,
.nm-tvshows-body .nm-tvshow-card:focus-visible .hover-media-card__normal,
.nm-tvshows-body .nm-tvshow-card:hover .hover-media-card__details,
.nm-tvshows-body .nm-tvshow-card:focus-visible .hover-media-card__details {
    transition-delay: .40s !important;
}

/* Keep artwork motion subtle and slightly delayed too. */
.nm-tvshows-body .nm-tvshow-card .hover-media-card__image {
    transition:
        transform .36s cubic-bezier(.2,.7,.2,1) 0s,
        filter .28s ease 0s !important;
}

.nm-tvshows-body .nm-tvshow-card:hover .hover-media-card__image,
.nm-tvshows-body .nm-tvshow-card:focus-visible .hover-media-card__image {
    transition-delay: .12s !important;
}


/* =========================================================
   V8 — TRUE HOVER HOLD
   Keep the logo visible during the hold, then swap logo -> info.
   The important fix is that details stay in the layout while hidden,
   so "display:block" cannot make them flash instantly.
   ========================================================= */

.nm-tvshows-body .nm-tvshow-card .hover-media-card__normal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transition:
        opacity .18s ease 0s,
        transform .18s ease 0s,
        visibility 0s linear 0s !important;
}

.nm-tvshows-body .nm-tvshow-card .hover-media-card__details {
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(7px) !important;
    pointer-events: none !important;
    transition:
        opacity .18s ease 0s,
        transform .18s ease 0s,
        visibility 0s linear .18s !important;
}

/* After a 450ms intentional hover, swap the two states together. */
.nm-tvshows-body .nm-tvshow-card:hover .hover-media-card__normal,
.nm-tvshows-body .nm-tvshow-card:focus-visible .hover-media-card__normal {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-5px) !important;
    transition:
        opacity .18s ease .45s,
        transform .18s ease .45s,
        visibility 0s linear .63s !important;
}

.nm-tvshows-body .nm-tvshow-card:hover .hover-media-card__details,
.nm-tvshows-body .nm-tvshow-card:focus-visible .hover-media-card__details {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition:
        opacity .18s ease .45s,
        transform .18s ease .45s,
        visibility 0s linear .45s !important;
}

/* Mouse-out resets immediately. */
.nm-tvshows-body .nm-tvshow-card:not(:hover) .hover-media-card__normal {
    transition-delay: 0s !important;
}

.nm-tvshows-body .nm-tvshow-card:not(:hover) .hover-media-card__details {
    transition-delay: 0s !important;
}