/* ==========================================================================
   HOME — redesign layer
   --------------------------------------------------------------------------
   Loaded last, and only by index.html, so it can restyle the home screen
   without touching styles.css (shared with movie / tv / actor / 404 ...).

   Spacing & layout rules (ui-ux-pro-max):
   - 4/8px spacing scale, no off-scale values
   - breakpoints 768 / 1024 / 1440, one page gutter shared by every row
   - 44px minimum touch targets, >= 8px between targets
   - hero sized with dvh/svh, not 100vh
   - text blocks capped at ~60ch
   Several rules need !important because styles.css / index.css already use
   it, or because JS writes inline styles (hero buttons, trending cards).
   ========================================================================== */

/* Colours that home.js sets from posters. Registering them lets the browser
   animate between one title's colours and the next instead of snapping. */
@property --hero-accent { syntax: '<color>'; inherits: true; initial-value: #12d6c5; }
@property --hero-ink    { syntax: '<color>'; inherits: true; initial-value: #0b0a10; }
@property --aura-1      { syntax: '<color>'; inherits: true; initial-value: #12d6c5; }
@property --aura-2      { syntax: '<color>'; inherits: true; initial-value: #2f6bff; }
@property --aura-3      { syntax: '<color>'; inherits: true; initial-value: #b395e8; }
@property --tint        { syntax: '<color>'; inherits: true; initial-value: rgb(0 0 0 / 0); }
@property --tint-x      { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --studio-glow { syntax: '<color>'; inherits: true; initial-value: rgb(0 0 0 / 0); }
@property --spot-1      { syntax: '<color>'; inherits: true; initial-value: #12d6c5; }
@property --spot-2      { syntax: '<color>'; inherits: true; initial-value: #2f6bff; }
@property --spot-accent { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --spot-ink    { syntax: '<color>'; inherits: true; initial-value: #0b0a10; }

:root {
    transition: --hero-accent 0.9s ease, --hero-ink 0.9s ease,
        --aura-1 1.4s ease, --aura-2 1.4s ease, --aura-3 1.4s ease;

    /* Spacing scale */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;

    /* Layout (mobile first; widened at each breakpoint below) */
    --gutter: 16px;
    --row-gap: 40px;          /* between sections */
    --row-pad-y: 12px;        /* breathing room above/below a card track */
    --card-gap: 12px;
    --card-w: 128px;          /* 2:3 poster */
    --wide-w: 280px;          /* 16:9 tile */
    --header-h: 64px;
    --hero-h: min(72svh, 600px);
    --hero-pad-b: 32px;       /* hero content distance from hero bottom */
    --hero-overlap: 0px;      /* how far the first row slides up into the hero */

    /* Surface */
    --bg: #0a0910;
    --bg-rgb: 10, 9, 16;
    --surface-1: rgba(255, 255, 255, 0.05);
    --surface-2: rgba(255, 255, 255, 0.1);
    --surface-3: rgba(255, 255, 255, 0.16);
    --hairline: rgba(255, 255, 255, 0.08);
    --hairline-strong: rgba(255, 255, 255, 0.2);
    --text: #f5f3fa;
    --text-2: rgba(245, 243, 250, 0.7);
    --text-3: rgba(245, 243, 250, 0.5);
    --star: #faac38;
    /* The logo's aurora: teal → blue → lilac */
    --aurora: linear-gradient(90deg, #12d6c5 0%, #3b82f6 48%, #b395e8 100%);
    --aurora-v: linear-gradient(180deg, #12d6c5 0%, #3b82f6 55%, #b395e8 100%);

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-pill: 999px;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 200ms;
}

@media (min-width: 768px) {
    :root {
        --gutter: 32px;
        --row-gap: 48px;
        --card-gap: 16px;
        --card-w: 152px;
        --wide-w: 340px;
        --hero-h: clamp(480px, 56.25vw, 88dvh);
        --hero-pad-b: 96px;
        --hero-overlap: 48px;
    }
}

@media (min-width: 1024px) {
    :root {
        --gutter: 48px;
        --row-gap: 56px;
        --row-pad-y: 16px;
        --card-w: 176px;
        --wide-w: 400px;
        --header-h: 72px;
        --hero-h: clamp(560px, 56.25vw, 92dvh);
        --hero-pad-b: 128px;
        --hero-overlap: 64px;
    }
}

@media (min-width: 1440px) {
    :root {
        --gutter: 64px;
        --card-w: 192px;
        --wide-w: 440px;
    }
}

/* ---------- Base ---------------------------------------------------------- */

body {
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Grain overlay read as dirt on the new flat surfaces */
main#main-content::before {
    display: none;
}

/* Header: see site-chrome.css (shared by every page) */

/* ---------- Hero ---------------------------------------------------------- */

#main-movie-slider {
    position: relative;
    z-index: 0;               /* own stacking context, so the aurora can sit above it */
    height: var(--hero-h);
    margin: 0 !important;
    aspect-ratio: auto !important;
    background: var(--bg) !important;
    overflow: hidden;
}

#main-movie-slider .splide__track,
#main-movie-slider .splide__list,
#main-movie-slider .splide__slide {
    height: 100%;
}

#main-movie-slider .splide__slide {
    display: block;
}

#main-movie-slider .main-movie {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Lets the trailer iframe size itself in cq units below */
    container-type: size;
}

#main-movie-slider .main-img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center 25%;
    background: var(--bg);
}

/* Trailer: always cover the hero, never letterbox (16:9 inside any box) */
#main-movie-slider .main-movie .iframe-2 {
    top: 50% !important;
    left: 50% !important;
    width: max(100cqw, 177.78cqh) !important;
    height: max(100cqh, 56.25cqw) !important;
    max-height: none !important;
    /* 1.2x crops YouTube's top bar and the pillarbox some trailers carry */
    transform: translate(-50%, -50%) scale(1.2);
}

/* Scrims: left for legibility, bottom to melt into the page */
#main-movie-slider .main-text {
    position: absolute !important;
    inset: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 var(--gutter) var(--hero-pad-b) !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;   /* styles.css flips this to column on mobile */
    flex-wrap: nowrap !important;     /* ...and wraps it, which pins the copy to the top */
    align-items: flex-end !important;
    justify-content: flex-start !important;
    font-size: 16px;
    background:
        linear-gradient(0deg, var(--bg) 0%, rgba(var(--bg-rgb), 0.55) 18%, rgba(var(--bg-rgb), 0) 45%),
        linear-gradient(90deg, rgba(var(--bg-rgb), 0.85) 0%, rgba(var(--bg-rgb), 0.45) 32%, rgba(var(--bg-rgb), 0) 62%) !important;
    /* Let drags and clicks fall through to the slide; only the copy is live */
    pointer-events: none !important;
}

#main-movie-slider .main-text-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-4);
    width: 100%;
    max-width: 600px;
    margin: 0 !important;
    pointer-events: auto !important;
}

#main-movie-slider .main-text-text * {
    pointer-events: auto !important;
}

#main-movie-slider .main-movie-logo {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 35vw !important;
    max-height: 30vh !important;
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.45));
}

