/* =========================================================
   MediaCenter - Impaginazione generale
   ---------------------------------------------------------
   1. finestra di dettaglio a tutto schermo (film e serie)
   2. trama richiudibile
   3. testi troncati in modo omogeneo su tutto il sito
   4. modalita' applicazione (installata / schermo intero)

   Caricato dopo style.css e prima di mobile.css.
   ========================================================= */


/* =========================================================
   1. FINESTRA DI DETTAGLIO A TUTTO SCHERMO
   ---------------------------------------------------------
   La classe la mette detail-layout.js, sia per i film sia per
   le serie.

   Impostazione: scorre TUTTA la finestra, con le linguette
   che restano agganciate in alto. Prima l'intestazione aveva
   un'altezza massima e solo il pannello sotto scorreva: con
   un titolo lungo o due tasti il contenuto usciva dal suo
   spazio e si sovrapponeva all'immagine.
   ========================================================= */

.modal-content.detail-fullscreen {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.detail-fullscreen .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* L'intestazione cresce quanto serve: niente altezza massima, cosi'
   il testo non sborda mai sopra l'immagine. */
.detail-fullscreen .detail-hero {
    min-height: min(46vh, 420px);
    max-height: none;
}

.detail-fullscreen .detail-hero-content {
    padding: 26px 34px 24px;
    max-width: 900px;
}

/* Le linguette restano raggiungibili mentre si scorre */
.detail-fullscreen .detail-tabs {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #111;
}

.detail-fullscreen .detail-tab-panel {
    overflow: visible;
    padding-bottom: 40px;
}

.detail-fullscreen .close {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 6;
}


/* =========================================================
   1b. TASTI RIPRODUCI / WATCHLIST
   Stanno in un contenitore proprio (lo crea injectSections):
   in riga sul PC, incolonnati sul telefono.
   ========================================================= */

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.detail-actions .play-btn {
    margin: 0;
}


/* =========================================================
   2. TRAMA RICHIUDIBILE
   ========================================================= */

.description.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.description-toggle {
    display: none;
    margin: -12px 0 18px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.description-toggle:hover {
    color: #fff;
}


/* =========================================================
   3. TESTI TRONCATI IN MODO OMOGENEO
   ---------------------------------------------------------
   Il problema: schede e riquadri sono dimensionati sul
   contenuto, quindi una descrizione lunga allargava la
   scheda, spostava la griglia e spingeva giu' il resto.
   Regola unica: ogni testo lungo si ferma a un numero fisso
   di righe, uguale in tutte le pagine.
   ========================================================= */

/* --- Titoli: al massimo due righe, mai troncati a meta' parola --- */

.media-title,
.detail-title-text,
.episode-title,
.channel-name,
#channel-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* --- Righe di servizio (anno, voto, genere): una riga sola --- */

.media-info,
.genre-row-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Descrizioni brevi dentro le schede: due righe --- */

.card p,
.channel-program,
.media-subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Live TV: il riquadro sotto al video non deve crescere ---
   Con un programma dalla descrizione lunga il riquadro si allungava
   e spingeva il video fuori dallo schermo. */

.channel-info {
    max-height: 30vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#channel-details {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Riquadri di testo lunghi nel dettaglio (cast, regista) --- */

.director {
    overflow-wrap: anywhere;
}


/* =========================================================
   4. TASTO SCHERMO INTERO
   ========================================================= */

.mc-fullscreen-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
    color: inherit;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease;
}

.mc-fullscreen-toggle:hover {
    background: rgba(255,255,255,0.14);
}

.mc-fullscreen-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Sulla navbar del PC basta l'icona: il testo lo dice il suggerimento */
@media (min-width: 901px) {

    .navbar-account > .mc-fullscreen-toggle .mc-fullscreen-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .navbar-account > .mc-fullscreen-toggle {
        padding: 8px 12px;
    }
}

/* Nel menu a scomparsa del telefono diventa una voce a tutta larghezza */
@media (max-width: 900px) {

    .mc-drawer .mc-fullscreen-toggle {
        width: 100%;
        justify-content: flex-start;
        padding: 12px 16px;
        border-radius: 12px;
        font-size: 16px;
    }
}


/* =========================================================
   4b. SCHEDA DI DETTAGLIO SUL TELEFONO
   ---------------------------------------------------------
   Sullo schermo stretto il testo sopra l'immagine non ci sta:
   titolo, dati e due tasti coprivano la locandina e finivano
   uno sull'altro. Qui l'immagine sta sopra per intero e il
   testo scorre sotto, come nelle app di streaming.
   ========================================================= */

@media (max-width: 900px) {

    .detail-fullscreen .detail-hero {
        display: block;
        min-height: 0;
    }

    /* L'immagine smette di fare da sfondo e diventa un blocco 16:9 */
    .detail-fullscreen .detail-backdrop {
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    /* La sfumatura resta solo sul fondo dell'immagine, per legarla al testo */
    .detail-fullscreen .detail-hero-gradient {
        inset: 0 0 auto 0;
        height: 56.25vw;   /* = altezza di un 16:9 a tutta larghezza */
        background: linear-gradient(to top,
            #111 0%,
            rgba(17,17,17,0.55) 34%,
            rgba(17,17,17,0) 72%);
    }

    .detail-fullscreen .detail-hero-content {
        position: relative;
        z-index: 2;
        margin-top: -30px;   /* il titolo appoggia sul bordo dell'immagine */
        padding: 0 16px 20px;
        max-width: 100%;
    }

    .detail-fullscreen .detail-logo {
        max-width: 62%;
    }

    /* Tasti incolonnati e a tutta larghezza: nessuna sovrapposizione */
    .detail-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
    }

    .detail-actions .play-btn {
        width: 100%;
    }

    .detail-fullscreen .close {
        top: 10px;
        right: 10px;
    }
}


/* =========================================================
   5. MODALITA' APPLICAZIONE
   Attiva quando il sito e' aperto come app installata
   (la classe la mette app.js).
   ========================================================= */

body.is-standalone {
    /* Niente selezione accidentale del testo con il dito o il telecomando */
    -webkit-user-select: none;
    user-select: none;
    /* Niente rimbalzo elastico ai bordi: fa sembrare una pagina web */
    overscroll-behavior: none;
}

/* I campi di testo restano selezionabili, ovviamente */
body.is-standalone input,
body.is-standalone textarea {
    -webkit-user-select: text;
    user-select: text;
}

/* Da installata non c'e' barra del browser: rispettiamo il notch */
body.is-standalone .navbar {
    padding-top: max(0px, env(safe-area-inset-top));
}

body.is-standalone .footer {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

/* Da app il tasto schermo intero non serve quasi mai: resta, ma discreto */
body.is-standalone .mc-fullscreen-toggle {
    opacity: .7;
}


/* =========================================================
   6. USO DA DIVANO (TV e telecomando)
   Il fuoco deve essere sempre ben visibile: su uno schermo
   lontano un contorno sottile non si vede.
   ========================================================= */

.media-item:focus-visible,
.card:focus-visible,
.channel-card:focus-visible,
.nav-item:focus-visible,
.filter-btn:focus-visible,
.play-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}


/* =========================================================
   7. SUGGERIMENTO DI INSTALLAZIONE (solo Safari su iPhone)
   Compare una volta sola e si chiude con la X.
   ========================================================= */

.mc-install-hint {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 1500;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px 14px 16px;
    border-radius: 16px;
    background: rgba(20,20,20,.97);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 16px 40px rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
    color: #fff;
}

.mc-install-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    font-size: 13px;
    line-height: 1.45;
}

.mc-install-text strong {
    font-size: 14px;
}

.mc-install-text span {
    color: rgba(255,255,255,.7);
}

.mc-install-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.mc-install-close:hover {
    background: rgba(255,255,255,.18);
}


/* =========================================================
   8. SCHEDE DELLE RIGHE PER GENERE
   ---------------------------------------------------------
   La scheda e' un'immagine 16:9 con titolo, tipo e voto
   sovrapposti. Sul PC funziona; sul telefono la stessa
   immagine e' alta un centinaio di pixel e tre righe di
   testo sopra non ci stanno: il titolo finiva illeggibile.

   Sul telefono quindi le schede diventano piu' grandi e il
   titolo passa SOTTO l'immagine, come testo vero.
   ========================================================= */

.row-card {
    flex: 0 0 auto;
    cursor: pointer;
    /* Stessa misura delle schede in "Sfoglia tutti" (griglia da 320px):
       prima le righe le facevano a 260px e passando da una vista
       all'altra cambiavano taglia sotto gli occhi. */
    width: 320px;
}

/* La didascalia ora c'e' sempre, anche su schermo grande: lo stile
   sta in fondo al file, nella sezione "corredo delle schede". */

.row-card:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    border-radius: 16px;
}


