/*
 * Foglio di stile pubblico — piattaforma letture audio W4W "The Journey".
 *
 * Direzione visiva: pattern d'interazione in stile Spotify (player audio
 * prominente, forte gerarchia titolo/copertina, tema scuro con accenti di
 * colore) reinterpretati con l'identità grafica W4W — palette ufficiale
 * del numero 12 "The Journey Issue" (rosso cremisi, blu, rosa, arancio,
 * ricavata da PALETTE/W4W-12-palette-brand-colors-280726-blue.pdf) e i
 * font usati nella testata (Playfair Display per il marchio "W4W",
 * Titillium per i testi, Oswald — coerente con il trattamento tipografico
 * condensato usato in copertina per "THE JOURNEY ISSUE" — per i titoli).
 *
 * Mobile-first: le regole di base valgono per schermi piccoli (contesto
 * d'uso primario, scan QR da smartphone); le media query aggiungono
 * layout più ricchi per tablet/desktop (edizione digitale sfogliabile).
 *
 * Nessun framework/build step, coerente con architettura.md §2.
 */

/* ---------------------------------------------------------------------
   Font — self-hosted da public_html/assets/fonts/ (licenza SIL Open Font
   License, vedi i file OFL-*.txt nella stessa cartella). Nessuna
   dipendenza da Google Fonts/CDN esterni.
   --------------------------------------------------------------------- */

@font-face {
    font-family: "Oswald";
    src: url("/assets/fonts/oswald-variabile.woff2") format("woff2");
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("/assets/fonts/playfair-display-black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Titillium Web";
    src: url("/assets/fonts/titillium-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Titillium Web";
    src: url("/assets/fonts/titillium-semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------------- */

:root {
    /* Sfondi — tema chiaro neutro (grigio quasi puro, pochissima
       temperatura calda). Corretto 2026-09-09: la versione precedente
       (#F7F3ED/#EFE7DC/#E7DCCB) risultava troppo gialla/rosata a un
       controllo visivo live — qui la base resta neutra "a riposo" e il
       colore vero e proprio arriva dall'effetto hover "plexiglass" sulle
       card (vedi .scheda-numero/.scheda-lettura-compatta/.scheda-autore
       più sotto), non dal fondo pagina. */
    --colore-sfondo: #F5F4F2;
    --colore-superficie: #ECEBE8;
    --colore-superficie-alta: #E3E1DD;
    --colore-bordo: rgba(33, 20, 20, 0.12);

    /* Testo */
    --colore-testo: #201819;
    --colore-testo-attenuato: #6C5F58;
    --colore-testo-debole: #786A61;

    /* Palette ufficiale W4W — Numero 12 "The Journey Issue" */
    --colore-primario: #A41322;       /* rosso cremisi — logo/copertina */
    --colore-primario-hover: #86101D; /* su tema chiaro il pulsante si scurisce all'hover */
    --colore-secondario: #0A6E9E;     /* azzurro, scurito per contrasto AA su sfondo chiaro (~5:1) */
    --colore-secondario-scuro: #0d89c9;
    --colore-rosa: #fbcbe5;
    --colore-arancio: #f25c1f;        /* per icone/riempimenti grandi */
    --colore-arancio-testo: #B8420E;  /* variante scurita per testo su sfondo chiaro (es. .badge--bozza) */

    /* Tipografia */
    --font-display: "Oswald", "Arial Narrow", sans-serif;
    --font-marchio: "Playfair Display", Georgia, serif;
    --font-testo: "Titillium Web", "Segoe UI", -apple-system, sans-serif;

    /* Forma */
    --raggio-sm: 8px;
    --raggio-md: 14px;
    --raggio-pill: 999px;
    --ombra-elevata: 0 16px 36px -18px rgba(33, 20, 20, 0.2);

    color-scheme: light;
}

/* ---------------------------------------------------------------------
   Reset minimo + base
   --------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    /* Spazio della scrollbar sempre riservato (2026-09-09, fix richiesto
       dall'utente): senza questo, una pagina più corta della finestra
       (niente scrollbar) ha qualche pixel in più di larghezza utile
       rispetto a una pagina più lunga (scrollbar presente) — il
       contenuto centrato (.contenitore, header globale) si sposta
       impercettibilmente da una pagina all'altra. `scrollbar-gutter`
       riserva lo spazio comunque, scrollbar visibile o no. */
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    background: var(--colore-sfondo);
    color: var(--colore-testo);
    font-family: var(--font-testo);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

h1, h2, h3, p {
    margin: 0;
}

/* ---------------------------------------------------------------------
   Header globale persistente (architettura.md §3/§4, NUOVO 2026-09-09)
   Presente in cima a OGNI pagina pubblica (vedi vista/_parziale-intestazione.php).
   Riferimento visivo Spotify, versione ridotta/sobria su richiesta
   esplicita dell'utente: niente "Premium/Assistenza/Scarica/Iscriviti".
   --------------------------------------------------------------------- */

.intestazione-globale {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--colore-sfondo);
    border-bottom: 1px solid var(--colore-bordo);
}

/* Stesso ritmo di larghezza/margini di .contenitore (allineamento visivo
   col contenuto sottostante), ma con un padding verticale proprio, molto
   più compatto — non è una "pagina", è una barra.

   Comportamento responsive (2026-09-09, verificato con screenshot
   headless a 390/520/1024px): sotto i 520px sono due righe impilate in
   colonna — riga 1 ".intestazione-riga-compatta" (logo, icona home,
   "Sign in", sempre insieme, alta priorità), riga 2 il modulo di ricerca
   a piena larghezza. Da 520px in su ".intestazione-riga-compatta" diventa
   `display:contents` (si "dissolve": i suoi figli diventano flex-item
   diretti di questa riga, vedi sotto) e tutto sta su un'unica riga
   nell'ordine richiesto logo → home → ricerca → Sign in, via `order`.
   Mai un'icona a comparsa per la ricerca: il campo resta sempre un vero
   input distendibile, in entrambi i casi.

   Nota tecnica: un primo tentativo con i quattro elementi tutti allo
   stesso livello (riordinati via `order` + `flex-wrap` + un elemento
   forzato a riga piena con `flex-basis:100%`, più `margin-left:auto` su
   "Sign in" per spingerlo a destra) produceva un bug di rendering
   riproducibile in Chrome: "Sign in" spariva, spinto fuori dal viewport,
   ogni volta che coesisteva con l'elemento forzato a riga piena sulla
   stessa riga in formazione. La struttura a due gruppi qui sotto evita il
   problema alla radice (nessun elemento forzato al 100% nello stesso
   contesto flex in cui si risolve un margine automatico). */
.intestazione-globale-riga {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 12px 20px;
}

.intestazione-riga-compatta {
    display: flex;
    align-items: center;
    gap: 14px;
}

.intestazione-logo {
    flex: 0 0 auto;
    font-family: var(--font-marchio);
    font-weight: 900;
    font-size: 1.3rem;
    letter-spacing: 0.01em;
    color: var(--colore-primario);
}

.intestazione-home {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--colore-testo-attenuato);
}

.intestazione-home svg {
    width: 20px;
    height: 20px;
}

.intestazione-home:hover {
    color: var(--colore-testo);
    background: var(--colore-superficie);
}

.intestazione-home--attiva {
    color: var(--colore-primario);
    background: rgba(164, 19, 34, 0.12);
}

.intestazione-home--attiva:hover {
    color: var(--colore-primario);
}

.intestazione-ricerca {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: 38px;
    border-radius: var(--raggio-pill);
    background: var(--colore-superficie);
    border: 1px solid transparent;
}

.intestazione-ricerca:focus-within {
    border-color: rgba(33, 20, 20, 0.25);
    background: var(--colore-superficie-alta);
}

.intestazione-ricerca svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--colore-testo-debole);
}

