:root {
    --bg: #05080c;
    --bg-2: #090d12;
    --panel: #0c1218;
    --line: rgba(255,255,255,.075);
    --text: #f5f7f9;
    --muted: #8f9aa5;
    --accent: #ef3340;
    --shell: 1480px;
    --radius-lg: 22px;
    --radius-md: 15px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background:
        radial-gradient(circle at 80% -5%, rgba(28,45,67,.18), transparent 28%),
        var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img { display: block; width: 100%; }

.site-shell {
    width: min(calc(100% - 48px), var(--shell));
    margin: 0 auto;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--line);
    background: rgba(5,8,12,.88);
    backdrop-filter: blur(18px);
}

.header-inner {
    min-height: 72px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 28px;
}

.brand {
    width: fit-content;
    text-decoration: none;
    font-weight: 950;
    letter-spacing: -.045em;
    font-size: 19px;
}

.brand-main { color: #f7f9fb; }
.brand-dot, .brand-online { color: var(--accent); }
.brand-online { font-size: .72em; letter-spacing: .02em; }

.main-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.main-nav a,
.footer-links a,
.browse-link {
    color: #aab4bd;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}

.main-nav a:hover,
.footer-links a:hover,
.browse-link:hover,
.text-link:hover {
    color: #fff;
}

.header-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 18px;
}

.search-trigger {
    min-width: 106px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    color: #dfe5ea;
    cursor: pointer;
}

.search-glyph {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-radius: 50%;
    position: relative;
}

.search-glyph:after {
    content: "";
    position: absolute;
    width: 6px;
    height: 2px;
    right: -5px;
    bottom: -2px;
    border-radius: 2px;
    background: currentColor;
    transform: rotate(45deg);
}

.search-label {
    font-size: 12px;
    font-weight: 800;
}

.hero-section {
    padding: 22px 0 18px;
}

.hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 14px;
}

.hero-main {
    min-height: 560px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        var(--hero-image) center / cover no-repeat,
        #10161e;
}

.hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3,6,9,.94) 0%, rgba(3,6,9,.72) 31%, rgba(3,6,9,.24) 61%, rgba(3,6,9,.02) 100%),
        linear-gradient(0deg, rgba(3,6,9,.55), transparent 45%);
}

.hero-content {
    position: absolute;
    z-index: 2;
    left: clamp(30px, 4vw, 62px);
    bottom: clamp(34px, 5vw, 58px);
    max-width: 560px;
}

.eyebrow,
.section-kicker {
    display: block;
    margin-bottom: 10px;
    color: var(--accent);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.title-lockup {
    margin-bottom: 18px;
    line-height: .84;
    letter-spacing: -.06em;
}

.title-line-1,
.title-line-2 {
    display: block;
    font-weight: 280;
    font-size: clamp(50px, 6.1vw, 92px);
}

.title-line-2 {
    color: var(--accent);
    margin-left: .65em;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px 14px;
    color: #c4ccd3;
    font-size: 12px;
    font-weight: 750;
}

.hero-meta .rating { color: #ffd068; }

.hero-copy {
    max-width: 500px;
    margin: 16px 0 0;
    color: #a7b1ba;
    font-size: 14px;
    line-height: 1.65;
}

.hero-actions {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 21px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
    transition: transform .18s ease, filter .18s ease;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 10px 28px rgba(239,51,64,.22);
}

.btn-primary:hover { filter: brightness(1.08); }

.btn-secondary {
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(10,15,21,.58);
    color: #f1f4f6;
}

.hero-index {
    position: absolute;
    right: 22px;
    bottom: 18px;
    color: rgba(255,255,255,.52);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
}

.hero-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
}

.side-feature {
    min-height: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #10161e;
    text-decoration: none;
}

.side-feature img {
    height: 100%;
    object-fit: cover;
    transition: transform .32s ease;
}

.side-feature:hover img { transform: scale(1.035); }

.side-feature-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(3,6,9,.91), rgba(3,6,9,.02) 72%);
}

.side-feature-copy {
    position: absolute;
    left: 18px;
    right: 48px;
    bottom: 17px;
}

.side-feature-copy strong,
.side-feature-copy span {
    display: block;
}

.side-feature-copy strong {
    font-size: 18px;
    letter-spacing: -.025em;
}

.side-feature-copy span {
    margin-top: 4px;
    color: #9da7b0;
    font-size: 11px;
}

.side-feature-arrow {
    position: absolute;
    right: 16px;
    bottom: 18px;
    color: #fff;
    font-size: 17px;
}

.first-content {
    padding-top: 42px;
}

.section-block {
    padding: 46px 0 8px;
}

.compact-top {
    padding-top: 40px;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.section-heading h2 {
    margin: 0;
    color: #f6f8fa;
    font-size: clamp(25px, 2.6vw, 34px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.text-link {
    margin-bottom: 3px;
    color: #87939e;
    text-decoration: none;
    font-size: 11px;
    font-weight: 850;
}

.tonight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 15px;
}

.tonight-card {
    min-height: 270px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel);
    text-decoration: none;
}

.tonight-card img,
.week-card img,
.format-card img {
    height: 100%;
    object-fit: cover;
    transition: transform .34s ease;
}

.tonight-card:hover img,
.week-card:hover img,
.format-card:hover img {
    transform: scale(1.025);
}

.card-fade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(3,6,9,.94), rgba(3,6,9,.06) 68%),
        linear-gradient(90deg, rgba(3,6,9,.2), transparent 50%);
}

.pick-number {
    position: absolute;
    left: 18px;
    top: 16px;
    color: rgba(255,255,255,.48);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .17em;
}

.tonight-copy,
.week-copy {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 17px;
}

.tonight-copy strong,
.tonight-copy span,
.week-copy strong,
.week-copy span {
    display: block;
}

.tonight-copy strong,
.week-copy strong {
    font-size: 18px;
    letter-spacing: -.025em;
}

.tonight-copy span,
.week-copy span {
    margin-top: 4px;
    color: #9ca6b0;
    font-size: 11px;
}

.week-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}

.week-card {
    min-height: 185px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel);
    text-decoration: none;
}

.week-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(3,6,9,.93), rgba(3,6,9,.03) 72%);
}

.corner-arrow {
    position: absolute;
    right: 14px;
    top: 13px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 50%;
    background: rgba(5,8,12,.42);
    color: #fff;
    font-size: 13px;
}

.format-section {
    padding-top: 44px;
    padding-bottom: 52px;
}

.format-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.format-card {
    min-height: 300px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--panel);
    text-decoration: none;
}

.format-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(3,6,9,.91), rgba(3,6,9,.24) 76%);
}

.format-copy {
    position: absolute;
    left: 28px;
    bottom: 28px;
}

.format-copy span,
.format-copy strong,
.format-copy small {
    display: block;
}

