/*
Theme Name: LetsBlog Child
Theme URI: https://bisontebianco.it
Description: Child theme di Lets Blog per Bisonte Bianco. Contiene il template Home custom (articolo in evidenza + sezioni per categoria a 2 colonne) e le personalizzazioni.
Author: Fabio
Template: letsblog
Version: 1.0
*/

/* =========================================================
   HOME BISONTE BIANCO - layout
   ========================================================= */

/* --- Articolo in evidenza (piena larghezza) ---
   Usa il markup nativo del tema (.post_wrapper / .post_header): l'impaginazione
   arriva dal CSS del padre, qui serve solo la spaziatura della sezione. */
.bb-featured {
    margin-bottom: 40px;
}

/* --- Sezione categoria --- */
.bb-cat-section {
    margin-bottom: 45px;
}
/* Nome della categoria: compare UNA volta sola, a piena larghezza, sopra le due
   colonne. Lo stile (centrato, linea orizzontale, maiuscoletto spaziato) arriva
   tutto da .post_info_cat del tema padre: qui solo la spaziatura della sezione. */
.bb-cat-title {
    width: 100%;
    clear: both;
    margin-bottom: 35px;
}

/* --- Griglia a 2 colonne --- */
.bb-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}

/* --- Colonna della griglia ---
   Dentro c'e' il markup nativo dell'articolo: va solo reso fluido, perche' il
   tema stampa width/height in pixel inline sull'immagine (post_img.static). */
.bb-col {
    min-width: 0; /* evita l'overflow degli elementi grid */
}
.bb-col .post_img.static img {
    width: 100% !important;
    height: auto !important;
    display: block;
}
.bb-col .post_wrapper,
.bb-col .post_content_wrapper {
    width: auto;
    float: none;
}
/* Nella griglia il tema lascerebbe il margine di fine articolo: lo azzeriamo,
   la spaziatura la gestisce il gap della grid. */
.bb-col > div[class*="post-"] {
    margin-bottom: 0;
}
.bb-col > br.clear {
    display: none;
}

/* =========================================================
   RESPONSIVE - su mobile le 2 colonne diventano 1
   ========================================================= */
@media (max-width: 767px) {
    .bb-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   IMPAGINAZIONE DEGLI ARTICOLI
   ========================================================= */

/* --- Occhiello: primo paragrafo, leggermente più grande ---
   Dà gerarchia visiva senza toccare le parole dell'autore. */
.bb-occhiello {
    font-size: 19px;
    line-height: 1.75;
    color: #333;
    margin-bottom: 1.6em;
}

/* --- Versi: poesie e aforismi ---
   Il tema mette ogni verso in un <p>, che produce spaziature doppie.
   Qui i versi stanno in un unico blocco separati da <br>, centrati e
   con interlinea ampia: la resa è quella di una pagina di poesia. */
.bb-versi {
    margin: 2.2em auto;
    max-width: 34em;
    text-align: center;
}
.bb-versi p {
    /* il tema ha .post_header p { text-align: left }, che colpisce il
       paragrafo: per centrarlo serve una regola di pari specificita' */
    text-align: center;
    font-size: 20px;
    line-height: 2;
    color: #2b2b2b;
    margin: 0 0 1.9em;   /* lo stacco separa le strofe, non i versi */
}
.bb-versi p:last-child { margin-bottom: 0; }

/* --- Figure ---
   Larghezza piena della colonna, didascalia discreta sotto. */
.bb-figura {
    margin: 2.4em 0;
}
.bb-figura img {
    width: 100%;
    height: auto;
    display: block;
}
.bb-figura figcaption {
    font-size: 13px;
    line-height: 1.5;
    color: #888;
    margin-top: 0.7em;
    text-align: center;
}

/* --- Crediti immagine in fondo all'articolo ---
   Il selettore include .post_header perché la regola del corpo testo
   (.post_header p) ha specificità maggiore e altrimenti li porterebbe
   a 18px in colore pieno. */
.crediti-immagini,
.post_header p.crediti-immagini {
    font-size: 12px;
    line-height: 1.6;
    color: #999;
    margin-top: 3em;
    padding-top: 1.2em;
    border-top: 1px solid #eee;
}
.crediti-immagini a,
.post_header p.crediti-immagini a { color: #999; text-decoration: underline; }

/* --- Su schermi stretti --- */
@media (max-width: 767px) {
    .bb-versi p { font-size: 17px; line-height: 1.9; }
    .bb-occhiello { font-size: 17px; }
}

/* --- Corpo del testo degli articoli ---
   Il tema usa 14px con interlinea 23,8px: su una colonna da 748px fanno
   107 caratteri per riga, contro i 60-75 considerati leggibili. Qui si sale
   a 18px con interlinea 1,8, che porta la densità a circa 83 caratteri. */
.post_header p,
.post_header li {
    font-size: 18px;
    line-height: 1.8;
    color: #222;
}

.post_header p { margin-bottom: 1.35em; }

/* L'occhiello resta un gradino sopra il corpo */
.post_header p.bb-occhiello {
    font-size: 20px;
    line-height: 1.7;
}

/* I versi hanno una scala propria, definita sopra: non deve essere
   sovrascritta dalla regola generica del corpo testo. */
.post_header .bb-versi p {
    font-size: 20px;
    line-height: 2;
}

@media (max-width: 767px) {
    .post_header p,
    .post_header li { font-size: 17px; }
    .post_header p.bb-occhiello { font-size: 18px; }
}

/* ------------------------------------------------------------------
   Newsletter MailPoet

   Il tema aveva gia' un aspetto pensato per il box newsletter, ma scritto
   per le classi di MailChimp for WordPress (.widget_mc4wp_form_widget,
   .mc4wp-form in css/screen.css:1429, 3317, 4976). Quel plugin non e'
   installato: qui le stesse regole sono riportate sulle classi di MailPoet,
   cosi' il modulo eredita l'aspetto previsto dal tema.

   Eccezione alla convenzione del prefisso .bb-: si sovrascrivono classi di
   terze parti, quindi i selettori devono essere i loro.
   ------------------------------------------------------------------ */

/* Sidebar: blocco scuro, come il .widget_mc4wp_form_widget originale */
#page_content_wrapper .sidebar .content .sidebar_widget li.widget_mailpoet_form {
    background: #222;
    color: #ccc;
    border: 0;
    padding: 20px;
}

#page_content_wrapper .sidebar .content .sidebar_widget li.widget_mailpoet_form h2.widgettitle {
    color: #fff;
}

/* Footer: nessun blocco scuro, il footer e' gia' scuro di suo */
#footer .sidebar_widget li.widget_mailpoet_form {
    background: transparent;
    padding: 0;
}

#footer .sidebar_widget li.widget_mailpoet_form h2.widgettitle {
    color: #999;
}

/* Campo e pulsante a piena larghezza, testo centrato come nel tema */
.widget_mailpoet_form .mailpoet_text,
.widget_mailpoet_form .mailpoet_email {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.widget_mailpoet_form .mailpoet_submit {
    width: 100%;
    margin: 0;
}

/* MailPoet distanzia i campi di 20px: troppo dentro una colonna stretta */
.widget_mailpoet_form .mailpoet_paragraph {
    margin-bottom: 12px;
}

.widget_mailpoet_form .mailpoet_paragraph:last-child {
    margin-bottom: 0;
}

/* Messaggi di esito leggibili sul fondo scuro della sidebar */
#page_content_wrapper .sidebar .content .sidebar_widget li.widget_mailpoet_form .mailpoet_validate_success,
#footer .sidebar_widget li.widget_mailpoet_form .mailpoet_validate_success {
    color: #9ccc65;
}

#page_content_wrapper .sidebar .content .sidebar_widget li.widget_mailpoet_form .mailpoet_validate_error,
#footer .sidebar_widget li.widget_mailpoet_form .mailpoet_validate_error {
    color: #ef9a9a;
}

/* ------------------------------------------------------------------
   Podcast — indice ed episodio singolo

   Vedi docs/studio-podcast.md per le scelte di struttura.
   ------------------------------------------------------------------ */