.intestazione-ricerca input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.88rem;
    color: var(--colore-testo);
}

.intestazione-ricerca input::placeholder {
    color: var(--colore-testo-debole);
}

.intestazione-ricerca input:focus {
    outline: none;
}

.intestazione-accedi {
    /* Icona (non più un bottone testuale "Sign in") — accesso staff/
       redazione defilato, volutamente poco invitante per il pubblico
       generico (architettura.md §4/§5: "Accedi" = punto d'ingresso al
       futuro pannello redazione, non un login pubblico). Stesso
       trattamento circolare di .intestazione-home per coerenza visiva.

       margin-left:auto la spinge in fondo a .intestazione-riga-compatta
       sotto i 520px (unico contesto flex coinvolto: solo 3 elementi
       compatti, mai in tensione con la ricerca — vedi nota tecnica
       sopra). Da 520px in su, con .intestazione-riga-compatta dissolta
       via display:contents, questa stessa regola la spinge in fondo
       all'INTERA riga (ultimo elemento visivo, order:4 sotto). */
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--colore-testo-debole);
}

.intestazione-accedi svg {
    width: 19px;
    height: 19px;
}

.intestazione-accedi:hover {
    color: var(--colore-testo-attenuato);
    background: var(--colore-superficie);
}

/* Da 520px in su: spazio sufficiente per logo + icona home + ricerca +
   "Sign in" sulla STESSA riga, nell'ordine richiesto. */
@media (min-width: 520px) {
    .intestazione-globale-riga {
        flex-direction: row;
        align-items: center;
        gap: 14px;
    }

    /* Si "dissolve": logo/home/accedi diventano flex-item diretti di
       .intestazione-globale-riga, allo stesso livello del form di
       ricerca — nessun elemento avvolgente nel flusso visivo. */
    .intestazione-riga-compatta {
        display: contents;
    }

    .intestazione-logo {
        order: 1;
    }

    .intestazione-home {
        order: 2;
    }

    .intestazione-ricerca {
        order: 3;
        flex: 1 1 240px;
        width: auto;
        min-width: 180px;
        max-width: 420px;
    }

    .intestazione-accedi {
        order: 4;
    }
}

@media (min-width: 700px) {
    .intestazione-globale-riga {
        padding: 14px 32px;
    }
}

@media (min-width: 1024px) {
    .intestazione-globale-riga {
        max-width: 1040px;
    }
}

/* ---------------------------------------------------------------------
   Layout condiviso
   --------------------------------------------------------------------- */

/* Contenitore condiviso da TUTTE le pagine pubbliche (2026-09-09: prima
   ogni pagina ridefiniva max-width/padding-top per conto proprio — 640px
   qui, 720px su .pagina-catalogo/.pagina-bacheca, padding-top 0 su
   .pagina-lettura/.pagina-catalogo — con margini dal bordo alto e
   larghezze diverse da una pagina all'altra. Un solo valore condiviso,
   usato ovunque: nessuna pagina ridefinisce più max-width/padding-top). */
.contenitore {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 20px 20px 36px;
}