.format-copy span {
    color: var(--accent);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.format-copy strong {
    margin-top: 5px;
    font-size: clamp(34px, 4.5vw, 54px);
    line-height: .98;
    letter-spacing: -.05em;
}

.format-copy small {
    margin-top: 9px;
    color: #a5afb8;
    font-size: 12px;
}

.format-arrow {
    position: absolute;
    right: 26px;
    bottom: 26px;
    color: #fff;
    font-size: 27px;
    transition: transform .18s ease;
}

.format-card:hover .format-arrow {
    transform: translateX(4px);
}

.site-footer {
    border-top: 1px solid var(--line);
    background: #04070a;
}

.footer-inner {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.footer-links {
    display: flex;
    gap: 22px;
}

.footer-brand { font-size: 15px; }

.search-panel {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 30px;
    background: rgba(3,5,8,.95);
    backdrop-filter: blur(24px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.search-panel.is-open {
    opacity: 1;
    visibility: visible;
}

.search-panel-inner {
    width: min(720px, 100%);
}

.search-panel input {
    width: 100%;
    margin-top: 7px;
    padding: 22px 0 18px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.18);
    outline: 0;
    background: transparent;
    color: #fff;
    font-size: clamp(28px, 5vw, 52px);
    font-weight: 700;
    letter-spacing: -.04em;
}

.search-panel input::placeholder { color: #555f69; }

.search-panel p {
    color: #737e89;
    font-size: 12px;
    line-height: 1.6;
}

.search-close {
    position: absolute;
    right: 34px;
    top: 24px;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
}

@media (max-width: 980px) {
    .hero-layout {
        grid-template-columns: 1fr;
    }

    .hero-side {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
    }

    .side-feature {
        min-height: 240px;
    }

    .week-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    .site-shell {
        width: min(calc(100% - 28px), var(--shell));
    }

    .header-inner {
        min-height: 66px;
        grid-template-columns: 1fr auto;
    }

    .main-nav,
    .browse-link {
        display: none;
    }

    .search-label {
        display: none;
    }

    .search-trigger {
        min-width: 42px;
        width: 42px;
        padding: 0;
    }

    .hero-section {
        padding-top: 14px;
    }

    .hero-main {
        min-height: 560px;
    }

    .hero-shade {
        background:
            linear-gradient(0deg, rgba(3,6,9,.95), rgba(3,6,9,.22) 72%),
            linear-gradient(90deg, rgba(3,6,9,.58), transparent);
    }

    .hero-content {
        left: 22px;
        right: 22px;
        bottom: 28px;
    }

    .title-line-1,
    .title-line-2 {
        font-size: clamp(48px, 16vw, 78px);
    }

    .title-line-2 {
        margin-left: .35em;
    }

    .hero-copy {
        font-size: 13px;
    }

    .hero-index {
        display: none;
    }

    .hero-side {
        grid-template-columns: 1fr;
    }

    .side-feature {
        min-height: 220px;
    }

    .first-content,
    .section-block {
        padding-top: 40px;
    }

    .section-heading {
        align-items: flex-start;
    }

    .text-link {
        display: none;
    }

    .tonight-grid,
    .week-grid,
    .format-grid {
        grid-template-columns: 1fr;
    }

    .tonight-card {
        min-height: 280px;
    }

    .week-card {
        min-height: 205px;
    }

    .format-card {
        min-height: 285px;
    }

    .footer-inner {
        padding: 26px 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-links {
        flex-wrap: wrap;
        gap: 15px 20px;
    }
}


/* ==============================
   V3: TMDb hero artwork support
   ============================== */

.hero-logo-wrap {
    width: min(460px, 76%);
    min-height: 92px;
    display: flex;
    align-items: flex-end;
    margin: 2px 0 20px;
}

.hero-logo {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

.title-lockup-fallback {
    max-width: 540px;
    margin-bottom: 20px;
    line-height: .95;
}

.title-lockup-fallback span {
    display: block;
    color: #f7f9fb;
    font-size: clamp(48px, 6vw, 88px);
    font-weight: 350;
    letter-spacing: -.055em;
    text-transform: uppercase;
}

.hero-main {
    background-position: center center;
}

@media (max-width: 760px) {
    .hero-logo-wrap {
        width: min(380px, 84%);
        min-height: 68px;
        margin-bottom: 17px;
    }

    .hero-logo {
        max-height: 110px;
    }

    .title-lockup-fallback span {
        font-size: clamp(44px, 14vw, 72px);
    }
}


/* =========================================================
   V3.1 HERO POLISH
   Visual changes only. TMDb/data logic is unchanged.
   ========================================================= */

/* Give the brand a little more presence without enlarging the whole header. */
.site-header .brand {
    font-size: 22px;
}

/* A slightly wider side rail makes the supporting artwork feel cinematic. */
.hero-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 16px;
}

/* Keep the whole top composition a little tighter vertically. */
.hero-main {
    min-height: 520px;
}

/* Let more of the actual TMDb backdrop survive the left readability treatment. */
.hero-shade {
    background:
        linear-gradient(
            90deg,
            rgba(3,6,9,.93) 0%,
            rgba(3,6,9,.72) 27%,
            rgba(3,6,9,.30) 53%,
            rgba(3,6,9,.06) 76%,
            rgba(3,6,9,.00) 100%
        ),
        linear-gradient(
            0deg,
            rgba(3,6,9,.48) 0%,
            rgba(3,6,9,.08) 48%,
            transparent 72%
        );
}

/* Slightly lower, calmer content placement. */
.hero-content {
    bottom: 42px;
    max-width: 570px;
}

/* Official TMDb logo: a touch larger, while respecting extreme logo shapes. */
.hero-logo-wrap {
    width: min(500px, 80%);
    min-height: 86px;
    margin: 0 0 22px;
}

.hero-logo {
    max-height: 138px;
}

/* A little more separation between metadata / overview / actions. */
.hero-meta {
    gap: 10px 16px;
}

.hero-copy {
    margin-top: 18px;
    max-width: 540px;
    line-height: 1.72;
}

.hero-actions {
    margin-top: 24px;
}

/* Supporting cards: emphasize landscape composition and keep text quiet. */
.hero-side {
    gap: 16px;
}

.side-feature {
    border-radius: 20px;
}

.side-feature img {
    object-position: center center;
}

.side-feature-overlay {
    background:
        linear-gradient(
            0deg,
            rgba(3,6,9,.94) 0%,
            rgba(3,6,9,.52) 28%,
            rgba(3,6,9,.05) 72%
        );
}

.side-feature-copy {
    left: 20px;
    right: 54px;
    bottom: 18px;
}

.side-feature-copy strong {
    font-size: 20px;
    line-height: 1.1;
}

.side-feature-copy span {
    margin-top: 6px;
}

.side-feature-arrow {
    right: 18px;
    bottom: 19px;
}

/* At medium widths, keep the current responsive behavior. */
@media (max-width: 1120px) {
    .hero-layout {
        grid-template-columns: minmax(0, 1fr) 330px;
    }
}

@media (max-width: 980px) {
    .hero-layout {
        grid-template-columns: 1fr;
    }

    .hero-main {
        min-height: 540px;
    }

    .hero-side {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
    }

    .side-feature {
        min-height: 230px;
    }
}

@media (max-width: 760px) {
    .site-header .brand {
        font-size: 19px;
    }

    .hero-main {
        min-height: 560px;
    }

    .hero-content {
        bottom: 28px;
    }

    .hero-logo-wrap {
        width: min(390px, 86%);
        min-height: 64px;
        margin-bottom: 18px;
    }

    .hero-logo {
        max-height: 108px;
    }

    .hero-side {
        grid-template-columns: 1fr;
    }

    .side-feature {
        min-height: 215px;
    }
}


/* =========================================================
   V3.2 — 3 PICKS FOR TONIGHT (TMDb)
   Only this section changes in V3.2.
   ========================================================= */

.tonight-card {
    min-height: 290px;
}

.tonight-card > img:first-child {
    object-position: center center;
}

.card-fade {
    background:
        linear-gradient(
            0deg,
            rgba(3,6,9,.97) 0%,
            rgba(3,6,9,.62) 28%,
            rgba(3,6,9,.10) 66%,
            rgba(3,6,9,.02) 100%
        ),
        linear-gradient(
            90deg,
            rgba(3,6,9,.18),
            transparent 56%
        );
}

.pick-topline {
    position: absolute;
    z-index: 2;
    left: 18px;
    right: 18px;
    top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pick-number {
    position: static;
    color: rgba(255,255,255,.52);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .18em;
}

.pick-label {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    background: rgba(4,7,11,.48);
    color: rgba(255,255,255,.88);
    backdrop-filter: blur(8px);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.tonight-copy {
    left: 18px;
    right: 18px;
    bottom: 17px;
}

.tonight-logo-wrap {
    width: min(220px, 64%);
    min-height: 46px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 8px;
}

.tonight-logo {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 70px;
    object-fit: contain !important;
    object-position: left bottom !important;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.28));
}

.tonight-copy > strong {
    display: block;
    margin-bottom: 6px;
    color: #f7f9fa;
    font-size: 21px;
    line-height: 1.05;
}

.tonight-meta {
    display: block;
    margin-top: 0 !important;
    color: #c1cad2 !important;
    font-size: 10px !important;
    font-weight: 800;
}

.tonight-reason {
    display: block;
    max-width: 330px;
    margin-top: 7px !important;
    color: #8f9aa5 !important;
    font-size: 10px !important;
    line-height: 1.45;
}

@media (max-width: 760px) {
    .tonight-card {
        min-height: 300px;
    }

    .tonight-logo-wrap {
        width: min(230px, 70%);
    }

    .tonight-logo {
        max-height: 72px;
    }
}


/* =========================================================
   V3.3 — 3 PICKS VISUAL POLISH ONLY
   Bigger pick labels, stronger readability, punchier title/logo.
   ========================================================= */

.tonight-card {
    min-height: 300px;
}

.card-fade {
    background:
        linear-gradient(
            0deg,
            rgba(3,6,9,.985) 0%,
            rgba(3,6,9,.86) 18%,
            rgba(3,6,9,.42) 42%,
            rgba(3,6,9,.12) 68%,
            rgba(3,6,9,.03) 100%
        ),
        linear-gradient(
            90deg,
            rgba(3,6,9,.22),
            transparent 56%
        );
}

.pick-topline {
    top: 15px;
    left: 16px;
    right: 16px;
}

.pick-number {
    font-size: 11px;
    letter-spacing: .2em;
    color: rgba(255,255,255,.64);
    text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

.pick-label {
    min-height: 31px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(17,21,27,.72);
    color: #ffffff;
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: .15em;
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

.tonight-card:nth-child(1) .pick-label {
    background: rgba(40, 58, 88, .82);
}

.tonight-card:nth-child(2) .pick-label {
    background: rgba(92, 62, 24, .82);
}

.tonight-card:nth-child(3) .pick-label {
    background: rgba(58, 36, 78, .82);
}

.tonight-copy {
    left: 18px;
    right: 18px;
    bottom: 18px;
    text-shadow: 0 2px 10px rgba(0,0,0,.32);
}

.tonight-logo-wrap {
    width: min(240px, 68%);
    min-height: 54px;
    margin-bottom: 10px;
}

.tonight-logo {
    max-height: 78px;
    filter:
        brightness(1.08)
        contrast(1.08)
        saturate(1.04)
        drop-shadow(0 8px 16px rgba(0,0,0,.34));
}

.tonight-copy > strong {
    margin-bottom: 7px;
    font-size: 23px;
    color: #ffffff;
    text-shadow: 0 4px 14px rgba(0,0,0,.34);
}

.tonight-meta {
    margin-top: 0 !important;
    color: #eef3f7 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .015em;
}

.tonight-reason {
    max-width: 340px;
    margin-top: 8px !important;
    color: #d5dce3 !important;
    font-size: 11px !important;
    font-weight: 600;
    line-height: 1.5;
}

@media (max-width: 760px) {
    .tonight-card {
        min-height: 310px;
    }

    .pick-label {
        min-height: 30px;
        padding: 0 12px;
        font-size: 10px;
    }

    .tonight-copy > strong {
        font-size: 22px;
    }

    .tonight-meta,
    .tonight-reason {
        font-size: 11px !important;
    }
}


/* =========================================================
   V3.4 — TONIGHT'S SHORTLIST INTERACTION UPDATE
   - new section heading
   - metadata larger
   - metadata shown on hover
   - title/logo hidden on hover
   ========================================================= */

.tonight-card {
    overflow: hidden;
}

.tonight-copy {
    min-height: 104px;
}

.tonight-titleblock,
.tonight-hoverinfo {
    transition: opacity .22s ease, transform .22s ease;
}

.tonight-titleblock {
    opacity: 1;
    transform: translateY(0);
}

.tonight-hoverinfo {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    opacity: 1;
    transform: translateY(0);
}

.tonight-meta {
    color: #f4f8fb !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .01em;
}

.tonight-genre {
    display: block;
    margin-top: 7px;
    color: #d6dde4;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

.tonight-reason {
    margin-top: 9px !important;
    color: #dce3e9 !important;
    font-size: 11.5px !important;
    font-weight: 600;
    line-height: 1.5;
}

@media (hover:hover) and (pointer:fine) {
    .tonight-hoverinfo {
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
    }

    .tonight-card:hover .card-fade {
        background:
            linear-gradient(
                0deg,
                rgba(3,6,9,.992) 0%,
                rgba(3,6,9,.92) 24%,
                rgba(3,6,9,.55) 48%,
                rgba(3,6,9,.18) 72%,
                rgba(3,6,9,.05) 100%
            ),
            linear-gradient(
                90deg,
                rgba(3,6,9,.26),
                transparent 56%
            );
    }

    .tonight-card:hover .tonight-titleblock {
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
    }

    .tonight-card:hover .tonight-hoverinfo {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* On touch devices, keep the info visible because hover is not reliable. */
@media (hover:none), (pointer:coarse) {
    .tonight-hoverinfo {
        position: static;
        margin-top: 8px;
    }

    .tonight-copy {
        min-height: auto;
    }
}


/* =========================================================
   V3.5 — FINAL TONIGHT'S SHORTLIST HOVER TUNE
   CSS only.
   ========================================================= */

@media (hover:hover) and (pointer:fine) {
    .tonight-hoverinfo {
        bottom: 30px;
    }

    .tonight-meta {
        font-size: 14px !important;
        line-height: 1.35;
    }

    .tonight-genre {
        margin-top: 8px;
        font-size: 12.5px;
    }

    .tonight-reason {
        margin-top: 10px !important;
        max-width: 360px;
        font-size: 12px !important;
        line-height: 1.5;
    }
}


/* =========================================================
   V3.6 — SHOW MOVIE TITLE IN HOVER DETAILS
   ========================================================= */

.tonight-hover-title {
    display: block;
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: .01em;
}

@media (hover:hover) and (pointer:fine) {
    .tonight-hover-title {
        font-size: 14px;
    }
}


/* =========================================================
   V3.7 — HOVER TITLE SIZE FIX
   Make the plain movie title match the hover metadata scale.
   ========================================================= */

.tonight-copy .tonight-hover-title {
    display: block;
    margin-bottom: 9px;
    color: #ffffff;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.35;
    letter-spacing: .01em;
}

@media (hover:hover) and (pointer:fine) {
    .tonight-copy .tonight-hover-title {
        font-size: 14px !important;
    }
}


/* =========================================================
   V3.8 — HIGHLIGHT TMDb RATING
   ========================================================= */

.tonight-rating {
    color: #ffd54a;
    font-weight: 950;
    text-shadow: 0 2px 8px rgba(0,0,0,.30);
}

.meta-sep {
    color: rgba(255,255,255,.70);
}


/* =========================================================
   V3.9 — FIX HOVER META LINE
   Keep year, runtime, separators and rating on one line.
   ========================================================= */

.tonight-meta {
    display: block !important;
    white-space: normal;
}

.tonight-meta > span {
    display: inline !important;
    margin: 0 !important;
}

.tonight-meta .meta-sep {
    display: inline !important;
    color: rgba(255,255,255,.72);
}

.tonight-meta .tonight-rating {
    display: inline !important;
    color: #ffd54a;
    font-weight: 950;
}


/* =========================================================
   V4.0 — HARD FIX FOR TONIGHT META ROW
   Force the hover metadata into one horizontal flex row.
   ========================================================= */

.tonight-hoverinfo .tonight-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    width: auto !important;
    margin: 0 !important;
    white-space: normal !important;
}

.tonight-hoverinfo .tonight-meta > span {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

.tonight-hoverinfo .tonight-meta .meta-sep {
    display: inline-flex !important;
    padding: 0 5px !important;
    color: rgba(255,255,255,.72) !important;
}

.tonight-hoverinfo .tonight-meta .tonight-rating {
    display: inline-flex !important;
    color: #ffd54a !important;
    font-weight: 950 !important;
}


/* =========================================================
   V4.1 — CLEAN META MARKUP FIX
   Uses a DIV instead of nested SPANs, avoiding old span rules.
   ========================================================= */

.tonight-hoverinfo .tonight-meta-line {
    display: block;
    margin: 0;
    color: #f4f8fb;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: .01em;
    white-space: normal;
}

.tonight-hoverinfo .meta-dot {
    display: inline;
    margin: 0;
    padding: 0 4px;
    color: rgba(255,255,255,.72);
    font: inherit;
}

.tonight-hoverinfo .tonight-rating {
    display: inline;
    margin: 0;
    padding: 0;
    color: #ffd54a;
    font-style: normal;
    font-weight: 950;
    text-shadow: 0 2px 8px rgba(0,0,0,.30);
}


/* =========================================================
   V4.2 — NEW THIS WEEK: MIXED MOVIES + TV
   Lighter interaction than Tonight's Shortlist.
   ========================================================= */

.week-card {
    min-height: 205px;
}

.week-card > img:first-child {
    object-position: center center;
}

.week-overlay {
    background:
        linear-gradient(
            0deg,
            rgba(3,6,9,.94) 0%,
            rgba(3,6,9,.56) 29%,
            rgba(3,6,9,.10) 68%,
            rgba(3,6,9,.02) 100%
        );
    transition: background .22s ease;
}

.week-type {
    position: absolute;
    z-index: 3;
    top: 13px;
    left: 14px;
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(5,8,12,.56);
    color: rgba(255,255,255,.88);
    backdrop-filter: blur(8px);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.week-copy {
    left: 17px;
    right: 17px;
    bottom: 16px;
}

.week-title-state,
.week-hover-state {
    transition: opacity .2s ease, transform .2s ease;
}

.week-logo-wrap {
    width: min(180px, 64%);
    min-height: 36px;
    display: flex;
    align-items: flex-end;
}

.week-logo {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 52px;
    object-fit: contain !important;
    object-position: left bottom !important;
    filter: brightness(1.08) contrast(1.06) drop-shadow(0 6px 12px rgba(0,0,0,.30));
}

.week-hover-state {
    position: absolute;
    left: 17px;
    right: 17px;
    bottom: 16px;
}

.week-hover-state > strong {
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 1.1;
    letter-spacing: -.02em;
}

.week-meta-line {
    margin-top: 7px;
    color: #eef3f7;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.35;
}

.week-genre {
    display: block;
    margin-top: 5px !important;
    color: #cbd4dc !important;
    font-size: 10px !important;
    line-height: 1.4;
}

.week-added {
    display: block;
    margin-top: 7px !important;
    color: var(--accent) !important;
    font-size: 9px !important;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (hover:hover) and (pointer:fine) {
    .week-hover-state {
        opacity: 0;
        transform: translateY(7px);
        pointer-events: none;
    }

    .week-card:hover .week-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(3,6,9,.98) 0%,
                rgba(3,6,9,.83) 30%,
                rgba(3,6,9,.28) 64%,
                rgba(3,6,9,.05) 100%
            );
    }

    .week-card:hover .week-title-state {
        opacity: 0;
        transform: translateY(-6px);
    }

    .week-card:hover .week-hover-state {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

@media (hover:none), (pointer:coarse) {
    .week-hover-state {
        display: none;
    }
}


/* =========================================================
   V4.3 — NEW THIS WEEK CHEVRON
   Replaces the external-link style arrow with a quieter
   circular chevron that appears on hover.
   ========================================================= */

.week-card .week-chevron {
    position: absolute;
    z-index: 4;
    right: 14px;
    bottom: 14px;

    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.20);
    border-radius: 50%;

    background: rgba(7,10,14,.58);
    color: #fff;

    font-size: 25px;
    font-weight: 500;
    line-height: 1;

    backdrop-filter: blur(8px);

    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity .20s ease,
        transform .20s ease,
        background .20s ease,
        border-color .20s ease;
}

@media (hover:hover) and (pointer:fine) {
    .week-card:hover .week-chevron {
        opacity: 1;
        transform: translateX(0);
        background: rgba(255,255,255,.13);
        border-color: rgba(255,255,255,.34);
    }
}

@media (hover:none), (pointer:coarse) {
    .week-card .week-chevron {
        opacity: .82;
        transform: none;
        width: 30px;
        height: 30px;
        font-size: 23px;
    }
}


/* =========================================================
   V4.4 — GLOWING RED BUTTON FOR NEW THIS WEEK
   Replaces the subtle chevron style with a red glowing action button.
   ========================================================= */

.week-card .week-chevron {
    right: 14px;
    bottom: 14px;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 999px;

    background: linear-gradient(180deg, #ff5a5f 0%, #ff3138 55%, #e61d2c 100%);
    color: #ffffff;

    font-size: 26px;
    font-weight: 700;
    line-height: 1;

    box-shadow:
        0 10px 22px rgba(255, 49, 56, .34),
        0 0 18px rgba(255, 49, 56, .24),
        inset 0 1px 0 rgba(255,255,255,.24);

    opacity: .84;
    transform: scale(.96);
    transition:
        opacity .20s ease,
        transform .20s ease,
        box-shadow .20s ease,
        filter .20s ease;
}

@media (hover:hover) and (pointer:fine) {
    .week-card:hover .week-chevron {
        opacity: 1;
        transform: scale(1);
        box-shadow:
            0 14px 28px rgba(255, 49, 56, .42),
            0 0 24px rgba(255, 49, 56, .34),
            inset 0 1px 0 rgba(255,255,255,.28);
        filter: brightness(1.06);
    }
}

@media (hover:none), (pointer:coarse) {
    .week-card .week-chevron {
        opacity: .96;
        transform: none;
        width: 36px;
        height: 36px;
        font-size: 25px;
    }
}


/* =========================================================
   V4.5 — PERFECTLY CENTERED CSS CHEVRON
   Hide the font glyph and draw the arrow ourselves.
   ========================================================= */

.week-card .week-chevron {
    font-size: 0 !important;
    line-height: 1 !important;
}

.week-card .week-chevron::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg) translate(-1px, 1px);
    transform-origin: center;
}


/* =========================================================
   V4.6 — GLOBAL CARD ACTION
   Reusable across movie cards, TV cards, search, genres,
   recommendations, and New This Week.
   ========================================================= */

.card-action {
    position: absolute;
    z-index: 4;
    right: 14px;
    bottom: 14px;

    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 86, 92, .34);
    border-radius: 50%;

    background:
        linear-gradient(180deg, rgba(178, 30, 40, .92) 0%, rgba(128, 18, 29, .96) 100%);

    box-shadow:
        0 7px 16px rgba(112, 8, 18, .20),
        0 0 10px rgba(255, 47, 61, .10),
        inset 0 1px 0 rgba(255,255,255,.10);

    opacity: .72;
    transform: translateZ(0);
    transition:
        opacity .20s ease,
        transform .20s ease,
        background .20s ease,
        border-color .20s ease,
        box-shadow .20s ease,
        filter .20s ease;
}

.card-action::before {
    content: "";
    display: block;

    width: 7px;
    height: 7px;

    border-top: 2px solid #fff;
    border-right: 2px solid #fff;

    transform: rotate(45deg) translate(-1px, 1px);
    transform-origin: center;

    opacity: .92;
    transition: transform .20s ease, opacity .20s ease;
}

/* Any clickable card using .card-action gets the same interaction. */
a:hover > .card-action,
button:hover > .card-action,
.card:hover .card-action,
.week-card:hover .card-action {
    opacity: 1;

    background:
        linear-gradient(180deg, #f2444d 0%, #cf202e 100%);

    border-color: rgba(255, 112, 118, .62);

    box-shadow:
        0 9px 20px rgba(190, 22, 35, .28),
        0 0 15px rgba(255, 47, 61, .18),
        inset 0 1px 0 rgba(255,255,255,.18);

    filter: brightness(1.04);
}

a:hover > .card-action::before,
button:hover > .card-action::before,
.card:hover .card-action::before,
.week-card:hover .card-action::before {
    transform: rotate(45deg) translate(1px, -1px);
    opacity: 1;
}

/* Touch devices: always visible, still intentionally subdued. */
@media (hover:none), (pointer:coarse) {
    .card-action {
        width: 34px;
        height: 34px;
        opacity: .82;
        box-shadow:
            0 6px 14px rgba(112, 8, 18, .18),
            0 0 8px rgba(255, 47, 61, .08);
    }
}


/* =========================================================
   V4.7 — PREMIUM CARD SYSTEM
   Shared internal grid for copy + action, stronger cinematic
   finish, calmer default button, brighter hover.
   ========================================================= */

.week-card {
    min-height: 205px;
    border: 1px solid rgba(255,255,255,.095);
    border-radius: 17px;
    background: #080c10;
    box-shadow:
        0 1px 0 rgba(255,255,255,.035) inset,
        0 16px 34px rgba(0,0,0,.16);
    isolation: isolate;
}

.week-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.018),
        inset 0 -70px 80px rgba(0,0,0,.20);
}

.week-card > img:first-child {
    filter: saturate(.91) contrast(1.04) brightness(.94);
    transition:
        transform .38s cubic-bezier(.2,.7,.2,1),
        filter .38s ease;
}

.week-card:hover > img:first-child {
    transform: scale(1.035);
    filter: saturate(1) contrast(1.07) brightness(.98);
}

.week-overlay {
    z-index: 1;
    background:
        linear-gradient(
            180deg,
            rgba(2,5,8,.08) 0%,
            rgba(2,5,8,.03) 36%,
            rgba(2,5,8,.34) 64%,
            rgba(2,5,8,.92) 100%
        ),
        linear-gradient(
            90deg,
            rgba(2,5,8,.20) 0%,
            rgba(2,5,8,0) 58%
        );
}

.week-card:hover .week-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(2,5,8,.10) 0%,
            rgba(2,5,8,.08) 32%,
            rgba(2,5,8,.48) 62%,
            rgba(2,5,8,.97) 100%
        ),
        linear-gradient(
            90deg,
            rgba(2,5,8,.30) 0%,
            rgba(2,5,8,.02) 62%
        );
}

.week-type {
    z-index: 4;
    top: 13px;
    left: 14px;
    min-height: 24px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(8,12,16,.56);
    box-shadow:
        0 5px 14px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.04);
    color: rgba(255,255,255,.88);
    backdrop-filter: blur(12px);
}

/* The lower content area is now a real 2-column grid:
   text on the left, action button in its own column. */
.week-bottom-grid {
    position: absolute;
    z-index: 4;
    left: 17px;
    right: 15px;
    bottom: 15px;

    display: grid;
    grid-template-columns: minmax(0,1fr) 38px;
    align-items: end;
    gap: 14px;
}

.week-bottom-grid .week-copy {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    min-width: 0;
}

.week-bottom-grid .week-title-state,
.week-bottom-grid .week-hover-state {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    min-width: 0;
}

.week-logo-wrap {
    width: min(190px, 72%);
    min-height: 38px;
}

.week-logo {
    max-height: 55px;
    filter:
        brightness(1.08)
        contrast(1.08)
        drop-shadow(0 7px 14px rgba(0,0,0,.38));
}

.week-hover-state > strong {
    font-size: 15px;
    font-weight: 850;
    line-height: 1.12;
    letter-spacing: -.025em;
}

.week-meta-line {
    margin-top: 6px;
    color: rgba(255,255,255,.93);
    font-size: 10.5px;
    font-weight: 780;
    line-height: 1.3;
}

.week-genre {
    margin-top: 5px !important;
    color: rgba(224,231,237,.72) !important;
    font-size: 9.5px !important;
}

.week-added {
    margin-top: 7px !important;
    color: #ff4a57 !important;
    font-size: 8.5px !important;
    font-weight: 950;
    letter-spacing: .11em;
}

/* Global action button, designed to scale to dense catalog pages. */
.week-bottom-grid .card-action {
    position: relative;
    right: auto;
    bottom: auto;
    align-self: end;

    width: 36px;
    height: 36px;

    border: 1px solid rgba(255,76,88,.36);
    background:
        radial-gradient(circle at 38% 28%, rgba(255,95,105,.28), transparent 38%),
        linear-gradient(180deg, rgba(123,21,31,.94), rgba(88,13,22,.98));

    box-shadow:
        0 7px 18px rgba(0,0,0,.24),
        0 0 0 rgba(255,42,57,0),
        inset 0 1px 0 rgba(255,255,255,.11);

    opacity: .88;
}

.week-bottom-grid .card-action::before {
    width: 7px;
    height: 7px;
    border-top-width: 1.8px;
    border-right-width: 1.8px;
}

.week-card:hover .week-bottom-grid .card-action {
    opacity: 1;
    transform: translateY(-1px);

    border-color: rgba(255,104,114,.72);
    background:
        radial-gradient(circle at 38% 28%, rgba(255,142,149,.44), transparent 40%),
        linear-gradient(180deg, #d92d3b, #a91424);

    box-shadow:
        0 9px 22px rgba(0,0,0,.28),
        0 0 18px rgba(255,42,57,.20),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.week-card:hover .week-bottom-grid .card-action::before {
    transform: rotate(45deg) translate(1px,-1px);
}

/* Desktop: clean swap between logo/title and compact details. */
@media (hover:hover) and (pointer:fine) {
    .week-bottom-grid .week-hover-state {
        position: absolute;
        inset: auto 0 0 0;
        opacity: 0;
        transform: translateY(7px);
        pointer-events: none;
    }

    .week-card:hover .week-bottom-grid .week-title-state {
        opacity: 0;
        transform: translateY(-5px);
    }

    .week-card:hover .week-bottom-grid .week-hover-state {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* On touch, keep artwork/logo view and the action visible. */
@media (hover:none), (pointer:coarse) {
    .week-bottom-grid {
        grid-template-columns: minmax(0,1fr) 36px;
        gap: 12px;
    }

    .week-bottom-grid .card-action {
        opacity: .92;
    }
}

@media (max-width: 560px) {
    .week-card {
        min-height: 190px;
    }

    .week-bottom-grid {
        left: 14px;
        right: 13px;
        bottom: 13px;
    }
}


/* =========================================================
   V4.8 — SITE-WIDE MEDIA CARD SYSTEM
   New class names. No dependency on legacy .week-card rules.
   Designed for 4-card homepage rows and dense 40-card catalogs.
   ========================================================= */

.media-card {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    min-height: 190px;
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;

    background: #070a0e;
    text-decoration: none;

    box-shadow:
        0 18px 38px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.025);

    isolation: isolate;

    transition:
        transform .28s cubic-bezier(.2,.7,.2,1),
        border-color .28s ease,
        box-shadow .28s ease;
}

.media-card__image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    transform: scale(1.001);
    filter: saturate(.92) contrast(1.04) brightness(.92);

    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        filter .35s ease;
}

.media-card__shade {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(4,7,10,.08) 0%,
            rgba(4,7,10,.03) 45%,
            rgba(4,7,10,.26) 66%,
            rgba(4,7,10,.76) 100%
        );
}

.media-card__type {
    position: absolute;
    z-index: 3;
    top: 13px;
    left: 13px;

    min-height: 25px;
    display: inline-flex;
    align-items: center;

    padding: 0 10px;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;

    background: rgba(7,10,14,.56);
    backdrop-filter: blur(12px);

    color: rgba(255,255,255,.90);

    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;

    box-shadow:
        0 7px 18px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.035);
}

/* The premium dock is the stable visual anchor across every card. */
.media-card__dock {
    position: absolute;
    z-index: 4;

    left: 9px;
    right: 9px;
    bottom: 9px;

    min-height: 76px;

    display: grid;
    grid-template-columns: minmax(0,1fr) 40px;
    align-items: center;
    gap: 12px;

    padding: 11px 11px 10px 13px;

    border: 1px solid rgba(255,255,255,.085);
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(13,17,22,.84) 0%,
            rgba(7,10,14,.76) 100%
        );

    backdrop-filter: blur(14px) saturate(1.12);

    box-shadow:
        0 14px 32px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.media-card__info {
    min-width: 0;
}

.media-card__title {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #fff;

    font-size: 14px;
    font-weight: 850;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.media-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;

    margin-top: 5px;

    color: rgba(232,238,243,.78);

    font-size: 10px;
    font-weight: 750;
    line-height: 1.2;
}

.media-card__dot {
    color: rgba(255,255,255,.36);
}

.media-card__rating {
    color: #ffd35a;
    font-weight: 900;
}

.media-card__fresh {
    display: block;

    margin-top: 6px;

    color: #ff4b58;

    font-size: 8px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .10em;
    text-transform: uppercase;
}

/* Reusable action for Movie, TV, Search, Genre, Similar, etc. */
.media-action {
    position: relative;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,72,84,.30);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 36% 28%,
            rgba(255,93,103,.24),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            rgba(122,22,32,.94),
            rgba(82,12,21,.98)
        );

    box-shadow:
        0 8px 18px rgba(0,0,0,.25),
        0 0 10px rgba(255,39,54,.07),
        inset 0 1px 0 rgba(255,255,255,.09);

    opacity: .80;

    transition:
        transform .22s ease,
        opacity .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.media-action::before {
    content: "";

    width: 7px;
    height: 7px;

    border-top: 2px solid #fff;
    border-right: 2px solid #fff;

    transform: rotate(45deg) translate(-1px, 1px);

    opacity: .94;

    transition: transform .22s ease;
}

@media (hover:hover) and (pointer:fine) {
    .media-card:hover {
        transform: translateY(-2px);

        border-color: rgba(255,77,89,.22);

        box-shadow:
            0 22px 46px rgba(0,0,0,.24),
            0 0 0 1px rgba(255,71,84,.025);
    }

    .media-card:hover .media-card__image {
        transform: scale(1.045);
        filter: saturate(1) contrast(1.06) brightness(.96);
    }

    .media-card:hover .media-action {
        opacity: 1;
        transform: translateX(1px);

        border-color: rgba(255,98,108,.62);

        background:
            radial-gradient(
                circle at 36% 28%,
                rgba(255,142,149,.42),
                transparent 42%
            ),
            linear-gradient(
                180deg,
                #d52d3a,
                #9f1624
            );

        box-shadow:
            0 10px 22px rgba(0,0,0,.30),
            0 0 17px rgba(255,42,57,.17),
            inset 0 1px 0 rgba(255,255,255,.16);
    }

    .media-card:hover .media-action::before {
        transform: rotate(45deg) translate(1px, -1px);
    }
}

@media (hover:none), (pointer:coarse) {
    .media-action {
        opacity: .90;
    }
}

@media (max-width: 700px) {
    .media-card {
        min-height: 185px;
    }

    .media-card__dock {
        min-height: 72px;
    }
}


/* =========================================================
   V4.9 — RESTORED HOVER CARD SYSTEM
   Normal: full artwork + official TMDb logo/title.
   Hover: plain title + metadata + genre + added label.
   No glass dock.
   ========================================================= */

.hover-media-card {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    min-height: 195px;
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.09);
    border-radius: 17px;

    background: #070a0e;
    text-decoration: none;

    box-shadow:
        0 16px 34px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.025);

    isolation: isolate;

    transition:
        transform .28s cubic-bezier(.2,.7,.2,1),
        border-color .28s ease,
        box-shadow .28s ease;
}

.hover-media-card__image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    filter: saturate(.94) contrast(1.04) brightness(.94);

    transition:
        transform .42s cubic-bezier(.2,.7,.2,1),
        filter .32s ease;
}

.hover-media-card__shade {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(3,6,9,.04) 0%,
            rgba(3,6,9,.02) 42%,
            rgba(3,6,9,.30) 66%,
            rgba(3,6,9,.90) 100%
        ),
        linear-gradient(
            90deg,
            rgba(3,6,9,.16) 0%,
            rgba(3,6,9,0) 60%
        );

    transition: background .25s ease;
}

