/* ==========================================================================
   MYmovies — Box Office
   Foglio di stile dedicato alla sezione. Convive con il design system del
   sito (mm-container, header, footer): tutte le classi sono prefissate .bo-
   ========================================================================== */

.bo {
    /* Palette: rosa MYmovies come accento, grigi neutri per il resto. */
    --bo-accent:       #ff0066;
    --bo-accent-dark:  #d1004f;
    --bo-accent-soft:  #fff0f5;
    --bo-ink:          #16181d;
    --bo-ink-soft:     #5b6270;
    --bo-ink-mute:     #98a2b3;
    --bo-line:         #e6e8ec;
    --bo-surface:      #ffffff;
    --bo-surface-alt:  #f7f8fa;
    --bo-radius:       12px;
    --bo-radius-sm:    8px;
    --bo-shadow:       0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.18);

    color: var(--bo-ink);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.bo *, .bo *::before, .bo *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
   Override degli stili globali del sito.

   Le regole del sito sono agganciate a un ID (#corpo p, #corpo a, ...), che ha
   specificità più alta di qualunque selettore a classi: senza !important
   vincerebbero comunque. È l'unico punto del foglio in cui viene usato, e solo
   su due proprietà (allineamento e colore).
   Se un domani quelle regole globali spariscono, questo blocco si può togliere.
   --------------------------------------------------------------------------- */

/* Il sito giustifica il testo: dentro colonne strette produce buchi fra le parole. */
.bo, .bo p, .bo li, .bo dd, .bo dt,
.bo h1, .bo h2, .bo h3, .bo div, .bo span {
    text-align: left !important;
}
.bo p, .bo h1, .bo h2, .bo h3, .bo .bo-film__titolo {
    overflow-wrap: break-word;
}

/* Il sito colora i link di blu: qui il colore lo decide il componente. */
.bo a, .bo a:link, .bo a:visited { color: inherit !important; text-decoration: none; }
.bo a:hover { text-decoration: underline; }

/* Testo bianco su fondo colorato: qui il blu del sito sarebbe illeggibile. */
.bo .bo-nav__link--active,
.bo .bo-archivio__link--attivo,
.bo .bo-hero__caption,
.bo .bo-hero__caption a { color: #fff !important; }

/* Link dentro l'articolo editoriale: restano riconoscibili come link. */
.bo .bo-commento__testo a { color: var(--bo-accent-dark) !important; text-decoration: underline; }

.bo .bo-film__titolo a:hover { color: var(--bo-accent-dark) !important; }
.bo :focus-visible {
    outline: 2px solid var(--bo-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --------------------------------------------------------------- testata */

.bo-testata { padding: 24px 0 8px; }

.bo-testata__h1 {
    margin: 0 0 6px;
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.02em;
}

.bo-testata__sommario {
    margin: 0 0 18px;
    max-width: 68ch;
    color: var(--bo-ink-soft);
    font-size: 16px;
}

/* -------------------------------------------------------- barra sezioni  */

.bo-nav { margin: 0 0 10px; }

.bo-nav__list {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0 0 4px;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.bo-nav__item { flex: 0 0 auto; }

.bo-nav__link {
    display: block;
    padding: 8px 14px;
    border: 1px solid var(--bo-line);
    border-radius: 999px;
    background: var(--bo-surface);
    color: var(--bo-ink-soft);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.bo-nav__link:hover {
    text-decoration: none;
    border-color: var(--bo-accent);
    color: var(--bo-accent);
    background: var(--bo-accent-soft);
}
.bo-nav__link--active {
    background: var(--bo-accent);
    border-color: var(--bo-accent);
    color: #fff;
}

.bo-nav__claim {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--bo-ink-soft);
}

/* ------------------------------------------------------------------ hero */

.bo-hero { margin: 20px 0 28px; }

/* Su mobile la riga copertina + inserzione è impilata: gli spazi pensati per
   l'affiancamento diventano un buco verticale fra la cover e il commento. */
@media (max-width: 719px) {
    .bo-hero { margin: 12px 0 16px; }
    .bo-hero__riga { gap: 12px; margin-bottom: 12px; }
    /* Senza inserzione non serve nemmeno quello. */
    .bo-hero__riga--solo-media { margin-bottom: 0; }
}

/* Copertina a sinistra, inserzione 300x250 a destra: è l'impaginazione della
   vecchia <table> nera della pagina ASP. */
.bo-hero__riga {
    display: grid;
    gap: 20px;
    margin: 0 0 20px;
}
@media (min-width: 1024px) {
    .bo-hero__riga {
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: start;
    }
}

/* Senza copertina resta solo l'inserzione: niente colonna vuota a sinistra. */
.bo-hero__riga--solo-adv { grid-template-columns: minmax(0, 1fr) !important; }
.bo-hero__riga--solo-adv .bo-hero__adv { justify-self: start !important; }

/* Adv spente ($adv_manzoni = false): la copertina prende tutta la larghezza
   invece di lasciare 300px vuoti alla sua destra. */
.bo-hero__riga--solo-media { grid-template-columns: minmax(0, 1fr) !important; }

.bo-hero__adv {
    width: 100%;
    max-width: 300px;
    justify-self: start;
}
@media (min-width: 1024px) {
    .bo-hero__adv { justify-self: end; }
}

.bo-hero__media {
    position: relative;
    margin: 0;
    border-radius: var(--bo-radius);
    overflow: hidden;
    background: #0d0f13;
    box-shadow: var(--bo-shadow);
}
.bo-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 8;
    object-fit: cover;
}

.bo-hero__caption {
    display: grid;
    gap: 6px;
    padding: 20px;
    color: #fff;
}
@media (min-width: 720px) {
    .bo-hero__caption {
        position: absolute;
        inset: auto 0 0 0;
        padding: 56px 24px 20px;
        background: linear-gradient(to top, rgba(6,8,12,.92) 20%, rgba(6,8,12,0));
    }
}

.bo-hero__badge {
    justify-self: start;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bo-accent);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.bo-hero__titolo { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; }
.bo-hero__testo  { font-size: 14px; color: rgba(255,255,255,.86); max-width: 75ch; }

/* Commento editoriale */
.bo-commento {
    padding: 22px 24px;
    border: 1px solid var(--bo-line);
    border-left: 4px solid var(--bo-accent);
    border-radius: var(--bo-radius);
    background: var(--bo-surface);
}
.bo-commento__titolo {
    margin: 0 0 10px;
    font-size: clamp(19px, 2.2vw, 25px);
    line-height: 1.25;
    font-weight: 700;
}
.bo-commento__testo { font-size: 16px; color: #303540; }
.bo-commento__testo:first-of-type > p:first-child { margin-top: 0; }
.bo-commento__testo p { margin: 0 0 .85em; }
.bo-commento__testo p:last-child { margin-bottom: 0; }

/* Seguito dell'articolo: <details> senza JavaScript. */
.bo-commento__altro { margin: 10px 0 0; }
.bo-commento__altro > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 6px 14px;
    border: 1px solid var(--bo-line);
    border-radius: 999px;
    background: var(--bo-surface);
    color: var(--bo-ink-soft);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .15s, border-color .15s, color .15s;
}
.bo-commento__altro > summary::-webkit-details-marker { display: none; }
.bo-commento__altro > summary::marker { content: ''; }
.bo-commento__altro > summary:hover {
    border-color: var(--bo-accent);
    background: var(--bo-accent-soft);
    color: var(--bo-accent-dark);
}
/* Freccia: ruota all'apertura. */
.bo-commento__altro > summary::after {
    content: '';
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s;
}
.bo-commento__altro[open] > summary::after { transform: translateY(1px) rotate(-135deg); }

/* Le due etichette: testo vero, non pseudo-elemento, così i lettori di schermo
   la annunciano. */
.bo-commento__apri-etichetta.is-aperto  { display: none; }
.bo-commento__altro[open] .is-chiuso    { display: none; }
.bo-commento__altro[open] .is-aperto    { display: inline; }

.bo-commento__altro .bo-commento__testo { margin-top: 14px; }

.bo-commento__link { margin: 14px 0 0; font-size: 14px; font-weight: 700; }
.bo-commento__link a { color: var(--bo-accent-dark) !important; }
.bo-commento__link a::after { content: ' →'; }


/* --------------------------------------------------------------- griglia */

/*
 * Due sole colonne: archivio e contenuto.
 * La pubblicità non sta più qui — affianca la copertina, come nella pagina ASP.
 * Così le classifiche hanno tutta la larghezza residua.
 */

.bo-griglia {
    display: grid;
    gap: 24px;
    align-items: start;
}

/* Mobile: prima le classifiche, l'archivio in fondo. */
@media (max-width: 899px) {
    .bo-griglia__classifiche { order: 1; }
    .bo-griglia__archivio    { order: 2; }
}

@media (min-width: 900px) {
    .bo-griglia {
        grid-template-columns: 200px minmax(0, 1fr);
        column-gap: 28px;
    }
    .bo-griglia__archivio { position: sticky; top: 12px; }
}

/* Due colonne affiancate solo quando ci sono davvero due classifiche (la home).
   Sulle pagine a classifica singola (Top 20, annuari) la regola non scatta e il
   blocco prende tutta la larghezza.

   La condizione è `:has()` e non una classe sulla pagina: così non c'è niente da
   ricordarsi di aggiungere nel markup, ed è impossibile ritrovarsi con una
   colonna vuota per una classe dimenticata. */
@media (min-width: 700px) and (max-width: 899px),
       (min-width: 1080px) {
    .bo-griglia__classifiche:has(.bo-classifica ~ .bo-classifica) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
        align-items: start;
    }
    /* Affiancate: ci pensa il gap, il margine tornerebbe di troppo. */
    .bo-griglia__classifiche:has(.bo-classifica ~ .bo-classifica) .bo-classifica + .bo-classifica {
        margin-top: 0;
    }
}

/* ------------------------------------------------------------ classifica */

/* Impilate (mobile e desktop stretto) le due schede si toccavano: il gap della
   griglia vale solo quando sono affiancate. */
.bo-classifica + .bo-classifica { margin-top: 28px; }

.bo-classifica {
    min-width: 0;
    padding: 2px 20px 8px;
    border: 1px solid var(--bo-line);
    border-radius: var(--bo-radius);
    background: var(--bo-surface);
}

.bo-classifica__titolo {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 10px 0;
    border-bottom: 2px solid var(--bo-ink);
    background: var(--bo-surface);
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.bo-classifica__flag { font-size: 18px; }

.bo-lista { margin: 0; padding: 0; list-style: none; }

.bo-film {
    display: grid;
    /* "auto" sulla locandina: se il film non ha immagine la colonna collassa a 0
       invece di lasciare un buco (nell'ASP restava un <td> vuoto). */
    grid-template-columns: 40px auto minmax(0, 1fr);
    grid-template-areas: "pos poster corpo";
    column-gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--bo-line);
}
.bo-film:last-child { border-bottom: 0; }

.bo-film__pos {
    grid-area: pos;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.05;
    color: var(--bo-ink-mute);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.bo-film--podio .bo-film__pos { color: var(--bo-accent); }

.bo-film__poster { grid-area: poster; }
.bo-film__poster img {
    display: block;
    width: 74px;
    height: auto;
    border-radius: var(--bo-radius-sm);
    background: var(--bo-surface-alt);
    box-shadow: 0 1px 3px rgba(16,24,40,.16);
}

.bo-film__corpo { grid-area: corpo; min-width: 0; }


.bo-film__titolo {
    margin: 0 0 2px;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
}
.bo-film__titolo a:hover { color: var(--bo-accent-dark); }

.bo-film__orig  { margin: 0 0 6px; font-size: 13px; font-style: italic; color: var(--bo-ink-soft); }
.bo-film__meta  { margin: 0 0 8px; font-size: 13px; color: var(--bo-ink-soft); }
.bo-film__uscita {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bo-accent-dark);
}

.bo-film__incassi {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 0 0 8px;
}
.bo-film__cifra {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.bo-film__cifra-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bo-ink-soft);
}
.bo-film__totale { font-size: 13px; color: var(--bo-ink-soft); }

/* ------------------------------------------- indicatore di successo (meter) */

/*
 * Un rapporto contro un limite: la forma giusta è un meter, non un grafico.
 * La fascia raggiunta è scritta a parole — il colore da solo non porta mai
 * l'informazione — e la barra dice dove si sta dentro quella fascia.
 * Una sola tinta, non un gradiente rosso→verde: la scala è ordinale, quindi
 * "più pieno = meglio" basta e resta leggibile a chiunque.
 */

.bo-indicatore { margin: 10px 0 0; max-width: 300px; }

.bo-meter {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--bo-accent-soft);
    overflow: hidden;
}
.bo-meter__fill {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    border-radius: 999px;
    background: var(--bo-accent);
}
/* Le tacche segnano i tre passaggi di fascia. Sono in colore superficie,
   così tagliano il riempimento invece di sovrapporsi. */
.bo-meter__tacca {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bo-surface);
}