@media (max-width: 900px) {

    /* Schede piu' grandi: se ne vedono una e mezza, che e' anche l'invito
       naturale a scorrere di lato. */
    .row-card {
        width: min(64vw, 300px);
    }

    .row-card-caption {
        padding: 8px 2px 0;
    }

    .row-card-title {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        color: #fff;
        /* Al massimo due righe: le righe restano tutte della stessa altezza */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .row-card-meta {
        font-size: 12px;
        color: rgba(255,255,255,0.55);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Le schede di una riga partono tutte dall'alto, anche con titoli
       di lunghezza diversa. */
    .genre-row-scroll {
        align-items: flex-start;
    }
}


@media (max-width: 600px) {

    .row-card {
        width: min(70vw, 280px);
    }

    .row-card-title {
        font-size: 14px;
    }
}


/* =========================================================
   9. TESTO SOPRA LE LOCANDINE SU SCHERMO TOUCH
   ---------------------------------------------------------
   Sul PC il testo compare al passaggio del mouse; senza mouse
   non comparirebbe mai, quindi su touch resta sempre visibile
   (mobile.css).

   Ma la sfumatura scura era stesa sull'INTERA scheda: da
   rgba(0,0,0,0.95) in basso a 0.1 in alto. Su uno schermo
   grande si nota poco; su una scheda da telefono e' un velo
   nero che copre la locandina — ed e' il motivo per cui le
   immagini non si vedevano in watchlist, in "Continua a
   guardare" e nelle griglie.

   Qui l'overlay smette di coprire tutta la scheda: si appoggia
   in basso e la sfumatura sale solo quanto basta a rendere
   leggibile il testo. Sopra, l'immagine resta pulita.
   ========================================================= */

@media (hover: none) {

    .media-overlay {
        /* Agganciato al fondo invece che steso su tutta la scheda */
        inset: auto 0 0 0;
        padding: 30px 12px 11px;
        background: linear-gradient(to top,
            rgba(0,0,0,0.93) 0%,
            rgba(0,0,0,0.78) 40%,
            rgba(0,0,0,0.35) 72%,
            rgba(0,0,0,0) 100%);
    }

    /* Testo proporzionato alla scheda: prima era tarato sul PC e su
       una scheda piccola occupava tutta l'altezza disponibile. */
    .media-overlay .media-title {
        font-size: 15px;
        margin-bottom: 2px;
    }

    .media-overlay .media-info {
        font-size: 12px;
    }

    /* Il voto e' la terza riga: sulla scheda piccola e' quella che fa
       traboccare il blocco, e l'informazione c'e' comunque nel dettaglio. */
    .media-overlay .media-info + .media-info {
        display: none;
    }
}


/* =========================================================
   10. MODALITA' APPLICAZIONE SU PC
   Pulsante di installazione e tasto indietro.
   ========================================================= */

.mc-install-app {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: #e50914;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease;
}

.mc-install-app:hover {
    background: #ff1220;
}

.mc-install-app:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* In finestra applicazione non c'e' piu' niente da installare */
body.is-standalone .mc-install-app {
    display: none;
}

/* Tasto indietro: compare solo in finestra applicazione, dove manca
   quello del browser. */
.mc-back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 4px;
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
}

body.is-standalone .mc-back {
    display: inline-flex;
}

.mc-back:hover {
    background: rgba(255,255,255,0.16);
}

.mc-back:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Nel menu a scomparsa del telefono il tasto installa sta a tutta riga */
@media (max-width: 900px) {

    .mc-drawer .mc-install-app {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
        border-radius: 12px;
        font-size: 16px;
    }
}


/* =========================================================
   11. AVVISO DI UN PROGRAMMA CHE INIZIA
   Lo crea tv-reminders.js. Fuori da ogni pannello, cosi'
   resta a video anche a schermo intero.
   ========================================================= */

.mc-tv-alert {
    position: fixed;
    right: 24px;
    top: 24px;
    top: calc(24px + env(safe-area-inset-top));
    z-index: 99998;
    width: min(340px, calc(100vw - 32px));
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(18,18,18,.97);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 20px 50px rgba(0,0,0,.6);
    backdrop-filter: blur(10px);
    color: #fff;
    animation: mc-tv-alert-in .28s ease;
}

@keyframes mc-tv-alert-in {
    from { transform: translateX(24px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.mc-tv-alert-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.mc-tv-alert-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #e0a92a;
}

.mc-tv-alert-close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.mc-tv-alert-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 4px;
}

.mc-tv-alert-meta {
    font-size: 13px;
    color: rgba(255,255,255,.6);
    margin-bottom: 14px;
}

.mc-tv-alert-actions {
    display: flex;
    gap: 8px;
}

.mc-tv-alert-go,
.mc-tv-alert-later {
    flex: 1;
    min-height: 40px;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.mc-tv-alert-go {
    background: #e50914;
    color: #fff;
}

.mc-tv-alert-go:hover {
    background: #ff1220;
}

.mc-tv-alert-later {
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.8);
}

@media (prefers-reduced-motion: reduce) {
    .mc-tv-alert { animation: none; }
}


/* =========================================================
   12. RIMOZIONE DELLE SCHEDE
   X sulle schede di Watchlist e "Continua a guardare",
   con messaggio di annullamento.
   ========================================================= */

.mc-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,0.62);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(4px);
    /* Sul PC compare al passaggio del mouse: sulle schede a riposo
       sarebbe solo un elemento in piu' da guardare. */
    opacity: 0;
    transition: opacity .18s ease, background .18s ease;
}