/* Link di ritorno contestuale — stile e posizione condivisi da tutte le
   pagine (2026-09-09). Con l'header globale persistente sempre presente
   sopra (vedi vista/_parziale-intestazione.php), "Home" non fa più parte
   di questo link: dove resta, punta a un livello intermedio diverso dalla
   home (il Numero di una lettura, l'indice Writers per una pagina
   autore) — vedi architettura.md §4 "Rimozione dei breadcrumb/link-indietro
   locali". Il padding-top è demandato a .contenitore (sopra), qui resta
   solo lo spazio prima dell'elemento successivo, così il link parte
   sempre alla stessa distanza dal bordo alto della pagina, dentro o fuori
   da uno "sfondino" (vedi .hero-numero/.scheda-lettura/.pannello-scrittore
   .link-indietro più sotto per le varianti su sfondo colorato).
   padding-bottom 16px: valore condiviso, verificato su tutte le pagine
   che usano questo link (catalogo, lettura, pagina Writer, indice
   Writers). */
.link-indietro {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 0 16px;
    font-family: var(--font-testo);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--colore-testo-attenuato);
}

.link-indietro svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.link-indietro:hover {
    color: var(--colore-testo);
}

.marchio-w4w {
    font-family: var(--font-marchio);
    font-weight: 900;
    letter-spacing: 0.01em;
}

.etichetta-testata {
    font-family: var(--font-testo);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--colore-primario);
    margin: 0 0 6px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: var(--raggio-pill);
    font-family: var(--font-testo);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(33, 20, 20, 0.07);
    color: var(--colore-testo);
}

.badge--bozza {
    background: rgba(184, 66, 14, 0.14);
    color: var(--colore-arancio-testo);
}

/* ---------------------------------------------------------------------
   Copertina placeholder (nessuna immagine reale caricata per il Numero)
   --------------------------------------------------------------------- */

.copertina {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: var(--raggio-md);
    overflow: hidden;
    background: var(--colore-superficie);
    box-shadow: var(--ombra-elevata);
}

.copertina img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.copertina--segnaposto {
    background:
        radial-gradient(120% 100% at 15% 10%, rgba(164, 19, 34, 0.85), transparent 55%),
        radial-gradient(120% 120% at 100% 100%, rgba(37, 164, 214, 0.78), transparent 60%),
        linear-gradient(155deg, #EBDFDA 0%, #E8E1E9 55%, #DCE6EC 100%);
    display: flex;
    align-items: flex-end;
    padding: 20px;
}

.copertina--segnaposto svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.9;
}

.copertina--segnaposto .copertina-testo {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(20, 10, 10, 0.55), 0 4px 14px rgba(20, 10, 10, 0.4);
}

/* Variante compatta (es. copertina piccola nell'hero del catalogo): a
   dimensioni ridotte il dettaglio decorativo (linea+equalizzatore) si
   sovrapporrebbe al testo — lo si nasconde e si tiene solo il gradiente. */
.copertina--compatta svg {
    display: none;
}

.copertina--compatta .copertina-testo {
    font-size: 0.62rem;
}

/* ---------------------------------------------------------------------
   Pagina lettura — player
   --------------------------------------------------------------------- */

/* 2026-09-09: .scheda-lettura era solo un glow assoluto dietro
   copertina+dettagli (::before), non un vero pannello con sfondo visibile
   — diventa un pannello coerente con .hero-numero (stessa logica
   "neutro+tinta", angoli arrotondati su tutti e 4 i lati, STESSO
   padding/bleed di .hero-numero e .pannello-scrittore — vedi gruppo di
   regole condivise più sotto), e il link "torna al Numero" si sposta
   dentro come primo elemento (vedi .scheda-lettura .link-indietro sotto),
   esattamente come in catalogo.php/.hero-numero. */
.scheda-lettura {
    position: relative;
    border-radius: var(--raggio-md);
    background:
        radial-gradient(130% 100% at 12% 0%, rgba(var(--colore-copertina-1), 0.2), transparent 62%),
        radial-gradient(110% 110% at 100% 100%, rgba(var(--colore-copertina-2), 0.14), transparent 58%),
        var(--colore-superficie);
    overflow: hidden;
    /* Stesso fallback di .hero-numero, vedi commento lì. */
    --colore-copertina-1: 164, 19, 34;
    --colore-copertina-2: 37, 164, 214;
}

.scheda-lettura .link-indietro {
    position: relative;
    z-index: 1;
    color: var(--colore-testo-attenuato);
}

.scheda-lettura .link-indietro:hover,
.scheda-lettura .link-indietro:focus-visible {
    color: var(--colore-testo);
}

/* Padding/bleed condivisi da tutti i pannelli "sfondino" con tinta
   ambient (2026-09-09, NUOVO — prima ciascuno definiva i propri valori,
   leggermente diversi tra loro: .hero-numero aveva bleed -32px già da
   700px, .scheda-lettura no, restando "staccata" dal bordo del
   contenitore a quella ampiezza). Stesso padding, stesso bleed, su
   .hero-numero, .scheda-lettura e .pannello-scrittore (pagina Writer,
   NUOVO più sotto) — un solo posto da cui derivano tutti e tre. */
.hero-numero,
.scheda-lettura,
.pannello-scrittore {
    padding: 16px 20px 20px;
    margin: 0 -20px 8px;
}

.copertina-lettura-colonna,
.dettagli-lettura {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.dettagli-lettura {
    padding-top: 16px;
}

.titolo-lettura {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.7rem, 6vw, 2.2rem);
    line-height: 1.08;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin-bottom: 8px;
}

.credito-autore {
    color: var(--colore-testo-attenuato);
    font-size: 1rem;
    font-weight: 400;
    margin-top: -4px;
    margin-bottom: 10px;
}

.credito-autore strong {
    color: var(--colore-testo);
    font-weight: 600;
}

.riferimento-articolo {
    color: var(--colore-testo-attenuato);
    font-size: 0.92rem;
    margin-bottom: 10px;
}

.riferimento-articolo strong {
    color: var(--colore-testo);
    font-weight: 600;
}