/* --- Codice in linea --------------------------------------------------------
   Il tema mette pre, code e tt nella stessa regola con display:block
   (css/screen.css:259). Il risultato e' che un <code>parola</code> dentro una
   frase spezza il paragrafo in tre pezzi impilati. Qui <code> torna a essere
   quello che e': un pezzo di testo dentro una riga. <pre> resta un blocco. */
code, tt {
    display: inline;
    width: auto;
    margin: 0;
    padding: 1px 6px;
    border: 0;
    border-radius: 3px;
    background: #f2f2f3;
    font-size: .88em;
    line-height: inherit;
    color: #333;
    white-space: nowrap;
}

/* Dentro un blocco preformattato il codice non va riquadrato una seconda volta */
pre code, pre tt {
    padding: 0;
    background: none;
    font-size: inherit;
    white-space: pre;
}

/* --- Corpo del testo nelle pagine di lettura --------------------------------
   Il tema usa 14px ovunque. Qui si alza a 17 il testo corrente delle pagine.
   Si toccano solo <p> e <li>: tutti i componenti costruiti per questo sito —
   schede, elenchi, filtri, contatori — dichiarano una propria misura e
   restano come sono. Era la condizione per non rimettere mano a cio' che
   gia' funziona. */
body.bb-testo-lettura .sidebar_content p,
body.bb-testo-lettura .sidebar_content > ul li,
body.bb-testo-lettura .sidebar_content > ol li {
    font-size: 17px;
    line-height: 1.75;
}

/* La riga di firma sotto l'introduzione: un gradino sotto al testo, non
   uguale, altrimenti diventa un secondo paragrafo. */
body.bb-testo-lettura .bb-podcast-intro p + p em,
body.bb-testo-lettura .bb-podcast-intro p em {
    font-size: 15px;
}

/* --- Link legali nel footer (Privacy, Cookie) ------------------------------
   In linea con il copyright, stesso corpo e stesso colore. NON maiuscoli.
   L'hover del tema porta i link a nero (screen.css:137), che sul footer scuro
   sparisce: qui l'hover schiarisce invece di scurire. */
#copyright .bb-footer-legali a {
    color: inherit;
    text-decoration: none;
}

#copyright .bb-footer-legali a:hover,
#copyright .bb-footer-legali a:active {
    color: #fff;
    text-decoration: underline;
}

#copyright .bb-sep { opacity: .45; }

/* --- Riga di consenso nel modulo commenti ----------------------------------
   "Salva il mio nome, email e sito web..." e' una nota di servizio, non
   un'etichetta di campo. Il tema pero' rende TUTTE le <label> maiuscole,
   13px e semigrassetto (screen.css:3389), e cosi' quella riga risaltava piu'
   del dovuto. Qui torna piccola, in tondo, chiara e minuscola. */
.comment-form-cookies-consent label {
    text-transform: none;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0;
    color: #999;
}

/* --- Introduzione della pagina indice --- */
.bb-podcast-intro {
    margin-bottom: 2.5em;
}

.bb-iscriviti {
    margin-top: 1.5em;
    padding-top: 1.2em;
    border-top: 1px solid #eee;
}

.bb-iscriviti-etichetta {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin-right: 10px;
}

.bb-iscriviti-link {
    display: inline-block;
    margin: 4px 8px 4px 0;
    padding: 7px 16px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.4;
    color: #222;
    text-decoration: none;
}

.bb-iscriviti-link:hover {
    background: #222;
    border-color: #222;
    color: #fff;
}

/* --- Riga episodio ---
   Dopo il lettore, l'elenco ne adotta il linguaggio: scheda con bordo sottile,
   angoli stondati, giallo al passaggio del mouse. Prima erano righe separate da
   una linea, che accanto al riquadro del lettore sembravano di un altro sito. */