/*
 * Da quando watchlist e "continua a guardare" avvolgono la scheda in un
 * .row-card per avere la didascalia sotto, CardRemover aggancia la X al
 * contenitore e non piu' a .media-item. Con il solo selettore
 * .media-item:hover la X restava invisibile per sempre: c'era, ma
 * nessuna regola la accendeva.
 *
 * Compare anche quando il fuoco e' dentro la scheda, cosi' e'
 * raggiungibile col telecomando e da tastiera.
 */
.media-item:hover .mc-remove,
.row-card:hover .mc-remove,
.row-card:focus-within .mc-remove,
.media-item:focus-within .mc-remove,
.mc-remove:focus-visible {
    opacity: 1;
}

.mc-remove:hover {
    background: #e50914;
}

.mc-remove:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Senza mouse non c'e' il passaggio: la X resta sempre visibile */
@media (hover: none) {

    .mc-remove {
        opacity: 1;
        width: 36px;
        height: 36px;
    }
}

/* La scheda se ne va con un movimento, non sparisce di colpo */
/* Anche .row-card: da quando le schede di watchlist e "continua a
   guardare" hanno la didascalia sotto, CardRemover mette la classe sul
   contenitore e non piu' sull'immagine. Senza questo selettore la
   scheda spariva di scatto, senza dissolvenza. */