.riga-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.contatore-ascolti {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--colore-testo-debole);
}

.contatore-ascolti svg {
    width: 15px;
    height: 15px;
}

/* --- Player --- */

.player {
    margin-top: 6px;
}

.player-progresso {
    margin-bottom: 14px;
}

.barra-avanzamento {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 20px;
    background: transparent;
    margin: 0;
    cursor: pointer;
}

.barra-avanzamento::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: var(--raggio-pill);
    background: linear-gradient(
        to right,
        var(--colore-primario) 0%,
        var(--colore-primario) calc(var(--percentuale, 0) * 1%),
        rgba(33, 20, 20, 0.14) calc(var(--percentuale, 0) * 1%),
        rgba(33, 20, 20, 0.14) 100%
    );
}

.barra-avanzamento::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--colore-testo);
    box-shadow: 0 1px 4px rgba(33, 20, 20, 0.35);
}

.barra-avanzamento::-moz-range-track {
    height: 4px;
    border-radius: var(--raggio-pill);
    background: rgba(33, 20, 20, 0.14);
}

.barra-avanzamento::-moz-range-progress {
    height: 4px;
    border-radius: var(--raggio-pill);
    background: var(--colore-primario);
}

.barra-avanzamento::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: var(--colore-testo);
}

.player-tempi {
    display: flex;
    justify-content: space-between;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: var(--colore-testo-debole);
    margin-top: 2px;
}

/* Riga di TUTTI i controlli del player (2026-09-09, FIX — sostituisce il
   precedente pulsante-icona+popover per il volume, giudicato non
   utilizzabile: l'utente vuole uno slider SEMPRE VISIBILE, mai a
   comparsa). Tre gruppi: comandi di riproduzione (.player-controlli,
   dimensione fissa, non si comprime — 44px di target di tocco invariato),
   il controllo velocità (.controllo-velocita, dimensione fissa), e lo
   slider volume (.player-riga-volume) che riempie tutto lo spazio
   orizzontale rimanente della riga.
   flex-wrap: wrap + .player-riga-volume con flex:1 1 200px e
   min-width:160px ottiene automaticamente, senza media query dedicate,
   il comportamento richiesto: se sulla riga resta spazio sufficiente
   (>=160px, tipicamente da 700px in su) lo slider vive accanto ai
   pulsanti e si allarga a riempire tutto il resto; se lo spazio scende
   sotto quella soglia (tipicamente 390px, dove 5 pulsanti da 44px +
   velocità occupano già gran parte della riga) lo slider va a capo su una
   SECONDA RIGA piena larghezza (flex-grow lo espande a riempirla per
   intero, essendo l'unico elemento su quella riga) — mai nascosto in un
   popover, sempre disteso. */
.player-controlli-riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.player-controlli {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 6px;
}

.controllo-secondario {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--colore-testo-attenuato);
}

.controllo-secondario svg {
    width: 22px;
    height: 22px;
}

.controllo-secondario:hover {
    color: var(--colore-testo);
}

.pulsante-riproduci {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--colore-primario);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 12px 28px -10px rgba(164, 19, 34, 0.65);
    transition: transform 0.12s ease, background 0.12s ease;
}

.pulsante-riproduci:hover {
    background: var(--colore-primario-hover);
    transform: scale(1.04);
}

.pulsante-riproduci:active {
    transform: scale(0.97);
}

.pulsante-riproduci svg {
    width: 25px;
    height: 25px;
}

.pulsante-riproduci .icona-pausa {
    display: none;
}

.player[data-in-riproduzione="1"] .pulsante-riproduci .icona-play {
    display: none;
}

.player[data-in-riproduzione="1"] .pulsante-riproduci .icona-pausa {
    display: block;
}

/* --- Controllo velocità --- */

.controllo-velocita {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 30px;
    padding: 0 9px;
    border-radius: var(--raggio-pill);
    border: 1px solid var(--colore-bordo);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--colore-testo-attenuato);
    flex: 0 0 auto;
}

.controllo-velocita:hover {
    color: var(--colore-testo);
    border-color: rgba(33, 20, 20, 0.3);
}

/* --- Volume: slider SEMPRE VISIBILE (2026-09-09, FIX — prima un
   pulsante-icona con popover al tocco, giudicato non utilizzabile: mai
   più un controllo a comparsa per il volume). Riempie tutto lo spazio
   orizzontale rimanente della riga controlli, vedi commento su
   .player-controlli-riga più sopra per la logica di wrap responsive. */

.player-riga-volume {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 200px;
    min-width: 160px;
}

.icona-volume {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--colore-testo-attenuato);
}

.icona-volume svg {
    width: 18px;
    height: 18px;
}

/* Riusa esattamente lo stesso stile della barra di avanzamento
   (.barra-avanzamento) per coerenza visiva — vedi markup in lettura.php,
   stesso elemento <input type="range"> con le due classi. Sovrascrive il
   width:100% ereditato da .barra-avanzamento con flex:1, per condividere
   correttamente lo spazio orizzontale con l'icona dentro
   .player-riga-volume. */
.barra-volume {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------------------------------------------------------------------
   Pagina lettura senza audio
   --------------------------------------------------------------------- */

.messaggio-assenza-audio {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding: 16px 18px;
    border-radius: var(--raggio-md);
    background: var(--colore-superficie);
    border: 1px solid var(--colore-bordo);
    color: var(--colore-testo-attenuato);
    font-size: 0.92rem;
}

.messaggio-assenza-audio svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--colore-arancio);
}

/* ---------------------------------------------------------------------
   Pagina catalogo
   --------------------------------------------------------------------- */