.hover-media-card__type {
    position: absolute;
    z-index: 4;
    top: 13px;
    left: 13px;

    min-height: 25px;
    display: inline-flex;
    align-items: center;

    padding: 0 10px;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;

    background: rgba(7,10,14,.56);
    backdrop-filter: blur(12px);

    color: rgba(255,255,255,.90);

    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;

    box-shadow:
        0 7px 18px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.035);
}

/* Shared lower grid gives every card the same action-button position. */
.hover-media-card__bottom {
    position: absolute;
    z-index: 4;

    left: 16px;
    right: 15px;
    bottom: 15px;

    display: grid;
    grid-template-columns: minmax(0,1fr) 38px;
    align-items: end;
    gap: 14px;
}

.hover-media-card__content {
    position: relative;
    min-width: 0;
    min-height: 58px;
    display: flex;
    align-items: flex-end;
}

.hover-media-card__normal,
.hover-media-card__details {
    width: 100%;

    transition:
        opacity .21s ease,
        transform .21s ease;
}

.hover-media-card__normal {
    display: flex;
    align-items: flex-end;
    min-height: 52px;
}

.hover-media-card__logo {
    display: block;

    width: auto;
    height: auto;

    max-width: 68%;
    max-height: 58px;

    object-fit: contain;
    object-position: left bottom;

    filter:
        brightness(1.08)
        contrast(1.07)
        drop-shadow(0 7px 14px rgba(0,0,0,.38));
}

