/* Foglio di stile del sito pubblico.
   Font: Montserrat (richiesta esplicita, 12/8/2026) in TUTTO il sito
   pubblico E il backoffice (vedi admin.css) — auto-ospitato in
   assets/fonts/montserrat/ invece che via Google Fonts CDN, per restare
   coerenti con la filosofia "nessuna dipendenza esterna" già seguita qui.
   Un solo file variabile copre tutti i pesi 300-800 usati nel sito (300,
   400, 500, 600, 700, 800), più un file statico per il solo corsivo
   (usato a peso 400, es. .aut-info-instrumentation). Licenza OFL, vedi
   assets/fonts/montserrat/OFL.txt.
   Niente più stack di font di sistema come fallback (richiesta esplicita,
   12/8/2026: "solo il nuovo font", via il vecchio anche come fallback) —
   resta solo "sans-serif" generico, nel caso limite in cui Montserrat non
   si carichi affatto. "font-display: optional" invece di "swap": con
   "swap" il browser mostra SUBITO il font di fallback e lo scambia con
   Montserrat quando arriva, il "flash" di testo nel font sbagliato
   segnalato da Cristiano (visibile anche svuotando la cache, perché è il
   comportamento normale di "swap", non un problema di cache). "optional"
   invece aspetta pochissimo (circa 100ms, i file sono minuscoli e locali,
   quasi sempre pronti in tempo) e se il font è già in cache lo applica da
   subito senza nessuno scambio a vista: preload sotto (vedi layout.php/
   admin/views/layout.php) aiuta a farcela entro quei 100ms fin dal primo
   caricamento. */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: optional;
    src: url('../fonts/montserrat/montserrat-variable.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 400;
    font-display: optional;
    src: url('../fonts/montserrat/montserrat-italic-400.woff2') format('woff2');
}

:root {
    --color-text: #222;
    --color-bg: #fff;
    --color-accent: #8a2b2b;
    --color-muted: #666;
    --color-border: #e6e6e6;
    --color-surface: #f7f6f4;
    --max-width: 1534px; /* 1180px + 30%, richiesto per schermi grandi */
    --header-max-width: 1841px; /* larghezza del sito + 20%, per un header più incisivo */
    --header-text: #ece8e0; /* grigio molto chiaro/panna, mai bianco puro */
    --font-sans: 'Montserrat', sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.65;
    /* Rete di sicurezza per .section-fullbleed qui sotto: il breakout a
       100vw può risultare un filo più largo del reale spazio disponibile
       quando la pagina ha una scrollbar verticale (100vw la include, il
       body no), creando altrimenti uno scroll orizzontale impercettibile
       di pochi pixel. */
    overflow-x: hidden;
}

.wrap {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Sezione che rompe il contenitore in cui vive (per quanto stretto:
   .main-col dentro .wrap, a sua volta magari ridotto all'80% da
   .page-layout--wide-main) per arrivare da un bordo all'altro dello
   SCHERMO, non del contenitore — usata dal tipo di sezione "banner"
   (Fascia, 13/8/2026: home-section--banner/page-special-section--banner)
   per comportarsi come l'Hero pur potendo stare in qualunque punto
   dell'ordine delle sezioni (l'Hero invece esce di proposito dal markup,
   vedi partials/home-hero.php — qui non è possibile, l'ordine è quello
   scelto in admin). Tecnica standard del "full-bleed breakout". */
.section-fullbleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Riga con un solo pulsante, allineabile a sinistra/centro/destra — usata
   dal tipo di sezione "button_bar" ("Pulsante", 13/8/2026), generica per
   Pagine Speciali/Home/Articoli: dentro rispettivamente
   .page-special-section-inner, .home-section-inner, .post-section, vedi
   page-special.php/home.php/post.php. Riusa .home-cell-button/
   .home-cell-button--primary già esistenti (self-contained, nessuna
   dipendenza dal contenitore) invece di uno stile proprio. */
.section-button-row { display: flex; padding: 0.5rem 0; }
.section-button-row--left { justify-content: flex-start; }
.section-button-row--center { justify-content: center; }
.section-button-row--right { justify-content: flex-end; }

/* Pillola IT/EN (14/8/2026, prova solo sul tipo "richtext" delle Pagine
   Speciali): alterna due blocchi di testo, puro CSS (checkbox nascosto +
   :checked, stessa tecnica del faretto "Anteprima"/dell'interruttore
   Pubblicata-Bozza in admin), zero JavaScript. .lang-toggle-wrap va
   position:relative per ancorare la pillola in alto a destra SENZA
   dipendere dal contenitore che la ospita (self-contained, riusabile
   ovunque). L'input deve restare PRIMA dei blocchi di testo e della
   label nel markup: i selettori "~" funzionano solo in avanti tra
   fratelli. */
/* La pillola sta "a cavallo" di un bordo VERO (non del bordo esterno della
   card, irraggiungibile in CSS puro perché .page-special-section--boxed80
   ha overflow:hidden per arrotondare gli angoli — un elemento non può
   sporgere fuori da un antenato con overflow:hidden, nemmeno se
   position:absolute): un filo sottile disegnato apposta in cima al blocco
   di testo, con spazio sopra (distacco dal bordo della card/dal titolo) e
   sotto (distacco dal testo, che altrimenti sembrerebbe "sotto" la
   pillola) — richiesta esplicita di Cristiano dopo un primo tentativo che
   sedeva la pillola troppo vicina al testo. */
.lang-toggle-wrap {
    position: relative;
    margin-top: 0.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}
/* Sfondo a immagine: testo forzato bianco (.page-special-section--image),
   stesso principio del divisore di .page-special-section-subtitle qui
   sopra — un bordo quasi nero sarebbe troppo poco visibile su una foto. */