#main-movie-slider .hero-title {
    display: block;
    width: auto !important;
    font-size: clamp(32px, 4.5vw, 64px) !important;
    line-height: 1.05;
    font-weight: 400 !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: -0.02em;
    text-shadow: none !important;
    color: var(--text);
}

#main-movie-slider .hero-meta,
.hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
    font-size: 15px;
    line-height: 1;
    color: var(--text-2);
}

.hero-meta .media-type-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    height: 24px;
    padding: 0 var(--s-2);
    border-radius: 6px;
    background: color-mix(in srgb, var(--hero-accent) 28%, rgba(255, 255, 255, 0.06));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hero-accent) 45%, transparent);
    color: var(--text);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero-meta .media-type-badge .material-symbols-outlined {
    font-size: 14px !important;
}

.hero-meta-text::before,
.hero-meta-rating::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: var(--s-3);
    border-radius: 50%;
    background: var(--text-3);
    vertical-align: middle;
}

.hero-meta-text+.hero-meta-rating::before {
    display: inline-block;
}

.hero-meta-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    color: var(--text);
}

.hero-meta-rating .material-symbols-outlined {
    font-size: 16px !important;
    color: var(--star);
}

#main-movie-slider .hero-overview {
    margin: 0;
    max-width: 56ch;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Buttons: neutral, 48px tall. JS paints per-title colours inline, so the
   overrides here need !important. */
#main-movie-slider .button-container2 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) !important;
    margin: var(--s-2) 0 0 !important;
}

#main-movie-slider .button-container2 .main-button {
    width: auto !important;
    height: 48px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 var(--s-5) 0 var(--s-4) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    border: 0 !important;
    border-radius: var(--r-pill) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-family: 'futur', sans-serif;
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: 0.01em;
    opacity: 1 !important;
    cursor: pointer;
    transition: transform var(--dur) var(--ease-out), background-color var(--dur) ease !important;
}

#main-movie-slider .button-container2 .main-button:hover {
    transform: translateY(-1px) !important;
}

#main-movie-slider .button-container2 .main-button:active {
    transform: scale(0.97) !important;
}

#main-movie-slider .button-container2 .main-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Watch button wears the title's own colour (home.js → --hero-accent) */
#main-movie-slider .button-container2 .play-button:not(.info-button2) {
    background: var(--hero-accent) !important;
    color: var(--hero-ink) !important;
    box-shadow: 0 12px 36px -10px color-mix(in srgb, var(--hero-accent) 70%, transparent) !important;
}

#main-movie-slider .button-container2 .play-button:not(.info-button2):hover {
    filter: brightness(1.08);
    box-shadow: 0 16px 44px -10px color-mix(in srgb, var(--hero-accent) 85%, transparent) !important;
}

#main-movie-slider .button-container2 .play-button:not(.info-button2) .material-symbols-outlined {
    color: var(--hero-ink) !important;
    font-size: 28px !important;
}

#main-movie-slider .button-container2 .info-button2 {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

#main-movie-slider .button-container2 .info-button2:hover {
    background: rgba(255, 255, 255, 0.24) !important;
}

#main-movie-slider .button-container2 .info-button2 .material-symbols-outlined {
    color: #fff !important;
    font-size: 22px !important;
}

/* Glass circle shared by hero controls */
#main-movie-slider .trailer-control-btn,
#main-movie-slider .splide__arrow,
#main-movie-slider .award-info-box,
#main-movie-slider .mobile-play-button {
    background: rgba(var(--bg-rgb), 0.4) !important;
    border: 1px solid var(--hairline-strong) !important;
    color: #fff;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: none !important;
}

/* Trailer mute / pause: bottom-right, in line with the buttons */
#main-movie-slider .trailer-controls-container {
    left: auto !important;
    right: var(--gutter) !important;
    bottom: var(--hero-pad-b) !important;
    transform: none !important;
    gap: var(--s-2) !important;
    padding: 0 !important;
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    z-index: 12 !important;
}

#main-movie-slider .trailer-control-btn {
    width: 44px;
    height: 44px;
    font-size: 20px;
    transition: background-color var(--dur) ease, border-color var(--dur) ease;
}

#main-movie-slider .trailer-control-btn .material-symbols-outlined {
    font-size: 20px;
}