/*
 * Le quattro parole sono i traguardi lungo la barra, non le etichette dei
 * tratti: "buono" sta al 25%, "ottimo" al 50%, "successo" al 75%, "record"
 * al 100% — esattamente dove cadono le tacche. Ogni parola è allineata a
 * destra dentro il proprio quarto, così finisce sopra la sua soglia.
 *
 * Con justify-content: space-between (come era prima) "buono" cadeva a inizio
 * barra e le altre slittavano: una barra ferma al 66% sembrava indicare
 * "successo" mentre il livello raggiunto era "ottimo".
 */
.bo-scala {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 4px 0 0;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bo-ink-mute);
}
.bo-scala span {
    text-align: right;
    justify-self: end;
}
/* La fascia raggiunta è l'unica etichetta rimasta: si distingue per peso
   e per il tratto sotto, non solo per colore. */
.bo-scala .is-attiva {
    color: var(--bo-accent-dark);
    font-weight: 800;
    border-bottom: 2px solid var(--bo-accent);
    padding-bottom: 1px;
}

/* Etichetta di stato accanto alla riga (es. "Prima settimana"). */
.bo-badge {
    display: inline-block;
    margin: 8px 0 0;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--bo-surface-alt);
    border: 1px solid var(--bo-line);
    color: var(--bo-ink-soft);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.5;
}