.hero-numero {
    /* Fallback se la vista non imposta le custom property (non dovrebbe
       succedere in produzione, ma tiene l'header presentabile anche
       così) — stessi colori di palette W4W usati prima dell'estrazione
       dinamica, vedi App\Servizio\ColoreCopertina::FALLBACK. Formato
       "r, g, b" (non hex) per poterli comporre dentro rgba() qui sotto. */
    --colore-copertina-1: 164, 19, 34;
    --colore-copertina-2: 37, 164, 214;

    position: relative;
    /* padding/margin ora condivisi con .scheda-lettura/.pannello-scrittore,
       vedi il gruppo di regole subito sopra .scheda-lettura in questo file. */
    /* Tutti e 4 gli angoli arrotondati (2026-09-09: prima solo i due in
       basso, incoerente con le altre superfici arrotondate del sito). */
    border-radius: var(--raggio-md);
    /* "Ambient glow" ispirato a Spotify/Apple Music: sfumatura soffusa nei
       colori dominanti della copertina reale del Numero (calcolati via GD,
       vedi App\Servizio\ColoreCopertina), non un riempimento pieno/saturo —
       resta un accento su un fondo neutro, così il testo sopra resta
       leggibile per qualunque copertina. Intensità ridotta 2026-09-09
       (0.3/0.22 -> 0.2/0.14) per restare coerente con la nuova base neutra
       (la tinta è un accento delicato, non un fondo colorato pieno — stesso
       principio dell'effetto "plexiglass" delle card, qui statico perché
       questo header non è un elemento cliccabile). */
    background:
        radial-gradient(140% 100% at 10% 0%, rgba(var(--colore-copertina-1), 0.2), transparent 60%),
        radial-gradient(120% 120% at 100% 100%, rgba(var(--colore-copertina-2), 0.14), transparent 55%),
        var(--colore-superficie);
    overflow: hidden;
}

/* 2026-09-09: il link locale "torna alla home" che viveva qui dentro è
   stato rimosso senza sostituzione (architettura.md §4 — su catalogo.php
   il livello superiore era già solo la home, ora coperta al 100%
   dall'header globale persistente). Nessun .link-indietro dentro
   .hero-numero, quindi nessuna regola dedicata qui. */

.hero-numero-corpo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hero-copertina {
    width: 132px;
    min-width: 0;
}

.hero-copertina .copertina {
    box-shadow: var(--ombra-elevata);
}

.titolo-numero {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    text-transform: uppercase;
    line-height: 1.03;
    margin-bottom: 10px;
}

.descrizione-numero {
    color: var(--colore-testo-attenuato);
    font-size: 0.92rem;
    max-width: 46em;
}

.conteggio-letture {
    margin-top: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--colore-testo-debole);
}

.lista-letture {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
}

.stato-vuoto {
    padding: 24px 4px;
    color: var(--colore-testo-attenuato);
    font-size: 0.95rem;
}

.riga-lettura {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 10px;
    border-radius: var(--raggio-sm);
    border-bottom: 1px solid var(--colore-bordo);
}

.riga-lettura:last-child {
    border-bottom: 0;
}

.riga-lettura:hover,
.riga-lettura:focus-visible {
    background: var(--colore-superficie);
}

.indice-lettura {
    width: 22px;
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--colore-testo-debole);
    text-align: center;
}

.icona-play-riga {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(33, 20, 20, 0.06);
    color: var(--colore-testo);
}

.icona-play-riga svg {
    width: 15px;
    height: 15px;
    margin-left: 2px;
    /* Esplicitamente bianca (2026-09-09): prima ereditava currentColor,
       scuro sul tema chiaro e poco leggibile dentro il tondino. */
    color: #FFFFFF;
}

.riga-lettura:hover .icona-play-riga {
    background: var(--colore-primario);
}

.info-riga-lettura {
    flex: 1;
    min-width: 0;
}

