/* =====================================================
   GUIDE (guide-dettaglio.html): componenti del testo scritto in /admin
   e dei blocchi fatti dai dati (fragments/guida.html, util/GuidaBlocchi).

   Stesso linguaggio delle card del sito (card.css): bordi caldi, copertine
   su fondo chiaro, formato in maiuscoletto grigio. Colori (trappola 23): oro
   solo sul bottone verso Amazon, viola solo per i preordini, rosso solo per
   "No audio ITA", il resto neutro.
   Tutto è sotto classi gd-*: le guide scritte prima del 14/10/2026 non le
   usano e restano come sono. Caricato dopo gli stili in linea del template,
   così a parità di regola vince questo file.
====================================================== */
.article-body {
    --gd-text: #141412;
    --gd-mid: #5f5c55;
    --gd-light: #8a877f;
    --gd-border: #e4e2dc;
    --gd-line: #f0ede8;
    --gd-soft: #faf9f7;
    --gd-purple: #7c3aed;
    --gd-red: #dc2626;
}
/* I salti del sommario non finiscono sotto la barra in alto */
.article-body [id] { scroll-margin-top: 76px; }

/* Introduzione: un po' più grande del resto, è la frase che si legge per prima */
.article-body .gd-lead { font-size: 17.5px; line-height: 1.7; color: #1f2937; margin-bottom: 18px; }

/* ---------- Il mese in numeri ---------- */
.gd-numeri { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 0 0 10px; }
.gd-numero { background: var(--gd-soft); border: 1px solid var(--gd-border); border-radius: 12px; padding: 10px 6px 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; text-align: center; }
.gd-numero strong { font-size: 24px; font-weight: 900; line-height: 1.1; color: var(--gd-text); letter-spacing: -0.02em; }
.gd-numero span { font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--gd-mid); }
.gd-numero small { font-size: 10.5px; font-weight: 700; line-height: 1.2; color: var(--gd-red); }
.gd-numero-totale { background: var(--gd-text); border-color: var(--gd-text); }
.gd-numero-totale strong { color: #fff; }
.gd-numero-totale span { color: rgba(255, 255, 255, 0.78); }

/* ---------- Sommario ---------- */
.gd-sommario { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--gd-border); border-radius: 12px; }
.gd-sommario-titolo { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gd-light); margin-right: 4px; }
.article-body .gd-sommario a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--gd-text); text-decoration: none; background: var(--gd-soft); border: 1px solid var(--gd-border); border-radius: 999px; padding: 7px 12px; transition: border-color 0.18s, background-color 0.18s; }
.gd-sommario a::after { content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px; color: var(--gd-light); }