.bo-vuoto {
    padding: 24px;
    border: 1px dashed var(--bo-line);
    border-radius: var(--bo-radius);
    color: var(--bo-ink-soft);
    text-align: center;
}

/* Su schermi stretti la locandina resta, ma piccola: il numero di posizione si
   riduce e la scheda stringe i fianchi per recuperare la larghezza del testo. */
@media (max-width: 519px) {
    .bo-classifica { padding-left: 14px; padding-right: 14px; }

    .bo-film {
        grid-template-columns: 26px auto minmax(0, 1fr);
        column-gap: 9px;
    }
    .bo-film__pos          { font-size: 20px; }
    .bo-film__poster img   { width: 46px; }
    .bo-film__titolo       { font-size: 16px; }
    .bo-film__meta,
    .bo-film__orig         { font-size: 12.5px; }
    .bo-indicatore         { max-width: none; }

    /* Con la locandina in colonna le quattro parole si toccavano:
       "SUCCESSO" è la più lunga e decide la larghezza. */
    .bo-scala { font-size: 8.5px; letter-spacing: 0; }
}

/* --------------------------------------------------------------- archivio */

.bo-archivio {
    padding: 16px 16px 6px;
    border: 1px solid var(--bo-line);
    border-radius: var(--bo-radius);
    background: var(--bo-surface);
}
.bo-archivio__blocco { margin: 0 0 22px; }
.bo-archivio__blocco:last-child { margin-bottom: 12px; }