.page-special-section--image .lang-toggle-wrap { border-top-color: rgba(255, 255, 255, 0.3); }
.lang-toggle-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.lang-content--en { display: none; }
.lang-toggle-input:checked ~ .lang-content--it { display: none; }
.lang-toggle-input:checked ~ .lang-content--en { display: block; }
.lang-toggle-pill {
    position: absolute;
    /* Spinta in alto, a cavallo del bordo superiore del blocco di testo
       (metà pillola sopra, metà sotto) invece che appoggiata sopra il
       testo — translateY(-50%) la centra sul bordo qualunque sia la sua
       altezza reale, senza un valore fisso da ricalcolare a mano. */
    top: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.lang-toggle-option {
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.lang-toggle-option--it { background: var(--color-accent); color: #fff; }
.lang-toggle-input:checked ~ .lang-toggle-pill .lang-toggle-option--it { background: transparent; color: var(--color-muted); }
.lang-toggle-input:checked ~ .lang-toggle-pill .lang-toggle-option--en { background: var(--color-accent); color: #fff; }

.header-wrap {
    max-width: var(--header-max-width);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Sugli schermi grandi (menu orizzontale, non l'hamburger da mobile) l'ultima
   voce di menu resta sempre ad almeno 150px dal bordo dello schermo, non solo
   dal normale padding di .header-wrap (20px, insufficiente): l'eventuale
   tendina di un sottomenù (.nav-dropdown-menu, si apre verso destra) altrimenti
   rischia di uscire dalla finestra invece di restare visibile — richiesta
   esplicita, 12/8/2026. */
@media (min-width: 761px) {
    .header-wrap {
        padding-right: 150px;
    }
}

a { color: var(--color-accent); }

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

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --- Header --- */

.site-header {
    /* Sfondo (colore/sfumatura/immagine) impostato inline da Impostazioni;
       nero di default — vedi app/views/layout.php. */
    background-color: #000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.35rem 0;
    background-size: cover;
    background-position: center;
}

.site-header-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--header-text);
}

.site-brand-image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.site-title-group {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.site-title {
    font-size: var(--title-font-size, 1.35rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--title-font-color, var(--header-text));
}

.site-subtitle {
    font-size: var(--subtitle-font-size, 0.85rem);
    font-weight: 400;
    color: var(--subtitle-font-color, var(--header-text));
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--header-text); margin: 0 auto; }

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.site-nav a {
    text-decoration: none;
    font-size: var(--menu-font-size, 0.95rem);
    font-weight: 500;
    color: var(--menu-font-color, var(--header-text));
}

.site-nav a:hover,
.site-nav a.is-current,
.nav-dropdown summary:hover { opacity: 0.75; }

@media (max-width: 760px) {
    .nav-toggle { display: flex; }
    .site-nav {
        display: none;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
        padding-top: 1rem;
    }
    .site-nav.is-open { display: flex; }
}

/* --- Corpo: colonna principale 70% + sidebar 25% (era 30%, ristretta del
   5% il 12/8/2026 — richiesta esplicita: i contenuti erano troppo attaccati)
   — il 5% risparmiato va nel gap fra le due colonne, non alla principale,
   che resta 70%. */

.page-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 2.5rem 1.25rem 3rem;
}

@media (min-width: 860px) {
    .page-layout {
        grid-template-columns: 7fr 2.5fr;
        gap: 4rem;
        align-items: start;
    }
    .page-layout--no-sidebar { grid-template-columns: 1fr; }
}

.main-col { min-width: 0; }

/* Homepage senza sidebar (13/8/2026, richiesta esplicita): il contenuto non
   riempie tutto lo spazio liberato dalla sidebar, resta all'80% (come già
   .page-special-image-grid), centrato — vedi $meta['wideMain'] in
   layout.php. Solo la homepage: le altre pagine noSidebar (Pagine Speciali,
   404, CD/Composizioni/Editore) restano piene, non toccate da questa
   regola. */
.page-layout--wide-main .main-col { width: 80%; margin: 0 auto; }

/* Su schermi piccoli (richiesta esplicita, 14/8/2026): l'80% centrato della
   home lascia due bordi vuoti inutili — sotto la soglia dei due colonne
   (vedi @media (min-width: 860px) sopra) il contenuto va a piena larghezza,
   e la sezione "Fascia" (home-section--banner) si nasconde del tutto, non
   pensata per essere così stretta. Solo la homepage: non tocca le Pagine
   Speciali (page-special-section--banner), lì non richiesto. */
@media (max-width: 859px) {
    .page-layout--wide-main .main-col { width: 100%; }
    .home-section--banner { display: none; }
}

/* "404" a caratteri cubitali nel banner header (page-banner-title--huge,
   modificatore facoltativo di .page-banner-title — vedi partials/page-
   banner.php), MOLTO più grande del titolo normale di una Pagina Speciale:
   peso pieno (800, il più marcato del font variabile) invece del 700
   normale, per riempire davvero il banner. */
.page-banner-title--huge {
    font-size: clamp(10rem, 40vw, 22rem);
    font-weight: 800;
}

/* --- Pagina 404 (app/views/404.php): il banner sopra (vedi
   NotFoundController) fa già da titolo — qui sotto solo un blocco leggero
   centrato con la spiegazione e il link alla home. Si auto-centra
   nella colonna piena (noSidebar) con margin:auto + text-align:center,
   qualunque sia la larghezza reale dello schermo. */
.notfound {
    max-width: 460px;
    margin: 3.5rem auto 5rem;
    padding: 0 1.25rem;
    text-align: center;
}
.notfound-title {
    margin: 0 0 0.6rem;
    font-size: 1.4rem;
    font-weight: 600;
}
.notfound-text {
    margin: 0 0 2rem;
    color: var(--color-muted);
}
.notfound-home {
    display: inline-block;
    padding: 0.65rem 1.75rem;
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    color: var(--color-accent);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.notfound-home:hover { background: var(--color-accent); color: #fff; }

h1, h2, h3 { line-height: 1.25; letter-spacing: -0.01em; }
.lead { font-size: 1.15rem; color: var(--color-muted); }

.post-meta { color: var(--color-muted); font-size: 0.88rem; margin: 0 0 0.5rem; }

/* --- Indice del blog (/blog/, titolo/categorie impostabili da
   admin/posts.php), archivi categoria e tag: stessa griglia di card a 2
   colonne, condivisa via views/partials/post-grid.php --- */

.blog-search-summary { color: var(--color-muted); font-size: 0.92rem; margin: -0.5rem 0 1.5rem; }

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    margin-top: 2rem;
}
@media (max-width: 640px) {
    .blog-grid { grid-template-columns: 1fr; }
}

.blog-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.blog-card h3 { margin: 0; font-size: 1.15rem; }
.blog-card h3 a { text-decoration: none; color: var(--color-text); }
.blog-card h3 a:hover { color: var(--color-accent); }

/* L'immagine zooma al passaggio del mouse restando dentro il riquadro
   (overflow:hidden sul contenitore, mai fuori dalle dimensioni date). */
.blog-card-image {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 16 / 9;
}
.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.blog-card-image:hover img { transform: scale(1.08); }

/* Estratto limitato a 3 righe, sempre entro i confini della card. */
.blog-card-excerpt {
    margin: 0;
    color: var(--color-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pulsante "Leggi" sempre in basso a destra della card, anche quando
   titolo/estratto hanno lunghezze diverse tra loro (stesso meccanismo già
   usato per le card "Ultime News" in homepage). */
.blog-card-button {
    align-self: flex-end;
    margin-top: auto;
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    /* Colore/hover/testo personalizzabili da admin/blog-settings.php
       ("Pulsante Leggi"): vuoti = ricadono sui colori di default qui. */
    background: var(--blog-button-bg, var(--color-accent));
    color: var(--blog-button-text, #fff);
}
.blog-card-button:hover {
    /* filter, non opacity: su un colore già scuro (accent di default) uno
       0.88 di opacità sbiadisce appena verso il bianco della pagina — quasi
       impercettibile. brightness scurisce per davvero, così il passaggio
       resta visibile anche quando l'hover non è personalizzato (ricade
       sullo stesso colore del pulsante). */
    filter: brightness(0.87);
    background: var(--blog-button-hover-bg, var(--blog-button-bg, var(--color-accent)));
}

/* Il <nav> occupa già di suo il 100% di .main-col (70% della pagina, la
   sidebar è una colonna a parte) — con justify-content:space-between i
   numeri si distribuiscono su tutta quella larghezza invece di restare
   ammassati a sinistra. Quando le caselle sono meno del massimo (poche
   pagine, niente "…", classe .is-compact aggiunta da post-grid.php) si
   torna invece compatti a sinistra: con pochi numeri, spargerli su tutta la
   riga li fa sembrare persi nello spazio vuoto. */
.blog-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem; margin-top: 2.5rem; }
.blog-pagination.is-compact { justify-content: flex-start; gap: 0.5rem; }
.blog-pagination a {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    text-decoration: none;
    color: var(--color-text);
}
.blog-pagination a.is-current { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.blog-pagination-ellipsis { padding: 0 0.3rem; color: var(--color-muted); }

/* Due <nav> alternativi con lo stesso contenuto (vedi partials/post-grid):
   15 caselle su schermi normali, 6 su schermi piccoli — sceglie il CSS,
   non serve JavaScript. */
.blog-pagination--mobile { display: none; }
@media (max-width: 640px) {
    .blog-pagination--desktop { display: none; }
    .blog-pagination--mobile { display: flex; }
}

/* --- Articolo/pagina singola --- */

.single-post-image, .single-page-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
    margin: 1rem 0 1.5rem;
}

/* Sezioni componibili di un Articolo (13/8/2026 — PostSectionModel, 3 tipi:
   richtext, image_text_right/left). A differenza delle Pagine Speciali
   NIENTE riquadro all'80% (il testo è già ristretto al 70% dalla sidebar,
   sempre presente) e nessun cambio di layout: le sezioni riempiono
   semplicemente tutta la colonna, una sotto l'altra. Un Articolo con
   un'unica sezione "richtext" senza titolo/sfondo (caso più comune, sia
   quelli migrati dal vecchio "Contenuto" sia i nuovi) resta PIXEL-IDENTICO
   a prima: niente margine extra (:last-child azzera quello sotto) e
   .post-section--styled si aggiunge solo se c'è davvero uno sfondo scelto. */
.post-section { margin: 0 0 2.5rem; }
.post-section:last-child { margin-bottom: 0; }
.post-section--styled {
    padding: 1.75rem;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
}
@media (hover: hover) and (pointer: fine) {
    .post-section--parallax { background-attachment: fixed; }
}
/* Sfondo a immagine: velo bianco (non scuro) sopra la foto, stesso
   principio/stessa opacità del tipo "richtext" delle Pagine Speciali — il
   testo di un Articolo scritto nell'editor Quill è quasi sempre scuro, un
   velo scuro lo renderebbe illeggibile quanto lo sfondo nudo. */
.post-section--image { position: relative; color: #1a1a1a; }
.post-section--image::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.7); border-radius: 10px; }
.post-section--image > * { position: relative; z-index: 1; }

.post-content, .page-content { font-size: 1.05rem; }
.post-content img, .page-content img { border-radius: 6px; }
/* Niente margine automatico del browser sui blocchi (era 1em sopra/sotto
   di default su <p>/<h*>/liste/citazioni): lo spazio tra paragrafi deve
   essere ESATTAMENTE quello impostato in backoffice, non un'aggiunta
   editoriale del browser — stessa regola di .page-special-richtext qui
   sotto, applicata dappertutto si scriva testo con l'editor Quill
   (Articoli, Pagine, Footer, Sidebar). */
.post-content p, .post-content h1, .post-content h2, .post-content h3,
.post-content h4, .post-content h5, .post-content h6,
.post-content ul, .post-content ol, .post-content blockquote,
.page-content p, .page-content h1, .page-content h2, .page-content h3,
.page-content h4, .page-content h5, .page-content h6,
.page-content ul, .page-content ol, .page-content blockquote {
    margin: 0;
}

/* Titoli H1/H2/H3 scritti nell'editor Quill (menu "Heading" della barra di
   formattazione), stessa resa in tutte le zone di testo libero del sito
   (articoli, pagine, sezioni "Testo libero" di Pagine Speciali, sidebar,
   footer) e nel backoffice mentre si scrive (vedi .ql-editor in
   admin.css). H1 riga spessa, H2 sottile, entrambe bordeaux
   (--color-accent); H3 riga sottile blu, stesso blu di .button--blue in
   admin.css (qui in chiaro perché il sito pubblico non ha quella
   variabile). */
.post-content h1, .page-content h1, .page-special-richtext h1,
.widget-custom-content h1, .footer-col-body h1 {
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--color-accent);
}
.post-content h2, .page-content h2, .page-special-richtext h2,
.widget-custom-content h2, .footer-col-body h2 {
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--color-accent);
}
.post-content h3, .page-content h3, .page-special-richtext h3,
.widget-custom-content h3, .footer-col-body h3 {
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #1a56db;
}

/* Tabelle create nell'editor Quill (modulo quill-table-better, solo in
   admin — vedi admin-editor.js/admin.css: qui arriva SOLO l'HTML <table>
   risultante, questo modulo non viene mai scaricato dal sito pubblico).
   "display:block" + "overflow-x:auto" sul <table> stesso (non serve un
   wrapper <div> attorno, la struttura righe/celle resta intatta: è la
   tecnica standard per rendere scorrevole in orizzontale una tabella più
   larga dello schermo senza toccare il markup) — importante su cellulare,
   dove una tabella a più colonne altrimenti romperebbe il layout a 100%
   di larghezza della pagina. */
.post-content table, .page-content table, .page-special-richtext table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.95rem;
}
.post-content th, .post-content td,
.page-content th, .page-content td,
.page-special-richtext th, .page-special-richtext td {
    border: 1px solid var(--color-border);
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}
.post-content th, .page-content th, .page-special-richtext th {
    background: var(--color-surface);
    font-weight: 600;
}

/* Video incorporati (YouTube/Vimeo) dall'editor: l'iframe generato da
   Quill non è responsive di default, lo rendiamo 16:9. Nel Contenuto degli
   Articoli (.post-content) occupa l'80% della colonna, centrato (richiesta
   esplicita, 12/8/2026) — nelle Pagine normali (.page-content) resta a
   piena larghezza. */
.post-content .ql-video {
    display: block;
    width: 80%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 6px;
    margin: 1.5rem auto;
}
.page-content .ql-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 6px;
    margin: 1.5rem 0;
}

.page-children { padding-left: 1.25rem; }

/* --- Template "Discografia" (CD): niente sidebar --- */

.cd-header {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    /* stretch (non flex-start): la colonna info deve avere la stessa
       altezza della cover, per poter spingere .cd-info-actions in fondo
       (margin-top:auto) allineandola alla base dell'immagine. */
    align-items: stretch;
    margin-bottom: 2rem;
    /* Banda grigio chiarissimo dietro cover/info/pulsanti: passa "sotto"
       la cover e arriva fino ai due pulsanti in fondo. */
    background: #eaeaec;
    border-radius: 12px;
    padding: 2rem;
}

.cd-media { display: flex; flex-direction: column; gap: 1rem; flex-shrink: 0; }

.cd-cover {
    width: 500px;
    height: 500px;
    max-width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Mini-player mp3 (fino a 3, uno alla volta) sotto la copertina. */
.cd-players { display: flex; flex-direction: column; gap: 0.6rem; width: 500px; max-width: 100%; }
.cd-player { width: 100%; height: 36px; }

/* Colonna a destra della cover: tabella dati in alto, link "Ascolta
   online"/"Compra online" spinti in fondo (allineati alla base della
   cover, vedi .cd-header sopra). min-width:0 toglie il minimo di default
   di un figlio flex ("auto", che rifiuta di restringersi sotto la
   larghezza del contenuto più largo): senza, un titolo lungo su una riga
   sola (.cd-info-title, vedi sotto) spingeva tutta la card fuori dal
   contenitore invece di andare a capo — bug segnalato da Cristiano. */
.cd-info-col { display: flex; flex-direction: column; min-width: 0; }

.cd-info-table { border-collapse: collapse; margin-left: auto; max-width: 100%; }
.cd-info-table td { border: none; background: none; padding: 0.3rem 0; text-align: right; }
.cd-info-title { font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: break-word; }
.cd-info-label { font-size: 1.15rem; }
.cd-info-label a { text-decoration: none; }
.cd-info-label a:hover { text-decoration: underline; }
/* Blocco "X CD SET / Anno / EAN CODE / Numero Tracce / Autori": stesso
   font per tutte le righe (richiesta esplicita, invece delle dimensioni
   diverse di prima). */
.cd-info-meta { font-size: 0.95rem; color: var(--color-muted); line-height: 1.5; }
.cd-info-authors { max-width: 420px; }
/* "Nome Cognome (AAAA-AAAA)" di un singolo autore non va mai spezzato a
   metà da un ritorno a capo (vedi app/views/cd.php). */
.cd-author-entry { white-space: nowrap; }

.cd-info-actions { margin-top: auto; padding-top: 1rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }

.cd-info-cta {
    display: inline-block;
    min-width: 140px;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    color: #111;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.6rem 1.5rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cd-info-cta:hover {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.cd-about { margin-bottom: 2rem; line-height: 1.8; }
/* Piccolo titolo prima del testo "Su questa release", subito sotto la
   banda grigia .cd-header, per chiarire che il testo viene copiato dal
   sito dell'etichetta e non è scritto da Cristiano Porqueddu. */
.cd-about-source {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

/* Card tracklist: giallo chiaro. */
.cd-tracklist-card {
    background: #fdf6d8;
    border: 1px solid #ecdf9c;
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.cd-tracklist-card summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
}
.cd-tracklist-content { margin-top: 1rem; line-height: 1.8; }

@media (max-width: 640px) {
    .cd-header { flex-direction: column; align-items: center; text-align: center; padding: 1.25rem; }
    .cd-media { align-items: center; }
    .cd-info-table { margin: 0 auto; }
    .cd-info-table td { text-align: center; }
    .cd-info-actions { align-items: center; margin-top: 1rem; }
}

/* --- Template "Composizioni" (pub_AUT): niente sidebar, IDENTICO al
   template "Discografia" qui sopra (card grigia, pulsante "Compra adesso"
   allineato in basso rispetto alla copertina, mini-player mp3 sotto la
   copertina) — cambia solo la copertina, RETTANGOLARE (formato libro,
   non quadrata come un CD: qui è un'edizione a stampa, non un disco). --- */

.aut-header {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    /* stretch (non flex-start): la colonna info deve avere la stessa
       altezza della cover, per poter spingere .aut-info-actions in fondo
       (margin-top:auto) allineandola alla base dell'immagine. */
    align-items: stretch;
    margin-bottom: 2rem;
    background: #eaeaec;
    border-radius: 12px;
    padding: 2rem;
}

.aut-media { display: flex; flex-direction: column; gap: 1rem; flex-shrink: 0; }

/* Formato libro (verticale, non quadrato come .cd-cover): stessa altezza
   della cover CD per restare visivamente in asse con le altre due
   famiglie, larghezza ridotta a un rapporto ~2:3. */
.aut-cover {
    width: 340px;
    height: 500px;
    max-width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Mini-player mp3 (uno solo, a differenza dei 3 del CD) sotto la copertina. */
.aut-players { display: flex; flex-direction: column; gap: 0.6rem; width: 340px; max-width: 100%; }
.aut-player { width: 100%; height: 36px; }

/* Colonna a destra della cover: tabella dati in alto, "Compra adesso"
   spinto in fondo (allineato alla base della cover, vedi .aut-header).
   min-width:0, stesso motivo di .cd-info-col sopra: un titolo lungo su una
   riga sola rompeva il layout invece di andare a capo. */
.aut-info-col { display: flex; flex-direction: column; min-width: 0; }

.aut-info-table { border-collapse: collapse; margin-left: auto; max-width: 100%; }
.aut-info-table td { border: none; background: none; padding: 0.3rem 0; text-align: right; }
.aut-info-title { font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: break-word; }
/* Organico: subito sotto il titolo, come un sottotitolo discreto. */
.aut-info-instrumentation { font-size: 1.05rem; font-style: italic; color: var(--color-muted); }
.aut-info-label { font-size: 1.15rem; }
.aut-info-label a { text-decoration: none; }
.aut-info-label a:hover { text-decoration: underline; }
/* Blocco "Anno / COD / ISBN": stesso font per tutte le righe, come
   .cd-info-meta. */
.aut-info-meta { font-size: 0.95rem; color: var(--color-muted); line-height: 1.5; }

.aut-info-actions { margin-top: auto; padding-top: 1rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }

.aut-info-cta {
    display: inline-block;
    min-width: 140px;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    color: #111;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.6rem 1.5rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.aut-info-cta:hover {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.aut-notes { margin-bottom: 2rem; line-height: 1.8; }

/* Card "Registrazioni": stesso giallo chiaro della tracklist CD. */
.aut-recordings-card {
    background: #fdf6d8;
    border: 1px solid #ecdf9c;
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.aut-recordings-card summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
}
.aut-recordings-content { margin-top: 1rem; line-height: 1.8; }

/* Card "Link esterni": aperta (non un <details> da espandere, sempre
   visibile), sotto Registrazioni — bordo marcato per distinguerla dalle
   altre card della pagina, un'icona a sinistra di ogni riga (link diretto,
   nessun embed) e la descrizione del contenuto (compilata in admin) a
   destra. Righe separate da un divisore leggero, non ciascuna con un
   proprio bordo. */
.aut-external-links-card {
    margin-top: 1.5rem;
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    background: #fff;
}
.aut-external-links-title { margin: 0 0 1rem; font-weight: 700; font-size: 1.05rem; }
.aut-external-link-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.aut-external-link-row + .aut-external-link-row {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border);
}
/* Icona rotonda al posto dell'etichetta testuale: il globo richiama "sul
   web" per qualunque tipo di contenuto (video, registrazione, recensione).
   Descrizione a destra + title/aria-label sull'icona chiariscono il resto. */
.aut-external-link-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
    line-height: 1;
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.aut-external-link-btn:hover { background: var(--color-accent); border-color: var(--color-accent); transform: scale(1.08); }
.aut-external-link-desc { color: var(--color-muted); line-height: 1.5; }

@media (max-width: 640px) {
    .aut-header { flex-direction: column; align-items: center; text-align: center; padding: 1.25rem; }
    .aut-media { align-items: center; }
    .aut-info-table { margin: 0 auto; }
    .aut-info-table td { text-align: center; }
    .aut-info-actions { align-items: center; margin-top: 1rem; }
    .aut-external-links-title { text-align: center; }
    .aut-external-link-row { flex-direction: column; text-align: center; }
}

/* --- Template "Editor" (pub_EDI): niente sidebar, IDENTICO ai template
   "Discografia"/"Composizioni" qui sopra — copertina RETTANGOLARE (formato
   libro) come "Composizioni", con l'aggiunta dell'Autore. --- */

.edi-header {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 2rem;
    background: #eaeaec;
    border-radius: 12px;
    padding: 2rem;
}

.edi-media { display: flex; flex-direction: column; gap: 1rem; flex-shrink: 0; }

.edi-cover {
    width: 340px;
    height: 500px;
    max-width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Mini-player mp3 (uno solo) sotto la copertina. */
.edi-players { display: flex; flex-direction: column; gap: 0.6rem; width: 340px; max-width: 100%; }
.edi-player { width: 100%; height: 36px; }

/* min-width:0, stesso motivo di .cd-info-col: un titolo lungo su una riga
   sola rompeva il layout invece di andare a capo. */
.edi-info-col { display: flex; flex-direction: column; min-width: 0; }

.edi-info-table { border-collapse: collapse; margin-left: auto; max-width: 100%; }
.edi-info-table td { border: none; background: none; padding: 0.3rem 0; text-align: right; }
.edi-info-title { font-size: 2rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: break-word; }
/* Organico: subito sotto il titolo, come un sottotitolo discreto. */
.edi-info-instrumentation { font-size: 1.05rem; font-style: italic; color: var(--color-muted); }
.edi-info-label { font-size: 1.15rem; }
.edi-info-label a { text-decoration: none; }
.edi-info-label a:hover { text-decoration: underline; }
/* Blocco "Autore / Anno / COD / ISBN": stesso font per tutte le righe,
   come .cd-info-meta. */
.edi-info-meta { font-size: 0.95rem; color: var(--color-muted); line-height: 1.5; }

.edi-info-actions { margin-top: auto; padding-top: 1rem; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }

.edi-info-cta {
    display: inline-block;
    min-width: 140px;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    color: #111;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 0.6rem 1.5rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.edi-info-cta:hover {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.edi-notes { margin-bottom: 2rem; line-height: 1.8; }

/* Card "Registrazioni": stesso giallo chiaro delle altre due famiglie. */
.edi-recordings-card {
    background: #fdf6d8;
    border: 1px solid #ecdf9c;
    border-radius: 8px;
    padding: 1rem 1.25rem;
}
.edi-recordings-card summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05rem;
}
.edi-recordings-content { margin-top: 1rem; line-height: 1.8; }

/* Card "Link esterni": stessa di .aut-external-links-card qui sopra. */
.edi-external-links-card {
    margin-top: 1.5rem;
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    background: #fff;
}
.edi-external-links-title { margin: 0 0 1rem; font-weight: 700; font-size: 1.05rem; }
.edi-external-link-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.edi-external-link-row + .edi-external-link-row {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border);
}
.edi-external-link-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
    line-height: 1;
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.edi-external-link-btn:hover { background: var(--color-accent); border-color: var(--color-accent); transform: scale(1.08); }
.edi-external-link-desc { color: var(--color-muted); line-height: 1.5; }

@media (max-width: 640px) {
    .edi-header { flex-direction: column; align-items: center; text-align: center; padding: 1.25rem; }
    .edi-media { align-items: center; }
    .edi-info-table { margin: 0 auto; }
    .edi-info-table td { text-align: center; }
    .edi-info-actions { align-items: center; margin-top: 1rem; }
    .edi-external-links-title { text-align: center; }
    .edi-external-link-row { flex-direction: column; text-align: center; }
}

/* --- "Pagine Speciali" (Repertorio/Concerti/Discografia/Composizioni/
   Editore quando composte a sezioni, vedi PageController::showSpecial) --- */

/* Banner header a piena larghezza: già renderizzato fuori da .wrap (come
   .home-section--hero, vedi layout.php), ma in più "sfonda" qualunque
   contenitore con width/max-width tramite il trick width:100vw + margini
   negativi calc(50%-50vw) — così tocca SEMPRE i due bordi dello schermo,
   indipendentemente da dove finisce per essere nel DOM (richiesto
   esplicitamente il 10/8/2026, per non dipendere solo dal non essere
   annidato in .wrap). Altezza: 1920×400 come proporzione guida tramite
   aspect-ratio, con un min/max-height per restare leggibile sia su schermi
   strettissimi che larghissimi — personalizzabile per singola Pagina
   Speciale da /admin/*-sections.php (pages.header_banner_height): quando
   impostata, lo style inline in partials/page-banner.php sovrascrive
   altezza/min/max e disattiva l'aspect-ratio. Overlay scuro automatico +
   titolo bianco. */
.page-banner {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    aspect-ratio: 1920 / 400;
    min-height: 200px;
    max-height: 420px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    /* Il "404" a caratteri cubitali (page-banner-title--huge) può superare
       l'altezza del banner su schermi medi (il font scala con vw, il
       banner no) — ritagliato invece di traboccare sul resto della pagina. */
    overflow: hidden;
}
.page-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.page-banner-inner { position: relative; z-index: 1; }
.page-banner-title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

/* Sezioni della pagina: stessa filosofia delle sezioni Home (sfondo
   colore/immagine+parallax), ma senza uscire dal grid (queste pagine non
   hanno mai la sidebar, vedi .page-layout--no-sidebar). */
/* Margine orizzontale 2rem (non 0, come per un attimo era stato lasciato
   qui): questa sezione sta dentro un riquadro all'80% con sfondo proprio
   (.page-special-section--boxed80, colore o nessuno — le sezioni con
   sfondo a immagine hanno il loro padding dedicato qui sotto), quindi il
   testo deve stare comodo rispetto AI BORDI DELLA CARD, non solo rispetto
   allo schermo come farebbe ".wrap" da solo (0 1.25rem, qui sovrascritto).
   Il padding-top vale anche per la primissima sezione della pagina (tolto
   un vecchio azzeramento ":first-child" — pensato per quando le sezioni
   erano bande piatte senza bordo, non più corretto ora che ogni sezione è
   una card isolata con margine/border-radius propri: il titolo altrimenti
   toccava il bordo superiore della sua stessa card, es. su Composizioni). */
.page-special-section-inner { padding: 1.25rem 2rem 2.5rem; }
.page-special-section--image {
    background-size: cover;
    background-position: center;
    color: #fff;
}
.page-special-section--image .page-special-section-inner { padding: 3rem 1.25rem; }
@media (hover: hover) and (pointer: fine) {
    .page-special-section--parallax { background-attachment: fixed; }
}
/* Titolo/sottotitolo di una sezione: meno distanza dal bordo superiore
   della card (l'h2 perde il suo margine di default, resta solo il
   padding — ridotto apposta, vedi .page-special-section-inner sopra — a
   fare da spazio) e tra loro (quasi attaccati, non con l'interlinea di un
   intero paragrafo). Un divisore leggero, vicino al sottotitolo (poco
   padding sotto), li separa dal contenuto sotto (griglia Post del Blog,
   testo libero, ecc.) — semi-trasparente invece di un colore fisso, così
   si vede bene su qualunque sfondo la sezione abbia (colore personalizzato
   o nessuno). */
.page-special-section-inner > h2:first-child { margin: 0 0 0.3rem; }
.page-special-section-subtitle {
    color: var(--color-muted);
    font-size: 1.05rem;
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.page-special-section--image .page-special-section-subtitle {
    color: rgba(255, 255, 255, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.3);
}
/* Testo libero di "image_grid" (card "Testo" in admin): il titolo generico
   qui sopra è pensato per un vero h2 di sezione — troppo grande e in
   grassetto (il default del browser per h2) per una didascalia sopra la
   griglia. Più piccolo, peso normale esplicito e con più spazio prima
   delle prime immagini (richiesta esplicita). */
.page-special-section--image-grid .page-special-section-inner > h2:first-child {
    font-size: 1.15rem;
    font-weight: 400;
    margin-bottom: 1.75rem;
}
/* Sfondo a immagine: velo scuro sopra la foto, sempre applicato (non a
   scelta) per leggibilità del testo libero — stesso principio/stessa
   opacità del velo dell'Highlight qui sopra. */
.page-special-section--image-grid.page-special-section--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}
.page-special-section--image-grid .page-special-section-inner {
    position: relative;
    z-index: 1;
}
/* Griglie automatiche di copertine (CD/Composizioni/Editore): stesso velo
   scuro automatico su sfondo a immagine, stessa tecnica/opacità. */
.page-special-section--pub-grid.page-special-section--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}
.page-special-section--pub-grid .page-special-section-inner {
    position: relative;
    z-index: 1;
}
/* Tipo "Sezione libera" (richtext): stesso principio dei veli sopra ma
   BIANCO invece che scuro (richiesta esplicita) — il testo libero può
   avere colori scritti a mano nell'editor Quill, spesso scuri/neri, che un
   velo scuro renderebbe illeggibili tanto quanto lo sfondo nudo; un velo
   chiaro funziona con qualunque testo scuro senza dover scegliere nulla in
   admin. Il colore di default (nessun "Colore del titolo" scelto) torna
   scuro invece del bianco forzato da .page-special-section--image, per lo
   stesso motivo — un "Colore del titolo" esplicito (stile inline) vince
   comunque su queste regole, quindi chi sceglie apposta il bianco non è
   bloccato. */
.page-special-section--richtext.page-special-section--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
}
.page-special-section--richtext .page-special-section-inner {
    position: relative;
    z-index: 1;
}
.page-special-section--richtext.page-special-section--image {
    color: #1a1a1a;
}
.page-special-section--richtext.page-special-section--image .page-special-section-subtitle {
    color: var(--color-muted);
    border-bottom-color: rgba(0, 0, 0, 0.15);
}

/* Tipo "Sezione libera": stessa tipografia di .page-content. */
.page-special-richtext { font-size: 1.05rem; line-height: 1.8; }
.page-special-richtext img { border-radius: 6px; }
/* Niente margine automatico del browser sui blocchi (era 1em sopra/sotto
   di default su <p>/<h*>/liste/citazioni): lo spazio tra paragrafi deve
   essere ESATTAMENTE quello impostato in backoffice (una riga vuota
   nell'editor Quill = una riga d'altezza vuota qui, non di più) — richiesta
   esplicita, prima compariva un'interlinea "fantasma" mai impostata da
   Cristiano. */
.page-special-richtext p,
.page-special-richtext h1,
.page-special-richtext h2,
.page-special-richtext h3,
.page-special-richtext h4,
.page-special-richtext h5,
.page-special-richtext h6,
.page-special-richtext ul,
.page-special-richtext ol,
.page-special-richtext blockquote {
    margin: 0;
}

/* Video (YouTube/Vimeo) incollato nel Contenuto di "Sezione libera (testo)":
   l'editor lo trasforma già in automatico in un iframe incorporato (link
   incollato da solo su una riga, vedi admin-editor.js), qui lo rendiamo
   centrato e all'80% di larghezza della card invece del 100% usato in
   Articoli/Pagine normali (vedi .post-content/.page-content .ql-video più
   sopra) — stessa convenzione "80% dello spazio, centrata" degli altri tipi
   di sezione delle Pagine Speciali. */
.page-special-richtext .ql-video {
    display: block;
    width: 80%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 1.5rem auto;
    border: 0;
    border-radius: 6px;
}

/* Tipo "Griglia Discografia": copertine quadrate come .cd-cover, 1-4
   colonne, ogni cella un link diretto alla scheda del CD. */
.page-special-cd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 640px) {
    .page-special-cd-grid-1 { grid-template-columns: 1fr; max-width: 420px; }
    .page-special-cd-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .page-special-cd-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .page-special-cd-grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.page-special-cd-grid-item {
    display: block;
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}
.page-special-cd-grid-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    /* Zoom della copertina al passaggio del mouse — .page-special-cd-grid-
       item ha overflow:hidden apposta per tagliare l'ingrandimento dentro
       gli angoli arrotondati della card. Lo schiarimento NON è un filtro
       sull'immagine (era il primo tentativo, scartato): è un velo bianco
       sopra, vedi ::before qui sotto — stessa tecnica, stessa opacità di
       .page-special-section--blog-picks.page-special-section--image::before
       (sezione "Post del Blog"), per restare coerenti nel sito. */
    transition: transform 0.3s ease;
}
.page-special-cd-grid-item:hover img { transform: scale(1.06); }
/* Velo bianco che schiarisce molto la copertina al passaggio del mouse
   (richiesta esplicita, 12/8/2026), per lasciar leggere il testo nero che
   le compare sopra — vedi .page-special-cd-grid-hover qui sotto. */
.page-special-cd-grid-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.82);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.page-special-cd-grid-item:hover::before { opacity: 1; }

/* Testo "macchina da scrivere" (anno + commento-hover, scritti lettera per
   lettera dal JS in fondo alla pagina): allineato a sinistra ma staccato
   dal bordo (padding, non attaccato all'immagine) e centrato in verticale
   nella zona centrale della copertina — non in alto né in basso, richiesta
   esplicita. Nero fisso: pensato apposta per comparire sopra il velo
   bianco qui sopra. z-index:2 per stare sopra il velo (z-index:1).
   pointer-events:none perché lo span non deve intercettare il click sul
   link della card. Font: Montserrat (--font-sans), lo stesso di tutto il
   sito — più moderno del monospace "da macchina da scrivere" usato al
   primo tentativo (richiesta esplicita), e già caricato di suo, quindi
   zero peso in più. */
.page-special-cd-grid-hover {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1.5rem;
    pointer-events: none;
    color: #111;
    font-family: var(--font-sans);
    text-align: left;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.page-special-cd-grid-item:hover .page-special-cd-grid-hover { opacity: 1; }
.page-special-cd-grid-hover-year { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.02em; }
.page-special-cd-grid-hover-comment {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.45;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* Tipo "Griglia Composizioni": stessa griglia 1-4 colonne della Discografia,
   ma copertine di libri/spartiti — rettangolo verticale invece che quadrato
   — tutte forzate alla STESSA proporzione (aspect-ratio + object-fit:cover)
   così restano uniformi anche con foto sorgente di dimensioni diverse. */
.page-special-aut-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 640px) {
    .page-special-aut-grid-1 { grid-template-columns: 1fr; max-width: 320px; }
    .page-special-aut-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .page-special-aut-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .page-special-aut-grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.page-special-aut-grid-item {
    display: block;
    border-radius: 8px;
    overflow: hidden;
}
.page-special-aut-grid-item img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.page-special-aut-grid-item:hover img { transform: scale(1.06); }

/* Tipo "Griglia Editore": identica alla Griglia Composizioni (stessa
   proporzione verticale libro/spartito), ma per le pubblicazioni curate da
   Cristiano in veste di editore (pub_EDI) invece che come autore. */
.page-special-edi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 640px) {
    .page-special-edi-grid-1 { grid-template-columns: 1fr; max-width: 320px; }
    .page-special-edi-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .page-special-edi-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .page-special-edi-grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.page-special-edi-grid-item {
    display: block;
    border-radius: 8px;
    overflow: hidden;
}
.page-special-edi-grid-item img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.page-special-edi-grid-item:hover img { transform: scale(1.06); }

/* Tipo "Griglia Video (YouTube)": sempre 2 colonne, 1-2 righe (2 o 4
   video) — solo il player, niente titolo. Riusata identica in Home dentro
   il wrapper .home-section, stesso principio delle altre griglie
   page-special-*. */
.page-special-video-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
@media (max-width: 640px) {
    .page-special-video-grid { grid-template-columns: 1fr; }
}
.page-special-video-grid-item iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 8px;
}

/* Tipo "Griglia Immagini": layout a scelta (1 immagine singola, 1x2, 2x2),
   l'insieme sempre all'80% della larghezza della card, centrato. Niente
   aspect-ratio forzato sulle immagini (si adattano solo in larghezza, vedi
   "Adatta le immagini in larghezza" — proporzioni coerenti a cura di chi le
   sceglie in admin) — a differenza delle altre griglie page-special-*, che
   invece ritagliano a un rapporto fisso. Riusata identica in Home dentro il
   wrapper .home-section, stesso principio delle altre griglie. */
.page-special-image-grid {
    width: 80%;
    margin: 0 auto;
}
.page-special-image-grid--2,
.page-special-image-grid--4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
@media (max-width: 640px) {
    .page-special-image-grid--2,
    .page-special-image-grid--4 { grid-template-columns: 1fr; }
}
.page-special-image-grid-item {
    display: block;
    border-radius: 8px;
    overflow: hidden;
}
.page-special-image-grid-item img {
    display: block;
    width: 100%;
    height: auto;
}
/* Zoom al passaggio del mouse (richiesta esplicita, 13/8/2026) SOLO se
   l'immagine ha un link (l'item è un <a>, non uno <span> — vedi
   page-special.php/home.php): stessa tecnica/durata di .page-special-cd-
   grid-item, border-radius+overflow:hidden spostati sul contenitore per
   tagliare l'ingrandimento dentro gli angoli arrotondati. */
a.page-special-image-grid-item img { transition: transform 0.3s ease; }
a.page-special-image-grid-item:hover img { transform: scale(1.06); }

/* Tipi "Highlights Scorrevoli"/"Highlight": IDENTICI a quelli della Home
   (riusano le classi home-highlight-..., home-highlights-...,
   home-cell-button, vedi app/views/page-special.php) ma qui, a differenza
   della Home, è l'intera sezione (sfondo incluso) a prendere solo l'80%
   dello spazio disponibile, centrata — non solo il testo dentro. width:80%
   sul <section> stesso (non solo sul contenuto), dentro .page-special che
   è già a piena larghezza/centrato di suo: essendo una percentuale del
   genitore centrato, resta centrata anch'essa. */
.page-special-section--boxed80 {
    width: 80%;
    /* margin verticale: la sezione è una "card" isolata (sfondo incluso),
       non un'intera banda come le altre — le serve uno stacco visibile da
       quel che viene prima/dopo, non solo il centraggio orizzontale. */
    margin: 1.5rem auto;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

/* "Highlight": stessa impostazione di .home-section--highlight (centrato
   in verticale, velo scuro se sfondo a immagine, blocco Immagine/Tagline/
   Pulsante in colonna). */
.page-special-section--highlight {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.page-special-section--highlight.page-special-section--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}
.page-special-section--highlight .page-special-section-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
/* .home-cell-button ha "align-self: flex-start" (pensato per le card della
   griglia), che qui va sovrascritto per restare centrato come nell'Highlight
   della Home. */
.page-special-section--highlight .home-cell-button { align-self: center; }

/* Tipo "Anteprima": scena buia in stile "dietro le quinte", stessa tecnica
   e stessa palette della lampada di admin/login.php (checkbox nascosto +
   CSS :has(), grigio spento → oro acceso, bagliore), ma sagomata come
   faretto da palco invece che lampada da scrivania, e con classi proprie
   (page-preview-*) scoped a questa sezione invece che a tutto il body.
   In più, qui il faretto "rivela" anche immagine e testo (scuri/nascosti
   finché è spento) — non solo se stesso, per rendere l'idea di "scoprire
   in anteprima".
   Disponibile SIA nelle Pagine Speciali (.page-special-section--preview)
   SIA in Home (.home-section--preview, portato in un secondo momento) —
   qui, a differenza di "Highlight" (due blocchi CSS separati e duplicati),
   le regole legate all'interruttore sono raggruppate con :is(...) invece
   di essere ripetute due volte: sono troppe (faretto/interruttore/
   immagine/testo/filigrana) per duplicarle senza rischiare che una copia
   resti indietro, come già successo una volta (Home non reagiva più
   all'interruttore finché non è stato corretto qui). */
:is(.page-special-section--preview, .home-section--preview) {
    --pv-grey-dark: #2c2c33;
    --pv-grey-mid: #45454f;
    --pv-grey-light: #5b5b66;
    --pv-gold-dark: #4a3d2a;
    --pv-gold-mid: #8a7238;
    --pv-gold-light: #d4a94a;
    --pv-lens-on: #ffe38a;
    position: relative;
    overflow: hidden;
    background: #000;
    min-height: 65vh;
    display: flex;
    align-items: center;
    transition: background 0.9s ease;
}
:is(.page-special-section--preview, .home-section--preview):has(.page-preview-switch-input:checked) { background: #0c1a33; }
/* NIENTE position:relative qui (solo z-index, che sui figli diretti di un
   flex container — vedi :is(...) sopra, display:flex — funziona comunque
   senza bisogno di "position"): così il prossimo elemento posizionato in
   risalita nell'albero resta il <section> stesso (già position:relative),
   e il bagliore sotto (.page-preview-glow, position:absolute; inset:0)
   copre TUTTA la card, bordi/padding inclusi — non solo l'area interna. */
.page-special-section--preview .page-special-section-inner,
.home-section--preview .home-section-inner {
    z-index: 1;
    width: 100%;
}
.page-special-section--preview .page-special-section-inner { padding: 2.5rem 2rem; }

/* Bagliore caldo vicino al faretto, sfumato al blu scuro man mano che ci si
   allontana — stessa tecnica di .admin-login-glow in admin/login.php
   (radial-gradient sopra lo sfondo scuro, stessi colori/opacità), qui
   posizionato vicino alla lente del faretto invece che al centro. */
.page-preview-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 14% 40%, rgba(255, 214, 130, 0.35), transparent 50%);
    opacity: 0;
    transition: opacity 0.9s ease;
}
:is(.page-special-section--preview, .home-section--preview):has(.page-preview-switch-input:checked) .page-preview-glow { opacity: 1; }

.page-preview-stage { position: relative; z-index: 1; }

/* Testo in alto (13/8/2026: testo libero, non più solo 1-2 parole), a piena
   larghezza della card — ma MAI via SVG textLength o altro stiramento non
   uniforme delle lettere (una parola corta veniva "stirata" e il font si
   deformava — bug segnalato in passato): page-preview-switch.js misura il
   testo e imposta font-size (style.fontSize inline, sovrascrive il clamp()
   qui sotto) in modo che occupi tutta la larghezza scalando in proporzione,
   lettere comprese — se anche al tetto massimo di JS il testo resta più
   stretto della card, resta semplicemente centrato così, senza alcuno
   stiramento forzato per "tappare" lo spazio restante. Il clamp() qui sotto
   è solo il valore prima che JS giri (o se JS è disabilitato). Visibile
   solo a faretto acceso. */
.page-preview-watermark {
    position: absolute;
    top: -1.5rem;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0 1rem;
    text-align: center;
    font-family: var(--font-sans, inherit);
    font-weight: 800;
    font-size: clamp(1.8rem, 6vw, 5rem);
    line-height: 1;
    color: rgba(255, 255, 255, 0.08);
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transition: opacity 1.2s ease;
}
:is(.page-special-section--preview, .home-section--preview):has(.page-preview-switch-input:checked) .page-preview-watermark { opacity: 1; }

/* Messaggio hover ("Passa il mouse e accendi la luce" o simile, testo
   libero in admin): stessa posizione della filigrana qui sopra (le due non
   compaiono mai insieme — l'una richiede il faretto spento, l'altra
   acceso — quindi condividono lo stesso "slot" in alto per un crossfade
   pulito). Font grigio, SEMPRE visibile ma solo lievemente percettibile
   (opacity bassa, non un grigio pieno) mentre il faretto è spento —
   NON serve più passarci sopra col mouse; sparisce non appena si accende. */
.page-preview-hint {
    position: absolute;
    top: -1.5rem;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0 1rem;
    text-align: center;
    font-weight: 600;
    font-size: clamp(1.1rem, 2.4vw, 1.5rem);
    color: #9a9aa1;
    pointer-events: none;
    opacity: 0.4;
    transition: opacity 0.5s ease;
}
:is(.page-special-section--preview, .home-section--preview):has(.page-preview-switch-input:checked) .page-preview-hint {
    opacity: 0;
}

/* Riga faretto + immagine: TRE colonne flessibili (sinistra/centro/destra
   "fantasma") invece di posizionamento assoluto — un tentativo precedente
   con position:absolute + top:50% aveva bisogno che .page-preview-row
   avesse un'altezza DEFINITA per risolvere quel 50%, ma con solo
   min-height (non height) il browser non riusciva a calcolarlo e faretto
   e interruttore sparivano. Con tre colonne flessibili di pari larghezza
   (sinistra/destra invisibili fanno da contrappeso) il faretto resta
   ancorato al bordo sinistro (flex-start dentro la sua colonna) e
   l'immagine, nella colonna centrale, risulta comunque centrata rispetto
   a TUTTA la riga — senza bisogno di percentuali ambigue. */
.page-preview-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    /* Più distanza dalla "parola in alto" (richiesta esplicita), aumentata
       rispetto a prima anche perché l'immagine qui sotto è più grande. */
    padding-top: 5.5rem;
}
.page-preview-row-left,
.page-preview-row-right {
    flex: 1 1 0;
    display: flex;
    align-items: center;
}
.page-preview-row-left { justify-content: flex-start; padding-left: 1.5rem; }
.page-preview-row-right { justify-content: flex-end; }
.page-preview-row-center { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }

.page-preview-spot-wrap { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.page-preview-spot { width: 170px; height: 220px; overflow: visible; }

.page-preview-spot-shadow { fill: rgba(0, 0, 0, 0.45); }
.page-preview-spot-base,
.page-preview-spot-pole,
.page-preview-spot-yoke {
    fill: var(--pv-grey-dark);
    stroke: var(--pv-grey-dark);
    transition: fill 0.9s ease, stroke 0.9s ease;
}
.page-preview-spot-joint { fill: var(--pv-grey-mid); transition: fill 0.9s ease; }
.page-preview-spot-head { fill: var(--pv-grey-light); stroke: var(--pv-grey-light); transition: fill 0.9s ease, stroke 0.9s ease; }
.page-preview-spot-lens { fill: var(--pv-grey-light); transition: fill 0.9s ease, filter 0.9s ease; }
.page-preview-spot-lens-glow { fill: transparent; transition: fill 0.9s ease; }

:is(.page-special-section--preview, .home-section--preview):has(.page-preview-switch-input:checked) .page-preview-spot-base,
:is(.page-special-section--preview, .home-section--preview):has(.page-preview-switch-input:checked) .page-preview-spot-pole,
:is(.page-special-section--preview, .home-section--preview):has(.page-preview-switch-input:checked) .page-preview-spot-yoke {
    fill: var(--pv-gold-dark);
    stroke: var(--pv-gold-dark);
}
:is(.page-special-section--preview, .home-section--preview):has(.page-preview-switch-input:checked) .page-preview-spot-joint { fill: var(--pv-gold-mid); }
:is(.page-special-section--preview, .home-section--preview):has(.page-preview-switch-input:checked) .page-preview-spot-head {
    fill: var(--pv-gold-light);
    stroke: var(--pv-gold-light);
}
:is(.page-special-section--preview, .home-section--preview):has(.page-preview-switch-input:checked) .page-preview-spot-lens {
    fill: var(--pv-lens-on);
    filter: drop-shadow(0 0 10px rgba(255, 214, 130, 0.9));
}
:is(.page-special-section--preview, .home-section--preview):has(.page-preview-switch-input:checked) .page-preview-spot-lens-glow { fill: rgba(255, 214, 130, 0.35); }

/* Interruttore a muro: stessa grafica esatta di admin/login.php (placca +
   paddle), solo prefisso di classe diverso — nessun audio qui (non
   richiesto, e coerente con l'effetto leggero del login: solo CSS). */
.page-preview-switch { display: inline-flex; cursor: pointer; }
.page-preview-switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.page-preview-switch-track {
    position: relative;
    width: 40px;
    height: 68px;
    border-radius: 6px;
    background: linear-gradient(180deg, #e8e8ec 0%, #c7c7cd 100%);
    border: 1px solid #9a9aa1;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 -3px 5px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.4);
}
.page-preview-switch-knob {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 33px;
    height: 28px;
    border-radius: 4px;
    background: linear-gradient(180deg, #f4f4f6 0%, #d2d2d8 100%);
    border: 1px solid #a3a3aa;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    transition: top 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease, box-shadow 0.4s ease;
}
.page-preview-switch-input:checked ~ .page-preview-switch-track .page-preview-switch-knob {
    top: 5px;
    background: linear-gradient(180deg, #fff2cf 0%, #e9c866 100%);
    box-shadow: 0 0 8px rgba(255, 214, 130, 0.6), 0 2px 3px rgba(0, 0, 0, 0.3);
}
.page-preview-switch-input:focus-visible ~ .page-preview-switch-track { outline: 2px solid #fff; outline-offset: 3px; }

/* Richiamo d'attenzione sull'interruttore finché è spento (13/8/2026,
   richiesta esplicita, poi corretta in "loop infinito ogni 2 secondi"): un
   lampeggio breve ogni 2 secondi, all'infinito finché il faretto resta
   spento — stesso oro caldo dello stato acceso, così anche il richiamo
   resta nella palette del faretto. Il lampeggio vero occupa solo il primo
   ~8% del ciclo (circa 160ms), il resto è quiete. Si ferma da solo (e per
   sempre) appena si accende il faretto, grazie al selettore
   ":not(:checked)" — se lo si rispegne, riparte. */
@keyframes page-preview-switch-attract {
    0%, 8%, 100% { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 -3px 5px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(255, 214, 130, 0); }
    4% { box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 -3px 5px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.4), 0 0 16px 5px rgba(255, 214, 130, 0.9); }
}
@media (prefers-reduced-motion: no-preference) {
    .page-preview-switch-input:not(:checked) ~ .page-preview-switch-track {
        animation: page-preview-switch-attract 2s ease-in-out infinite;
    }
}

/* Immagine (al posto del box Nome utente/Password del login): grande,
   pensata per occupare buona parte dello spazio a destra del faretto (non
   più vincolata alla sola altezza di faretto+interruttore, richiesta
   esplicita: "prenda lo spazio indicato dalle frecce") — cresce fino a
   max-width/max-height, .page-preview-row-left/-right (flex:1 1 0) si
   dividono lo spazio rimasto e la tengono comunque centrata nella card.
   Sui due lati verso cui "punta" (destra e basso) sfuma verso la
   trasparenza invece di avere un bordo netto (mask-image), così sembra
   dissolversi nel buio invece di essere ritagliata di netto. Scura/
   desaturata finché il faretto è spento, "rivelata" a colori pieni quando
   si accende — è il cuore dell'effetto "anteprima". */
.page-preview-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(56vh, 480px);
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    -webkit-mask-image: linear-gradient(128deg, #000 0%, #000 55%, transparent 92%);
    mask-image: linear-gradient(128deg, #000 0%, #000 55%, transparent 92%);
    filter: grayscale(1) brightness(0.35);
    transition: filter 0.9s ease;
}
:is(.page-special-section--preview, .home-section--preview):has(.page-preview-switch-input:checked) .page-preview-image { filter: none; }

/* Tagline/sottotitolo: stesso principio (colore/dimensione impostati in
   admin), nascosti finché il faretto è spento. padding-top aumentato
   apposta (richiesta esplicita) per stare almeno una riga più in basso
   rispetto alla riga faretto/immagine. */
.page-preview-text {
    text-align: center;
    padding-top: 4rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease 0.15s, transform 0.6s ease 0.15s;
}
:is(.page-special-section--preview, .home-section--preview):has(.page-preview-switch-input:checked) .page-preview-text {
    opacity: 1;
    transform: translateY(0);
}
.page-preview-tagline { margin: 0; color: #f5f5f0; font-weight: 700; font-size: clamp(1.1rem, 2.5vw, 1.6rem); }
.page-preview-subtitle { display: inline-block; margin: 0.35rem 0 0; color: rgba(255, 255, 255, 0.75); font-weight: 400; font-size: clamp(0.9rem, 1.6vw, 1.05rem); }
/* Il Sottotitolo diventa cliccabile se in admin è stato scelto un link
   (post o URL esterno) — vedi page-special.php/home.php. Niente
   sottolineatura di default (il tag <a> la aggiungerebbe altrimenti),
   solo al passaggio del mouse, come indizio che è un link. */
a.page-preview-subtitle { text-decoration: none; cursor: pointer; }
a.page-preview-subtitle:hover { text-decoration: underline; }

@media (max-width: 760px) {
    .page-preview-row { flex-direction: column; padding-top: 2.5rem; gap: 1.5rem; }
    .page-preview-row-left { justify-content: center; padding-left: 0; }
    .page-preview-row-right { display: none; }
    .page-preview-image { height: auto; max-width: 70%; }
}

/* Tipo "Post del Blog" con sfondo a immagine: velo BIANCO (non scuro come
   l'Highlight sopra) che schiarisce molto la foto di sfondo, di default,
   così il titolo di ogni post resta leggibile sopra qualunque immagine
   scelta — richiesta esplicita di Cristiano, senza bisogno di scegliere un
   colore apposta ogni volta. Il colore del testo torna scuro (non più il
   bianco forzato da .page-special-section--image qui sopra, pensato per
   sfondi scuri) perché su un velo quasi bianco il testo bianco sparirebbe. */
.page-special-section--blog-picks.page-special-section--image {
    color: var(--color-text);
}
.page-special-section--blog-picks.page-special-section--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.82);
}
.page-special-section--blog-picks .page-special-section-inner {
    position: relative;
    z-index: 1;
}

/* Tipo "Post del Blog": sempre 3 colonne (1-3 righe scelte in admin), ogni
   cella un link con l'immagine in evidenza del post (rettangolare 16:9,
   come le card del blog/.home-cell — mai quadrata) e il titolo sotto. */
.page-special-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}
@media (max-width: 700px) {
    .page-special-blog-grid { grid-template-columns: 1fr; }
}
.page-special-blog-grid-item {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    text-decoration: none;
    color: inherit;
}
.page-special-blog-grid-item img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
}
.page-special-blog-grid-title {
    font-weight: 600;
    line-height: 1.35;
}
.page-special-blog-grid-item:hover .page-special-blog-grid-title { color: var(--color-accent); }

/* Tipo "Due Card Affiancate": due card fisse una accanto all'altra (una
   sola riga, impilate su mobile), ognuna con sfondo/titolo/abstract propri
   scelti in admin — mostra solo gli item davvero salvati (mai una colonna
   vuota se manca la seconda card). */
.page-special-two-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}
@media (max-width: 700px) {
    .page-special-two-cards { grid-template-columns: 1fr; }
}
.page-special-two-cards-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 1.75rem 1.25rem;
    border-radius: 12px;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
/* Sfondo a immagine: velo scuro sopra la foto ("un poco più scura", non un
   filtro CSS sull'immagine stessa — così titolo/abstract restano leggibili
   qualunque colore l'admin scelga per loro) — stesso principio del velo di
   .page-special-section--highlight.page-special-section--image sopra. */
.page-special-two-cards-card--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}
.page-special-two-cards-card--image > * { position: relative; z-index: 1; }
/* Immagine in evidenza: 75% della larghezza della card, proporzioni
   originali intatte (width fisso, height auto — nessun crop), zoom leggero
   al passaggio del mouse tagliato dentro gli angoli arrotondati del
   contenitore (overflow:hidden), stesso pattern delle altre griglie qui
   sopra (.page-special-cd-grid-item, .page-special-edi-grid-item, …). */
.page-special-two-cards-image-wrap {
    display: block;
    width: 75%;
    border-radius: 8px;
    overflow: hidden;
}
.page-special-two-cards-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}
.page-special-two-cards-image-wrap:hover img { transform: scale(1.06); }
.page-special-two-cards-title { font-weight: 600; line-height: 1.35; margin: 0; }
.page-special-two-cards-abstract { margin: 0; line-height: 1.5; }