#main-movie-slider .trailer-control-btn:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    transform: none;
}

/* "#1 Trending" pill sits above the trailer controls */
#main-movie-slider .award-info-container {
    right: var(--gutter) !important;
    bottom: calc(var(--hero-pad-b) + 56px) !important;
    top: auto !important;
    z-index: 12 !important;
}

#main-movie-slider .award-info-box .material-symbols-outlined {
    font-size: 20px;
}

/* Prev / next: glass circles at the edges, revealed on hover */
#main-movie-slider .splide__arrow {
    top: 50% !important;
    bottom: auto !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    opacity: 0 !important;
    z-index: 11;
    transition: opacity var(--dur) ease, background-color var(--dur) ease !important;
}

#main-movie-slider .splide__arrow--prev {
    left: var(--s-3) !important;
}

#main-movie-slider .splide__arrow--next {
    right: var(--s-3) !important;
}

#main-movie-slider:hover .splide__arrow,
#main-movie-slider .splide__arrow:focus-visible {
    opacity: 1 !important;
}

#main-movie-slider .splide__arrow:hover {
    background: rgba(255, 255, 255, 0.16) !important;
}

#main-movie-slider .splide__arrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #fff;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Tap-to-play trailer (mobile, or autoplay off) */
#main-movie-slider .mobile-play-button {
    top: 40% !important;
    bottom: auto !important;
    right: auto !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    z-index: 11 !important;
}

#main-movie-slider .mobile-play-button .material-symbols-outlined {
    font-size: 36px;
}

@media (max-width: 767px) {
    #main-movie-slider .main-movie-logo {
        max-width: min(280px, 72vw) !important;
        max-height: 96px !important;
    }

    #main-movie-slider .main-text {
        background:
            linear-gradient(0deg, var(--bg) 0%, rgba(var(--bg-rgb), 0.8) 30%, rgba(var(--bg-rgb), 0) 65%),
            linear-gradient(180deg, rgba(var(--bg-rgb), 0.55) 0%, rgba(var(--bg-rgb), 0) 22%) !important;
    }

    #main-movie-slider .main-text-text {
        gap: var(--s-3);
    }

    #main-movie-slider .hero-meta {
        font-size: 14px;
    }

    #main-movie-slider .hero-overview {
        font-size: 15px;
        -webkit-line-clamp: 2;
    }

    #main-movie-slider .button-container2 .main-button {
        flex: 1 1 0;
    }

    #main-movie-slider .splide__arrow {
        display: none !important;
    }

    #main-movie-slider .award-info-container {
        top: calc(var(--header-h) + var(--s-2)) !important;
        bottom: auto !important;
    }
}

@media (hover: none) {
    #main-movie-slider .splide__arrow {
        display: none !important;
    }
}

/* ---------- Living aurora ------------------------------------------------- */
/* Three slow-drifting lights on the horizon where the hero meets the rows,
   coloured by the active title (--aura-*). Screen-blended so it lights the
   hero's lower edge instead of covering it. */

/* styles.css pads #content 20px a side (the old hero cancelled it with a
   negative margin). The gutter now does that job, so the hero is full-bleed. */
#content {
    position: relative;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.aurora-ambient {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--hero-h) - 260px);
    height: 620px;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.55;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 58%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 58%, transparent 100%);
}

.aurora-ambient i {
    position: absolute;
    top: 18%;
    width: 62vw;
    height: 64%;
    border-radius: 50%;
    will-change: transform;
    animation: aurora-drift 26s ease-in-out infinite alternate;
}

.aurora-ambient i:nth-child(1) {
    left: -14vw;
    background: radial-gradient(closest-side, var(--aura-1), transparent);
}

.aurora-ambient i:nth-child(2) {
    left: 20vw;
    top: 4%;
    background: radial-gradient(closest-side, var(--aura-2), transparent);
    animation-duration: 32s;
    animation-delay: -9s;
}

.aurora-ambient i:nth-child(3) {
    left: 52vw;
    top: 26%;
    background: radial-gradient(closest-side, var(--aura-3), transparent);
    animation-duration: 38s;
    animation-delay: -17s;
}

@keyframes aurora-drift {
    from {
        transform: translate3d(-5vw, 6%, 0) scale(1, 0.85);
    }

    to {
        transform: translate3d(7vw, -6%, 0) scale(1.2, 1.05);
    }
}

@media (max-width: 767px) {
    .aurora-ambient {
        top: calc(var(--hero-h) - 200px);
        height: 440px;
        opacity: 0.45;
    }

    .aurora-ambient i {
        width: 90vw;
    }
}

/* ---------- Genre quick-nav rail ------------------------------------------ */
/* The rail (index.css) is invisible until hovered, yet its 210px-wide box sat
   over the hero's Watch Now button and the first card of every row, eating
   their clicks. Now the box ignores the pointer entirely; only a thin strip on
   the left edge reveals it, and only once the hero is scrolled away
   (.is-armed, set in index.html). While hovered the whole rail is live. */
#genre-rail,
#genre-rail #genre-rail-list {
    pointer-events: none !important;
}

#genre-rail:not(.is-armed) {
    opacity: 0 !important;
    visibility: hidden;
}

#genre-rail.is-armed::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 20px;
    pointer-events: auto;
}

#genre-rail.is-armed:hover,
#genre-rail.is-armed:hover #genre-rail-list {
    pointer-events: auto !important;
}

/* ---------- Page body ----------------------------------------------------- */

main#main-content {
    --page-gutter: var(--gutter);
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--hero-overlap));
    padding-top: 0 !important;
    padding-bottom: var(--s-8);
}

/* One vertical rhythm for every row: the flex gap is the only spacing between
   sections, so nothing can drift. Empty containers are taken out of the flow
   so they don't leave double gaps. */