/* ---------- "Da non perdere": card con copertina ---------- */
.gd-scelte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 28px; }
.gd-scelta { display: flex; gap: 14px; min-width: 0; padding: 12px; background: #fff; border: 1px solid var(--gd-border); border-radius: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.035); transition: border-color 0.22s, box-shadow 0.22s; }
.gd-scelta-cover { flex: 0 0 104px; height: 128px; display: flex; align-items: center; justify-content: center; padding: 6px; background: linear-gradient(180deg, #fcfcfc 0%, #f4f2ee 100%); border-radius: 10px; overflow: hidden; }
.gd-scelta-cover img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12)); }
.gd-scelta-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gd-scelta-formato { font-size: 10px; font-weight: 700; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gd-light); margin-bottom: 3px; }
.article-body .gd-scelta-titolo { font-family: 'Inter', system-ui, sans-serif; font-size: 15.5px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 4px; }
.article-body .gd-scelta-titolo a { color: var(--gd-text); text-decoration: none; }
.gd-scelta-data { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--gd-mid); margin-bottom: 6px; }
.gd-scelta-data i { font-size: 11px; color: var(--gd-light); }
/* Preordine: "Esce ..." in viola, come "Esce tra X giorni" nelle card */
.gd-scelta-data.gd-futuro, .gd-scelta-data.gd-futuro i { color: var(--gd-purple); }
.gd-scelta-testo { font-size: 13.5px; line-height: 1.55; color: #44413a; }
.article-body .gd-scelta-testo p { margin: 0 0 6px; }
.article-body .gd-scelta-testo a { color: var(--gd-text); text-decoration: underline; text-decoration-color: #c9c6be; text-underline-offset: 2px; }
/* Card e righe cliccabili per intero (19/10/2026): il link del titolo si allarga sopra tutto il riquadro con ::after.
   Un <a> non può contenere altri link, e le card ne hanno (altre edizioni): quelli restano sopra e funzionano */
.gd-scelta, .gd-riga { position: relative; }
.article-body .gd-scelta-titolo a::after, .article-body .gd-riga-titolo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.gd-scelta-testo a, .gd-scelta-cover, .article-body .gd-scelta-link { position: relative; z-index: 1; }
.article-body .gd-scelta-link { margin-top: auto; padding-top: 6px; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--gd-text); text-decoration: none; }
.gd-scelta-link i { font-size: 11px; transition: transform 0.18s; }
/* La card grande in testa (l'uscita del mese): tutta la riga, copertina larga (spesso è la foto del cofanetto) */
.gd-scelta-grande { grid-column: 1 / -1; padding: 16px; gap: 20px; }
.gd-scelta-grande .gd-scelta-cover { flex-basis: 250px; height: 190px; padding: 10px; }
.article-body .gd-scelta-grande .gd-scelta-titolo { font-size: 19px; }
.gd-scelta-grande .gd-scelta-testo { font-size: 14.5px; }

/* ---------- Tabelle scritte a mano (es. audio italiano delle uscite principali, dal 19/10/2026) ----------
   Dentro un <div class="gd-tabella">: sul telefono scorre in orizzontale invece di schiacciare le colonne */
.gd-tabella { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 4px 0 24px; border: 1px solid var(--gd-border); border-radius: 14px; background: #fff; }
.gd-tabella table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13.5px; line-height: 1.4; }
.gd-tabella th { text-align: left; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gd-light); background: var(--gd-soft); padding: 10px 12px; border-bottom: 1px solid var(--gd-border); }
.gd-tabella td { padding: 9px 12px; border-top: 1px solid var(--gd-line); color: #44413a; vertical-align: top; }
.gd-tabella tr:first-child td { border-top: 0; }
.gd-tabella td:first-child { font-weight: 700; color: var(--gd-text); }
.article-body .gd-tabella td a { color: var(--gd-text); text-decoration: underline; text-decoration-color: #c9c6be; text-underline-offset: 2px; }
.gd-tabella small { display: block; font-size: 11.5px; font-weight: 600; color: var(--gd-light); }

/* ---------- Domande frequenti del mese: domanda in grassetto, risposta breve ---------- */
.article-body .gd-domande h3 { font-size: 16px; font-weight: 800; color: var(--gd-text); margin: 18px 0 6px; }
.article-body .gd-domande p { margin: 0 0 8px; }

/* ---------- Novità in DVD e Blu-ray (lista da scripts/scrapers/uscite_dvd_bluray.py) ---------- */
.article-body ul.gd-dvd { list-style: none; padding: 0; margin: 4px 0 28px; border: 1px solid var(--gd-border); border-radius: 14px; overflow: hidden; background: #fff; }
.gd-dvd li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px; margin: 0; line-height: 1.35; }
.gd-dvd li + li { border-top: 1px solid var(--gd-line); }
.gd-dvd time { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 44px; border-radius: 8px; background: var(--gd-soft); border: 1px solid var(--gd-line); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gd-light); line-height: 1.1; }
.gd-dvd time b { font-size: 17px; font-weight: 900; color: var(--gd-text); letter-spacing: -0.02em; }
.gd-dvd-titolo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gd-dvd-titolo strong { font-size: 14.5px; font-weight: 700; color: var(--gd-text); }
.gd-dvd-titolo span { font-size: 12px; font-weight: 600; color: var(--gd-mid); }
/* Unico bottone d'acquisto della guida: oro come nelle card (trappola 23) */
.article-body .gd-dvd a { display: inline-flex; align-items: center; white-space: nowrap; font-size: 12px; font-weight: 700; color: #111; text-decoration: none; background: #f59e0b; border-radius: 8px; padding: 8px 12px; transition: background-color 0.18s; }

/* ---------- Elenco completo, settimana per settimana ---------- */
.gd-uscite { margin: 4px 0 14px; }
.gd-settimana { background: #fff; border: 1px solid var(--gd-border); border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.gd-settimana > summary { display: block; list-style: none; cursor: pointer; position: relative; padding: 14px 48px 13px 16px; }
.gd-settimana > summary::-webkit-details-marker { display: none; }
.gd-settimana > summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; color: var(--gd-mid); position: absolute; right: 14px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--gd-soft); border: 1px solid var(--gd-border); display: flex; align-items: center; justify-content: center; transition: transform 0.2s; }
.gd-settimana[open] > summary::after { transform: rotate(180deg); }
.gd-settimana[open] > summary { border-bottom: 1px solid var(--gd-line); background: var(--gd-soft); }
.article-body .gd-settimana-titolo { display: inline; font-family: 'Inter', system-ui, sans-serif; font-size: 16.5px; font-weight: 800; line-height: 1.3; color: var(--gd-text); margin: 0 6px 0 0; }
.gd-conta { display: inline-block; vertical-align: 2px; font-size: 11px; font-weight: 700; line-height: 1; color: var(--gd-mid); background: rgba(0, 0, 0, 0.04); border: 1px solid var(--gd-border); border-radius: 20px; padding: 3px 8px; white-space: nowrap; }
.gd-anteprima { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--gd-mid); }
.gd-giorno { padding: 4px 16px 6px; }
.gd-giorno + .gd-giorno { border-top: 1px solid var(--gd-line); }
.gd-giorno-titolo { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gd-light); margin: 10px 0 2px; }
.article-body ul.gd-righe { list-style: none; padding: 0; margin: 0; }
.gd-riga { padding: 7px 0; margin: 0; line-height: 1.35; }
.article-body .gd-riga-titolo { display: block; font-size: 14.5px; font-weight: 700; color: var(--gd-text); text-decoration: none; }
.gd-riga-meta { display: block; margin-top: 2px; font-size: 12.5px; color: var(--gd-mid); }
.gd-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 1px 6px; border-radius: 5px; font-size: 10.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; color: var(--gd-mid); background: #f1efea; vertical-align: 1px; }
.gd-badge-audio { color: var(--gd-red); background: #fef2f2; }
.gd-badge-scelta { color: #fff; background: var(--gd-text); }
.gd-badge-scelta i { font-size: 9px; }

/* ---------- Consigli: punti brevi, con la frase chiave in grassetto ---------- */
.article-body ul.gd-punti { list-style: none; padding: 0; margin: 4px 0 24px; }
.article-body .gd-punti li { position: relative; padding: 0 0 0 30px; margin: 0 0 12px; line-height: 1.6; }
.gd-punti li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 11px; color: var(--gd-text); position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #f1efea; display: flex; align-items: center; justify-content: center; }

/* ---------- Nota (es. una data da confermare) ---------- */
.article-body .gd-nota { font-size: 14.5px; line-height: 1.6; background: var(--gd-soft); border: 1px solid var(--gd-border); border-left: 3px solid #c9c6be; border-radius: 10px; padding: 12px 14px; margin: 0 0 24px; }

/* Su mobile il template sillaba il testo della guida: nei titoli e nelle righe brevi spezzava le parole ("Po-wer") */
.article-body [class*="gd-"], .article-body [class*="gd-"] * { hyphens: manual; }

/* Banner del canale (card.css) dentro il testo */
.article-body .tg-banner { margin: 24px 0 4px; }

/* Effetti hover solo dove c'è un mouse: su mobile resterebbero attaccati dopo il tocco (trappola 36) */
@media (hover: hover) {
    .gd-scelta:hover { border-color: #c9c6be; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07); }
    .article-body .gd-scelta-titolo a:hover, .article-body .gd-riga-titolo:hover { text-decoration: underline; text-underline-offset: 2px; }
    .gd-scelta-link:hover i { transform: translateX(3px); }
    .article-body .gd-sommario a:hover { border-color: #c9c6be; background: #fff; }
    .article-body .gd-dvd a:hover { background: #fbbf24; color: #111; }
    .gd-settimana > summary:hover::after { border-color: #c9c6be; }
}

/* Mobile: in fondo, perché vinca sulle regole sopra (trappola 32) */
@media (max-width: 768px) {
    .article-body .gd-lead { font-size: 16px; }
    .gd-numeri { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .gd-numero { padding: 8px 4px 7px; }
    .gd-numero strong { font-size: 20px; }
    .gd-numero span { font-size: 11px; }
    /* Il template allinea a sinistra ogni div del testo su mobile: i numeri restano centrati */
    .article-body .gd-numero, .article-body .gd-numero span, .article-body .gd-numero small { text-align: center !important; }
    .gd-sommario { padding: 10px 12px; gap: 6px; }
    .gd-sommario-titolo { flex-basis: 100%; }
    .article-body .gd-sommario a { font-size: 12.5px; padding: 6px 10px; }
    /* Card: copertina accanto a formato, titolo e data; il perché sotto, a tutta larghezza (in una colonna
       stretta accanto alla copertina andava a capo ogni due parole) */
    .gd-scelte { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .gd-scelta { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 12px; align-items: start; padding: 12px; }
    .gd-scelta-corpo { display: contents; }
    .gd-scelta-cover { width: 84px; height: 104px; }
    .gd-scelta-testa { align-self: center; }
    .gd-scelta-testo, .article-body .gd-scelta-link { grid-column: 1 / -1; }
    .gd-scelta-testo { margin-top: 10px; font-size: 14px; }
    .article-body .gd-scelta-link { padding-top: 2px; }
    /* La card grande: copertina sopra, larga quanto la card */
    .gd-scelta-grande { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 12px; }
    .gd-scelta-grande .gd-scelta-cover { width: 100%; height: 190px; margin-bottom: 12px; }
    .article-body .gd-scelta-grande .gd-scelta-titolo { font-size: 18px; }
    .gd-scelta-grande .gd-scelta-testo { font-size: 14px; }
    .gd-dvd li { grid-template-columns: 46px minmax(0, 1fr); gap: 4px 12px; padding: 10px 12px; }
    .gd-dvd time { grid-row: span 2; align-self: start; height: 42px; }
    .article-body .gd-dvd a { justify-self: start; padding: 6px 10px; font-size: 11.5px; }
    .gd-settimana > summary { padding: 13px 46px 12px 14px; }
    .article-body .gd-settimana-titolo { font-size: 15.5px; }
    .gd-anteprima { font-size: 12.5px; }
    .gd-giorno { padding: 2px 14px 6px; }
    .article-body .gd-riga-titolo { font-size: 14px; }
    .gd-riga-meta { font-size: 12px; }
}