.hover-media-card__fallback-title {
    display: block;

    max-width: 90%;

    color: #fff;

    font-size: 17px;
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: -.025em;

    text-shadow: 0 3px 12px rgba(0,0,0,.55);
}

.hover-media-card__details {
    position: absolute;
    left: 0;
    bottom: 0;

    opacity: 0;
    transform: translateY(7px);
    pointer-events: none;
}

.hover-media-card__title {
    display: block;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #fff;

    font-size: 15px;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.hover-media-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;

    margin-top: 6px;

    color: rgba(242,246,249,.92);

    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.25;
}

.hover-media-card__dot {
    color: rgba(255,255,255,.42);
}

.hover-media-card__rating {
    color: #ffd35a;
    font-weight: 950;
}

.hover-media-card__genre {
    display: block;

    margin-top: 5px;

    color: rgba(224,231,237,.78);

    font-size: 9.5px;
    font-weight: 650;
    line-height: 1.25;
}

.hover-media-card__fresh {
    display: block;

    margin-top: 7px;

    color: #ff4b58;

    font-size: 8px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .10em;
    text-transform: uppercase;
}

/* Site-wide action button remains aligned in its own grid column. */
.hover-media-card .media-action {
    position: relative;
    right: auto;
    bottom: auto;

    width: 36px;
    height: 36px;

    align-self: end;

    border: 1px solid rgba(255,72,84,.30);
    border-radius: 50%;

    background:
        radial-gradient(circle at 36% 28%, rgba(255,93,103,.24), transparent 40%),
        linear-gradient(180deg, rgba(122,22,32,.94), rgba(82,12,21,.98));

    box-shadow:
        0 8px 18px rgba(0,0,0,.25),
        0 0 10px rgba(255,39,54,.07),
        inset 0 1px 0 rgba(255,255,255,.09);

    opacity: .82;
}

.hover-media-card .media-action::before {
    width: 7px;
    height: 7px;

    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
}