/* Tipi "Immagine con testo a destra/sinistra" (13/8/2026): card divisa in
   due, immagine 30% + testo 70% — "--reverse" (usata da "image_text_left")
   inverte solo l'ordine delle due colonne via flex-direction, il resto è
   identico. "align-items:stretch" (default di flex) fa sì che l'immagine
   riempia sempre l'intera altezza della colonna di testo accanto
   (object-fit:cover ritaglia), invece di restare piccola quanto la sua
   proporzione naturale. */
.page-special-image-text {
    display: flex;
    align-items: stretch;
    gap: 2rem;
}
.page-special-image-text--reverse { flex-direction: row-reverse; }
.page-special-image-text-media {
    flex: 0 0 30%;
    min-height: 220px;
    border-radius: 8px;
    overflow: hidden;
}
.page-special-image-text-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-special-image-text-body { flex: 1 1 70%; min-width: 0; }
@media (max-width: 700px) {
    .page-special-image-text, .page-special-image-text--reverse { flex-direction: column; }
    .page-special-image-text-media { flex: 0 0 auto; min-height: 200px; }
}

/* --- Sidebar --- */

.sidebar-col { display: flex; flex-direction: column; gap: 2rem; }

.widget-title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    margin: 0 0 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-accent);
}

.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { margin-bottom: 0.75rem; }