.media-item.is-removing,
.row-card.is-removing {
    opacity: 0;
    transform: scale(.92);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}


/* ---------- Messaggio con Annulla ---------- */

.mc-undo {
    position: fixed;
    left: 50%;
    bottom: 28px;
    bottom: calc(28px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: calc(100vw - 32px);
    padding: 13px 16px 13px 20px;
    border-radius: 12px;
    background: rgba(28,28,28,.97);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 14px 40px rgba(0,0,0,.6);
    color: #fff;
    animation: mc-undo-in .22s ease;
}

@keyframes mc-undo-in {
    from { transform: translate(-50%, 16px); opacity: 0; }
    to   { transform: translate(-50%, 0);    opacity: 1; }
}

.mc-undo-text {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-undo-btn {
    flex: 0 0 auto;
    padding: 7px 16px;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.14);
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.mc-undo-btn:hover {
    background: rgba(255,255,255,.26);
}

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

    .mc-undo,
    .media-item.is-removing,
    .row-card.is-removing {
        animation: none;
        transition: none;
    }
}


/* =========================================================
   13. AVVISO "clicca per lo schermo intero"
   Solo da applicazione installata, quando la scelta di
   stare a schermo intero va riapplicata dopo l'apertura.
   ========================================================= */

.mc-fs-hint {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 99997;
    padding: 11px 20px;
    border-radius: 999px;
    background: rgba(18,18,18,.92);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.85);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    backdrop-filter: blur(8px);
    /* Non deve intercettare il click: e' proprio quel click a servire */
    pointer-events: none;
    animation: mc-fs-hint-pulse 1.9s ease-in-out infinite;
}

@keyframes mc-fs-hint-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    .mc-fs-hint { animation: none; }
}


/* =========================================================
   15. "SFOGLIA TUTTI" E VISTA DI UN GENERE
   ========================================================= */