@media (hover:hover) and (pointer:fine) {
    .hover-media-card:hover {
        transform: translateY(-2px);

        border-color: rgba(255,77,89,.18);

        box-shadow:
            0 22px 46px rgba(0,0,0,.23);
    }

    .hover-media-card:hover .hover-media-card__image {
        transform: scale(1.035);
        filter: saturate(1) contrast(1.06) brightness(.95);
    }

    .hover-media-card:hover .hover-media-card__shade {
        background:
            linear-gradient(
                180deg,
                rgba(3,6,9,.08) 0%,
                rgba(3,6,9,.06) 34%,
                rgba(3,6,9,.52) 62%,
                rgba(3,6,9,.97) 100%
            ),
            linear-gradient(
                90deg,
                rgba(3,6,9,.26) 0%,
                rgba(3,6,9,.02) 64%
            );
    }

    .hover-media-card:hover .hover-media-card__normal {
        opacity: 0;
        transform: translateY(-5px);
    }

    .hover-media-card:hover .hover-media-card__details {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .hover-media-card:hover .media-action {
        opacity: 1;
        transform: translateX(1px);

        border-color: rgba(255,98,108,.62);

        background:
            radial-gradient(circle at 36% 28%, rgba(255,142,149,.42), transparent 42%),
            linear-gradient(180deg, #d52d3a, #9f1624);

        box-shadow:
            0 10px 22px rgba(0,0,0,.30),
            0 0 17px rgba(255,42,57,.17),
            inset 0 1px 0 rgba(255,255,255,.16);
    }

    .hover-media-card:hover .media-action::before {
        transform: rotate(45deg) translate(1px,-1px);
    }
}

/* Touch devices keep the original title/logo visible. */
@media (hover:none), (pointer:coarse) {
    .hover-media-card__details {
        display: none;
    }

    .hover-media-card .media-action {
        opacity: .90;
    }
}

@media (max-width: 700px) {
    .hover-media-card {
        min-height: 188px;
    }

    .hover-media-card__bottom {
        left: 14px;
        right: 13px;
        bottom: 13px;
    }
}


/* =========================================================
   V5.0 — NEON PLAY CIRCLE
   Replaces the red action button with a neon circular play control.
   ========================================================= */

.hover-media-card .media-action {
    position: relative;
    right: auto;
    bottom: auto;

    width: 38px;
    height: 38px;

    align-self: end;

    border: 1px solid rgba(88, 224, 255, .42);
    border-radius: 50%;

    background:
        radial-gradient(circle at 50% 45%, rgba(36, 179, 255, .18), rgba(5, 15, 24, .72) 68%),
        linear-gradient(180deg, rgba(7, 18, 28, .92), rgba(3, 8, 14, .96));

    box-shadow:
        0 0 0 1px rgba(110, 231, 255, .04) inset,
        0 0 10px rgba(56, 189, 248, .18),
        0 0 18px rgba(56, 189, 248, .12),
        0 8px 18px rgba(0,0,0,.24);

    opacity: .86;
    transform: none;
    transition:
        opacity .22s ease,
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background .22s ease;
}

.hover-media-card .media-action::before {
    content: "";
    display: block;
    width: 0;
    height: 0;

    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid #ffffff;

    filter:
        drop-shadow(0 0 4px rgba(255,255,255,.18))
        drop-shadow(0 0 7px rgba(56, 189, 248, .12));

    transform: translateX(1px);
    transition:
        transform .22s ease,
        filter .22s ease,
        border-left-color .22s ease;
}

@media (hover:hover) and (pointer:fine) {
    .hover-media-card:hover .media-action {
        opacity: 1;
        transform: scale(1.04);

        border-color: rgba(122, 237, 255, .72);

        background:
            radial-gradient(circle at 50% 45%, rgba(54, 203, 255, .26), rgba(9, 22, 34, .78) 68%),
            linear-gradient(180deg, rgba(11, 28, 42, .94), rgba(4, 12, 19, .98));

        box-shadow:
            0 0 0 1px rgba(140, 242, 255, .06) inset,
            0 0 12px rgba(56, 189, 248, .28),
            0 0 26px rgba(56, 189, 248, .18),
            0 10px 22px rgba(0,0,0,.28);
    }

    .hover-media-card:hover .media-action::before {
        transform: translateX(2px);
        filter:
            drop-shadow(0 0 5px rgba(255,255,255,.22))
            drop-shadow(0 0 10px rgba(56, 189, 248, .18));
    }
}

@media (hover:none), (pointer:coarse) {
    .hover-media-card .media-action {
        opacity: .92;
    }
}


/* =========================================================
   V5.1 — MOVIES / TV CINEMATIC GATEWAYS
   Homepage navigation portals, not content cards.
   ========================================================= */

.gateway-section {
    position: relative;
    padding-top: 54px;
    padding-bottom: 68px;
}

.gateway-heading {
    max-width: 660px;
    margin-bottom: 24px;
}

.gateway-heading h2 {
    margin: 6px 0 0;
    color: #fff;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1;
    letter-spacing: -.045em;
}

.gateway-heading p {
    max-width: 590px;
    margin: 13px 0 0;
    color: #8f9aa4;
    font-size: 12px;
    line-height: 1.65;
}

.gateway-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 16px;
}

.gateway-card {
    --gateway-accent: 232, 43, 57;

    position: relative;
    display: block;
    min-height: 330px;
    overflow: hidden;

    border: 1px solid rgba(255,255,255,.085);
    border-radius: 21px;

    background: #07090c;
    color: #fff;
    text-decoration: none;

    box-shadow:
        0 22px 50px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.025);

    isolation: isolate;

    transition:
        transform .34s cubic-bezier(.2,.7,.2,1),
        border-color .30s ease,
        box-shadow .30s ease;
}

.gateway-card--tv {
    --gateway-accent: 183, 31, 50;
}

.gateway-card__image {
    position: absolute;
    inset: 0;
    z-index: 0;

    background-image: var(--gateway-image);
    background-size: cover;
    background-position: center;

    filter:
        saturate(.82)
        contrast(1.07)
        brightness(.75);

    transform: scale(1.01);

    transition:
        transform .65s cubic-bezier(.2,.7,.2,1),
        filter .45s ease;
}

.gateway-card--movies .gateway-card__image {
    background-position: center 35%;
}

.gateway-card--tv .gateway-card__image {
    background-position: center 28%;
}

.gateway-card__shade {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(4,6,9,.94) 0%,
            rgba(4,6,9,.72) 36%,
            rgba(4,6,9,.22) 72%,
            rgba(4,6,9,.16) 100%
        ),
        linear-gradient(
            0deg,
            rgba(4,6,9,.78) 0%,
            rgba(4,6,9,.05) 58%
        );
}

.gateway-card--tv .gateway-card__shade {
    background:
        linear-gradient(
            90deg,
            rgba(5,6,10,.95) 0%,
            rgba(22,6,12,.70) 39%,
            rgba(4,6,9,.24) 74%,
            rgba(4,6,9,.15) 100%
        ),
        linear-gradient(
            0deg,
            rgba(7,5,9,.80) 0%,
            rgba(4,6,9,.06) 58%
        );
}

.gateway-card__edge {
    position: absolute;
    z-index: 2;
    inset: 0;

    border-radius: inherit;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.015),
        inset 0 -90px 100px rgba(0,0,0,.12);

    pointer-events: none;
}

.gateway-card__edge::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: linear-gradient(
        90deg,
        rgba(var(--gateway-accent),1),
        rgba(var(--gateway-accent),.22)
    );

    box-shadow:
        0 0 15px rgba(var(--gateway-accent),.30);

    transition: width .35s cubic-bezier(.2,.7,.2,1);
}

.gateway-card__top {
    position: absolute;
    z-index: 4;

    top: 20px;
    left: 22px;
    right: 22px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gateway-card__eyebrow {
    color: rgb(var(--gateway-accent));
    font-size: 9px;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.gateway-card__index {
    color: rgba(255,255,255,.28);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .10em;
}

.gateway-card__body {
    position: absolute;
    z-index: 4;

    left: 24px;
    right: 24px;
    bottom: 69px;

    max-width: 390px;
}

.gateway-card__title {
    display: block;

    color: #fff;
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 900;
    line-height: .92;
    letter-spacing: -.055em;

    text-shadow: 0 7px 24px rgba(0,0,0,.38);
}

.gateway-card__body p {
    max-width: 370px;
    margin: 13px 0 0;

    color: rgba(224,231,237,.72);

    font-size: 11px;
    font-weight: 550;
    line-height: 1.55;
}

.gateway-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 15px;
}

.gateway-card__tags span {
    display: inline-flex;
    align-items: center;
    min-height: 23px;

    padding: 0 8px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;

    background: rgba(8,11,15,.34);
    backdrop-filter: blur(8px);

    color: rgba(255,255,255,.62);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: .04em;
}

.gateway-card__footer {
    position: absolute;
    z-index: 4;

    left: 24px;
    right: 24px;
    bottom: 21px;

    display: flex;
    align-items: center;
    gap: 10px;
}

.gateway-card__cta {
    color: rgba(255,255,255,.92);

    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .05em;
}

.gateway-card__arrow {
    position: relative;
    display: block;
    width: 26px;
    height: 10px;

    transition: transform .24s ease;
}

.gateway-card__arrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;

    width: 23px;
    height: 1px;

    background: rgb(var(--gateway-accent));

    box-shadow: 0 0 9px rgba(var(--gateway-accent),.22);
}

.gateway-card__arrow::after {
    content: "";
    position: absolute;
    right: 0;
    top: 1px;

    width: 6px;
    height: 6px;

    border-top: 1px solid rgb(var(--gateway-accent));
    border-right: 1px solid rgb(var(--gateway-accent));

    transform: rotate(45deg);
}

@media (hover:hover) and (pointer:fine) {
    .gateway-card:hover {
        transform: translateY(-3px);

        border-color: rgba(var(--gateway-accent),.24);

        box-shadow:
            0 28px 58px rgba(0,0,0,.27),
            0 0 0 1px rgba(var(--gateway-accent),.025);
    }

    .gateway-card:hover .gateway-card__image {
        transform: scale(1.055);
        filter:
            saturate(.94)
            contrast(1.08)
            brightness(.82);
    }

    .gateway-card:hover .gateway-card__edge::after {
        width: 100%;
    }

    .gateway-card:hover .gateway-card__arrow {
        transform: translateX(5px);
    }
}

@media (max-width: 820px) {
    .gateway-grid {
        grid-template-columns: 1fr;
    }

    .gateway-card {
        min-height: 310px;
    }
}

@media (max-width: 560px) {
    .gateway-section {
        padding-top: 44px;
        padding-bottom: 54px;
    }

    .gateway-heading {
        margin-bottom: 18px;
    }

    .gateway-card {
        min-height: 285px;
        border-radius: 17px;
    }

    .gateway-card__top {
        top: 17px;
        left: 18px;
        right: 18px;
    }

    .gateway-card__body {
        left: 19px;
        right: 19px;
        bottom: 63px;
    }

    .gateway-card__footer {
        left: 19px;
        right: 19px;
        bottom: 18px;
    }

    .gateway-card__tags span:nth-child(3) {
        display: none;
    }
}


/* =========================================================
   V5.2 — GATEWAY FINAL POLISH
   Brighter description, tighter CTA placement, stronger hover edge.
   ========================================================= */

.gateway-card__body p {
    color: rgba(236,242,247,.80);
}

/* Bring CTA slightly closer to the content without changing structure. */
.gateway-card__footer {
    bottom: 25px;
}

/* Slightly stronger but still restrained hover-only red finish. */
@media (hover:hover) and (pointer:fine) {
    .gateway-card:hover {
        border-color: rgba(var(--gateway-accent),.34);

        box-shadow:
            0 30px 62px rgba(0,0,0,.29),
            0 0 0 1px rgba(var(--gateway-accent),.05),
            0 0 22px rgba(var(--gateway-accent),.08);
    }

    .gateway-card:hover .gateway-card__edge::after {
        box-shadow:
            0 0 10px rgba(var(--gateway-accent),.34),
            0 0 22px rgba(var(--gateway-accent),.18);
    }
}


/* =========================================================
   V5.3 — SUBTLE RED / BLACK BORDER SYSTEM
   Removes the remaining pale/white card edges and the
   doubled inner gateway border.
   ========================================================= */

/* One restrained border language across primary visual panels. */
.hero-main,
.side-feature,
.tonight-card,
.hover-media-card,
.gateway-card {
    border: 1px solid rgba(112, 24, 33, .38) !important;
}

/* Keep depth black, not white. */
.hero-main,
.side-feature,
.tonight-card,
.hover-media-card {
    box-shadow:
        0 18px 38px rgba(0,0,0,.16);
}

/* Gateway already has a larger shadow; preserve it with the darker edge. */
.gateway-card {
    box-shadow:
        0 22px 50px rgba(0,0,0,.22) !important;
}

/* Remove the old pale inner outline that could read as a second border. */
.gateway-card__edge {
    box-shadow:
        inset 0 -90px 100px rgba(0,0,0,.14) !important;
}

/* Very restrained red lift on interactive cards. */
@media (hover:hover) and (pointer:fine) {
    .side-feature:hover,
    .tonight-card:hover,
    .hover-media-card:hover {
        border-color: rgba(158, 31, 43, .46) !important;
    }

    .gateway-card:hover {
        border-color: rgba(var(--gateway-accent), .38) !important;
        box-shadow:
            0 30px 62px rgba(0,0,0,.29),
            0 0 20px rgba(var(--gateway-accent), .065) !important;
    }
}


/* =========================================================
   V5.4 — MOBILE HEADER NAV
   Keep primary navigation visible on phones
   ========================================================= */