.widget-post {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--color-text);
}
.widget-post img, .widget-post-noimg {
    /* Rettangolare come l'immagine in evidenza vera (sempre 16:9), non più
       un piccolo quadrato: più leggibile in anteprima. */
    width: 120px;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--color-surface);
}
.widget-post-title {
    font-size: 0.92rem;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.widget-post:hover .widget-post-title { color: var(--color-accent); }

.widget-categories li { display: flex; justify-content: space-between; }
.widget-categories a { text-decoration: none; color: var(--color-text); font-size: 0.95rem; }
.widget-categories a:hover { color: var(--color-accent); }
.widget-count { color: var(--color-muted); font-size: 0.85rem; }

.widget-links a { text-decoration: none; color: var(--color-text); font-size: 0.95rem; }
.widget-links a:hover { color: var(--color-accent); }

/* Blocco "Cerca" nella sidebar: casella + pulsante con la lente. */
.widget-search-form { display: flex; gap: 0.5rem; }
.widget-search-form input[type=search] {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
}
.widget-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: #fff;
    color: var(--color-text);
    cursor: pointer;
}
.widget-search-button:hover { background: var(--color-surface); }

/* Blocchi extra della sidebar (backoffice: Sidebar): contenuto libero
   dall'editor, le immagini si ridimensionano sempre alla larghezza della
   colonna (30%), non escono mai dal riquadro. */