#hide-when-search {
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);
}

#hide-when-search>*,
#hide-when-search .home-row,
#hide-when-search .rail-group {
    margin: 0 !important;
}

#hide-when-search>div:empty,
#continue-watching-section:has(#continue-watching[style*="none"]) {
    display: none !important;
}

/* ---------- Ambilight ----------------------------------------------------- */
/* Hovering a poster washes its row in that poster's colour; the light glides
   along to whichever card is under the pointer (home.js sets --tint/--tint-x). */

#hide-when-search .home-row,
#hide-when-search .rail-group,
#hide-when-search .recommendation-block {
    position: relative;
    isolation: isolate;
    transition: --tint 0.6s ease, --tint-x 0.5s var(--ease-out);
}

#hide-when-search .home-row::before,
#hide-when-search .rail-group::before,
#hide-when-search .recommendation-block::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -24px;
    bottom: -24px;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(38% 62% at var(--tint-x) 62%,
            color-mix(in srgb, var(--tint) 34%, transparent),
            transparent 72%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

#hide-when-search .is-tinted::before {
    opacity: 1;
}

@media (hover: hover) and (min-width: 769px) {

    /* The hovered card's ring picks up its own colour */
    #hide-when-search .movie-card:not(.expanded):not(.mobile-card):hover::after,
    #trending-movies-container .movie-card:hover::after {
        box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--glow, #ffffff) 85%, white) !important;
    }
}

/* ---------- Row heads ----------------------------------------------------- */

.home-row-head,
.rail-group-head:not(.rail-group-head--fisheye):not(.rail-group-head--logos) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    min-height: 44px;
    padding: 0 var(--gutter) !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
}

/* Brand headings: uppercase Futura like the wordmark, with the aurora bar */
#hide-when-search .section-heading,
#hide-when-search .rail-group-head .section-heading {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text);
}

#hide-when-search .section-heading::before {
    content: '';
    display: inline-block;
    flex: 0 0 4px;
    width: 4px;
    height: 0.95em;
    border-radius: 2px;
    background: var(--aurora-v);
}

.head-text {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    min-width: 0;
}

/* styles.css styles every `#hide-when-search p` as a 32px uppercase heading
   (from when headings were <p>s). Body copy in the new rows opts back out. */
#hide-when-search .section-sub,
#hide-when-search .recommendation-header p,
#hide-when-search #spotlight-section p {
    text-transform: none;
    text-shadow: none;
    padding-right: 0;
    letter-spacing: normal;
}

/* Sub-line sits under the heading text, past the 4px bar + 12px gap */
#hide-when-search .section-sub {
    margin: 0;
    padding-left: var(--s-4);
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-3);
}

@media (max-width: 767px) {

    #hide-when-search .section-heading,
    #hide-when-search .rail-group-head .section-heading {
        font-size: 20px;
    }
}

@media (min-width: 1024px) {

    #hide-when-search .section-heading,
    #hide-when-search .rail-group-head .section-heading {
        font-size: 32px;
    }
}

.section-heading-link {
    display: inline-flex !important;
    align-items: center;
    gap: 2px !important;
    height: 36px;
    margin: 0 !important;
    padding: 0 var(--s-2) 0 var(--s-3);
    border-radius: var(--r-pill);
    font-style: normal !important;
    font-size: 14px !important;
    color: var(--text-2) !important;
    text-decoration: none !important;
    transition: color var(--dur) ease, background-color var(--dur) ease !important;
}

.section-heading-link:hover {
    color: var(--text) !important;
    background: var(--surface-1);
}

.section-heading-link .material-symbols-outlined {
    font-size: 20px !important;
}

/* Row options (…) */
.home-row-head .dropdown-container {
    position: relative;
    margin: 0;
}

.home-row-head .more-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    font-size: 24px;
    color: var(--text-2);
    cursor: pointer;
    transition: color var(--dur) ease, background-color var(--dur) ease;
}

.home-row-head .more-icon:hover,
.home-row-head .more-icon:focus-visible {
    color: var(--text);
    background: var(--surface-1);
    outline: none;
}

/* Big outlined TOP 20 heading: original size, aligned to the page gutter */
#hide-when-search .top10-container {
    margin: 0 !important;
    padding: 0 var(--gutter) !important;
}

/* ---------- Card tracks --------------------------------------------------- */

#hide-when-search .movie-container,
#hide-when-search .recom-scroll {
    display: flex;
    gap: var(--card-gap) !important;
    column-gap: var(--card-gap) !important;
    margin: 0 !important;
    padding: var(--row-pad-y) var(--gutter) !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: var(--gutter);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

#hide-when-search .movie-container.rail-pending:not(.rail-loaded) {
    min-height: calc(var(--card-w) * 1.5 + var(--row-pad-y) * 2);
}

/* Row scroll buttons (built by initScrollButtons in index.js) */
#hide-when-search .scroll-wrapper .scroll-button {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50%;
    background: rgba(var(--bg-rgb), 0.72) !important;
    border: 1px solid var(--hairline-strong) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    z-index: 5;
    transition: opacity var(--dur) ease, background-color var(--dur) ease !important;
}

#hide-when-search .scroll-wrapper .scroll-button svg {
    width: 18px;
    height: 18px;
}

#hide-when-search .scroll-wrapper .scroll-left {
    left: var(--s-2) !important;
}

#hide-when-search .scroll-wrapper .scroll-right {
    right: var(--s-2) !important;
}

#hide-when-search .scroll-wrapper:hover .scroll-button,
#hide-when-search .scroll-wrapper .scroll-button:focus-visible {
    opacity: 1;
}