@media (max-width: 760px) {
    .header-inner {
        min-height: auto;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand actions"
            "nav nav";
        column-gap: 14px;
        row-gap: 8px;
        padding-top: 10px;
        padding-bottom: 8px;
    }

    .header-inner > .brand {
        grid-area: brand;
        align-self: center;
    }

    .header-actions {
        grid-area: actions;
        justify-self: end;
        align-self: center;
    }

    .main-nav {
        grid-area: nav;
        display: flex !important;
        width: 100%;
        min-width: 0;
        gap: 24px;
        align-items: center;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 7px 1px 3px;
        border-top: 1px solid rgba(122, 34, 45, .18);
    }

    .main-nav::-webkit-scrollbar {
        display: none;
    }

    .main-nav a {
        flex: 0 0 auto;
        position: relative;
        padding: 2px 0 7px;
        font-size: 13px;
        line-height: 1;
        white-space: nowrap;
    }

    .main-nav a.nav-current {
        color: #fff;
    }

    .main-nav a.nav-current::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        border-radius: 2px;
        background: #d72c44;
        box-shadow: 0 0 12px rgba(215, 44, 68, .28);
    }

    .search-label {
        display: none;
    }

    .search-trigger {
        min-width: 40px;
        width: 40px;
        min-height: 40px;
        padding: 0;
    }
}

@media (max-width: 430px) {
    .main-nav {
        gap: 20px;
    }

    .main-nav a {
        font-size: 12.5px;
    }
}

/* Working catalog search form added by the homepage merge. */
.nm-search-form { margin: 0; }
.nm-search-form input { width: 100%; }


/* ==============================
   V4: TMDb logos across homepage movie cards
   ============================== */
.side-feature-logo-wrap {
    width: min(190px, 82%);
    height: 48px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 5px;
}
.side-feature-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 46px;
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,.5));
}
.side-feature-title-fallback {
    display: block;
}

.tonight-logo-wrap {
    width: min(230px, 86%);
    min-height: 48px;
    display: flex;
    align-items: flex-end;
}
.tonight-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 68px;
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,.5));
}
.tonight-title-fallback {
    display: block;
}
.tonight-hover-logo-wrap {
    width: min(180px, 76%);
    min-height: 32px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 5px;
}
.tonight-hover-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 46px;
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,.48));
}

.hover-media-card__logo-wrap {
    width: min(210px, 84%);
    min-height: 44px;
    display: flex;
    align-items: flex-end;
}
.hover-media-card__logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 62px;
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(0 6px 13px rgba(0,0,0,.5));
}
.hover-media-card__details-logo-wrap {
    width: min(165px, 72%);
    min-height: 28px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 4px;
}
.hover-media-card__details-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 42px;
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,.45));
}

@media (max-width: 760px) {
    .side-feature-logo-wrap { width: min(170px, 78%); height: 42px; }
    .side-feature-logo { max-height: 40px; }
    .tonight-logo { max-height: 58px; }
    .hover-media-card__logo { max-height: 54px; }
}


/* =========================================================
   V4 HOMEPAGE STRUCTURE
   5 featured hero slides + real popularity side cards
   + dedicated recent movies / recent episodes rows
   ========================================================= */

.hero-main.hero-carousel {
    position: relative;
    overflow: hidden;
    background: #10161e;
}

.hero-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        var(--hero-image) center center / cover no-repeat,
        #10161e;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.012);
    transition:
        opacity .55s ease,
        visibility .55s ease,
        transform 1.2s ease;
    pointer-events: none;
}

.hero-slide.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
}

.hero-slide .hero-content {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity .42s ease .12s,
        transform .42s ease .12s;
}

.hero-slide.is-active .hero-content {
    opacity: 1;
    transform: translateY(0);
}

.hero-carousel-controls {
    position: absolute;
    z-index: 6;
    right: 18px;
    bottom: 17px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px;
    background: rgba(4,7,10,.56);
    backdrop-filter: blur(12px);
}

.hero-arrow {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.hero-arrow:hover {
    background: rgba(255,255,255,.13);
}

.hero-dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.28);
    cursor: pointer;
    transition: width .2s ease, background .2s ease;
}

.hero-dot.is-active {
    width: 20px;
    background: var(--accent);
}

.hero-counter {
    min-width: 48px;
    color: rgba(255,255,255,.6);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .09em;
    text-align: center;
}

.hero-counter b {
    color: #fff;
    font-weight: 950;
}

/* Side rail is now actual site popularity, not extra featured movies. */
.popular-feature__label {
    position: absolute;
    z-index: 3;
    left: 17px;
    top: 16px;
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(5,8,12,.58);
    color: #f5f7f9;
    backdrop-filter: blur(10px);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.popular-feature__stats {
    margin-top: 8px !important;
    color: #aab4bd !important;
    font-size: 10px !important;
    font-weight: 750;
}

.popular-feature .side-feature-logo-wrap {
    max-width: 195px;
    min-height: 42px;
    display: flex;
    align-items: flex-end;
}

.popular-feature .side-feature-logo {
    width: auto;
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
    object-position: left bottom;
}

.popular-feature .side-feature-title-fallback {
    max-width: 230px;
    font-size: 20px;
    line-height: 1.08;
}

/* Episode row uses the same card system as movie arrivals. */
.episode-row {
    padding-top: 34px;
}

.episode-card__number {
    display: inline-flex !important;
    width: fit-content;
    margin-top: 7px !important;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 999px;
    background: rgba(5,8,12,.46);
    color: #d7dde2 !important;
    font-size: 10px !important;
    font-weight: 900;
    letter-spacing: .04em;
}

/* Give the two recent rows the exact same 4-card rhythm. */
.week-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 980px) {
    .hero-carousel-controls {
        right: 16px;
        bottom: 15px;
    }

    .popular-feature .side-feature-logo-wrap {
        max-width: 220px;
    }
}

@media (max-width: 760px) {
    .hero-carousel-controls {
        left: 18px;
        right: auto;
        bottom: 16px;
    }

    .hero-slide .hero-content {
        bottom: 72px;
    }

    .hero-counter {
        display: none;
    }

    .popular-feature__label {
        left: 15px;
        top: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .hero-slide .hero-content {
        transition: none;
    }
}

/* =========================================================
   V4.2 — CINEMATIC PREMIUM SECTION HEADINGS
   Matches NEWMOVIES.ONLINE black / white / red visual system
   ========================================================= */

.section-heading {
    position: relative;
    align-items: flex-end;
    margin-bottom: 24px;
}

.section-heading h2,
.gateway-heading h2 {
    position: relative;
    display: inline-block;
    margin: 0;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 780;
    line-height: 1.02;
    letter-spacing: -0.045em;
    color: #eef2f5;
    background: linear-gradient(180deg, #ffffff 0%, #e8edf1 52%, #b7c0c8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 34px rgba(0, 0, 0, .30);
}

.section-heading h2 {
    font-size: clamp(28px, 2.75vw, 38px);
    padding-bottom: 13px;
}

.gateway-heading h2 {
    font-size: clamp(38px, 4.8vw, 58px);
    padding-bottom: 15px;
}

.section-heading h2::after,
.gateway-heading h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 66px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, #ff3045 0%, #ff3045 38%, rgba(255, 48, 69, 0) 100%);
    box-shadow: 0 0 18px rgba(255, 48, 69, .22);
}

.section-heading .text-link {
    margin-bottom: 12px;
    color: #8f9aa5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    transition: color .2s ease, transform .2s ease;
}

.section-heading .text-link:hover {
    color: #dce2e7;
    transform: translateX(2px);
}

.gateway-heading p {
    margin-top: 15px;
    color: #8f99a3;
}

@media (max-width: 700px) {
    .section-heading {
        margin-bottom: 20px;
    }

    .section-heading h2 {
        font-size: clamp(25px, 8vw, 32px);
    }

    .gateway-heading h2 {
        font-size: clamp(34px, 11vw, 46px);
    }

    .section-heading h2::after,
    .gateway-heading h2::after {
        width: 52px;
    }
}

/* =========================================================
   V4.3 — FINAL HOMEPAGE POLISH
   Better shortlist balance, calmer accents, cleaner spacing
   ========================================================= */

/* If Tonight's Shortlist has only two picks, let them fill the row
   instead of leaving a large empty area on the right. */
.tonight-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

/* Related "recent" rows should read as one content group. */
.episode-row {
    padding-top: 30px;
}

/* The Movies / TV gateway is a new decision point, so give it
   noticeably more breathing room than the content rows above. */
.gateway-section {
    padding-top: 76px;
}

/* Lift secondary copy slightly for readability without turning it white. */
.hero-copy,
.gateway-heading p {
    color: #aab3bd;
}

.popular-feature__stats,
.tonight-reason,
.hover-media-card__genre {
    color: #a4aeb8 !important;
}

/* Keep micro-headings red, but calmer than the primary Watch CTA. */
.eyebrow,
.section-kicker {
    color: #d85d68;
}

/* Keep the section underline in the same family, but less aggressive. */
.section-heading h2::after,
.gateway-heading h2::after {
    background: linear-gradient(90deg, #df4654 0%, #df4654 38%, rgba(223, 70, 84, 0) 100%);
    box-shadow: 0 0 16px rgba(223, 70, 84, .18);
}

@media (max-width: 760px) {
    .tonight-grid {
        grid-template-columns: 1fr;
    }

    .episode-row {
        padding-top: 24px;
    }

    .gateway-section {
        padding-top: 58px;
    }
}

/* =========================================================
   V4.4 — HOMEPAGE CONTENT-HIERARCHY CLEANUP
   Keeps the existing hero/header/footer and premium black/red system.
   ========================================================= */

/* ---------------------------------------------------------
   Popular Today / This Week: supporting cards, not competing heroes
   --------------------------------------------------------- */
.popular-feature img {
    filter:
        brightness(.70)
        saturate(.82)
        contrast(1.05);
}

.popular-feature .side-feature-overlay {
    background:
        linear-gradient(
            0deg,
            rgba(3,6,9,.96) 0%,
            rgba(3,6,9,.62) 34%,
            rgba(3,6,9,.18) 72%,
            rgba(3,6,9,.08) 100%
        ),
        linear-gradient(
            90deg,
            rgba(3,6,9,.20),
            rgba(3,6,9,.02)
        );
}

.popular-feature__label {
    background: rgba(6,9,13,.72);
    border-color: rgba(255,255,255,.10);
    color: #d9dee3;
}

@media (hover:hover) and (pointer:fine) {
    .popular-feature:hover img {
        filter:
            brightness(.78)
            saturate(.90)
            contrast(1.06);
    }
}


/* ---------------------------------------------------------
   Recently added movies: real poster rhythm
   --------------------------------------------------------- */
.home-poster-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 17px;
}

.home-poster-card {
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.home-poster-card__art {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 15px;
    background: #0c1117;
    box-shadow: 0 16px 34px rgba(0,0,0,.16);
}

.home-poster-card__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            0deg,
            rgba(4,7,10,.32),
            transparent 34%
        );
    pointer-events: none;
}

.home-poster-card__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform .34s ease,
        filter .34s ease;
}

.home-poster-card__rating {
    position: absolute;
    z-index: 3;
    left: 10px;
    top: 10px;
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    background: rgba(5,8,12,.68);
    backdrop-filter: blur(10px);
    color: #ffd166;
    font-size: 9px;
    font-weight: 900;
}

.home-poster-card__play {
    position: absolute;
    z-index: 3;
    right: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    background: rgba(5,8,12,.72);
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(4px);
    transition:
        opacity .2s ease,
        transform .2s ease,
        background .2s ease;
}

.home-poster-card__play::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 10px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid #fff;
}

.home-poster-card__copy {
    padding: 11px 3px 0;
}

.home-poster-card__copy strong {
    display: block;
    overflow: hidden;
    color: #edf1f4;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.28;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-poster-card__meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
    color: #8e99a3;
    font-size: 10px;
    font-weight: 650;
}

.home-poster-card__meta span + span::before {
    content: "·";
    margin-right: 7px;
    color: #56616c;
}

.home-poster-card__genre {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: #697580;
    font-size: 9px;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (hover:hover) and (pointer:fine) {
    .home-poster-card:hover .home-poster-card__art {
        border-color: rgba(223,70,84,.24);
    }

    .home-poster-card:hover .home-poster-card__art img {
        transform: scale(1.025);
        filter: brightness(.88);
    }

    .home-poster-card:hover .home-poster-card__play {
        opacity: 1;
        transform: translateY(0);
        background: rgba(223,70,84,.88);
    }

    .home-poster-card:hover .home-poster-card__copy strong {
        color: #fff;
    }
}


/* ---------------------------------------------------------
   Recently added episodes: compact show + S/E information
   --------------------------------------------------------- */
.home-recent-episodes {
    padding-top: 38px;
}

.home-episode-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}