.widget-custom-content { font-size: 0.95rem; line-height: 1.6; }
.widget-custom-content img { max-width: 100%; height: auto; border-radius: 6px; }
/* Niente margine automatico del browser sui blocchi — stessa regola di
   .post-content/.page-content più sopra, vale anche qui. */
.widget-custom-content p, .widget-custom-content h1, .widget-custom-content h2,
.widget-custom-content h3, .widget-custom-content h4, .widget-custom-content h5,
.widget-custom-content h6, .widget-custom-content ul, .widget-custom-content ol,
.widget-custom-content blockquote {
    margin: 0;
}

/* Blocco sidebar "Contenuto da Discografia/Composizioni/Editore": ordine
   fisso Titolo/Testo/Immagine in tutti i blocchi della sidebar (richiesta
   esplicita, 13/8/2026) — titolo facoltativo (stesso stile ".widget-title"
   dei widget "di sistema", es. "ULTIME NEWS" — riusato direttamente,
   nessuna classe/regola propria), poi l'abstract facoltativo, poi la
   copertina alla sua proporzione naturale (quadrata per i CD, verticale 2:3
   per Composizioni/Editore — niente ritaglio forzato, si adatta solo alla
   larghezza della colonna); il link è solo su testo+immagine, non sul
   titolo. */