.bb-episodio {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 16px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.bb-episodio:hover {
    border-color: var(--bb-giallo);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

.bb-episodio--evidenza {
    gap: 26px;
    padding: 20px;
}

/* --- Copertina, con il play che compare al passaggio --- */
.bb-episodio-copertina {
    flex: 0 0 140px;
    margin: 0;
    line-height: 0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.bb-episodio--evidenza .bb-episodio-copertina { flex-basis: 260px; }

.bb-episodio-copertina img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .35s ease;
}

.bb-episodio:hover .bb-episodio-copertina img { transform: scale(1.04); }

/* Cerchio giallo con il triangolo: e' lo stesso segnale del lettore, cosi' si
   capisce che la scheda porta all'ascolto e non a un articolo qualsiasi.
   Disegnato in CSS per non aggiungere markup al partial. */
.bb-episodio-copertina a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border-radius: 50%;
    background: var(--bb-giallo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23222'%3E%3Cpath d='M6 4v16a1 1 0 0 0 1.524 .852l13 -8a1 1 0 0 0 0 -1.704l-13 -8a1 1 0 0 0 -1.524 .852z'/%3E%3C/svg%3E") no-repeat 55% 50%;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}

.bb-episodio:hover .bb-episodio-copertina a::after {
    opacity: 1;
    transform: scale(1);
}

/* Il corpo occupa lo spazio restante e puo' restringersi: senza min-width:0
   un titolo lungo senza spazi allargherebbe la colonna oltre il contenitore. */
.bb-episodio-corpo {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
}

/* Corpo, maiuscolo e spaziatura del titolo NON si dichiarano qui: arrivano da
   .post_header:not(.single) h5 del tema, che ha specificita' maggiore e
   vincerebbe comunque. */
.bb-episodio-titolo {
    margin: 0 0 .3em;
    line-height: 1.35;
}

.bb-episodio .post_header {
    width: auto;
    float: none;
    margin: 0;
    text-align: left;
}

.bb-episodio-titolo a { color: var(--bb-scuro); text-decoration: none; transition: color .15s ease; }
.bb-episodio:hover .bb-episodio-titolo a { color: var(--bb-rosso); }

/* Il sottotitolo dice di cosa si parla: e' informazione, non decorazione */
.bb-episodio-sottotitolo {
    margin: 0 0 .6em;
    font-size: 16px;
    line-height: 1.5;
    color: #555;
}

.bb-episodio--evidenza .bb-episodio-sottotitolo { font-size: 18px; }

/* La data e la durata riprendono lo stile dei metadati del lettore */
.bb-episodio-meta {
    margin: 0 0 1em;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
}

.bb-episodio-meta .bb-episodio-durata::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--bb-rosso);
    margin-right: 7px;
    vertical-align: middle;
}

.bb-episodio-sep { margin: 0 .5em; }

.bb-episodio-estratto {
    margin-bottom: 1.2em;
    font-size: 16px;
    line-height: 1.7;
    color: #333;
}

.bb-episodio-estratto p { margin-bottom: .8em; }

/* --- Player --- */
.bb-player { margin: 1.2em 0; }

.bb-player--facade { margin: 1.2em 0 0; }

.bb-player-avvia {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    background: #222;
    border: 0;
    border-radius: 40px;
    color: #fff;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}

.bb-player-avvia:hover { background: #444; }

.bb-player-avvia:focus-visible {
    outline: 2px solid #222;
    outline-offset: 3px;
}

.bb-player-icona { font-size: 11px; }

.bb-player iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* --- Pagina del singolo episodio ---
   Il titolo NON si stila qui: usa .post_header_title > h1, cioe' il markup
   nativo del tema, cosi' carattere e corpo sono quelli degli articoli.
   Aggiungere qui una regola sul titolo significa reintrodurre lo scarto
   grafico che avevamo. */
.bb-episodio-sottotitolo--singolo {
    font-size: 20px;
    line-height: 1.5;
    color: #444;
}

.bb-episodio-azioni {
    margin: 1.5em 0 2em;
    padding-bottom: 1.5em;
    border-bottom: 1px solid #eee;
}

.bb-episodio-azioni a {
    display: inline-block;
    margin: 4px 14px 4px 0;
    font-size: 13px;
    color: #222;
}

.bb-episodio-note p,
.bb-episodio-note li {
    font-size: 18px;
    line-height: 1.8;
    color: #222;
}

/* --- Trascrizione --- */
.bb-trascrizione {
    margin-top: 3em;
    padding-top: 2em;
    border-top: 1px solid #eee;
}

.bb-trascrizione-titolo {
    margin: 0 0 1em;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
}

/* Leggermente piu' contenuta del corpo delle note: e' un testo di consultazione,
   non la lettura principale della pagina. */
.bb-trascrizione-testo p {
    font-size: 16px;
    line-height: 1.75;
    color: #444;
    margin-bottom: 1.2em;
}

/* --- Navigazione fra episodi ---
   width:100% NON e' ridondante: questo blocco e' figlio diretto di
   .sidebar_content, che il tema rende con float:left. In quel contesto un
   contenitore display:flex (e anche display:grid) collassa a larghezza 0, e i
   suoi figli traboccano a destra finendo sopra la sidebar. Verificato con due
   div identici: 802px dentro un contenitore normale, 0px dentro .sidebar_content.
   La larghezza esplicita e' la difesa; box-sizing evita che il padding sfori. */
.bb-episodio-nav {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    gap: 20px;
    margin: 2.5em 0 1.5em;
    padding-top: 1.5em;
    border-top: 1px solid #eee;
}

.bb-episodio-nav a {
    flex: 1;
    text-decoration: none;
    color: #222;
}

.bb-episodio-nav-succ { text-align: right; }

.bb-episodio-nav-etichetta {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: .3em;
}

.bb-episodio-nav-titolo {
    display: block;
    font-size: 15px;
    line-height: 1.4;
}

.bb-episodio-nav a:hover .bb-episodio-nav-titolo { color: #777; }

.bb-episodio-tutti {
    margin: 1.5em 0 2.5em;
    font-size: 13px;
}

.bb-paginazione { margin: 2.5em 0; }

.bb-podcast-vuoto { color: #999; font-style: italic; }

@media (max-width: 767px) {
    /* Sotto i 767px la copertina va sopra al testo: affiancarle su schermo
       stretto lascerebbe al titolo una colonna di poche decine di pixel. */
    .bb-episodio,
    .bb-episodio--evidenza { flex-direction: column; gap: 14px; }
    .bb-episodio-copertina,
    .bb-episodio--evidenza .bb-episodio-copertina { flex-basis: auto; width: 100%; }
    .bb-episodio-sottotitolo--singolo { font-size: 18px; }
    .bb-episodio-note p,
    .bb-episodio-note li { font-size: 17px; }
    .bb-episodio-nav { flex-direction: column; gap: 14px; }
    .bb-episodio-nav-succ { text-align: left; }
}

/* --- Widget "Ultimi episodi" --- */
.bb-widget-episodi {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bb-widget-episodio {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(128,128,128,.18);
}

.bb-widget-episodio:last-child { border-bottom: 0; padding-bottom: 0; }
.bb-widget-episodio:first-child { padding-top: 0; }

.bb-widget-episodio-img {
    flex: 0 0 60px;
    line-height: 0;
}

.bb-widget-episodio-img img {
    width: 100%;
    height: auto;
    display: block;
}

.bb-widget-episodio-testo { flex: 1 1 auto; min-width: 0; }

.bb-widget-episodio-titolo {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 3px;
}

.bb-widget-episodio-meta {
    display: block;
    font-size: 11px;
    letter-spacing: .5px;
    text-transform: uppercase;
    opacity: .7;
}

/* --- Blocco da shortcode [bb_podcast] --- */
.bb-podcast-blocco { margin: 2em 0; }

/* Nello shortcode le righe sono piu' compatte: il blocco vive dentro un
   articolo, non deve competere con il testo che lo circonda. */
.bb-podcast-elenco--shortcode .bb-episodio { padding: 1.2em 0; }
.bb-podcast-elenco--shortcode .bb-episodio-copertina { flex-basis: 96px; }
.bb-podcast-elenco--shortcode .bb-episodio-titolo { font-size: 17px; }
.bb-podcast-elenco--shortcode .bb-episodio-sottotitolo { font-size: 14px; margin-bottom: .4em; }
.bb-podcast-elenco--shortcode .bb-episodio-meta { margin-bottom: .6em; }

/* Player dell'intero programma (Spreaker in modalita' show) */
.bb-player--programma { width: 100%; box-sizing: border-box; }
.bb-player--programma iframe { width: 100%; }

@media (max-width: 767px) {
    .bb-podcast-elenco--shortcode .bb-episodio-copertina { flex-basis: auto; }
}

/* ------------------------------------------------------------------
   Lettore podcast — player + elenco + ricerca

   PALETTE: i due colori stanno nelle variabili qui sotto. Per cambiarli si
   modificano SOLO quelle due righe: player, elenco, widget e stati di
   passaggio del mouse vi fanno tutti riferimento.
   I valori sono la lettura a occhio dei colori del player Spreaker.
   ------------------------------------------------------------------ */
:root {
    --bb-giallo: #F9C00C;
    --bb-rosso:  #DE2F26;

    /* Derivati, per non ripetere rgba a mano */
    --bb-giallo-tenue: rgba(249, 192, 12, .14);
    --bb-rosso-tenue:  rgba(222, 47, 38, .10);
    --bb-scuro:        #222;
}

.bb-lettore {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    margin: 2em 0;
    overflow: hidden;
}

/* --- Intestazione: episodio in riproduzione --- */
.bb-lettore-testa {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px;
}

.bb-lettore-copertina {
    flex: 0 0 96px;
    line-height: 0;
    background: #f2f2f2;
    border-radius: 10px;
    overflow: hidden;
}

/* Il tema impone
     #page_content_wrapper .inner .sidebar_content img { height: auto !important; }
   che nelle pagine CON sidebar vince su qualunque altezza dichiarata qui e
   deforma la copertina.
   Invece di rilanciare con un altro !important si usa aspect-ratio: l'altezza
   resta "auto" — quindi la regola del tema e' soddisfatta — ma il rapporto
   1:1 la fa comunque risultare 96px. */
.bb-lettore-copertina img {
    width: 96px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.bb-lettore-copertina-vuota {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    font-size: 26px;
    color: var(--bb-giallo);
    background: var(--bb-giallo-tenue);
}

.bb-lettore-intestazione { flex: 1 1 auto; min-width: 0; }

.bb-lettore-programma {
    display: block;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--bb-rosso);
    margin-bottom: 5px;
}

.bb-lettore-titolo {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--bb-scuro);
    text-decoration: none;
    margin-bottom: 6px;
}

.bb-lettore-titolo:hover { color: var(--bb-rosso); }

.bb-lettore-descrizione {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    /* Due righe al massimo: l'intestazione deve restare di altezza stabile
       anche cambiando puntata, altrimenti i comandi ballano sotto. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Comandi --- */
.bb-lettore-comandi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 4px 18px 14px;
}

.bb-lettore-btn,
.bb-lettore-velocita,
.bb-lettore-play {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: #555;
    line-height: 1;
    font-family: inherit;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.bb-lettore-btn { font-size: 16px; }
.bb-lettore-btn:hover { color: var(--bb-giallo); }

/* Le icone piene (salto puntata) hanno piu' massa visiva di quelle a tratto
   (salti di 10 e 30 secondi): un filo di trasparenza le pareggia otticamente,
   cosi' la fila di comandi non ha due pesi diversi. */
.bb-lettore-btn .bb-icona--prec,
.bb-lettore-btn .bb-icona--succ { opacity: .82; }

.bb-lettore-btn:hover .bb-icona--prec,
.bb-lettore-btn:hover .bb-icona--succ { opacity: 1; }

/* Salti avanti/indietro.
   In Tabler il numero fa parte del disegno dell'icona: niente span sovrapposto
   da posizionare, e nessun rischio che a dimensioni piccole si impasti con la
   freccia. Se un domani si cambiasse famiglia di icone, quella soluzione
   andrebbe reintrodotta. */
.bb-lettore-btn--salto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}

.bb-lettore-velocita {
    min-width: 40px;
    padding: 5px 9px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.bb-lettore-velocita:hover {
    border-color: var(--bb-giallo);
    color: var(--bb-giallo);
}

/* Il pulsante principale e' giallo pieno, come nel player di riferimento */
/* Icona scura e non bianca: bianco su questo giallo da' circa 1,8:1 di
   contrasto, sotto il 3:1 richiesto per gli elementi grafici. Scuro sale a
   circa 10:1 restando nella palette. Sul rosso del passaggio del mouse si
   torna al bianco, che li' e' leggibile. */
.bb-lettore-play {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--bb-giallo);
    color: var(--bb-scuro);
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.bb-lettore-play:hover {
    background: var(--bb-rosso);
    color: #fff;
    transform: scale(1.05);
}

/* Icone SVG: prendono il colore dal testo del pulsante */
.bb-icona { display: block; }
.bb-lettore-btn .bb-icona,
.bb-lettore-play .bb-icona { pointer-events: none; }

/* Il play di Tabler e' gia' bilanciato nel proprio riquadro: a differenza di
   un triangolo disegnato a mano non serve spostarlo verso destra. */
.bb-lettore-icona-play { display: block; }

.bb-lettore-ricerca-icona { display: flex; align-items: center; }
.bb-lettore-voce-play .bb-icona { margin: 0 auto; }

.bb-lettore-btn:focus-visible,
.bb-lettore-play:focus-visible,
.bb-lettore-velocita:focus-visible,
.bb-lettore-traccia:focus-visible,
.bb-lettore-voce-play:focus-visible {
    outline: 2px solid var(--bb-giallo);
    outline-offset: 3px;
}

.bb-lettore-copiato { color: var(--bb-giallo) !important; }

/* --- Barra di avanzamento --- */
.bb-lettore-barra {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px 14px;
}

.bb-lettore-tempo {
    font-size: 11px;
    color: #999;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

/* La traccia ospita due rappresentazioni alternative:
   - il canvas con la forma d'onda vera, quando i dati di Spreaker arrivano;
   - la barra piena, che resta come ripiego se non arrivano.
   Quando il canvas e' visibile la barra si assottiglia e fa da sottofondo. */
.bb-lettore-traccia {
    flex: 1 1 auto;
    min-height: 5px;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
}

.bb-lettore-onda {
    width: 100%;
    height: 40px;
    display: block;
}

.bb-lettore-onda[hidden] { display: none; }

.bb-lettore-avanzamento {
    height: 5px;
    width: 0;
    background: var(--bb-rosso);
    border-radius: 3px;
}

/* Con la forma d'onda attiva la barra sparisce: l'avanzamento lo mostra
   il colore delle barre disegnate. */
.bb-lettore-traccia:has(.bb-lettore-onda:not([hidden])) .bb-lettore-avanzamento { display: none; }

/* Senza forma d'onda serve il fondo grigio della barra */
.bb-lettore-traccia:has(.bb-lettore-onda[hidden]) {
    height: 5px;
    background: #ececec;
}

.bb-lettore-traccia:hover .bb-lettore-avanzamento { background: var(--bb-giallo); }

/* --- Ricerca --- */
.bb-lettore-ricerca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-top: 1px solid #eee;
}

.bb-lettore-ricerca-icona { color: #bbb; }
.bb-lettore-ricerca:focus-within .bb-lettore-ricerca-icona { color: var(--bb-giallo); }

.bb-lettore-ricerca input[type=search] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    padding: 4px 0;
}

.bb-lettore-ricerca input[type=search]:focus { outline: 0; }

/* --- Elenco delle puntate --- */
.bb-lettore-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 340px;
    overflow-y: auto;
    border-top: 1px solid #eee;
}

.bb-lettore-voce {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid #f0f0f0;
    /* Il bordo sinistro esiste sempre, trasparente: cosi' evidenziando la
       puntata in ascolto il testo non si sposta di 3px. */
    border-left: 3px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
}

.bb-lettore-voce:last-child { border-bottom: 0; }
.bb-lettore-voce:hover { background: var(--bb-giallo-tenue); }

.bb-lettore-voce--attiva {
    background: var(--bb-rosso-tenue);
    border-left-color: var(--bb-rosso);
}

.bb-lettore-voce-play {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 0;
    width: 22px;
    font-size: 12px;
    color: #bbb;
    cursor: pointer;
    transition: color .15s ease;
}

.bb-lettore-voce-play:hover { color: var(--bb-giallo); }
.bb-lettore-voce--attiva .bb-lettore-voce-play { color: var(--bb-rosso); }

.bb-lettore-voce-testo { flex: 1 1 auto; min-width: 0; }

.bb-lettore-voce-titolo {
    display: block;
    font-size: 15px;
    line-height: 1.4;
    color: var(--bb-scuro);
    text-decoration: none;
}

.bb-lettore-voce-titolo:hover { color: var(--bb-rosso); text-decoration: underline; }

.bb-lettore-voce-autore {
    display: block;
    font-size: 12px;
    color: #999;
    margin-top: 2px;
}

.bb-lettore-voce-data {
    flex: 0 0 auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #999;
}

@media (max-width: 600px) {
    .bb-lettore-testa { flex-direction: column; }
    .bb-lettore-copertina,
    .bb-lettore-copertina img,
    .bb-lettore-copertina-vuota { width: 100%; flex-basis: auto; height: auto; }
    .bb-lettore-comandi { gap: 12px; }
    .bb-lettore-voce { flex-wrap: wrap; }
    .bb-lettore-voce-data { width: 100%; padding-left: 34px; }
}

/* --- La stessa palette sugli altri componenti del podcast --- */

/* Widget "Ultimi episodi" */
.bb-widget-episodio-titolo { transition: color .15s ease; }
.bb-widget-episodio-titolo:hover { color: var(--bb-giallo); }

.bb-widget-episodio-img {
    border-radius: 6px;
    overflow: hidden;
    display: block;
}

/* Stessa difesa della copertina del lettore: vedi il commento piu' sopra. */
.bb-widget-episodio-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.bb-widget-episodio-meta::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bb-rosso);
    margin-right: 6px;
    vertical-align: middle;
}

/* Facade dei player a clic */
.bb-player-avvia {
    background: var(--bb-giallo);
    color: var(--bb-scuro);
    border-radius: 40px;
    transition: background-color .15s ease, color .15s ease;
}

.bb-player-avvia:hover { background: var(--bb-rosso); color: #fff; }
.bb-player-avvia:focus-visible { outline-color: var(--bb-giallo); }

/* Pulsanti di iscrizione: icona + nome del servizio */
.bb-iscriviti-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 20px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.bb-iscriviti-link .bb-icona { flex: 0 0 auto; }

/* Al passaggio del mouse ogni servizio prende il proprio colore: si riconosce
   prima di leggere. Sono i colori ufficiali dei marchi, non la palette del
   sito, perche' qui servono a identificare la destinazione. */
.bb-iscriviti-link:hover {
    background: var(--bb-giallo);
    border-color: var(--bb-giallo);
    color: var(--bb-scuro);
}

.bb-iscriviti-spotify:hover { background: #1DB954; border-color: #1DB954; color: #fff; }
.bb-iscriviti-apple:hover   { background: #9933CC; border-color: #9933CC; color: #fff; }
.bb-iscriviti-rss:hover     { background: #F26522; border-color: #F26522; color: #fff; }

@media (max-width: 480px) {
    /* In colonna stretta i tre pulsanti stanno uno per riga */
    .bb-iscriviti-link { display: flex; justify-content: center; margin-right: 0; }
}

/* Copertine degli episodi in elenco */
.bb-episodio-copertina { border-radius: 8px; overflow: hidden; }

/* Copertina del programma in testa al widget della sidebar.
   aspect-ratio + height:auto per resistere al height:auto !important che il
   tema impone alle immagini dentro .sidebar_content (vedi commento sopra). */
.bb-widget-copertina {
    display: block;
    margin: 0 0 14px;
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
}

.bb-widget-copertina img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.bb-widget-copertina:hover img { transform: scale(1.03); }

/* ------------------------------------------------------------------
   Titolo nascosto sull'immagine di testata

   Si attiva dalla casella "Immagine di testata" nella schermata della pagina.
   Serve quando il titolo e' gia' disegnato dentro l'immagine.

   NON si usa display:none: il titolo e' l'unico <h1> della pagina, e toglierlo
   dal documento significherebbe lasciare la pagina senza intestazione di primo
   livello — un danno per i motori di ricerca e per i lettori di schermo.
   Si sposta invece fuori dallo schermo con la tecnica usata da WordPress per
   .screen-reader-text: resta leggibile alle tecnologie assistive, sparisce
   alla vista.
   ------------------------------------------------------------------ */
/* --- Testata delle categorie ------------------------------------------------

   Il tema disegna l'immagine grande solo per pagine e articoli: aggiunge la
   classe .hasbg a #page_caption e su quella classe appende tutto il resto.
   Sulle categorie non lo fa affatto (il perche' e' spiegato in
   inc/testata-categoria.php), quindi qui si replicano le SUE regole, una per
   una, per ottenere una testata indistinguibile da quella delle pagine.

   Riferimenti nel tema: css/screen.css righe 2763 (contenitore), 2796 (velo),
   2837 (posizione del titolo), 2874 (descrizione senza riga sopra). */

body.bb-cat-testata #page_caption {
    position: relative;
    height: 500px;
    width: 100%;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 2;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* Velo scuro identico a quello del tema (screen.css:2796) */
body.bb-cat-testata #page_caption::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: linear-gradient(transparent 0%, transparent 50%,
                      rgba(0,0,0,.10) 60%, rgba(0,0,0,.40) 93%, rgba(0,0,0,.59) 100%);
    z-index: 2;
}

/* bottom:30px come il tema, non 0: era questo a far sembrare il testo
   schiacciato sul bordo inferiore. */
body.bb-cat-testata #page_caption .page_title_wrapper {
    z-index: 3;
    position: absolute;
    bottom: 30px;
    width: 100%;
}

body.bb-cat-testata #page_caption .page_title_wrapper .page_title_inner {
    vertical-align: middle;
    width: 100%;
}

body.bb-cat-testata #page_caption h1 {
    color: #fff;
    float: none;
    margin: auto;
}

/* .page_tagline ha border-top e padding-top per l'uso su fondo chiaro
   (screen.css:2863). Sopra un'immagine il tema li azzera: senza questa regola
   resta una riga grigia fra il nome della categoria e la descrizione, che
   sulle pagine non c'e'. */
body.bb-cat-testata #page_caption .page_tagline,
body.bb-cat-testata #page_caption .page_tagline p {
    color: #fff;
    border: 0;
    margin-top: 0;
    padding-top: 0;
}

.bb-testata-senza-titolo #page_caption .page_title_wrapper h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Senza il titolo il blocco resta con la sua spaziatura, e l'immagine
   sembrerebbe sbilanciata verso il basso: si azzera. */
.bb-testata-senza-titolo #page_caption .page_title_wrapper,
.bb-testata-senza-titolo #page_caption .page_title_inner {
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
}