#hide-when-search .scroll-wrapper .scroll-button:hover {
    background: rgba(40, 38, 52, 0.9) !important;
    transform: translateY(-50%) !important;
}

@media (hover: none),
(max-width: 768px) {
    #hide-when-search .scroll-wrapper .scroll-button {
        display: none !important;
    }
}

/* ---------- Poster cards -------------------------------------------------- */

#hide-when-search .movie-card:not(.expanded):not(.mobile-card) {
    position: relative;
    flex: 0 0 auto;
    width: var(--card-w) !important;
    height: auto !important;
    aspect-ratio: 2 / 3;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--r-md);
    overflow: hidden;
    background-color: var(--surface-1);
    scroll-snap-align: start;
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    transition: transform 240ms var(--ease-out), box-shadow 240ms ease !important;
}

/* Hairline ring drawn above the poster */
#hide-when-search .movie-card:not(.expanded):not(.mobile-card)::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    pointer-events: none;
    transition: box-shadow 240ms ease;
    z-index: 3;
}

#hide-when-search .movie-card:not(.expanded):not(.mobile-card) img.movie-poster,
#hide-when-search .movie-card:not(.expanded):not(.mobile-card)>img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

@media (hover: hover) and (min-width: 769px) {
    #hide-when-search .movie-card:not(.expanded):not(.mobile-card):hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.8) !important;
        z-index: 4;
    }

    #hide-when-search .movie-card:not(.expanded):not(.mobile-card):hover::after {
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
    }
}

#hide-when-search .movie-card:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Hover details */
#hide-when-search .movie-card:not(.expanded):not(.mobile-card) .movie-overlay {
    padding: var(--s-3);
    gap: var(--s-1) var(--s-2);
    box-sizing: border-box;
    background: linear-gradient(0deg, rgba(var(--bg-rgb), 0.95) 0%, rgba(var(--bg-rgb), 0.5) 40%, rgba(var(--bg-rgb), 0) 70%);
    font-size: 12px;
    z-index: 2;
}

#hide-when-search .movie-card .movie-overview-splide {
    display: none !important;
}

/* Continue Watching progress */
#continue-watching .progress-container {
    height: 4px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    z-index: 4 !important;
}

#continue-watching .progress-bar {
    height: 100% !important;
    border-radius: 0 2px 2px 0;
    background: var(--aurora) !important;
}

#continue-watching .movie-card .movie-overlay {
    padding-bottom: var(--s-4) !important;
}

#continue-watching .movie-episode,
#continue-watching .movie-runtime {
    font-size: 12px;
    color: var(--text);
    text-align: left;
    padding: 0;
}

#continue-watching .episode-title {
    font-size: 11px;
    color: var(--text-2);
    padding: 0;
    text-align: left;
}

/* ---------- Top 20 tiles -------------------------------------------------- */

#trending-movies-container {
    counter-reset: rank;
}

#trending-movies-container .movie-card {
    counter-increment: rank;
    position: relative;
    flex: 0 0 auto;
    width: var(--wide-w) !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--r-lg);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-color: var(--surface-1);
    transform: none !important;
    scroll-snap-align: start;
    box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.7);
    transition: transform 240ms var(--ease-out), box-shadow 240ms ease !important;
}

/* Rank numeral, cropped by the top edge */
#trending-movies-container .movie-card::before {
    content: counter(rank);
    position: absolute;
    top: -14px;
    left: var(--s-3);
    z-index: 3;
    font-family: 'futur', sans-serif;
    font-size: 88px;
    line-height: 1;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

#trending-movies-container .movie-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    pointer-events: none;
    z-index: 4;
}

#trending-movies-container .movie-overlay {
    position: absolute;
    inset: 0;
    height: auto;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-end;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-4) !important;
    background:
        radial-gradient(120px 100px at 0 0, rgba(var(--bg-rgb), 0.55), rgba(var(--bg-rgb), 0)),
        linear-gradient(0deg, rgba(var(--bg-rgb), 0.92) 0%, rgba(var(--bg-rgb), 0.45) 38%, rgba(var(--bg-rgb), 0) 64%) !important;
    z-index: 2;
}

#trending-movies-container .genres {
    display: flex;
    gap: var(--s-1);
    margin: 0;
}

#trending-movies-container .movie-genre {
    display: inline-flex !important;
    align-items: center;
    height: 22px;
    padding: 0 var(--s-2) !important;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.14);
    color: var(--text);
    font-size: 11px !important;
    line-height: 1;
    margin: 0 !important;
}

#trending-movies-container .media-type-label {
    display: inline-flex;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--text-2);
}

#trending-movies-container .movie-rating {
    margin: 0 0 0 auto !important;
    font-size: 13px;
    color: var(--text);
}

#trending-movies-container .rating-star .material-symbols-outlined {
    color: var(--star);
}

#trending-movies-container .movie-overview {
    display: none;
}

@media (hover: hover) and (min-width: 769px) {
    #trending-movies-container .movie-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.85);
    }

    #trending-movies-container .movie-card:hover::after {
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
    }
}

@media (max-width: 767px) {
    #trending-movies-container .movie-card {
        width: min(80vw, var(--wide-w)) !important;
    }

    #trending-movies-container .movie-card::before {
        font-size: 72px;
        top: -10px;
    }
}

/* ---------- Genre strip (fisheye) ----------------------------------------- */

/* Same aurora bar as every heading; the parked genre IS the heading */
.rail-group-head--fisheye::before {
    left: var(--gutter) !important;
    width: 4px !important;
    height: 30px !important;
    background: var(--aurora-v) !important;
}

.rail-tabs--fisheye {
    padding: var(--s-1) 0 var(--s-1) calc(var(--gutter) + var(--s-4)) !important;
    scroll-padding-left: calc(var(--gutter) + var(--s-4)) !important;
}