.genre-row-title {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

/* Compare al passaggio sulla riga: a riposo l'intestazione resta pulita */
.row-browse {
    font-size: 15px;
    font-weight: 600;
    color: #4fa3ff;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .18s ease, transform .18s ease;
}

.genre-row:hover .row-browse,
.row-browse:focus-visible {
    opacity: 1;
    transform: translateX(0);
}

.row-browse:hover {
    text-decoration: underline;
}

/* Senza mouse non c'e' passaggio: il link deve vedersi sempre */
@media (hover: none) {

    .row-browse {
        opacity: 1;
        transform: none;
        font-size: 14px;
    }
}

.browse-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.browse-back {
    text-decoration: none;
    display: inline-block;
}

.browse-count {
    font-size: 14px;
    color: rgba(255,255,255,.5);
}


/* Rimozione dall'anteprima: c'e' solo dove la scheda ha la sua X
   (Watchlist e "Continua a guardare"), che l'anteprima coprirebbe. */
/* Con la X presente, il tasto dettagli perde la spinta a destra:
   ce l'ha gia' lei. */
/* =========================================================
   16. MISURA UNICA DELLE SCHEDE
   ---------------------------------------------------------
   Le griglie usavano minmax(320px, 1fr): le colonne si
   allargavano per riempire la riga, quindi le schede erano
   piu' grandi su uno schermo largo e diverse da pagina a
   pagina. Qui la colonna vale 320px e basta — la stessa
   larghezza delle schede nelle righe — e lo spazio che avanza
   resta a destra invece di gonfiare le schede.
   ========================================================= */

@media (min-width: 901px) {

    .media-grid,
    .featured-grid {
        grid-template-columns: repeat(auto-fill, 320px);
        justify-content: start;
        gap: 18px;
    }
}


/* Sentinella in fondo alla vista "Sfoglia tutti": e' anche il posto
   dove compaiono "Caricamento…" e l'eventuale errore. */
.browse-more {
    min-height: 40px;
    padding: 18px 0 40px;
    text-align: center;
    font-size: 14px;
    color: rgba(255,255,255,.5);
}


/* Avanzamento nell'anteprima: barra e tempo che manca. Compare solo
   sui titoli davvero iniziati. */

/* =========================================================
   CORREDO DELLE SCHEDE
   ---------------------------------------------------------
   Didascalia sempre visibile, tasti al passaggio del mouse,
   barra di avanzamento. Sostituisce l'anteprima flottante.
   ========================================================= */

/* ---------------------------------------------------------
   1. IL TITOLO NON SI NASCONDE PIU'
   ---------------------------------------------------------
   Prima su schermo grande il titolo stava solo nella
   sovrimpressione, che compariva passandoci sopra: per
   leggere una riga bisognava strisciare il mouse su ogni
   scheda. Sul telefono la didascalia c'era gia'; ora c'e'
   ovunque, e la sovrimpressione non serve piu'.
   --------------------------------------------------------- */

.row-card-caption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 2px 0;
}

.row-card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(255,255,255,.94);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row-card-meta {
    font-size: 12px;
    color: rgba(255,255,255,.5);
}

/* La sovrimpressione ripeteva il titolo: due volte la stessa cosa. */
.row-card .media-overlay {
    display: none;
}

/* ---------------------------------------------------------
   2. TASTI DENTRO LA SCHEDA
   ---------------------------------------------------------
   Compaiono in dissolvenza sopra l'immagine. La scheda NON
   cambia dimensione: era il doppio movimento della vecchia
   anteprima a dare fastidio, non l'anteprima in se'.
   --------------------------------------------------------- */

.card-actions {
    position: absolute;
    left: 10px;
    /* Sopra la barra di avanzamento, che e' alta 4px e sta sul fondo. */
    bottom: 14px;
    display: flex;
    gap: 8px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}

.media-item:hover .card-actions,
.row-card:focus-within .card-actions,
.media-item:focus-within .card-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.card-act {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    background: rgba(18,18,18,.82);
    backdrop-filter: blur(6px);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}

.card-act:hover {
    background: rgba(255,255,255,.9);
    color: #111;
}

.card-act:active {
    transform: scale(.9);
}

.card-act-play {
    background: #fff;
    border-color: transparent;
    color: #111;
    /* Il triangolo pieno pende otticamente a sinistra */
    padding-left: 2px;
}

.card-act.is-on {
    background: #fff;
    border-color: transparent;
    color: #111;
}

.card-act:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Senza mouse i tasti non hanno modo di comparire: si tengono
   visibili, altrimenti su un touchscreen sarebbero irraggiungibili. */