.home-episode-card {
    min-width: 0;
    min-height: 148px;
    display: grid;
    grid-template-columns: 96px minmax(0,1fr);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 15px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.008)),
        #090d12;
    color: inherit;
    text-decoration: none;
    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease;
}

.home-episode-card__poster {
    position: relative;
    min-height: 148px;
    overflow: hidden;
    background: #10151b;
}

.home-episode-card__poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 62%, rgba(9,13,18,.55));
}

.home-episode-card__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-episode-card__copy {
    position: relative;
    min-width: 0;
    padding: 17px 38px 15px 15px;
}

.home-episode-card__eyebrow {
    display: block;
    margin-bottom: 9px;
    color: #d85d68;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.home-episode-card__copy strong {
    display: -webkit-box;
    overflow: hidden;
    color: #edf1f4;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.home-episode-card__number {
    display: inline-flex;
    width: fit-content;
    margin-top: 9px;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    color: #cfd6dc;
    font-size: 9px;
    font-weight: 900;
}

.home-episode-card__meta {
    display: flex;
    gap: 10px;
    margin-top: 8px;
    color: #76828d;
    font-size: 9px;
    font-weight: 700;
}

.home-episode-card__arrow {
    position: absolute;
    right: 14px;
    bottom: 13px;
    color: #69747e;
    font-size: 14px;
    transition:
        color .2s ease,
        transform .2s ease;
}

@media (hover:hover) and (pointer:fine) {
    .home-episode-card:hover {
        transform: translateY(-2px);
        border-color: rgba(223,70,84,.22);
        background:
            linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
            #0a0f14;
    }

    .home-episode-card:hover .home-episode-card__arrow {
        color: #e4e8eb;
        transform: translate(2px,-2px);
    }
}


/* ---------------------------------------------------------
   Tonight's Shortlist: always a balanced three-card editorial row
   --------------------------------------------------------- */
.home-shortlist-section {
    padding-top: 46px;
}

.home-shortlist-section .tonight-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 15px;
}

.home-shortlist-section .tonight-card {
    min-height: 248px;
}


/* ---------------------------------------------------------
   Movies / TV gateway: navigation, not another hero
   --------------------------------------------------------- */
.gateway-section {
    padding-top: 54px;
    padding-bottom: 50px;
}

.gateway-heading {
    max-width: 590px;
    margin-bottom: 18px;
}

.gateway-heading h2 {
    font-size: clamp(30px, 3.6vw, 44px);
    padding-bottom: 12px;
}

.gateway-heading p {
    max-width: 540px;
    margin-top: 11px;
    font-size: 11px;
}

.gateway-card {
    min-height: 210px;
    border-radius: 17px;
}

.gateway-card__top {
    top: 16px;
    left: 19px;
    right: 19px;
}

.gateway-card__body {
    left: 20px;
    right: 20px;
    bottom: 51px;
    max-width: 360px;
}

.gateway-card__title {
    font-size: clamp(31px, 3.8vw, 44px);
}

.gateway-card__body p {
    max-width: 335px;
    margin-top: 8px;
    font-size: 10px;
    line-height: 1.45;
}

.gateway-card__tags {
    display: none;
}

.gateway-card__footer {
    left: 20px;
    right: 20px;
    bottom: 16px;
}

.gateway-card__image {
    filter:
        saturate(.80)
        contrast(1.05)
        brightness(.64);
}

.gateway-card__shade {
    background:
        linear-gradient(
            90deg,
            rgba(4,6,9,.96) 0%,
            rgba(4,6,9,.76) 42%,
            rgba(4,6,9,.30) 75%,
            rgba(4,6,9,.19) 100%
        ),
        linear-gradient(
            0deg,
            rgba(4,6,9,.72) 0%,
            rgba(4,6,9,.08) 60%
        );
}


/* ---------------------------------------------------------
   Responsive cleanup
   --------------------------------------------------------- */
@media (max-width: 1220px) {
    .home-poster-grid {
        grid-template-columns: repeat(5, minmax(0,1fr));
    }

    .home-poster-grid .home-poster-card:nth-child(6) {
        display: none;
    }
}

@media (max-width: 980px) {
    .home-poster-grid {
        grid-template-columns: repeat(4, minmax(0,1fr));
    }

    .home-poster-grid .home-poster-card:nth-child(5),
    .home-poster-grid .home-poster-card:nth-child(6) {
        display: none;
    }

    .home-episode-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .home-shortlist-section .tonight-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .home-shortlist-section .tonight-card:nth-child(3) {
        grid-column: 1 / -1;
    }

    .gateway-card {
        min-height: 205px;
    }
}

@media (max-width: 700px) {
    .home-poster-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 13px;
    }

    .home-poster-grid .home-poster-card:nth-child(5),
    .home-poster-grid .home-poster-card:nth-child(6) {
        display: block;
    }

    .home-poster-card__copy strong {
        font-size: 12px;
    }

    .home-episode-grid {
        grid-template-columns: 1fr;
    }

    .home-episode-card {
        min-height: 132px;
        grid-template-columns: 88px minmax(0,1fr);
    }

    .home-episode-card__poster {
        min-height: 132px;
    }

    .home-shortlist-section .tonight-grid {
        grid-template-columns: 1fr;
    }

    .home-shortlist-section .tonight-card:nth-child(3) {
        grid-column: auto;
    }

    .home-shortlist-section .tonight-card {
        min-height: 245px;
    }

    .gateway-section {
        padding-top: 48px;
        padding-bottom: 44px;
    }

    .gateway-card {
        min-height: 195px;
    }

    .gateway-card__title {
        font-size: 34px;
    }

    .gateway-card__body p {
        max-width: 280px;
    }
}

@media (max-width: 420px) {
    .home-poster-grid {
        gap: 11px;
    }

    .home-poster-card__art {
        border-radius: 13px;
    }

    .home-poster-card__genre {
        display: none;
    }

    .home-episode-card__copy {
        padding-right: 32px;
    }
}

/* =========================================================
   V4.5 — CONTINUE WATCHING + CATEGORY DISCOVERY
   ========================================================= */

/* ---------------------------------------------------------
   Continue Watching
   --------------------------------------------------------- */
.home-continue-section[hidden] {
    display: none !important;
}

.home-continue-section {
    padding-top: 34px;
    padding-bottom: 4px;
}

.home-continue-heading {
    margin-bottom: 15px;
}

.home-continue-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.home-continue-arrows {
    display: flex;
    gap: 7px;
}

.home-continue-arrows button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50%;
    background: rgba(255,255,255,.022);
    color: #b9c1c8;
    font: inherit;
    font-size: 19px;
    cursor: pointer;
    transition:
        border-color .2s ease,
        background .2s ease,
        color .2s ease;
}

.home-continue-arrows button:hover {
    border-color: rgba(239,51,64,.34);
    background: rgba(239,51,64,.08);
    color: #fff;
}

.home-continue-row-shell {
    position: relative;
    overflow: hidden;
}

.home-continue-section .watch-history-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 210px);
    gap: 14px;
    overflow-x: auto;
    padding: 1px 1px 9px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.home-continue-section .watch-history-row::-webkit-scrollbar {
    display: none;
}

.home-continue-section .watch-history-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 14px;
    background: #090d12;
    scroll-snap-align: start;
}

.home-continue-section .watch-history-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.home-continue-section .watch-history-poster {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #10151b;
}

.home-continue-section .watch-history-poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            0deg,
            rgba(3,6,9,.42),
            transparent 48%
        );
    pointer-events: none;
}

.home-continue-section .watch-history-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .28s ease;
}

.home-continue-section .watch-history-badge {
    position: absolute;
    z-index: 2;
    left: 9px;
    top: 9px;
    padding: 5px 7px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    background: rgba(5,8,12,.70);
    color: #dfe4e8;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.home-continue-section .watch-history-card-body {
    padding: 11px 11px 12px;
}

.home-continue-section .watch-history-title {
    overflow: hidden;
    margin: 0;
    color: #edf1f4;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-continue-section .watch-history-meta {
    overflow: hidden;
    margin-top: 4px;
    color: #7f8a94;
    font-size: 9px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-continue-section .watch-history-resume {
    margin-top: 8px;
    color: #aeb7bf;
    font-size: 9px;
    font-weight: 750;
}

.home-continue-section .watch-history-progress {
    height: 3px;
    overflow: hidden;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
}

.home-continue-section .watch-history-progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.home-continue-section .watch-history-remove {
    position: absolute;
    z-index: 4;
    right: 7px;
    top: 7px;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 50%;
    background: rgba(4,7,10,.68);
    color: #c7cdd2;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition:
        opacity .18s ease,
        color .18s ease,
        background .18s ease;
}

@media (hover:hover) and (pointer:fine) {
    .home-continue-section .watch-history-card:hover {
        border-color: rgba(239,51,64,.20);
    }

    .home-continue-section .watch-history-card:hover .watch-history-poster img {
        transform: scale(1.025);
    }

    .home-continue-section .watch-history-card:hover .watch-history-remove {
        opacity: 1;
    }

    .home-continue-section .watch-history-remove:hover {
        background: rgba(239,51,64,.88);
        color: #fff;
    }
}


/* ---------------------------------------------------------
   Shortlist proportions
   --------------------------------------------------------- */
.home-shortlist-section .tonight-card {
    min-height: 0;
    aspect-ratio: 16 / 9;
}

.home-shortlist-section .tonight-card > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-shortlist-section .tonight-copy {
    bottom: 15px;
}

.home-shortlist-section .tonight-logo-wrap {
    max-height: 62px;
}

.home-shortlist-section .tonight-logo {
    max-height: 58px;
}


/* ---------------------------------------------------------
   Give episode titles a little more room
   --------------------------------------------------------- */
.home-episode-card {
    grid-template-columns: 82px minmax(0,1fr);
}

.home-episode-card__copy {
    padding-left: 14px;
    padding-right: 32px;
}

.home-episode-card__copy strong {
    font-size: 13px;
}


/* ---------------------------------------------------------
   Browse by Category
   --------------------------------------------------------- */
.home-browse-section {
    padding-top: 46px;
}

.home-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
}

.home-category-card {
    color: inherit;
    text-decoration: none;
}

.home-category-card--visual {
    position: relative;
    min-height: 156px;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: #0a0f14;
    box-shadow: 0 16px 34px rgba(0,0,0,.18);
    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;
}

.home-category-card__image,
.home-category-card__fallback,
.home-category-card__overlay {
    position: absolute;
    inset: 0;
}

.home-category-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease, filter .35s ease;
}

.home-category-card__fallback {
    background:
        radial-gradient(circle at 80% 10%, rgba(239,51,64,.22), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.01)),
        #091018;
}

.home-category-card__overlay {
    background:
        linear-gradient(180deg, rgba(4,8,11,.10) 0%, rgba(4,8,11,.16) 28%, rgba(4,8,11,.40) 62%, rgba(4,8,11,.82) 100%),
        linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0) 42%);
}

.home-category-card__content {
    position: absolute;
    left: 18px;
    right: 52px;
    bottom: 16px;
    z-index: 2;
}

.home-category-card__name {
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.015em;
    text-shadow: 0 2px 12px rgba(0,0,0,.38);
}

.home-category-card__hint {
    display: block;
    overflow: hidden;
    margin-top: 7px;
    color: rgba(231,237,242,.82);
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.home-category-card__arrow {
    position: absolute;
    z-index: 2;
    right: 16px;
    bottom: 16px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 999px;
    background: rgba(8,12,16,.42);
    color: rgba(255,255,255,.88);
    font-size: 13px;
    backdrop-filter: blur(4px);
    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease;
}

.home-category-card--visual:hover {
    transform: translateY(-3px);
    border-color: rgba(239,51,64,.24);
    box-shadow: 0 20px 40px rgba(0,0,0,.24);
}

.home-category-card--visual:hover .home-category-card__image {
    transform: scale(1.035);
    filter: saturate(1.04);
}

.home-category-card--visual:hover .home-category-card__arrow {
    transform: translate(1px,-1px);
    background: rgba(239,51,64,.18);
    border-color: rgba(239,51,64,.30);
}

.home-browse-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.home-browse-shortcuts a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 999px;
    background: rgba(255,255,255,.018);
    color: #8d98a2;
    text-decoration: none;
    font-size: 9px;
    font-weight: 800;
    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease;
}