.bo-archivio__titolo {
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--bo-line);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.bo-archivio__anni { margin: 0; padding: 0; list-style: none; }
.bo-archivio__anno { margin: 0 0 2px; }
.bo-archivio__anno--attivo { margin-bottom: 10px; }

.bo-archivio__link {
    display: block;
    padding: 6px 8px;
    border-radius: var(--bo-radius-sm);
    font-size: 14px;
    color: var(--bo-ink-soft);
}
.bo-archivio__link:hover { text-decoration: none; background: var(--bo-surface-alt); color: var(--bo-ink); }
.bo-archivio__link--attivo {
    background: var(--bo-accent);
    color: #fff;
    font-weight: 700;
}

.bo-settimane {
    margin: 6px 0 10px;
    padding: 0 0 0 8px;
    border-left: 2px solid var(--bo-line);
    list-style: none;
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.bo-settimane__riga {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 13px;
}
.bo-settimane__riga:hover { background: var(--bo-surface-alt); }
.bo-settimane__riga--attiva { background: var(--bo-accent-soft); }
.bo-settimane__riga--attiva .bo-settimane__data { color: var(--bo-accent-dark); font-weight: 700; }

.bo-settimane__data     { font-variant-numeric: tabular-nums; font-weight: 600; }
.bo-settimane__commento { color: var(--bo-ink-soft); font-size: 12px; }
.bo-settimane__commento::before { content: "· "; }

/* -------------------------------------------------------------- stampa   */

@media print {
    .bo-nav, .bo-hero__adv, .bo-griglia__archivio, .bo-hero__media { display: none; }
    .bo-griglia { display: block; }
}

/* ------------------------------------------------ varianti di impaginazione */

/* Pagine con una sola classifica (Top 20, annuari): la lista si sdoppia
   internamente. Sostituisce il trucco COLONNA=1 / COLONNA=2 dell'ASP. */
@media (min-width: 1024px) {
    .bo-lista--doppia {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 28px;
    }
    .bo-lista--doppia .bo-film { border-bottom: 1px solid var(--bo-line); }
}

/* Colonne strette (due classifiche affiancate, o lista sdoppiata):
   numero e locandina si riducono per lasciare spazio al testo. */
@media (min-width: 1080px) {
    .bo-griglia__classifiche:has(.bo-classifica ~ .bo-classifica) .bo-film,
    .bo-lista--doppia .bo-film {
        grid-template-columns: 30px auto minmax(0, 1fr);
        column-gap: 10px;
    }
    .bo-griglia__classifiche:has(.bo-classifica ~ .bo-classifica) .bo-film__pos,
    .bo-lista--doppia .bo-film__pos { font-size: 22px; }

    .bo-griglia__classifiche:has(.bo-classifica ~ .bo-classifica) .bo-film__poster img,
    .bo-lista--doppia .bo-film__poster img { width: 62px; }

    .bo-griglia__classifiche:has(.bo-classifica ~ .bo-classifica) .bo-film__titolo,
    .bo-lista--doppia .bo-film__titolo { font-size: 16px; }

    .bo-griglia__classifiche:has(.bo-classifica ~ .bo-classifica) .bo-film__cifra,
    .bo-lista--doppia .bo-film__cifra { font-size: 17px; }

    /* Le quattro parole sotto la barra devono restare leggibili anche qui. */
    .bo-griglia__classifiche:has(.bo-classifica ~ .bo-classifica) .bo-scala,
    .bo-lista--doppia .bo-scala { font-size: 9px; letter-spacing: 0; }
}

/* ---------------------------------------------------- dati di sintesi (annuari) */

.bo-sintesi {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
    padding: 0;
}
.bo-sintesi__voce {
    flex: 1 1 160px;
    padding: 12px 14px;
    border: 1px solid var(--bo-line);
    border-radius: var(--bo-radius-sm);
    background: var(--bo-surface-alt);
}
.bo-sintesi dt {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bo-ink-soft);
}
.bo-sintesi dd {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}