@media (hover: none) {

    .card-actions {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        left: 8px;
        bottom: 8px;
        gap: 6px;
    }

    .card-act {
        width: 34px;
        height: 34px;
    }
}

/* ---------------------------------------------------------
   3. BARRA DI AVANZAMENTO
   ---------------------------------------------------------
   Dice a colpo d'occhio dove sei rimasto, senza aprire
   niente. Sta in basso, appoggiata al bordo dell'immagine.
   --------------------------------------------------------- */

.card-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(0,0,0,.55);
}

.card-progress-fill {
    height: 100%;
    background: #e50914;
}

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

    .card-actions {
        transition: none;
        transform: none;
    }
}


/* =========================================================
   SCHEDA CON DIDASCALIA DENTRO UNA GRIGLIA
   ---------------------------------------------------------
   .row-card nasce per le righe che scorrono di lato, dove ha
   una larghezza fissa di 320px. Nelle griglie (watchlist,
   continua a guardare) la larghezza la decide la colonna, e
   imporne una fissa manderebbe fuori misura l'ultima di ogni
   riga.
   ========================================================= */

.row-card--grid {
    width: auto;
}

/* Il tasto di rimozione (.mc-remove) e' figlio della scheda ed e' in
   posizione assoluta: senza questo si aggancerebbe a un antenato
   qualsiasi e finirebbe in un angolo della pagina. */
.row-card {
    position: relative;
}

/* ---------------------------------------------------------
   LA X E' SEMPRE VISIBILE SU QUESTE SCHEDE
   ---------------------------------------------------------
   Su watchlist e "continua a guardare" ogni scheda si puo'
   togliere: la X non e' un dettaglio che spunta al passaggio,
   e' l'azione principale della pagina.

   Tenerla legata al passaggio del mouse la rendeva difficile
   da colpire: compariva avvicinandosi, poi muovendo il
   puntatore verso di lei cambiava lo stato della scheda —
   comparivano i tasti sull'immagine — e la X spariva prima di
   poterci arrivare. Un bersaglio che scappa non e' un
   bersaglio.

   Sempre visibile, in un angolo tutto suo (in alto a destra,
   mentre i tasti stanno in basso a sinistra), non c'e' niente
   che possa togliergliela di sotto.
   --------------------------------------------------------- */

.row-card--grid .mc-remove {
    /*
     * NELLA DIDASCALIA, NON SULL'IMMAGINE.
     *
     * Stava in alto a destra, sopra la copertina. Li' spariva appena
     * il mouse ci si avvicinava: nessuna regola la nasconde — l'ho
     * verificato — quindi era coperta da qualcosa che compare
     * passando sull'immagine. Inseguire quel qualcosa avrebbe
     * risolto un caso; spostarla risolve la categoria.
     *
     * La didascalia sotto e' l'unico punto della scheda dove non
     * compare mai niente: nessuna sovrimpressione, nessun tasto,
     * nessuna barra. Ed e' anche piu' logico, accanto al titolo che
     * si sta togliendo.
     */
    top: auto;
    bottom: 6px;
    right: 4px;
    opacity: 1;
}

/* Spazio riservato: senza, i titoli lunghi finiscono sotto la X. */
.row-card--grid .row-card-caption {
    padding-right: 42px;
    min-height: 44px;
}

/* Un po' piu' discreta a riposo, piena quando ci si avvicina:
   si vede sempre, ma non si impone. */
.row-card--grid .mc-remove {
    background: rgba(0,0,0,.5);
}

.row-card--grid:hover .mc-remove,
.row-card--grid .mc-remove:focus-visible {
    background: rgba(0,0,0,.75);
}

.row-card--grid .mc-remove:hover {
    background: #e50914;
}

/* ---------------------------------------------------------
   PASTIGLIA "QUANTO MANCA"
   ---------------------------------------------------------
   Stava dentro la sovrimpressione, che ora e' nascosta perche'
   il titolo si legge sotto. La pastiglia pero' ha senso solo
   sull'immagine, quindi si appoggia direttamente li'.
   --------------------------------------------------------- */

.cw-badge-slot {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 2;
}

/* Dentro la sovrimpressione la pastiglia poggiava su una sfumatura
   scura. Appoggiata all'immagine nuda serve piu' contrasto, o su una
   locandina chiara non si legge. */
.cw-badge-slot .cw-badge {
    margin-bottom: 0;
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(6px);
    color: #fff;
}

.cw-badge-slot .cw-badge--next {
    background: #e50914;
}