/* ------------------------------------------------------------------
   Titolo sotto la foto (griglia a due colonne della home)

   Non basta invertire l'ordine nel markup: il tema applica
   .post_img { float: left } (css/screen.css), e un elemento flottante esce
   dal flusso normale — il titolo che lo segue nel DOM continua a risalire in
   cima al blocco. Qui il float si annulla, cosi' l'ordine del markup vale
   davvero. Verificato: senza questa regola il titolo restava sopra la foto
   nonostante il DOM fosse corretto.
   ------------------------------------------------------------------ */
.bb-post--titolo-sotto .post_img.static {
    float: none;
    width: 100%;
    margin: 0;
}

.bb-post--titolo-sotto .post_header_title {
    margin-top: 18px;
}

/* Nella colonna stretta l'immagine deve adattarsi: il tema stampa
   larghezza e altezza in pixel direttamente nell'attributo style. */
.bb-post--titolo-sotto .post_img.static img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* ------------------------------------------------------------------
   Stampa e TV — rassegna di video, radio e stampa

   Usa i COLORI DEL TEMA, non quelli del podcast: il giallo e il rosso sono
   l'identita' del programma, questa e' una pagina del sito.
   Il colore d'accento arriva dal Personalizzatore (tg_link_color, #be9656 di
   serie) tramite la variabile --bb-tema-accento, definita in inc/rassegna.php.
   Restano le forme del linguaggio comune: angoli stondati, schede, sollevamento
   al passaggio del mouse.
   ------------------------------------------------------------------ */