/* 21px x the 1.15 anchor scale lands the active genre at the 24px heading size */
.rail-tab--fisheye {
    font-size: 21px !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-right: var(--s-5) !important;
    padding: var(--s-2) var(--s-2) var(--s-2) 0 !important;
    color: var(--text-3) !important;
}

.rail-tab--fisheye.is-active {
    color: var(--text) !important;
    font-weight: 400 !important;
    text-shadow: none !important;
}

@media (min-width: 1024px) {
    .rail-tab--fisheye {
        font-size: 28px !important;
    }

    .rail-group-head--fisheye::before {
        height: 36px !important;
    }
}

@media (max-width: 767px) {
    .rail-tab--fisheye {
        margin-right: var(--s-4) !important;
    }
}

/* ---------- Segmented Movies / TV toggle ---------------------------------- */

.rail-tabs--media {
    padding: var(--s-1) !important;
    background: var(--surface-1) !important;
    border: 1px solid var(--hairline) !important;
}

.rail-tab--media {
    height: 36px;
    padding: 0 var(--s-4) !important;
    font-size: 14px !important;
    color: var(--text-2) !important;
}

.rail-tab--media.is-active {
    background: var(--text) !important;
    color: #0a0910 !important;
}

.rail-tab--media .rail-tab-icon {
    font-size: 18px !important;
}

@media (max-width: 767px) {
    .rail-tab--media {
        height: 32px;
        padding: 0 var(--s-3) !important;
    }

    .rail-tab--media span:not(.rail-tab-icon) {
        display: none;
    }
}

/* ---------- Stacked heads (heading over a tab strip) ---------------------- */

#hide-when-search .rail-group-head--stack {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: var(--s-4) !important;
}

/* Strips run edge to edge but start on the gutter */
.rail-group-head--stack .rail-tabs {
    flex: 0 0 auto !important;
    margin: 0 calc(-1 * var(--gutter)) !important;
    padding: var(--s-1) var(--gutter) !important;
    scroll-padding-inline: var(--gutter);
}

/* ---------- What's the mood? ---------------------------------------------- */

.rail-group--mood {
    --studio-glow: #f7c948;
    transition: --studio-glow 0.6s ease;
}

.rail-tabs--mood {
    gap: var(--s-2) !important;
}

.rail-tab--mood {
    height: 44px;
    padding: 0 var(--s-4) 0 var(--s-3) !important;
    gap: var(--s-2) !important;
    border-radius: var(--r-pill) !important;
    background: var(--surface-1) !important;
    border: 1px solid var(--hairline) !important;
    color: var(--text-2) !important;
    font-size: 15px !important;
    letter-spacing: 0.01em !important;
    transition: background-color var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease !important;
}

.rail-tab--mood .rail-tab-icon {
    font-size: 20px !important;
    color: var(--chip);
    transition: color var(--dur) ease;
}

.rail-tab--mood:hover {
    transform: none !important;
    color: var(--text) !important;
    background: color-mix(in srgb, var(--chip) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--chip) 45%, transparent) !important;
}

.rail-tab--mood.is-active {
    background: var(--chip) !important;
    border-color: transparent !important;
    color: #0b0a10 !important;
    box-shadow: 0 8px 24px -10px var(--chip);
}

.rail-tab--mood.is-active .rail-tab-icon {
    color: #0b0a10;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* The row glows in the chosen mood's colour */
.rail-group--mood .rail-track {
    background: radial-gradient(60% 90% at 30% 55%,
            color-mix(in srgb, var(--studio-glow) 16%, transparent),
            transparent 72%);
}

/* ---------- Time Machine -------------------------------------------------- */
/* Decades as big outlined numerals — the same voice as the TOP 20 heading.
   The selected decade fills with the aurora. */

.rail-tabs--decades {
    gap: var(--s-6) !important;
    align-items: flex-end !important;
}

.rail-tab--decades {
    height: auto;
    padding: 0 var(--s-1) var(--s-1) !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-family: 'futur', sans-serif !important;
    font-size: 64px !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    color: transparent !important;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.32);
    transition: -webkit-text-stroke-color var(--dur) ease !important;
}

.rail-tab--decades:hover {
    transform: none !important;
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.85);
}

.rail-tab--decades.is-active {
    background: var(--aurora) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-stroke: 0 transparent;
    color: transparent !important;
}

.rail-tab--decades:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

@media (max-width: 767px) {
    .rail-tabs--decades {
        gap: var(--s-5) !important;
    }

    .rail-tab--decades {
        font-size: 44px !important;
    }
}

/* ---------- The Spectrum -------------------------------------------------- */
/* Posters sorted by colour. Each card carries a chip of its colour, and a
   spectrum line runs underneath (background-attachment: local, so the line
   scrolls with the cards). */

#spectrum-container {
    padding-bottom: var(--s-6) !important;
}

#spectrum-container.has-spectrum {
    background-image: var(--spectrum);
    background-repeat: no-repeat;
    background-size: 100% 3px;
    background-position: 0 calc(100% - 12px);
    background-attachment: local;
}

#spectrum-container .movie-card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    z-index: 4;
    background: var(--swatch, transparent);
    pointer-events: none;
}

#spectrum-section .section-heading::before {
    background: linear-gradient(180deg, #ff5d5d, #ffb84d, #f7e35a, #4ade80, #38bdf8, #8b5cf6, #f472b6);
}

/* ---------- Tonight's Pick ------------------------------------------------ */