/* La barra della pagina "continua a guardare" era dentro la
   sovrimpressione: ora sta sul fondo dell'immagine, come quella
   delle altre schede. */
.row-card--grid .cw-track {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: rgba(0,0,0,.55);
    border-radius: 0;
}

.row-card--grid .cw-fill {
    height: 100%;
    background: #e50914;
}

/* Con la pastiglia in alto, i tasti restano in basso e non si
   sovrappongono a niente. */
.row-card--grid .card-actions {
    bottom: 14px;
}


/* =========================================================
   ILLUMINAZIONE PER IL TELECOMANDO
   ---------------------------------------------------------
   Con un telecomando l'unico riferimento e' l'elemento
   illuminato, e va visto da tre metri: non basta il filo di
   contorno che va bene col mouse a venti centimetri.

   Si usa :focus e non solo :focus-visible perche' il fuoco
   arriva da un dispositivo che il browser non sempre
   classifica come "tastiera".
   ========================================================= */

.row-card:focus,
.media-item[data-title-id]:focus,
.media-item[data-cw-title]:focus {
    outline: 3px solid #fff;
    outline-offset: 4px;
    border-radius: 18px;
    /* L'alone scurisce quello che c'e' sotto: il contorno bianco resta
       leggibile anche sopra una locandina chiara. */
    box-shadow: 0 0 0 7px rgba(0,0,0,.6), 0 0 26px rgba(255,255,255,.3);
    z-index: 3;
}

/* Sulla scheda illuminata i tasti si vedono anche senza mouse:
   e' l'unico modo di arrivarci col telecomando. */
.row-card:focus .card-actions,
.media-item:focus .card-actions,
.row-card:focus-within .card-actions {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Fuori dalla modalita' telecomando resta il contorno discreto di
   sempre, e solo per chi naviga da tastiera. */
@media (hover: hover) and (pointer: fine) {

    body:not(.mc-remote) .row-card:focus:not(:focus-visible),
    body:not(.mc-remote) .media-item[data-title-id]:focus:not(:focus-visible),
    body:not(.mc-remote) .media-item[data-cw-title]:focus:not(:focus-visible) {
        outline: none;
        box-shadow: none;
    }
}


/* =========================================================
   L'ILLUMINAZIONE NON DEVE ESSERE RITAGLIATA
   ---------------------------------------------------------
   .genre-row-scroll ha overflow-x: auto per scorrere di lato.
   Ma overflow-x non esiste da solo: il CSS porta overflow-y a
   "auto", quindi il contenitore ritaglia anche sopra e sotto.

   Il contorno del fuoco e' disegnato FUORI dalla scheda
   (outline-offset piu' alone), quindi finiva tagliato di netto
   in alto e in basso: e' quello che si vede nello screenshot.

   Non si puo' mettere overflow-y: visible — con overflow-x:
   auto il browser lo ignora. Si fa spazio con del padding
   verticale, ripreso da un margine negativo perche' le righe
   restino distanziate come prima.
   ========================================================= */

.genre-row-scroll {
    /* 4 di offset + 3 di contorno + 7 di alone, piu' un margine. */
    padding-top: 18px;
    padding-bottom: 18px;
    margin-top: -18px;
    margin-bottom: -14px;
}

/* Anche le griglie: qui non si ritaglia niente, ma il contorno della
   prima riga finirebbe sotto l'intestazione appiccicata sopra. */
.media-grid {
    padding-top: 6px;
}


/* =========================================================
   ILLUMINAZIONE PIU' DECISA
   ---------------------------------------------------------
   Da tre metri, con un telecomando in mano, un filo bianco di
   3px non basta a dire "sei qui". Contorno piu' spesso, alone
   piu' marcato e un ingrandimento appena percettibile: e' lo
   scarto di dimensione, piu' del colore, a farsi notare con
   la coda dell'occhio.

   Tutto questo vale solo in "modalita' telecomando" —
   body.mc-remote, che remote-nav.js accende alla prima freccia
   e spegne appena si muove il mouse. Col puntatore l'alone e
   l'attenuazione a ogni click sarebbero solo rumore.
   ========================================================= */

body.mc-remote .row-card:focus,
body.mc-remote .media-item[data-title-id]:focus,
body.mc-remote .media-item[data-cw-title]:focus {
    outline: 4px solid #fff;
    outline-offset: 4px;
    box-shadow: 0 0 0 8px rgba(0,0,0,.72), 0 0 30px rgba(255,255,255,.45);
    transform: scale(1.03);
    transition: transform .14s ease;
}

/*
 * Le schede accanto si attenuano: quella illuminata risalta senza
 * bisogno di gridare. Vale solo dentro la riga o la griglia in cui si
 * sta navigando, cosi' il resto della pagina non si spegne.
 */
body.mc-remote .genre-row-scroll:focus-within .row-card:not(:focus),
body.mc-remote .media-grid:focus-within .row-card:not(:focus),
body.mc-remote .media-grid:focus-within .media-item[data-title-id]:not(:focus) {
    opacity: .55;
    transition: opacity .14s ease;
}

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

    body.mc-remote .row-card:focus,
    body.mc-remote .media-item[data-title-id]:focus,
    body.mc-remote .media-item[data-cw-title]:focus {
        transform: none;
        transition: none;
    }
}