.bb-rassegna-intro { margin-bottom: 2em; }

/* --- Fascia dei numeri -----------------------------------------------------
   Due schede in vetro su una pila di strati sfalsati. Il fondo di ciascuna e'
   un mesh gradient sfocato dentro la scheda stessa: a differenza di
   backdrop-filter non dipende da cosa c'e' dietro, quindi funziona anche sul
   bianco piatto del tema.
   Tavolozza: grafite sul numero principale, oro del tema sul secondo. */

.bb-grana-def { position: absolute; width: 0; height: 0; overflow: hidden; }

.bb-numeri {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    /* Strette e centrate: a piena larghezza le schede diventavano due fasce
       orizzontali e il numero si perdeva nel vuoto a destra. */
    max-width: 680px;
    margin: 0 auto 3.2em;
}

.bb-pila {
    position: relative;
    min-height: 260px;
    padding-top: 22px;
    perspective: 1100px;
    /* isolation: il mix-blend-mode della grana deve restare dentro la scheda
       e non fondersi con il resto della pagina */
    isolation: isolate;
}

.bb-strato {
    position: absolute;
    height: 226px;
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(40, 36, 28, .07);
    transform-origin: center bottom;
    pointer-events: none;
}

.bb-strato--fondo { inset: 0 30px auto;   opacity: .72; transform: scale(.9); }
.bb-strato--mezzo { inset: 11px 16px auto; opacity: .86; transform: scale(.95); }

.bb-num-scheda {
    position: absolute;
    inset: 22px 0 0;
    height: 238px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 22px 24px 20px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 28px;
    box-shadow: 0 30px 70px -30px rgba(40, 32, 18, .46),
                0 8px 24px rgba(40, 32, 18, .12),
                inset 0 1px 0 rgba(255, 255, 255, .72);
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1),
                box-shadow .55s cubic-bezier(.2, .8, .2, 1);
}

/* Il colore: sfocato e sovradimensionato, cosi' i bordi delle macchie non
   si vedono mai contro il bordo della scheda. */
.bb-num-scheda::before {
    content: '';
    position: absolute;
    inset: -18%;
    background: var(--bb-mesh);
    filter: blur(18px) saturate(115%);
    transform: scale(1.08);
    pointer-events: none;
}

/* Il riflesso: e' questo, piu' del resto, a far leggere la superficie come
   vetro invece che come rettangolo colorato. */
.bb-num-scheda::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 27%, transparent 48%),
                linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%, rgba(0,0,0,.07));
    pointer-events: none;
}

.bb-num-scheda > *:not(.bb-grana) { position: relative; z-index: 2; }

/* Il testo delle schede deve restare bianco. Le regole di testo del tema
   partono da #page_content_wrapper e battono per specificita' il "color"
   dichiarato su .bb-num-scheda: senza questo blocco le cifre uscivano grigie
   (misurate: 136,136,136 invece di bianco). */
#page_content_wrapper .inner .bb-num-scheda,
#page_content_wrapper .inner .bb-num-scheda .bb-num-alto,
#page_content_wrapper .inner .bb-num-scheda .bb-num-cifra,
#page_content_wrapper .inner .bb-num-scheda .bb-valore {
    color: #fff;
}

#page_content_wrapper .inner .bb-num-scheda .bb-num-nota {
    color: rgba(255, 255, 255, .92);
}

#page_content_wrapper .inner .bb-num-scheda .bb-num-alto svg {
    stroke: #fff;
}

.bb-grana {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100% !important; /* supera height:auto !important del tema (grid.css:417) */
    opacity: .21;
    mix-blend-mode: soft-light;
    pointer-events: none;
}

.bb-num-alto {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    /* Crenatura ridotta salendo di corpo: a 15px la spaziatura di prima
       allargava troppo l'etichetta. */
    letter-spacing: .10em;
    text-transform: uppercase;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .12);
}

.bb-num-alto svg { width: 20px; height: 20px; flex: 0 0 auto; }

.bb-num-cifra {
    display: flex;
    align-items: center;
    /* Serif come nell'anteprima approvata: le cifre in grazie legano la
       fascia al carattere dei titoli invece di sembrare un cruscotto. */
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 92px;
    line-height: .9;
    font-weight: 700;
    letter-spacing: -.05em;
    /* cifre a larghezza fissa: senza, il numero balla mentre si anima */
    font-variant-numeric: tabular-nums;
    text-shadow: 0 6px 30px rgba(0, 0, 0, .13);
}