.widget-pub-pick-link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--color-text);
}
.widget-pub-pick-link img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}
.widget-pub-pick-abstract {
    font-size: 0.88rem;
    color: var(--color-muted);
    line-height: 1.5;
}

/* Blocco sidebar "Post del Blog (con immagine)" (12/8/2026): titolo SOPRA
   l'immagine in evidenza (a piena larghezza della colonna, 16:9 come le
   altre immagini in evidenza del sito) — entrambi linkati al post, nessun
   altro campo. Il titolo riusa ".widget-title" (stesso stile di "ULTIME
   NEWS"), qui serve solo aggiungere le proprietà che quella classe non
   copre perché pensata per un <h2>, non per il link che è invece. */
.widget-blog-pick-title {
    display: block;
    text-decoration: none;
}
.widget-blog-pick-title:hover { color: var(--color-accent); }
.widget-blog-pick-image {
    display: block;
}
.widget-blog-pick-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 6px;
}

/* --- Footer: tre settori uguali (33,33% ciascuno). Il blocco delle 3
   colonne occupa sempre almeno l'80% dello schermo (width: 80%), a
   prescindere da quanto testo contengono i singoli settori — non più
   "shrink-wrap" (width: fit-content), che con contenuti brevi le faceva
   apparire ammassate al centro invece di dividersi lo spazio disponibile
   (corretto il 10/8/2026). Centrato con margin: auto; testo dentro ogni
   colonna allineato a sinistra (richiesto esplicitamente il 10/8/2026 — vs.
   centrare il testo stesso, scartato). Sfondo e colore dei font sono
   personalizzabili da /admin/footer.php (footer_bg_color /
   footer_text_color, var CSS su .site-footer con fallback ai colori di
   default del tema). --- */