#spotlight-section .spotlight-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: var(--row-pad-y) var(--gutter) 0;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--spot-1) 42%, transparent), transparent 62%),
        radial-gradient(70% 90% at 30% 0%, color-mix(in srgb, var(--spot-2) 32%, transparent), transparent 64%),
        #110f19;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 32px 80px -40px color-mix(in srgb, var(--spot-1) 70%, transparent);
    transition: --spot-1 0.9s ease, --spot-2 0.9s ease, --spot-accent 0.9s ease, --spot-ink 0.9s ease;
}

#spotlight-section .spotlight-media {
    position: relative;
    aspect-ratio: 16 / 9;
}

#spotlight-section .spotlight-backdrop {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

#spotlight-section .spotlight-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
    margin-top: calc(-1 * var(--s-8));
    padding: 0 var(--s-5) var(--s-5);
}

#spotlight-section .spotlight-titlebox {
    min-height: 48px;
    display: flex;
    align-items: flex-end;
}

#spotlight-section .spotlight-logo {
    display: none;
    max-width: min(320px, 80%);
    max-height: 96px;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5));
}

#spotlight-section .spotlight-card.has-logo .spotlight-logo {
    display: block;
}

#spotlight-section .spotlight-card.has-logo .spotlight-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

#spotlight-section .spotlight-title {
    margin: 0;
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 400;
    line-height: 1.05;
    color: var(--text);
}

#spotlight-section .spotlight-tagline {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    color: color-mix(in srgb, var(--spot-accent) 55%, white);
}

#spotlight-section .spot-meta-item+.spot-meta-item::before,
#spotlight-section .spot-meta-item+.hero-meta-rating::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: var(--s-3);
    border-radius: 50%;
    background: var(--text-3);
    vertical-align: middle;
}

#spotlight-section .spotlight-overview {
    margin: 0;
    max-width: 56ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#spotlight-section .spotlight-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-2);
}

.spot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    height: 48px;
    padding: 0 var(--s-5) 0 var(--s-4);
    border: 0;
    border-radius: var(--r-pill);
    font-family: 'futur', sans-serif;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--dur) var(--ease-out), background-color var(--dur) ease, filter var(--dur) ease, box-shadow var(--dur) ease;
}

.spot-btn .material-symbols-outlined {
    font-size: 24px;
}

.spot-btn:active {
    transform: scale(0.97);
}

.spot-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.spot-btn--primary {
    background: var(--spot-accent);
    color: var(--spot-ink);
    box-shadow: 0 12px 36px -12px color-mix(in srgb, var(--spot-accent) 75%, transparent);
}

.spot-btn--primary .material-symbols-outlined {
    color: var(--spot-ink);
}

.spot-btn--primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.spot-btn--ghost {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.spot-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.2);
}

.spot-btn--ghost:disabled {
    opacity: 0.6;
    cursor: progress;
}

.spotlight-spin:not(:disabled):hover .material-symbols-outlined {
    transform: rotate(-20deg);
}

.spotlight-spin .material-symbols-outlined {
    transition: transform 0.3s var(--ease-out);
}

/* Loading / swapping */
#spotlight-section .spotlight-backdrop,
#spotlight-section .spotlight-copy>* {
    transition: opacity 0.35s ease;
}

#spotlight-section .is-swapping .spotlight-backdrop,
#spotlight-section .is-swapping .spotlight-copy>*:not(.spotlight-actions) {
    opacity: 0;
}

#spotlight-section .is-loading .spotlight-media {
    background: linear-gradient(90deg, var(--surface-1) 25%, var(--surface-2) 50%, var(--surface-1) 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

#spotlight-section .is-loading .spotlight-backdrop {
    visibility: hidden;
}

@media (min-width: 900px) {
    #spotlight-section .spotlight-card {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        min-height: clamp(380px, 34vw, 520px);
    }

    /* Backdrop fills the right side and fades into the colour wash */
    #spotlight-section .spotlight-media {
        position: absolute;
        inset: 0 0 0 32%;
        aspect-ratio: auto;
    }

    #spotlight-section .spotlight-backdrop {
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 22%, #000 48%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 22%, #000 48%);
    }

    #spotlight-section .spotlight-copy {
        grid-column: 1;
        justify-content: center;
        gap: var(--s-4);
        margin: 0;
        padding: var(--s-7);
    }

    #spotlight-section .spotlight-logo {
        max-width: min(380px, 100%);
        max-height: 140px;
    }
}

/* ---------- Personalised rows -------------------------------------------- */

#hide-when-search #personalized-recommendations,
#hide-when-search #another-personalized-recommendations {
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);
    margin: 0 !important;
}

#hide-when-search .recommendation-header {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    min-height: 44px;
    margin: 0 !important;
    padding: 0 var(--gutter) !important;
}

#hide-when-search .recommendation-header p {
    font-size: 14px;
    color: var(--text-3);
    margin: 0;
}

#hide-when-search .recommendation-header .liked-item-title {
    font-size: 24px !important;
    font-weight: 400 !important;
    text-shadow: none;
    color: var(--text);
}

#hide-when-search .recommendation-header .liked-item-logo {
    max-height: 32px;
    align-self: center;
}

@media (min-width: 1024px) {
    #hide-when-search .recommendation-header .liked-item-title {
        font-size: 32px !important;
    }
}

/* ---------- Collections --------------------------------------------------- */

/* Banners aren't rendered by renderCards, so the track never gets .rail-loaded
   and keeps its reserved poster height; stretched banners would fill it. */
#hide-when-search #collection-banners {
    min-height: 0 !important;
    align-items: flex-start;
}

#collection-banners .collection-banner {
    position: relative;
    width: var(--wide-w) !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    scroll-snap-align: start;
    box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.7) !important;
    transition: transform 240ms var(--ease-out), box-shadow 240ms ease !important;
}