.bb-num-nota {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .3);
    font-size: 15px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .92);
}

/* Grafite: il numero principale */
.bb-pila--uno {
    --bb-mesh: radial-gradient(85% 70% at 75% 12%, rgba(255,255,255,.30), transparent 60%),
               radial-gradient(85% 78% at 12% 30%, rgba(92,96,104,.95), transparent 66%),
               radial-gradient(88% 90% at 72% 90%, rgba(48,50,56,.75), transparent 68%),
               linear-gradient(145deg, #6b6f78 0%, #4c5058 48%, #33363d 100%);
}
.bb-pila--uno .bb-strato--fondo { background: linear-gradient(135deg, #e7e8ea, #d6d8dc); }
.bb-pila--uno .bb-strato--mezzo { background: linear-gradient(135deg, #b9bcc2, #9599a1); }

/* Grafite chiaro: il secondo numero.
   Non si va piu' chiari di cosi': il testo piccolo della nota e' bianco, e
   sul tono medio di questa scheda il contrasto e' circa 4,7:1 — appena sopra
   la soglia di leggibilita'. Schiarendo ancora scenderebbe sotto. */
.bb-pila--due {
    --bb-mesh: radial-gradient(85% 70% at 75% 12%, rgba(255,255,255,.34), transparent 60%),
               radial-gradient(85% 78% at 12% 30%, rgba(134,139,148,.95), transparent 66%),
               radial-gradient(88% 90% at 72% 90%, rgba(96,101,110,.72), transparent 68%),
               linear-gradient(145deg, #8a8f98 0%, #6f747d 48%, #5b6069 100%);
}
.bb-pila--due .bb-strato--fondo { background: linear-gradient(135deg, #eeeff1, #e0e2e6); }
.bb-pila--due .bb-strato--mezzo { background: linear-gradient(135deg, #c9ccd2, #adb1b9); }

@media (max-width: 700px) {
    .bb-numeri { grid-template-columns: 1fr; gap: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .bb-num-scheda { transition-duration: .001ms; }
}

/* --- Fascia delle testate in evidenza --------------------------------------
   Loghi in grigio, colore al passaggio: la fila deve leggersi come un blocco
   unico e non come otto marchi che si contendono l'attenzione. E' la stessa
   convenzione delle pagine "press" delle testate serie. */
.bb-giostra {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    /* Respiro sotto: il carosello e le linguette sono due blocchi diversi e
       attaccati sembravano un'unica barra di navigazione. */
    margin: 26px 0 2.6em;
    padding: 18px 0 6px;
    border-top: 1px solid #eee;
}

/* Una sola riga che scorre. overflow-x: auto e non un trasformare a mano:
   cosi' funziona gia' con trackpad, dito e tastiera, e le frecce restano
   una comodita' in piu' invece che l'unico modo per avanzare. */
.bb-testate {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 38px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    padding: 6px 2px;
    /* la barra di scorrimento si nasconde, lo scorrimento resta */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bb-testate::-webkit-scrollbar { display: none; }

.bb-testate > * { scroll-snap-align: center; flex: 0 0 auto; }

/* Il riquadro riceve il fuoco da tastiera: e' un'area scorrevole, deve essere
   raggiungibile anche senza mouse (WCAG 2.1.1). */
.bb-testate:focus-visible {
    outline: 2px solid var(--bb-tema-accento, #be9656);
    outline-offset: 3px;
}

.bb-giostra-freccia {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid #e2e2e2;
    border-radius: 50%;
    background: #fff;
    color: #777;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease;
}

.bb-giostra-freccia:hover:not(:disabled) {
    border-color: var(--bb-tema-accento, #be9656);
    color: var(--bb-tema-accento, #be9656);
}

.bb-giostra-freccia:focus-visible {
    outline: 2px solid var(--bb-tema-accento, #be9656);
    outline-offset: 2px;
}

/* Alle estremita' la freccia resta al suo posto ma si spegne: se sparisse,
   la fila salterebbe di lato a ogni scorrimento. */
.bb-giostra-freccia:disabled { opacity: .25; cursor: default; }

.bb-giostra-freccia svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
    .bb-testate { scroll-behavior: auto; }
    .bb-giostra-freccia { transition: none; }
}

.bb-testata {
    display: block;
    line-height: 1;
    opacity: .55;
    filter: grayscale(1);
    transition: opacity .18s ease, filter .18s ease;
}

/* Il selettore parte da #page_content_wrapper non per vezzo: la regola del
   tema e' "#page_content_wrapper .inner .sidebar_content.full_width img
   { height: auto !important }" (css/grid.css:417). A parita' di !important
   decide la specificita', e senza l'id qui il tema vincerebbe comunque. */
#page_content_wrapper .inner .bb-testata img,
.bb-testata img {
    display: block;
    /* --bb-h la calcola il template logo per logo, pareggiando l'area
       occupata: vedi il commento in page-stampa-e-tv.php. Niente max-width,
       che rimetterebbe in riga i marchi larghi schiacciandoli.
       L'!important serve a superare css/grid.css:417 del tema padre, che
       impone height:auto !important su ogni immagine del contenuto. */
    height: var(--bb-h, 26px) !important;
    width: auto;
    max-width: none;
}

/* Ripiego quando il logo manca: il nome, nella grafica della fascia. */
.bb-testata--nome span {
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #666;
}

.bb-testata:hover,
.bb-testata:focus-visible {
    opacity: 1;
    filter: grayscale(0);
}

.bb-testata:focus-visible {
    outline: 2px solid var(--bb-tema-accento, #be9656);
    outline-offset: 5px;
}

/* Chi ha chiesto meno animazioni non subisce la transizione */
@media (prefers-reduced-motion: reduce) {
    .bb-testata { transition: none; }
}

.bb-sezione { margin-bottom: 3.5em; }

/* --- Video e TV: griglia --- */
.bb-video-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
}

.bb-video-scheda {
    /* Colonna a piena altezza: serve perche' il piede possa essere spinto in
       fondo con margin-top:auto e restare allineato fra schede con titoli di
       lunghezza diversa. */
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.bb-video-scheda:hover {
    border-color: var(--bb-tema-accento);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,.06);
}

.bb-video-img {
    display: block;
    position: relative;
    background: #eee;
    line-height: 0;
    /* rapporto fisso: le miniature YouTube sono 16:9 ma non tutte identiche,
       e senza questo la griglia risulterebbe irregolare */
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.bb-video-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.bb-video-scheda:hover .bb-video-img img { transform: scale(1.05); }

.bb-video-vuota {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #ccc;
}

/* Cerchio con il triangolo. Sta nel piede della scheda, non sopra la
   miniatura: sovrapposto copriva un volto o una scritta a seconda del
   fotogramma, e cambiava posizione da scheda a scheda. */
.bb-video-play {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bb-tema-accento);
    color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s ease, background-color .18s ease;
}

.bb-video-play .bb-icona { margin-left: 2px; }
.bb-video-scheda:hover .bb-video-play { transform: scale(1.1); background: #222; color: #fff; }

.bb-video-testo {
    display: flex;
    flex-direction: column;
    /* occupa lo spazio residuo: e' cio' che permette al piede di scendere */
    flex: 1 1 auto;
    padding: 14px 16px 16px;
}

/* Piede: simbolo a sinistra, verbo a destra, alla stessa altezza su tutte
   le schede della riga. */
.bb-video-piede {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
}

.bb-video-testata {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--bb-tema-accento);
    margin-bottom: 6px;
}

.bb-video-titolo {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.45;
    color: #222;
}

.bb-video-data {
    display: block;
    margin-top: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #aaa;
}

/* --- Radio e audio --- */
.bb-audio-elenco {
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    overflow: hidden;
}

.bb-audio-voce {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #eee;
    border-left: 3px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
}

.bb-audio-voce:last-child { border-bottom: 0; }
.bb-audio-voce:hover { background: var(--bb-tema-accento-tenue); border-left-color: var(--bb-tema-accento); }

.bb-audio-icona {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bb-tema-accento);
    color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bb-audio-icona .bb-icona { margin-left: 2px; }
.bb-audio-voce:hover .bb-audio-icona { background: #222; color: #fff; }

.bb-audio-testo { flex: 1 1 auto; min-width: 0; }

.bb-audio-titolo {
    display: block;
    font-size: 15px;
    line-height: 1.4;
    color: #222;
}

.bb-audio-testata {
    display: block;
    font-size: 12px;
    color: #999;
    margin-top: 3px;
}

.bb-audio-data {
    flex: 0 0 auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #aaa;
}

/* --- Rassegna stampa --- */
.bb-stampa-cerca {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin-bottom: 6px;
    border: 1px solid #e1e1e1;
    border-radius: 30px;
}

.bb-stampa-cerca:focus-within { border-color: var(--bb-tema-accento); }
.bb-stampa-cerca-icona { display: flex; color: #bbb; }
.bb-stampa-cerca:focus-within .bb-stampa-cerca-icona { color: var(--bb-tema-accento); }

.bb-stampa-cerca input[type=search] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 15px;
    padding: 4px 0;
}

.bb-stampa-cerca input[type=search]:focus { outline: 0; }

.bb-stampa-conteggio {
    flex: 0 0 auto;
    font-size: 12px;
    color: #999;
    font-variant-numeric: tabular-nums;
}

.bb-stampa-elenco {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bb-stampa-voce {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 16px;
    border-bottom: 1px solid #eee;
    border-left: 3px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
}

.bb-stampa-voce:hover { background: var(--bb-tema-accento-tenue); border-left-color: var(--bb-tema-accento); }
.bb-stampa-voce[hidden] { display: none; }

.bb-stampa-voce a { text-decoration: none; flex: 1 1 auto; min-width: 0; }

.bb-stampa-titolo {
    font-size: 15px;
    line-height: 1.5;
    color: #222;
}

.bb-stampa-voce:hover .bb-stampa-titolo { color: var(--bb-tema-accento); }

.bb-stampa-meta {
    flex: 0 0 auto;
    text-align: right;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #aaa;
    white-space: nowrap;
}

.bb-stampa-testata { color: #888; }

.bb-stampa-data::before {
    content: '·';
    margin: 0 6px;
    color: #ccc;
}

.bb-stampa-nessuno {
    padding: 24px 16px;
    color: #999;
    font-style: italic;
}

@media (max-width: 700px) {
    .bb-numeri { flex-direction: column; align-items: flex-start; }
    .bb-testate { justify-content: flex-start; gap: 12px 24px; }
    /* Su schermo stretto tutto scende dell'80%, mantenendo le proporzioni
       relative calcolate dal template. */
    .bb-testata img { transform: scale(.8); transform-origin: left center; }
    .bb-video-griglia { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
    .bb-stampa-voce { flex-direction: column; gap: 4px; }
    .bb-stampa-meta { text-align: left; }
    .bb-audio-data { display: none; }
}

/* --- Verbo d'azione: dice cosa costa il clic prima che avvenga --- */
.bb-azione {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--bb-tema-accento);
}

.bb-azione::after { content: ' \2192'; }

.bb-azione--riga {
    flex: 0 0 auto;
    margin-top: 0;
    opacity: 0;
    transition: opacity .15s ease;
}

.bb-audio-voce:hover .bb-azione--riga { opacity: 1; }

/* --- Filtri della rassegna stampa --- */
.bb-filtri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.bb-filtri .bb-stampa-cerca { flex: 1 1 260px; margin-bottom: 0; }

.bb-filtro-testata {
    flex: 0 1 250px;
    max-width: 250px;
    padding: 9px 14px;
    border: 1px solid #e1e1e1;
    border-radius: 30px;
    background: #fff;
    font-size: 14px;
    color: #222;
}

.bb-filtro-testata:focus { outline: 0; border-color: var(--bb-tema-accento); }

/* Il conteggio mostra sempre il denominatore quando un filtro e' attivo:
   rende evidente che non si sta guardando tutto. */
.bb-conteggio {
    flex: 0 0 auto;
    margin: 0;
    font-size: 13px;
    color: #888;
    font-variant-numeric: tabular-nums;
}

.bb-pulisci {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 4px 0;
    font-size: 13px;
    color: var(--bb-tema-accento);
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
}

.bb-pulisci:hover { color: #222; }

/* --- Navigazione per anno --- */
.bb-anni {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding: 14px 0;
    margin-bottom: 6px;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
}

.bb-anni-etichetta {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
}

.bb-anni a {
    font-size: 14px;
    color: #222;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.bb-anni a:hover { color: var(--bb-tema-accento); text-decoration: underline; }
.bb-anni a[hidden] { display: none; }

/* --- Gruppi per anno --- */
.bb-gruppo[hidden] { display: none; }

/* L'intestazione resta in alto mentre si scorre: e' l'unico elemento della
   metafora "linea del tempo" che paga davvero, e non costa larghezza. */
.bb-gruppo-titolo {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 26px 0 0;
    padding: 10px 0 8px;
    background: #fff;
    border-bottom: 2px solid #222;
    font-size: 17px;
    letter-spacing: 1px;
}

.bb-gruppo-conteggio {
    font-size: 12px;
    font-weight: 400;
    color: #999;
    letter-spacing: 0;
}

.bb-gruppo-conteggio::before { content: '('; }
.bb-gruppo-conteggio::after  { content: ')'; }

.bb-gruppo-nota {
    margin: 10px 0 0;
    font-size: 13px;
    color: #888;
    font-style: italic;
}

/* --- Nessun risultato ---
   Ben visibile e senza ironia: la ricerca con eyetracking mostra che i
   messaggi piccoli, schiacciati fra altri elementi, non vengono guardati. */
.bb-nessuno {
    padding: 40px 20px;
    text-align: center;
    border: 1px dashed #e1e1e1;
    border-radius: 12px;
    margin-top: 20px;
}

.bb-nessuno[hidden] { display: none; }

.bb-nessuno-titolo {
    font-size: 17px;
    color: #222;
    margin: 0 0 6px;
}

.bb-nessuno p { color: #888; margin: 0 0 14px; }

@media (max-width: 700px) {
    .bb-filtri { flex-direction: column; align-items: stretch; }
    .bb-filtro-testata { max-width: 100%; flex-basis: auto; }
    .bb-conteggio { text-align: center; }
    .bb-gruppo-titolo { font-size: 15px; }
}

/* ------------------------------------------------------------------
   Schede di sezione della pagina Stampa e TV

   Hanno l'aspetto di schede ma sono LINK a indirizzi diversi, non pannelli
   che si scambiano in JavaScript. Vedi il commento in page-stampa-e-tv.php
   per il perche'.
   ------------------------------------------------------------------ */
.bb-schede {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 2.6em;
    padding: 5px;
    /* Contenitore pieno: la barra si legge come un gruppo di scelte, non come
       tre link sciolti sopra una riga. Era questo a renderle poco evidenti. */
    background: #f0f0f1;
    border-radius: 12px;
}

.bb-scheda {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 11px 20px;
    text-decoration: none;
    color: #6c6f76;
    border-radius: 9px;
    transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.bb-scheda:hover { color: #24262b; background: rgba(255, 255, 255, .7); }

/* La sezione attiva e' PIENA, non sottolineata: il riempimento si vede a
   colpo d'occhio anche in visione periferica, una riga da 3px no.
   Il grafite e' lo stesso delle schede dei numeri qui sopra. */
.bb-scheda--attiva,
.bb-scheda--attiva:hover {
    color: #fff;
    background: linear-gradient(145deg, #5a5f68 0%, #43474f 100%);
    box-shadow: 0 2px 6px rgba(40, 44, 52, .28);
}

.bb-scheda-nome { font-size: 15px; letter-spacing: .3px; }
.bb-scheda--attiva .bb-scheda-nome { font-weight: 700; }

.bb-scheda-quante {
    font-size: 12px;
    color: #a2a5ac;
    font-variant-numeric: tabular-nums;
}

/* Sull'attiva il conteggio resta bianco velato: l'oro su grafite scenderebbe
   sotto la soglia di contrasto per un testo da 12px. */
.bb-scheda--attiva .bb-scheda-quante { color: rgba(255, 255, 255, .72); }

.bb-scheda:focus-visible {
    outline: 2px solid var(--bb-tema-accento);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    /* In colonna stretta le tre schede stanno una per riga: affiancate,
       "Rassegna stampa" andrebbe a capo dentro la propria linguetta. */
    .bb-schede { flex-direction: column; gap: 0; border-bottom: 0; }
    .bb-scheda {
        justify-content: space-between;
        padding: 14px 4px;
        border-bottom: 1px solid #e1e1e1;
        margin-bottom: 0;
    }
    .bb-scheda--attiva {
        border-bottom-color: var(--bb-tema-accento);
        border-bottom-width: 2px;
    }
}


/* --- Stili dei blocchi ------------------------------------------------------
   Le stesse impaginazioni delle pagine, ma applicabili con un clic dalla
   barra laterale dell'editor invece che scrivendo HTML. Registrati in
   inc/blocchi.php.

   NOTA: queste regole esistono anche in css/editor.css, con il prefisso
   .editor-styles-wrapper al posto di #page_content_wrapper. Se si cambia
   qui, va cambiato anche li'. */

#page_content_wrapper .inner .is-style-bb-occhiello {
    margin-bottom: 6px !important;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bb-tema-accento, #be9656);
}

#page_content_wrapper .inner .is-style-bb-sommario {
    max-width: 42em;
    margin-bottom: 1.6em !important;
    font-size: 20px !important;
    line-height: 1.6 !important;
    color: #3a3a3a;
}

#page_content_wrapper .inner .is-style-bb-nota {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #6b6e75;
}

/* La citazione in rilievo annulla tre scelte del tema: maiuscolo, spaziatura
   e soprattutto opacity:.4, che sbiadisce l'intero elemento e che nessun
   colore dichiarato sul figlio potrebbe recuperare. */
#page_content_wrapper .inner .wp-block-quote.is-style-bb-rilievo {
    margin: 2em 0;
    padding: 0 0 0 22px;
    border-left: 3px solid var(--bb-tema-accento, #be9656);
    background: none;
    opacity: 1;
    text-transform: none;
    letter-spacing: 0;
}

#page_content_wrapper .inner .wp-block-quote.is-style-bb-rilievo p {
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 20px !important;
    line-height: 1.6 !important;
    font-style: italic;
    color: #2e2e2e;
}

#page_content_wrapper .inner .wp-block-group.is-style-bb-scheda {
    padding: 20px 22px;
    background: #f7f7f8;
    border-radius: 10px;
}

#page_content_wrapper .inner .wp-block-list.is-style-bb-tappe {
    margin: 0;
    padding: 0;
    list-style: none;
}

#page_content_wrapper .inner .wp-block-list.is-style-bb-tappe li {
    padding: 10px 0;
    border-top: 1px solid #e6e6e8;
    font-size: 14px !important;
    line-height: 1.45 !important;
    list-style: none;
}

#page_content_wrapper .inner .wp-block-list.is-style-bb-tappe li:first-child {
    border-top: 0;
    padding-top: 0;
}

#page_content_wrapper .inner .wp-block-list.is-style-bb-tappe strong { color: #222; }



/* --- Formati in linea --------------------------------------------------------
   I pulsanti aggiuntivi della barretta di formattazione (js/formati.js).
   Valgono per una porzione di testo, non per l'intero paragrafo.

   NOTA: le stesse regole stanno in css/editor.css con il prefisso
   .editor-styles-wrapper. Se si cambia qui, va cambiato anche li'. */

#page_content_wrapper .inner .bb-maiuscoletto {
    /* font-variant e non text-transform: le maiuscole vere restano tali e
       il testo copiato resta leggibile. Con text-transform si copierebbe
       tutto minuscolo. */
    font-variant-caps: small-caps;
    letter-spacing: .04em;
}

#page_content_wrapper .inner mark.bb-evidenziato {
    padding: 1px 3px;
    background: rgba(190, 150, 86, .22);
    color: inherit;
}

#page_content_wrapper .inner .bb-piccolo {
    font-size: .82em;
    line-height: inherit;
}

#page_content_wrapper .inner .bb-tenue {
    color: #82858c;
}

/* ============================================================
   Intro animata del logo (solo home) — vedi inc/logo-intro.php
   Il video parte sopra il logo statico e a fine riproduzione
   sfuma lasciando il logo. Se il video non parte, resta il logo.
   ============================================================ */
.bb-logo-intro #custom_logo {
    position: relative;
}
/* Il logo statico non ha transizione: sta SOTTO il video (opaco) e viene
   rivelato istantaneamente quando il video comincia a sfumare. Cosi' non c'e'
   mai un istante in cui si veda il bianco dell'header (niente flash). */
.bb-logo-intro #custom_logo.bb-logo-playing img {
    opacity: 0;
}
.bb-logo-intro #custom_logo .bb-logo-video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none; /* i clic passano al link del logo */
    /* Video WebM con canale alpha (trasparente come il PNG): fondo trasparente,
       niente bordi/ombre. */
    background: transparent;
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
}
.bb-logo-intro #custom_logo .bb-logo-video.bb-show {
    opacity: 1;
}
/* Dissolvenza finale: SOLO il video sfuma (1,0s), rivelando il logo statico
   opaco che sta sotto. E' il crossfade richiesto, senza flash bianco. */
.bb-logo-intro #custom_logo .bb-logo-video.bb-fade-out {
    opacity: 0;
    transition: opacity 1s ease;
}
@media (prefers-reduced-motion: reduce) {
    /* Nessuna animazione: il JS non parte, ma per sicurezza */
    .bb-logo-intro #custom_logo .bb-logo-video { display: none; }
    .bb-logo-intro #custom_logo.bb-logo-playing img { opacity: 1; }
}

/* ============================================================
   Data degli articoli in HOME: trattini decorativi uniformi.

   Il tema disegna UNA linea orizzontale a tutta larghezza dietro
   la data (.post_info_date:before) e la maschera al centro con lo
   sfondo bianco del testo: i due "trattini" visibili ai lati sono
   le estremita' della linea. Difetti: la loro lunghezza dipende
   dalla lunghezza della data (sembrano tutti diversi) e, se la
   data va a capo nella colonna stretta, spariscono del tutto.

   Qui, solo in home: linea del tema disattivata, data forzata su
   una riga, e due trattini di lunghezza FISSA ai lati. Uguali su
   ogni card. (Sulle altre pagine resta il comportamento nativo.)
   ============================================================ */
body.home .post_info_date {
    text-align: center;
}
body.home .post_info_date:before {
    display: none; /* via la linea a tutta larghezza mascherata */
}
body.home .post_info_date span {
    display: inline-flex;
    align-items: center;
    gap: .9em;
    padding: 0;
    background: transparent !important; /* niente maschera bianca */
    white-space: nowrap;                /* la data non va piu' a capo */
}
body.home .post_info_date span::before,
body.home .post_info_date span::after {
    content: "";
    flex: 0 0 auto;
    width: 26px;
    height: 1px;
    background: #be9656; /* oro del tema, come il testo della data */
}

/* Contenitore data: il tema lo tiene largo 30% (20% per l'articolo grande) con
   margin:auto. Con la data su una riga + trattini quel 30% viene superato e la
   riga sborda, sembrando decentrata. Larghezza automatica (!important per
   battere i vari width fissi del tema): cosi' .post_info_date, gia' centrato,
   resta centrato davvero. */
body.home .post_detail.post_date {
    width: auto !important;
}

/* Titolo delle card a DUE COLONNE: come nelle pagine categoria (16px). Le card
   della home non usano .three_cols del tema, quindi cadono sul 24px base: qui
   le riallineo alla misura degli archivi categoria. L'articolo in evidenza a
   piena larghezza resta 24px (non e' in .bb-grid-2). */
body.home .bb-grid-2 .post_header h5 {
    font-size: 16px;
}

/* Nome della categoria che fa da separatore di sezione (Aforismi, ...):
   font Lustria corsivo del tema, misura intermedia (11px nativi -> 16px, non
   i 22px che risultavano troppo grandi), NON tutto maiuscolo. Il colore resta
   quello nativo del tema (#222): non si tocca .post_info_cat a. La spaziatura
   fra lettere serviva al maiuscolo, in minuscolo la si azzera. */
body.home .post_info_cat.bb-cat-title {
    font-size: 18px;
    font-family: 'Lustria', 'Georgia', Arial, Verdana, sans-serif;
    font-style: italic;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
}