.titolo-riga {
    display: block;
    font-weight: 600;
    font-size: 0.98rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sottotitolo-riga {
    display: block;
    font-size: 0.8rem;
    color: var(--colore-testo-debole);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.meta-riga-lettura {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    color: var(--colore-testo-debole);
}

/* ---------------------------------------------------------------------
   Pagina 404 / errore generico
   --------------------------------------------------------------------- */

.pagina-errore {
    /* 2026-09-09: da 100svh — con l'header globale persistente ora sempre
       presente sopra (vedi vista/_parziale-intestazione.php), 100svh pieni
       qui sommati all'header producevano una pagina più alta del viewport
       (scroll inatteso su una pagina che deve stare tutta a schermo).
       ~64px è l'altezza approssimativa dell'header a mobile/tablet
       (padding 12–14px sopra e sotto + riga di ~38px) — non serve un
       valore esatto al pixel, questa pagina è centrata e tollera qualche
       px di scarto. */
    min-height: calc(100svh - 64px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    gap: 10px;
}

.pagina-errore .marchio-w4w {
    font-size: 1.6rem;
    color: var(--colore-primario);
    margin-bottom: 18px;
}

.pagina-errore h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.6rem;
    text-transform: uppercase;
}

.pagina-errore p {
    color: var(--colore-testo-attenuato);
    max-width: 32em;
}

/* ---------------------------------------------------------------------
   Pagina segnaposto "Sign in" — /staff (architettura.md §4/§5)
   Volutamente minimale: nessuna funzionalità reale, solo un annuncio
   "coming soon" e un link di ritorno, stessa identità visiva del sito.
   --------------------------------------------------------------------- */

.riquadro-segnaposto-staff {
    max-width: 460px;
    margin: 48px auto;
    padding: 32px 24px;
    border-radius: var(--raggio-md);
    background: var(--colore-superficie);
    border: 1px solid var(--colore-bordo);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.titolo-segnaposto-staff {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.6rem, 6vw, 2rem);
    text-transform: uppercase;
    line-height: 1.05;
}

.descrizione-segnaposto-staff {
    color: var(--colore-testo-attenuato);
    font-size: 0.92rem;
    max-width: 34em;
}

.riquadro-segnaposto-staff .link-indietro {
    padding-bottom: 0;
    margin-top: 10px;
}

/* ---------------------------------------------------------------------
   Bacheca pubblica dei Numeri (root "/") — architettura.md §4/§6
   --------------------------------------------------------------------- */

.intestazione-bacheca {
    /* 2026-09-09: da 28px 0 26px — il margine dal bordo alto ora lo dà
       .contenitore (condiviso da tutte le pagine), qui resta solo lo
       spazio verticale interno, ridotto per compattezza (punto 3). */
    padding: 0 0 20px;
}

.intestazione-bacheca .marchio-w4w {
    display: block;
    /* 2026-09-09: da 1.3rem, troppo piccolo come marchio in testa alla
       home — clamp per restare sicuro anche sui telefoni più stretti. */
    font-size: clamp(1.8rem, 6vw, 2.2rem);
    color: var(--colore-primario);
    margin-bottom: 16px;
}

.titolo-bacheca {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    text-transform: uppercase;
    line-height: 1.05;
    margin-bottom: 8px;
}

.sottotitolo-bacheca {
    color: var(--colore-testo-attenuato);
    font-size: 0.95rem;
    max-width: 46em;
}

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

/* Effetto "plexiglass" (2026-09-09, NUOVO): a riposo la card ha uno sfondo
   neutro piatto (--colore-superficie, coerente con la nuova base meno
   calda/rosata) — SOLO al passaggio del mouse/focus appare una sfumatura
   radiale nei colori dominanti reali della copertina/foto che la card
   rappresenta (custom property --colore-copertina-1/2 impostate inline
   dalla vista tramite App\Servizio\ColoreCopertina::estraiCoppia(), stesso
   pattern già in uso in modo statico su .hero-numero). Stesso identico
   meccanismo condiviso da .scheda-numero, .scheda-lettura-compatta e
   .scheda-autore (vedi regole raggruppate più sotto) — così la card è un
   vero "riquadro" (risponde anche alla richiesta di una cornicetta animata
   sulle card "Most played") che "si colora al tocco". */
.scheda-numero,
.scheda-lettura-compatta,
.scheda-autore {
    position: relative;
    isolation: isolate;
    /* 2026-09-09, FIX: senza questo le card in .griglia-numeri/.griglia-autori
       (CSS grid) potevano forzare la colonna oltre 1fr ed eccedere la
       larghezza dello schermo su mobile — le copertine/avatar sono
       immagini con dimensione intrinseca grande (1200px) che, pur avendo
       width:100% in CSS, contano comunque con la loro dimensione naturale
       nel calcolo della "automatic minimum size" di grid/flex a meno di
       azzerare esplicitamente min-width sull'elemento figlio diretto della
       griglia. Verificato visivamente: card tagliata a metà fuori
       viewport a 390px prima di questo fix. */
    min-width: 0;
    /* Fallback se una vista non imposta le custom property per qualche
       motivo (non dovrebbe succedere in produzione, vedi commento
       equivalente su .hero-numero). */
    --colore-copertina-1: 164, 19, 34;
    --colore-copertina-2: 37, 164, 214;
}

.scheda-numero::before,
.scheda-lettura-compatta::before,
.scheda-autore::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    /* Intensità ridotta 2026-09-09 (0.4/0.32 -> 0.22/0.17): l'effetto
       risultava troppo marcato/saturo a un controllo visivo con l'utente —
       resta percepibile ma più delicato, coerente con l'"ambient glow"
       già usato in modo statico su .hero-numero/.scheda-lettura (0.2/0.14). */
    background:
        radial-gradient(130% 110% at 12% 0%, rgba(var(--colore-copertina-1), 0.22), transparent 62%),
        radial-gradient(110% 110% at 100% 100%, rgba(var(--colore-copertina-2), 0.17), transparent 58%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.scheda-numero:hover::before,
.scheda-numero:focus-visible::before,
.scheda-lettura-compatta:hover::before,
.scheda-lettura-compatta:focus-visible::before,
.scheda-autore:hover::before,
.scheda-autore:focus-visible::before {
    opacity: 1;
}

/* Contenuto sopra la sfumatura (che vive a z-index:0 dentro lo stesso
   contesto di stacking isolato dalla card, vedi isolation:isolate sopra). */
.scheda-numero > *,
.scheda-lettura-compatta > *,
.scheda-autore > * {
    position: relative;
    z-index: 1;
}

.scheda-numero {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-radius: var(--raggio-md);
    background: var(--colore-superficie);
    transition: transform 0.15s ease;
}

.scheda-numero:hover,
.scheda-numero:focus-visible {
    transform: translateY(-2px);
}

.scheda-numero .copertina {
    box-shadow: none;
}

.titolo-scheda-numero {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.18;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.conteggio-scheda-numero {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--colore-testo-debole);
}

/* ---------------------------------------------------------------------
   Avatar circolare Autore/Writer — fallback quando autori.foto è NULL
   (architettura.md §1/§4, stesso principio di .copertina--segnaposto ma
   circolare, riferimento visivo Spotify "Popular Artists")
   --------------------------------------------------------------------- */

.avatar-autore {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--colore-superficie);
    box-shadow: var(--ombra-elevata);
}

.avatar-autore img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-autore--segnaposto {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(120% 100% at 15% 10%, rgba(164, 19, 34, 0.85), transparent 55%),
        radial-gradient(120% 120% at 100% 100%, rgba(37, 164, 214, 0.78), transparent 60%),
        linear-gradient(155deg, #EBDFDA 0%, #E8E1E9 55%, #DCE6EC 100%);
}

.avatar-autore-iniziali {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(20, 10, 10, 0.55), 0 4px 14px rgba(20, 10, 10, 0.4);
}

/* ---------------------------------------------------------------------
   Sezioni home riga scrollabile — "Writers" e "Most played"
   (architettura.md §4, riferimento visivo Spotify: riga orizzontale
   scrollabile su mobile, titolo + "Show all" quando applicabile)
   --------------------------------------------------------------------- */

.sezione-home {
    margin-top: 28px;
}

.intestazione-sezione-home {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.titolo-sezione-home {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.25rem, 4.5vw, 1.6rem);
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.link-mostra-tutto {
    flex-shrink: 0;
    font-family: var(--font-testo);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--colore-testo-attenuato);
}

.link-mostra-tutto:hover {
    color: var(--colore-testo);
}

.riga-scorrevole {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    margin: -2px -2px -10px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.riga-scorrevole::-webkit-scrollbar {
    height: 6px;
}

.riga-scorrevole::-webkit-scrollbar-thumb {
    background: var(--colore-bordo);
    border-radius: var(--raggio-pill);
}

/* --- Card Writer (circolare) --- */

.scheda-autore {
    flex: 0 0 128px;
    width: 128px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-radius: var(--raggio-md);
    background: var(--colore-superficie);
    text-align: center;
    overflow: hidden;
    transition: transform 0.15s ease;
}

.scheda-autore:hover,
.scheda-autore:focus-visible {
    transform: translateY(-2px);
}

/* Come .scheda-numero .copertina: niente ombra propria dentro la card
   (che ora ha overflow:hidden per contenere il glow del plexiglass entro
   gli angoli arrotondati — l'ombra elevata è pensata per l'avatar grande
   e isolato dell'header /writers/<slug>, non per la miniatura in card). */
.scheda-autore .avatar-autore {
    box-shadow: none;
}

.nome-scheda-autore {
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ruolo-scheda-autore {
    font-size: 0.76rem;
    color: var(--colore-testo-debole);
}

/* --- Card lettura più ascoltata / correlata (compatta) --- */

.scheda-lettura-compatta {
    /* 2026-09-09: prima non aveva nessun feedback al passaggio del mouse
       (nessun padding/sfondo/bordo) — ora è una vera card, stesso
       trattamento "plexiglass" di .scheda-numero/.scheda-autore. */
    flex: 0 0 160px;
    width: 160px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    border-radius: var(--raggio-md);
    background: var(--colore-superficie);
    overflow: hidden;
    transition: transform 0.15s ease;
}

.scheda-lettura-compatta:hover,
.scheda-lettura-compatta:focus-visible {
    transform: translateY(-2px);
}

.scheda-lettura-compatta .copertina {
    box-shadow: none;
}

.titolo-scheda-lettura-compatta {
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.meta-scheda-lettura-compatta {
    font-size: 0.76rem;
    color: var(--colore-testo-debole);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------
   Pagina indice /writers e pagina singolo autore /writers/<slug>
   --------------------------------------------------------------------- */

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

.griglia-autori .scheda-autore {
    width: auto;
    flex: none;
}

/* ---------------------------------------------------------------------
   Pagina singolo Writer /writers/<slug> — RIFATTA 2026-09-09.
   Il precedente layout a due colonne (foto a sinistra, letture a destra
   da 700px in su) è stato ANNULLATO (giudicato "improponibile" —
   vedi CLAUDE.md "correzione rapida"). Ora replica esattamente il pattern
   di .hero-numero in vista/catalogo.php: stesso ambient-glow
   neutro+tinta (qui dalla FOTO dell'autore), stessi 4 angoli arrotondati,
   stesso breadcrumb dentro il pannello, e — dentro — la STESSA identica
   struttura .hero-numero-corpo/.hero-copertina (avatar al posto della
   copertina, ma stesso contenitore/dimensioni/breakpoint) invece di un
   markup proprio duplicato. Sotto il pannello, FUORI da esso, la lista
   letture usa lo stesso .lista-letture/.riga-lettura di catalogo.php
   (con l'aggiunta del nome del Numero come sottotitolo di ogni riga,
   utile qui perché — a differenza del catalogo — le letture attraversano
   più Numeri diversi). Nessun layout a due colonne, nessun breakpoint
   dedicato: il pannello Writer segue lo stesso identico ritmo responsive
   di .hero-numero, con cui condivide anche i valori di
   padding/margin/bleed (vedi il gruppo di regole condiviso più sopra in
   questo file). */

.pannello-scrittore {
    /* Stesso identico "ambient glow" di .hero-numero (catalogo.php) —
       stessi valori esatti di radial-gradient, non solo "simili". */
    position: relative;
    border-radius: var(--raggio-md);
    background:
        radial-gradient(140% 100% at 10% 0%, rgba(var(--colore-copertina-1), 0.2), transparent 60%),
        radial-gradient(120% 120% at 100% 100%, rgba(var(--colore-copertina-2), 0.14), transparent 55%),
        var(--colore-superficie);
    overflow: hidden;
    /* Stesso fallback di .hero-numero/.scheda-lettura, vedi commento lì. */
    --colore-copertina-1: 164, 19, 34;
    --colore-copertina-2: 37, 164, 214;
}

.pannello-scrittore .link-indietro {
    position: relative;
    z-index: 1;
    color: var(--colore-testo-attenuato);
}

.pannello-scrittore .link-indietro:hover,
.pannello-scrittore .link-indietro:focus-visible {
    color: var(--colore-testo);
}

/* ---------------------------------------------------------------------
   Related readings (pagina lettura) — architettura.md §4
   --------------------------------------------------------------------- */

.sezione-correlati {
    margin-top: 28px;
    position: relative;
    z-index: 1;
}

/* Differenzia la card Writer dalle card "Related readings" quando
   condividono la stessa riga scorrevole (2026-09-09 — restano sulla
   STESSA riga per richiesta esplicita, ma troppo simili visivamente:
   stesso riquadro verticale centrato di .scheda-autore usato altrove).
   Un separatore verticale la introduce come sezione a parte, e qui SOLO
   in questo contesto la card passa a un layout ORIZZONTALE (avatar a
   sinistra, nome/ruolo a destra) invece che verticale come le card
   lettura — non è più "una card lettura in più", si riconosce a colpo
   d'occhio come qualcosa di diverso. */
.separatore-correlati {
    flex: 0 0 auto;
    align-self: stretch;
    width: 1px;
    margin: 4px 2px;
    background: var(--colore-bordo);
}

.sezione-correlati .scheda-autore {
    flex: 0 0 208px;
    width: 208px;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 12px;
}

.sezione-correlati .scheda-autore .avatar-autore {
    width: 52px;
    flex-shrink: 0;
}

.sezione-correlati .scheda-autore .nome-scheda-autore,
.sezione-correlati .scheda-autore .ruolo-scheda-autore {
    white-space: normal;
}

/* ---------------------------------------------------------------------
   Breakpoint tablet — 700px
   --------------------------------------------------------------------- */

@media (min-width: 700px) {
    .contenitore {
        padding: 28px 32px 40px;
    }

    /* Stesso bleed/padding condiviso da .hero-numero/.scheda-lettura/
       .pannello-scrittore a questa ampiezza (2026-09-09) — prima solo
       .hero-numero aveva il bleed -32px qui, .scheda-lettura restava
       "staccata" dal bordo del contenitore. */
    .hero-numero,
    .scheda-lettura,
    .pannello-scrittore {
        margin-left: -32px;
        margin-right: -32px;
        padding: 24px 32px 28px;
    }

    .hero-numero-corpo {
        flex-direction: row;
        align-items: flex-end;
        gap: 24px;
    }

    .hero-copertina {
        width: 168px;
        flex-shrink: 0;
    }

    .intestazione-bacheca {
        padding: 0 0 28px;
    }

    .griglia-numeri {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px 20px;
    }

    .scheda-autore {
        flex-basis: 152px;
        width: 152px;
    }

    .scheda-lettura-compatta {
        flex-basis: 172px;
        width: 172px;
    }

    .griglia-autori {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Più respiro sui controlli del player, ora che c'è più spazio
       orizzontale disponibile rispetto ai 390px stretti (vedi commento su
       .player-controlli-riga per il motivo dei valori compatti a mobile). */
    .player-controlli {
        gap: 12px;
    }

    .pulsante-riproduci {
        width: 64px;
        height: 64px;
    }

    .pulsante-riproduci svg {
        width: 27px;
        height: 27px;
    }
}

/* ---------------------------------------------------------------------
   Breakpoint desktop — 1024px (edizione digitale sfogliabile)
   --------------------------------------------------------------------- */

@media (min-width: 1024px) {
    .contenitore {
        max-width: 1040px;
    }

    .griglia-numeri {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 28px 24px;
    }

    /* Righe "Writers" e "Most played": a griglia su desktop invece di
       scroll orizzontale, coerente col resto del sito a questa ampiezza
       (nessuno scroll nascosto quando c'è già spazio per una griglia). */
    .riga-scorrevole {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        overflow-x: visible;
        gap: 24px 20px;
    }

    .scheda-autore,
    .scheda-lettura-compatta {
        width: auto;
        flex: none;
    }

    .griglia-autori {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    /* Pagina lettura: due colonne, copertina a sinistra "sticky" (padding
       ereditato dalla regola condivisa .hero-numero/.scheda-lettura/
       .pannello-scrittore più sopra, nessun valore proprio qui). */
    .scheda-lettura {
        display: grid;
        grid-template-columns: 360px minmax(0, 1fr);
        /* row-gap 0 (2026-09-09, FIX — prima 12px): quel row-gap si
           sommava al padding-bottom del breadcrumb (grid-row a parte,
           vedi .link-indietro/.breadcrumb più sopra) producendo uno
           spazio breadcrumb→contenuto diverso da quello della pagina
           Rivista. Column-gap 56px invariato (spazio tra copertina e
           dettagli, non correlato al breadcrumb). */
        gap: 0 56px;
        align-items: start;
    }

    /* Il link "torna al Numero" occupa l'intera riga sopra le due colonne
       invece di finire schiacciato nella prima colonna (larga 360px). */
    .scheda-lettura .link-indietro {
        grid-column: 1 / -1;
    }

    .copertina-lettura-colonna {
        position: sticky;
        top: 40px;
    }

    .dettagli-lettura {
        padding-top: 4px;
    }

    .titolo-lettura {
        font-size: 2.8rem;
    }

    .player-controlli {
        justify-content: flex-start;
    }

    /* Più respiro tra i tre gruppi (comandi riproduzione / velocità /
       slider volume) ora che c'è più spazio orizzontale — il volume resta
       comunque sempre visibile sulla stessa riga, non più nascosto in un
       popover (vedi commento sulla regola di base). */
    .player-controlli-riga {
        gap: 20px;
    }
}