#collection-banners .collection-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

@media (hover: hover) and (min-width: 769px) {
    #collection-banners .collection-banner:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.85) !important;
    }
}

#collection-banners .collection-banner-overlay {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto !important;
    box-sizing: border-box;
    padding: var(--s-6) var(--s-4) var(--s-4) !important;
    background: linear-gradient(0deg, rgba(var(--bg-rgb), 0.95) 0%, rgba(var(--bg-rgb), 0.6) 55%, rgba(var(--bg-rgb), 0) 100%) !important;
}

#collection-banners .collection-title {
    font-size: 16px !important;
    font-weight: 400 !important;
    margin: 0 0 var(--s-1) !important;
    text-shadow: none !important;
}

#collection-banners .collection-overview {
    font-size: 12px !important;
    line-height: 1.5;
    color: var(--text-2) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: none !important;
    margin: 0 0 var(--s-2) !important;
}

#collection-banners .collection-meta {
    gap: var(--s-1);
    font-size: 12px;
    color: var(--text-2);
}

/* ---------- Brand tiles --------------------------------------------------- */

#brand-section {
    padding: 0 var(--gutter) !important;
    margin: 0 !important;
}

#brand-container {
    gap: var(--card-gap) !important;
}

#brand-section .brand-card {
    border-radius: var(--r-lg) !important;
    box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.7) !important;
    transition: transform 240ms var(--ease-out), box-shadow 240ms ease !important;
}

#brand-section .brand-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    pointer-events: none;
    transition: box-shadow 240ms ease;
}

@media (hover: hover) and (min-width: 769px) {
    #brand-section .brand-card:hover {
        transform: translateY(-4px) !important;
        box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.85) !important;
    }

    #brand-section .brand-card:hover::after {
        box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
    }
}

#brand-section .brand-text {
    font-family: 'futur', sans-serif !important;
    font-size: 16px !important;
    letter-spacing: 0.16em !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
}

@media (min-width: 1024px) {
    #brand-section .brand-text {
        font-size: 20px !important;
    }
}

@media (max-width: 768px) {
    #brand-section {
        padding: 0 !important;
    }

    #brand-container {
        padding: 0 var(--gutter) !important;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;
    }

    #brand-container::-webkit-scrollbar {
        display: none;
    }

    #brand-section .brand-card {
        min-width: 0 !important;
        width: 168px;
        padding-top: 0 !important;
        aspect-ratio: 16 / 9;
    }
}

/* ---------- Studios ------------------------------------------------------- */

.rail-group-head--logos {
    padding: 0 var(--gutter) !important;
}

.rail-tabs--logos {
    gap: var(--s-2) !important;
    padding: var(--s-1) 0 !important;
}

.rail-tab--logos {
    height: 56px;
    padding: 0 var(--s-4) !important;
    border-radius: var(--r-md) !important;
    background: var(--surface-1) !important;
    border: 1px solid var(--hairline) !important;
}

.rail-tab--logos:hover {
    background: var(--surface-2) !important;
    transform: none !important;
}

.rail-tab--logos.is-active {
    background: var(--surface-2) !important;
    border-color: var(--hairline-strong) !important;
}

.rail-tab-logo {
    height: 32px !important;
}

/* Studio colour becomes a soft wash behind the row instead of a hard glow box */
.studio-rail {
    box-shadow: none !important;
    border-radius: 0 !important;
    background: radial-gradient(70% 90% at 50% 50%, var(--studio-glow), transparent 75%);
    transition: background 0.45s ease !important;
}

@media (max-width: 767px) {
    .rail-tab--logos {
        height: 48px;
        padding: 0 var(--s-3) !important;
    }

    .rail-tab-logo {
        height: 26px !important;
    }
}

/* ---------- View all (collection / brand modals, studio row) -------------- */

.modal-view-all {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    height: 44px;
    margin-top: var(--s-4);
    padding: 0 var(--s-4) 0 var(--s-5);
    border-radius: var(--r-pill);
    background: #fff;
    color: #0b0a10;
    font-family: 'futur', sans-serif;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 10px 30px -12px rgba(59, 130, 246, 0.8);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease;
}

.modal-view-all .material-symbols-outlined {
    font-size: 20px;
    transition: transform var(--dur) var(--ease-out);
}

.modal-view-all:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 36px -12px rgba(18, 214, 197, 0.9);
}

.modal-view-all:hover .material-symbols-outlined {
    transform: translateX(3px);
}

.modal-view-all:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Studio row: the link sits at the end of the logo strip */
.rail-group-head--logos .rail-view-all {
    flex: 0 0 auto;
    margin-left: auto !important;
}

.rail-view-all[hidden] {
    display: none !important;
}

/* ---------- Mobile bottom nav clearance ------------------------------------ */

@media (max-width: 768px) {
    footer.site-outro {
        padding-bottom: calc(var(--nav-height, 60px) + var(--safe-area-bottom, 20px) + var(--s-4)) !important;
    }
}

/* ---------- Motion -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .aurora-ambient i,
    #spotlight-section .is-loading .spotlight-media {
        animation: none !important;
    }

    :root,
    #hide-when-search .home-row,
    #hide-when-search .rail-group,
    #spotlight-section .spotlight-card {
        transition: none !important;
    }

    #hide-when-search .movie-card,
    #trending-movies-container .movie-card,
    #collection-banners .collection-banner,
    #brand-section .brand-card,
    #main-movie-slider .button-container2 .main-button {
        transition: none !important;
    }

    #hide-when-search .movie-card:hover,
    #trending-movies-container .movie-card:hover,
    #collection-banners .collection-banner:hover,
    #brand-section .brand-card:hover {
        transform: none !important;
    }
}