.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--footer-bg, var(--color-surface));
    color: var(--footer-text, var(--color-text));
    margin-top: 2rem;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 2.5rem 1.25rem;
    width: 80%;
    margin: 0 auto;
}

@media (max-width: 760px) {
    .footer-columns { grid-template-columns: 1fr; width: 100%; }
}

.footer-col-title {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.9rem;
}

/* Contenuto libero dei 3 settori del footer (scritto col mini-editor in
   /admin/footer.php): testo, link e immagini da URL, che si adattano
   sempre alla larghezza della colonna. */
.footer-col-body { color: var(--footer-text, var(--color-muted)); font-size: 0.92rem; }
/* Niente margine automatico/fisso sui blocchi (era 0.6rem fisso sotto ogni
   paragrafo, non richiesto da Cristiano) — stessa regola di
   .post-content/.page-content più sopra, vale anche qui. */
.footer-col-body p, .footer-col-body h1, .footer-col-body h2, .footer-col-body h3,
.footer-col-body h4, .footer-col-body h5, .footer-col-body h6,
.footer-col-body ul, .footer-col-body ol, .footer-col-body blockquote {
    margin: 0;
}
.footer-col-body a { color: var(--footer-text, var(--color-muted)); text-decoration: underline; }
.footer-col-body a:hover { color: var(--color-accent); }
/* Centrata nel blocco, mai più alta di 200px — width/height:auto insieme a
   max-width/max-height la ridimensionano mantenendo le proporzioni
   (qualunque sia il lato più vincolante). */
.footer-col-body img {
    display: block;
    max-width: 100%;
    max-height: 200px;
    width: auto;
    height: auto;
    margin: 0.5rem auto;
    border-radius: 4px;
}

.footer-bottom {
    border-top: 1px solid var(--color-border);
    padding: 1rem 1.25rem;
    color: var(--footer-text, var(--color-muted));
    font-size: 0.85rem;
    text-align: center;
}
.footer-bottom p { margin: 0; }

/* Blocco footer tipo "Elenco con icone" (13/8/2026, in alternativa al testo
   libero — vedi FooterIcons/admin/footer.php): una riga icona+testo per
   voce, pensato per un blocco "Contatti" (posizione/e-mail/WhatsApp/link
   social, come nell'esempio del vecchio sito). L'icona eredita il colore
   del testo (currentColor, vedi FooterIcons::svg) quindi segue da sola
   qualunque colore font del footer sia impostato. */
.footer-col-icon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.footer-col-icon-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--footer-text, var(--color-muted));
    text-decoration: none;
}
/* Hover per riga (13/8/2026, facoltativo): --footer-icon-hover impostata
   inline solo se scelta in admin (vedi layout.php), altrimenti ricade sul
   colore accento del tema come prima. */
a.footer-col-icon-link:hover { color: var(--footer-icon-hover, var(--color-accent)); }
.footer-col-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.3rem;
    height: 1.3rem;
    opacity: 0.85;
}
.footer-col-icon svg { width: 100%; height: 100%; }
.footer-col-icon-text { font-size: 0.92rem; }

/* --- Homepage a blocchi (sezioni componibili dal backoffice) --- */

.home-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.home-section--image {
    color: #fff;
    background-color: #222; /* visibile finché l'immagine non è caricata */
}
.home-section--image .home-section-subtitle { color: rgba(255, 255, 255, 0.85); }

/* Effetto parallax solo su dispositivi non touch: su mobile
   "background-attachment: fixed" è inaffidabile/rende a scatti, quindi lì
   lo sfondo scorre normalmente con la pagina (più compatibile). */
@media (hover: hover) and (pointer: fine) {
    .home-section--parallax { background-attachment: fixed; }
}

.home-section-inner {
    padding: 3rem 1.25rem;
}

.home-section-header {
    text-align: center;
    margin-bottom: 2rem;
}
.home-section-header h2 { font-size: 1.8rem; margin: 0 0 0.5rem; }
.home-section-subtitle { color: var(--color-muted); font-size: 1.05rem; margin: 0; }
/* Testo libero di "image_grid" (card "Testo" in admin): stessa didascalia
   più piccola/peso normale/con più spazio sotto di page-special.php, non il
   titolo di sezione grande e in grassetto usato dagli altri tipi — vedi
   commento lì. */
.home-section--image-grid .home-section-header { margin-bottom: 2.75rem; }
.home-section--image-grid .home-section-header h2 { font-size: 1.15rem; font-weight: 400; }
/* Sfondo a immagine: velo scuro sopra la foto, sempre applicato (non a
   scelta) per leggibilità — stesso principio/stessa opacità del velo
   dell'Highlight qui sotto. A differenza di .page-special-section--boxed80
   (già position:relative di suo), .home-section non lo è: va aggiunto qui. */
.home-section--image-grid {
    position: relative;
}
.home-section--image-grid.home-section--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}
.home-section--image-grid .home-section-inner {
    position: relative;
    z-index: 1;
}
/* Griglie automatiche di copertine (CD/Composizioni/Editore): stesso velo
   scuro automatico su sfondo a immagine, stessa tecnica/opacità. */