/* =========================================================
   TELEVISORE: L'ILLUMINAZIONE E' SEMPRE QUELLA DA LONTANO
   ---------------------------------------------------------
   body.mc-remote si accende alla prima freccia. Su un
   televisore non c'e' un "prima": non esiste altro modo di
   navigare, quindi l'illuminazione forte vale da subito.
   ========================================================= */

html.mc-tv .row-card:focus,
html.mc-tv .media-item[data-title-id]:focus,
html.mc-tv .media-item[data-cw-title]:focus {
    outline: 4px solid #fff;
    outline-offset: 4px;
    box-shadow: 0 0 0 8px rgba(0,0,0,.72), 0 0 30px rgba(255,255,255,.45);
    transform: scale(1.03);
}

html.mc-tv .genre-row-scroll:focus-within .row-card:not(:focus),
html.mc-tv .media-grid:focus-within .row-card:not(:focus),
html.mc-tv .media-grid:focus-within .media-item[data-title-id]:not(:focus) {
    opacity: .55;
}

/* Sul televisore la X non e' un ripensamento: e' l'azione della
   pagina, e deve vedersi senza avvicinarcisi. */
html.mc-tv .mc-remove {
    opacity: 1;
}


/* =========================================================
   LA BARRA DI NAVIGAZIONE NON DEVE SBORDARE
   ---------------------------------------------------------
   .navbar-content e' una griglia "auto 1fr auto": logo, voci,
   area utente. Le colonne "auto" prendono la larghezza del
   loro contenuto e NON si restringono, quindi quando la somma
   supera lo schermo la barra sborda a destra — le ultime voci
   finiscono fuori e non c'e' modo di raggiungerle.

   Si vede su un televisore, dove la larghezza utile e' minore
   di quella di un monitor, ma e' un difetto che c'e' sempre:
   basta una finestra stretta.

   minmax(0, 1fr) e min-width: 0 tolgono il divieto di
   restringersi, e a quel punto il flex-wrap gia' presente su
   .nav-menu puo' finalmente mandare le voci a capo.
   ========================================================= */

.navbar-content {
    grid-template-columns: auto minmax(0, 1fr) auto;
    max-width: 100%;
}

.nav-menu {
    min-width: 0;
}

.logo-container,
.navbar-account {
    min-width: 0;
}

/* Prima di andare a capo si prova a stringere: su uno schermo largo
   una barra su due righe sarebbe uno spreco di spazio. */
@media (max-width: 1500px) {

    .nav-menu {
        gap: 1.2rem;
    }
}

@media (max-width: 1200px) {

    .nav-menu {
        gap: .9rem;
        font-size: 15px;
    }

    .navbar {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
}

/* =========================================================
   SUL TELEVISORE
   ---------------------------------------------------------
   Da tre metri le voci vanno lette a colpo d'occhio, non
   stipate. Meglio due righe leggibili che una riga sola con
   il testo minuscolo: tanto l'altezza reale della barra viene
   misurata da mobile-nav.js, quindi il contenuto scansa lo
   spazio giusto qualunque esso sia.
   ========================================================= */

html.mc-tv .nav-menu {
    gap: 1.1rem 1.6rem;
    font-size: 17px;
}

html.mc-tv .navbar {
    padding: .9rem 1.6rem;
}

/* Niente puo' sporgere lateralmente: su un televisore quello che esce
   dal bordo e' perso, non c'e' una barra di scorrimento da usare. */
html.mc-tv body,
html.mc-tv .navbar,
html.mc-tv .home-main,
html.mc-tv .media-main {
    max-width: 100%;
    overflow-x: hidden;
}