.home-browse-shortcuts a:hover {
    border-color: rgba(239,51,64,.20);
    background: rgba(239,51,64,.06);
    color: #fff;
}


/* ---------------------------------------------------------
   Slightly tighten transition into gateway
   --------------------------------------------------------- */
.home-browse-section + .gateway-section {
    padding-top: 38px;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width: 1100px) {
    .home-category-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    .home-continue-actions {
        gap: 8px;
    }

    .home-continue-history-link {
        display: inline-flex;
    }

    .home-continue-section .watch-history-row {
        grid-auto-columns:
            minmax(
                165px,
                46vw
            );
    }

    .home-continue-section .watch-history-remove {
        opacity: 1;
    }

    .home-category-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 10px;
    }

    .home-category-card--visual {
        min-height: 132px;
        border-radius: 15px;
    }

    .home-category-card__content {
        left: 14px;
        right: 44px;
        bottom: 13px;
    }

    .home-category-card__name {
        font-size: 14px;
    }

    .home-shortlist-section .tonight-card {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 420px) {
    .home-continue-arrows {
        display: none;
    }

    .home-category-card--visual {
        min-height: 118px;
    }
}



/* =========================================================
   V4.6 — CINEMATIC CATEGORY STRIP
   ========================================================= */
.home-browse-section {
    overflow: hidden;
}

.home-category-grid,
.home-category-grid--visual {
    display: none !important;
}

.home-category-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(235px, 22vw, 315px);
    gap: 12px;
    overflow-x: auto;
    padding: 1px 1px 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
}

.home-category-strip::-webkit-scrollbar {
    display: none;
}

.home-category-tile {
    position: relative;
    aspect-ratio: 1.82 / 1;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    background: #0b1015;
    color: #fff;
    text-decoration: none;
    scroll-snap-align: start;
    box-shadow: 0 12px 26px rgba(0,0,0,.18);
    transition: transform .22s ease, border-color .22s ease;
}

.home-category-tile__image,
.home-category-tile__fallback,
.home-category-tile__shade {
    position: absolute;
    inset: 0;
}

.home-category-tile__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .34s ease, filter .34s ease;
}

.home-category-tile__fallback {
    background:
        radial-gradient(circle at 72% 20%, rgba(239,51,64,.22), transparent 34%),
        linear-gradient(135deg, #15202a, #080c11 70%);
}

.home-category-tile__shade {
    background:
        linear-gradient(0deg, rgba(3,6,9,.82) 0%, rgba(3,6,9,.26) 48%, rgba(3,6,9,.05) 78%),
        linear-gradient(90deg, rgba(3,6,9,.18), transparent 50%);
}

.home-category-tile__name {
    position: absolute;
    z-index: 2;
    left: 16px;
    bottom: 14px;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.02em;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

@media (hover:hover) and (pointer:fine) {
    .home-category-tile:hover {
        transform: translateY(-2px);
        border-color: rgba(239,51,64,.24);
    }

    .home-category-tile:hover .home-category-tile__image {
        transform: scale(1.035);
        filter: saturate(1.04) brightness(.96);
    }
}

@media (max-width: 760px) {
    .home-category-strip {
        grid-auto-columns: minmax(220px, 76vw);
        gap: 10px;
    }

    .home-category-tile {
        border-radius: 13px;
    }

    .home-category-tile__name {
        left: 14px;
        bottom: 12px;
        font-size: 15px;
    }
}

/* =========================================================
   V4.7 — FINAL HOMEPAGE POLISH
   Continue Watching + Episodes + title formatting.
   Movies/TV gateway removed from markup.
   ========================================================= */

/* ---------- Continue Watching: calmer five-card desktop shelf ---------- */
@media (min-width: 1181px) {
    .home-continue-section .watch-history-row {
        grid-auto-columns: calc((100% - 56px) / 5);
        gap: 14px;
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    .home-continue-section .watch-history-row {
        grid-auto-columns: calc((100% - 42px) / 4);
        gap: 14px;
    }
}

.home-continue-section .watch-history-card {
    border-radius: 15px;
}

.home-continue-section .watch-history-card-body {
    min-height: 92px;
    padding: 12px 12px 13px;
}

.home-continue-section .watch-history-title {
    display: -webkit-box;
    min-height: 31px;
    overflow: hidden;
    color: #f0f3f5;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.22;
    white-space: normal;
    text-overflow: clip;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.home-continue-section .watch-history-meta {
    margin-top: 5px;
    font-size: 9.5px;
}

.home-continue-section .watch-history-resume {
    margin-top: 8px;
    font-size: 9.5px;
}

.home-continue-section .watch-history-progress {
    margin-top: 9px;
}

/* ---------- Recently added movie titles: no awkward one-line chopping ---------- */
.home-poster-card__copy strong {
    display: -webkit-box;
    min-height: 32px;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.24;
    white-space: normal;
    text-overflow: clip;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.home-poster-card__meta {
    margin-top: 4px;
}

.home-poster-card__genre {
    margin-top: 3px;
}

/* ---------- Episodes: more breathing room, stronger S/E hierarchy ---------- */
.home-episode-grid {
    gap: 15px;
}

.home-episode-card {
    min-height: 162px;
    grid-template-columns: 90px minmax(0,1fr);
    border-radius: 16px;
}

.home-episode-card__poster {
    min-height: 162px;
}

.home-episode-card__copy {
    padding: 17px 34px 15px 15px;
}

.home-episode-card__eyebrow {
    margin-bottom: 8px;
    font-size: 8px;
}

.home-episode-card__copy strong {
    display: -webkit-box;
    min-height: 35px;
    overflow: hidden;
    color: #f0f3f5;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.24;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.home-episode-card__number {
    margin-top: 9px;
    padding: 5px 9px;
    color: #e0e5e9;
    font-size: 9px;
    letter-spacing: .01em;
}

.home-episode-card__meta {
    margin-top: 8px;
    font-size: 9px;
}

/* ---------- Shortlist titles: consistent two-line fallback ---------- */
.tonight-title-fallback,
.tonight-hover-title {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.18;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ---------- Page ending: category discovery flows straight into footer ---------- */
.home-browse-section {
    padding-bottom: 50px;
}

@media (max-width: 980px) {
    .home-episode-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 760px) {
    .home-continue-section .watch-history-row {
        grid-auto-columns: minmax(190px, 72vw);
        gap: 11px;
    }

    .home-continue-section .watch-history-card-body {
        min-height: 88px;
    }

    .home-episode-grid {
        grid-template-columns: 1fr;
    }

    .home-episode-card {
        min-height: 148px;
        grid-template-columns: 88px minmax(0,1fr);
    }

    .home-episode-card__poster {
        min-height: 148px;
    }

    .home-poster-card__copy strong {
        font-size: 12px;
        min-height: 30px;
    }

    .home-browse-section {
        padding-bottom: 42px;
    }
}

/* =========================================================
   V7 — BREATHING SPACE / FINAL RHYTHM PASS
   CSS only. No layout/data/JS changes.
   ========================================================= */

/* ---------- Stronger vertical rhythm between homepage sections ---------- */
.home-continue-section {
    padding-top: 58px;
    padding-bottom: 4px;
}

.home-recent-movies {
    padding-top: 76px;
}

.home-recent-episodes {
    padding-top: 72px;
}

.home-shortlist-section {
    padding-top: 78px;
}

.home-browse-section {
    padding-top: 80px;
    padding-bottom: 76px;
}

/* ---------- More separation between heading and content ---------- */
.home-continue-section .section-heading,
.home-recent-movies .section-heading,
.home-recent-episodes .section-heading,
.home-shortlist-section .section-heading,
.home-browse-section .section-heading {
    margin-bottom: 25px;
}

.section-heading h2 {
    line-height: 1.12;
}

/* ---------- Continue Watching: wider gaps, still five across ---------- */
@media (min-width: 1181px) {
    .home-continue-section .watch-history-row {
        grid-auto-columns: calc((100% - 72px) / 5);
        gap: 18px;
    }
}

@media (min-width: 761px) and (max-width: 1180px) {
    .home-continue-section .watch-history-row {
        grid-auto-columns: calc((100% - 54px) / 4);
        gap: 18px;
    }
}

.home-continue-section .watch-history-card-body {
    padding: 14px 13px 14px;
}

.home-continue-section .watch-history-title {
    line-height: 1.32;
}

.home-continue-section .watch-history-meta {
    margin-top: 6px;
    line-height: 1.4;
}

.home-continue-section .watch-history-resume {
    margin-top: 9px;
    line-height: 1.35;
}

/* ---------- Recently added movies: less cramped text under posters ---------- */
.home-poster-grid {
    gap: 18px;
}

.home-poster-card__copy {
    padding-top: 13px;
}

.home-poster-card__copy strong {
    line-height: 1.32;
}

.home-poster-card__meta {
    margin-top: 6px;
    line-height: 1.45;
}

.home-poster-card__genre {
    margin-top: 5px;
    line-height: 1.4;
}

/* ---------- Episodes: slightly roomier without becoming oversized ---------- */
.home-episode-grid {
    gap: 18px;
}

.home-episode-card {
    min-height: 168px;
}

.home-episode-card__poster {
    min-height: 168px;
}

.home-episode-card__copy {
    padding: 19px 36px 17px 16px;
}

.home-episode-card__eyebrow {
    margin-bottom: 10px;
}

.home-episode-card__copy strong {
    line-height: 1.30;
}

.home-episode-card__number {
    margin-top: 11px;
}

.home-episode-card__meta {
    margin-top: 9px;
    line-height: 1.35;
}

/* ---------- Shortlist: more air around the editorial row ---------- */
.home-shortlist-section .tonight-grid {
    gap: 18px;
}

.home-shortlist-section .tonight-copy {
    left: 19px;
    right: 19px;
    bottom: 17px;
}

/* ---------- Category strip: comfortable ending before footer ---------- */
.home-category-grid {
    gap: 14px;
}

.home-browse-shortcuts {
    margin-top: 17px;
}

/* ---------- Mobile keeps the rhythm without becoming endless ---------- */
@media (max-width: 760px) {
    .home-continue-section {
        padding-top: 46px;
    }

    .home-recent-movies,
    .home-recent-episodes,
    .home-shortlist-section,
    .home-browse-section {
        padding-top: 50px;
    }

    .home-browse-section {
        padding-bottom: 52px;
    }

    .home-continue-section .section-heading,
    .home-recent-movies .section-heading,
    .home-recent-episodes .section-heading,
    .home-shortlist-section .section-heading,
    .home-browse-section .section-heading {
        margin-bottom: 19px;
    }

    .home-continue-section .watch-history-row {
        gap: 14px;
    }

    .home-poster-grid {
        gap: 14px 12px;
    }

    .home-episode-grid {
        gap: 14px;
    }

    .home-episode-card {
        min-height: 154px;
    }

    .home-episode-card__poster {
        min-height: 154px;
    }

    .home-episode-card__copy {
        padding: 17px 32px 15px 14px;
    }

    .home-shortlist-section .tonight-grid {
        gap: 14px;
    }

    .home-category-grid {
        gap: 11px;
    }
}



/* =======================================================================
   V8 — Personalized recommendations
   Signed-in users with favorite genres only.
======================================================================= */
.home-personalized-section {
    position: relative;
    padding-top: 42px;
}

.home-personalized-heading {
    align-items: flex-end;
}

.home-personalized-summary {
    margin: 8px 0 0;
    color: rgba(231, 238, 244, .58);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .035em;
}

.home-personalized-card__type {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(7, 11, 15, .78);
    color: rgba(255,255,255,.9);
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
}

.home-personalized-card__reason {
    display: block;
    margin-top: 7px;
    color: rgba(255,255,255,.48);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.4;
}

.home-personalized-card:hover .home-personalized-card__reason {
    color: rgba(255,255,255,.72);
}

@media (max-width: 700px) {
    .home-personalized-section {
        padding-top: 30px;
    }

    .home-personalized-heading {
        align-items: flex-start;
    }

    .home-personalized-summary {
        margin-top: 6px;
    }
}