.home-section--pub-grid {
    position: relative;
}
.home-section--pub-grid.home-section--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}
.home-section--pub-grid .home-section-inner {
    position: relative;
    z-index: 1;
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}
@media (min-width: 640px) {
    .home-grid-1 { grid-template-columns: 1fr; }
    .home-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .home-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .home-grid-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 639px) {
    .home-grid { grid-template-columns: 1fr; }
}

.home-cell {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.home-cell img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
}
.home-cell p { margin: 0; line-height: 1.6; }
.home-section--image .home-cell p { color: rgba(255, 255, 255, 0.92); }

/* Tipo "Sezione libera": se il campo "Testo" di una cella contiene SOLO un
   link YouTube/Vimeo (rilevato lato server, vedi Str::videoEmbedUrl e
   home.php), al posto della didascalia si mostra il player incorporato,
   centrato e all'80% di larghezza della cella — stessa convenzione "80%
   dello spazio, centrata" degli altri tipi a card. */
.home-cell-video { display: flex; justify-content: center; }
.home-cell-video iframe {
    display: block;
    width: 80%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 6px;
}

.home-cell-button {
    display: inline-block;
    align-self: flex-start;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
}
.home-cell-button:hover { opacity: 0.88; }

.home-cell--news h3 { margin: 0; font-size: 1.1rem; }
.home-cell--news h3 a { text-decoration: none; color: inherit; }
.home-cell--news h3 a:hover { color: var(--color-accent); }
.home-cell-image img { margin-bottom: 0; }

/* Il pulsante "Leggi" resta sempre in basso a destra della cella, anche
   quando titolo/estratto hanno lunghezze diverse tra le news della stessa
   riga (le celle della griglia sono già alte quanto la riga più alta). */
.home-cell--news .home-cell-button {
    align-self: flex-end;
    margin-top: auto;
}

/* Separatore leggero tra una riga e l'altra della griglia news (non sopra
   la prima riga), indipendente dal numero di colonne scelto. */
.home-grid-1 .home-cell--news:nth-child(n+2),
.home-grid-2 .home-cell--news:nth-child(n+3),
.home-grid-3 .home-cell--news:nth-child(n+4),
.home-grid-4 .home-cell--news:nth-child(n+5) {
    border-top: 1px solid var(--color-border);
    padding-top: 1.75rem;
}

/* --- Hero: immagine a tutto schermo, titolo e due pulsanti --- */

.home-section--hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}
/* Velo scuro sopra la foto per garantire che titolo/pulsanti restino
   leggibili qualunque sia l'immagine scelta. */
.home-section--hero.home-section--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.home-hero-inner {
    position: relative;
    z-index: 1;
    padding: 3rem 1.25rem;
}

.home-hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin: 0 0 1rem;
    line-height: 1.15;
}
.home-hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.3rem);
    margin: 0 0 2rem;
    opacity: 0.95;
}

.home-hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.home-cell-button--primary { background: var(--color-accent); }
.home-cell-button--outline {
    background: transparent;
    border: 2px solid currentColor;
}

/* --- Tipo "Fascia" (banner, 13/8/2026, richiesta esplicita): come l'Hero,
   da un bordo all'altro dello schermo (.section-fullbleed) ma con
   un'altezza fissa in px (variabile inline "height", vedi home.php/
   page-special.php) invece che un min-height proporzionale — dentro,
   centrato in entrambe le direzioni, o un testo a caratteri cubitali
   (title/title_color) o una tabella di 2-4 immagini linkabili (sotto). Le
   due card home-section--banner/page-special-section--banner condividono
   le stesse regole di contenuto (banner-text/banner-table*), riusate
   identiche in entrambi i contesti — solo l'inner cambia per via del
   padding/centraggio già diverso fra le due page-builder. */
.home-section--banner,
.page-special-section--banner {
    display: flex;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.home-section--banner .home-section-inner,
.page-special-section--banner .page-special-section-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1.5rem 2rem;
}
/* Velo scuro sopra la foto, stesso principio di Highlight/Hero: garantisce
   che testo/immagini restino leggibili qualunque sia la foto scelta. */
.home-section--banner.home-section--image::before,
.page-special-section--banner.page-special-section--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
}
.home-section--banner.home-section--image .home-section-inner,
.page-special-section--banner.page-special-section--image .page-special-section-inner {
    position: relative;
    z-index: 1;
}

/* Testo a caratteri cubitali: dimensione fissa via clamp (si adatta allo
   schermo ma resta sempre "gigante"), colore a scelta in admin (default
   bianco: pensato prima di tutto per uno sfondo a immagine/colore scuro). */
.banner-text {
    margin: 0;
    text-align: center;
    font-weight: 800;
    line-height: 1.05;
    font-size: clamp(2.2rem, 7vw, 6.5rem);
    color: #fff;
}

/* Tabella di immagini: una sola riga, senza bordi, colonne di larghezza
   uguale (table-layout:fixed) — ogni immagine si adatta in ALTEZZA
   all'altezza fissa della fascia (mai deformata: max-height + width:auto),
   non in larghezza come le altre griglie del sito (qui il vincolo è
   l'altezza della fascia, non la larghezza della colonna). */
.banner-table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    border: none;
    table-layout: fixed;
}
.banner-table-cell {
    border: none;
    text-align: center;
    vertical-align: middle;
    padding: 0 0.75rem;
}
.banner-table-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-width: 100%;
}
.banner-table-image img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
}
/* Zoom al passaggio del mouse SOLO se l'immagine ha un link (l'item è un
   <a>, non uno <span>) — stessa tecnica/durata di .page-special-cd-grid-item
   e di .page-special-image-grid-item. */
a.banner-table-image img { transition: transform 0.3s ease; }
a.banner-table-image:hover img { transform: scale(1.06); }

/* --- Highlight: sfondo + tagline + un pulsante centrale, riempie tutta
   la colonna principale (70% della pagina, sidebar esclusa) — a
   differenza dell'Hero non esce dal grid 70/30, resta dentro .main-col. --- */
.home-section--highlight {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}
/* Stesso velo scuro dell'Hero sopra la foto, per leggibilità. */
.home-section--highlight.home-section--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}
.home-section--highlight .home-section-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}
/* Immagine facoltativa sopra la tagline: stesso .home-section-inner
   flex-column/align-items:center qui sopra la centra automaticamente,
   in fila con tagline e pulsante (stesso gap di 1.5rem tra i tre). */
.home-highlight-image {
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 8px;
}
/* Tagline (riga principale) + sottotitolo (riga secondaria, facoltativa):
   raggruppate in un blocco unico così il gap di 1.5rem di .home-section-
   inner resta tra Immagine/[testo]/Pulsante, non anche tra le due righe
   di testo, che stanno invece più vicine (gap 0.4rem qui sotto). */
.home-highlight-text { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.home-highlight-tagline {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem);
    /* Sempre in grassetto (richiesta esplicita, 12/8/2026) — a differenza
       di dimensione/colore, non personalizzabile dall'admin. */
    font-weight: 700;
    margin: 0;
    max-width: 640px;
}
/* Più piccolo della tagline e leggermente attenuato (opacity, non un
   colore fisso) così funziona sia su sfondo a colore (testo scuro) sia su
   sfondo a immagine (testo bianco, vedi .home-section--image). */
.home-highlight-subtitle {
    font-size: clamp(0.9rem, 1.6vw, 1.05rem);
    /* Sempre in peso normale (richiesta esplicita, 12/8/2026), a
       contrasto con la tagline sempre in grassetto qui sopra. */
    font-weight: 400;
    margin: 0;
    max-width: 640px;
    opacity: 0.75;
}
/* .home-cell-button ha "align-self: flex-start" (pensato per le card della
   griglia, allineate a sinistra) che qui vince su .home-section--highlight
   .home-section-inner { align-items: center }, spingendo il pulsante a
   sinistra invece che al centro: lo si riporta centrato solo qui. */
.home-section--highlight .home-cell-button { align-self: center; }

/* --- Anteprima (faretto) in Home: qui NON è più un blocco duplicato — a
   differenza di "Highlight" sopra, tutte le regole di .home-section--
   preview/.page-special-section--preview (compreso questo sfondo scuro)
   sono raggruppate con :is(...) in un unico blocco, vedi il commento in
   testa alla sezione "Anteprima" delle Pagine Speciali più sopra nel
   file. --- */

/* --- Highlights: carosello di massimo 9 immagini --- */

.home-highlights-viewport { position: relative; }

/* Frecce prev/next: pulsanti bianchi circolari sovrapposti al carosello,
   ai lati verticalmente centrati — frecce sottili (font-weight leggero,
   colore scuro attenuato) per restare una "leggera indicazione", non un
   elemento invadente. I pallini sotto restano la navigazione principale;
   le frecce sono un aiuto in più, specialmente su schermi senza touch. */
.home-highlights-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: rgba(0, 0, 0, 0.55);
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    opacity: 0.85;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.home-highlights-arrow:hover { opacity: 1; color: rgba(0, 0, 0, 0.85); }
.home-highlights-arrow--prev { left: 1rem; }
.home-highlights-arrow--next { right: 1rem; }

.home-highlights-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    /* Nasconde la scrollbar (lo scorrimento resta comunque possibile con
       swipe/trackpad/frecce): la navigazione principale sono i pallini. */
    scrollbar-width: none;
}
.home-highlights-track::-webkit-scrollbar { display: none; }

.home-highlights-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
    aspect-ratio: 16 / 9;
    display: block;
}
.home-highlights-slide img { width: 100%; height: 100%; object-fit: cover; }

.home-highlights-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1.5rem 1.25rem 1rem;
    color: #fff;
    font-weight: 600;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
}

.home-highlights-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}
.home-highlights-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--color-border);
    cursor: pointer;
}
.home-highlights-dot.is-active { background: var(--color-accent); }

/* --- Sottomenù del menu principale (senza JavaScript, via <details>) --- */

.nav-dropdown { position: relative; }
.nav-dropdown summary {
    cursor: pointer;
    list-style: none;
    font-size: var(--menu-font-size, 0.95rem);
    font-weight: 500;
    color: var(--menu-font-color, var(--header-text));
}
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::after { content: ' ▾'; font-size: 0.7em; }
.nav-dropdown[open] summary::after { content: ' ▴'; }

.nav-dropdown-menu {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    z-index: 20;
}
.nav-dropdown-menu li a {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.92rem;
}
.nav-dropdown-menu li a:hover { background: var(--color-surface); color: var(--color-accent); }

@media (max-width: 760px) {
    .nav-dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        margin: 0.25rem 0 0;
        padding-left: 1rem;
    }
}