/* ============================================================================
 * www.autolettiga.it - sito Redigo a pagine a blocchi (CMS ps)
 *
 * Le regole di Material Design 3 sono replicate a mano, senza librerie: stessa
 * scelta della web app di supporto (H:\www.autolettiga.it-GENERATE), cosi' i due
 * prodotti sono della stessa famiglia.
 *
 * ATTENZIONE - i token del blocco ":root" e del blocco "prefers-color-scheme: dark"
 * sono IDENTICI a quelli di H:\www.autolettiga.it-GENERATE\staticapp_baseline\css\reset.css,
 * che e' la fonte: se cambiano li' vanno cambiati anche qui, e viceversa. Il confronto
 * si verifica con lo script _script_custom/confronta_token_m3.php (non a occhio).
 * Restano fuori solo i colori di dominio della web app (--dom-kemler-*): riguardano
 * la targa ADR, che qui non esiste.
 *
 * Bootstrap 5.3 (CDN, caricato PRIMA di questo file) fornisce griglia e utility usate
 * dai template dei blocchi, condivisi con gli altri siti a blocchi. Qui si sovrascrive
 * solo cio' che serve per la resa M3.
 * ============================================================================ */

/* ===== Roboto self-hosted (guida §8.1: nessuna chiamata a Google Fonts) =====
   File variabile: lo stesso woff2 copre i pesi 400-700, un file per subset. */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/roboto/roboto-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url('../fonts/roboto/roboto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Token Material Design 3 (fonte: staticapp_baseline/css/reset.css) ===== */
:root {
    color-scheme: light dark;

    /* --- Type scale --- */
    --m3-font: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --m3-title-large-size: 1.375rem;
    --m3-title-large-line: 1.75rem;
    --m3-title-size: 1rem;
    --m3-title-line: 1.5rem;
    --m3-body-size: 1rem;
    --m3-body-line: 1.5rem;
    --m3-body-small-size: 0.875rem;
    --m3-body-small-line: 1.25rem;
    --m3-label-size: 0.875rem;
    --m3-label-line: 1.25rem;

    /* --- Shape --- */
    --m3-corner-xs: 4px;
    --m3-corner-s: 8px;
    --m3-corner-m: 12px;
    --m3-corner-l: 16px;
    --m3-corner-full: 9999px;

    /* --- Spazi: griglia 4dp --- */
    --m3-sp-1: 4px;
    --m3-sp-2: 8px;
    --m3-sp-3: 12px;
    --m3-sp-4: 16px;
    --m3-sp-6: 24px;

    /* --- Target minimo di tocco: 48dp --- */
    --m3-tap: 48px;
    --m3-appbar-h: 56px;

    /* --- Motion --- */
    --m3-ease: cubic-bezier(0.2, 0, 0, 1);
    --m3-duration: 180ms;

    /* --- Elevation --- */
    --m3-elev-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    --m3-elev-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);

    /* --- Color role: schema chiaro --- */
    --m3-primary: #00639b;
    --m3-on-primary: #ffffff;
    --m3-primary-container: #cfe5ff;
    --m3-on-primary-container: #001d33;
    --m3-secondary-container: #d6e4f7;
    --m3-on-secondary-container: #101c2b;
    --m3-surface: #f8f9ff;
    --m3-surface-container: #ecedf4;
    --m3-surface-container-high: #e6e8ee;
    --m3-on-surface: #191c20;
    --m3-on-surface-variant: #42474e;
    --m3-outline: #72777f;
    --m3-outline-variant: #c2c7cf;
    --m3-error: #ba1a1a;
    --m3-error-container: #ffdad6;
    --m3-on-error-container: #410002;
}

@media (prefers-color-scheme: dark) {
    :root {
        --m3-primary: #96ccff;
        --m3-on-primary: #003355;
        --m3-primary-container: #004a78;
        --m3-on-primary-container: #cfe5ff;
        --m3-secondary-container: #34485c;
        --m3-on-secondary-container: #d6e4f7;
        --m3-surface: #111418;
        --m3-surface-container: #1d2024;
        --m3-surface-container-high: #272a2f;
        --m3-on-surface: #e1e2e8;
        --m3-on-surface-variant: #c2c7cf;
        --m3-outline: #8c9199;
        --m3-outline-variant: #42474e;
        --m3-error: #ffb4ab;
        --m3-error-container: #93000a;
        --m3-on-error-container: #ffdad6;
    }
}

/* ===== Base ===== */
html {
    scroll-behavior: smooth;
    /* offset per le ancore #anchor sotto la app bar fissa */
    scroll-padding-top: calc(var(--m3-appbar-h) + var(--m3-sp-2));
}

body {
    font-family: var(--m3-font);
    font-size: var(--m3-body-size);
    line-height: var(--m3-body-line);
    background-color: var(--m3-surface);
    color: var(--m3-on-surface);
    -webkit-tap-highlight-color: transparent;
}

a {
    color: var(--m3-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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

/* Selezione del testo: standard dei siti a blocchi (guida §8.2) */
::selection {
    background: #00639b;
    color: #ffffff;
}

/* Indicatore di focus: visibile da tastiera, non al tocco */
:focus-visible {
    outline: 3px solid var(--m3-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition-duration: 1ms !important;
    }
}

/* ===== Top app bar (header) ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    background-color: var(--m3-surface-container);
    color: var(--m3-on-surface);
}

.header-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--m3-sp-3);
    min-height: var(--m3-appbar-h);
    padding: var(--m3-sp-2) var(--m3-sp-4);
    max-width: 1320px;
    margin: 0 auto;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: var(--m3-sp-3);
    color: inherit;
    margin-right: auto;
    min-height: var(--m3-tap);
}

.site-logo:hover {
    text-decoration: none;
}

.site-logo img {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
}

.site-wordmark {
    font-size: var(--m3-title-large-size);
    line-height: var(--m3-title-large-line);
    font-weight: 500;
}

.nav-group {
    display: flex;
    align-items: center;
    gap: var(--m3-sp-2);
}

.nav-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--m3-tap);
    padding: 0 var(--m3-sp-4);
    border-radius: var(--m3-corner-full);
    color: var(--m3-on-surface-variant);
    font-size: var(--m3-label-size);
    font-weight: 500;
}

.nav-link:hover {
    background-color: var(--m3-surface-container-high);
    text-decoration: none;
}

.nav-link.active {
    background-color: var(--m3-secondary-container);
    color: var(--m3-on-secondary-container);
}

/* Burger: visibile solo su mobile, diventa una X a menu aperto (guida §7.15b) */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: var(--m3-tap);
    height: var(--m3-tap);
    padding: 0;
    border: 0;
    border-radius: var(--m3-corner-full);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.site-header.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-header.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.site-header.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 767.98px) {
    .nav-toggle {
        display: flex;
    }

    .nav-group {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: 0;
        padding: 0;
        overflow: hidden;
        background-color: var(--m3-surface-container);
        box-shadow: var(--m3-elev-1);
        transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .site-header.nav-open .nav-group {
        max-height: 60vh;
        padding: var(--m3-sp-2) 0;
    }

    .nav-link {
        border-radius: 0;
    }

    .site-wordmark-tagline {
        display: none;
    }
}

/* ===== Footer ===== */
.site-footer {
    background-color: var(--m3-surface-container);
    color: var(--m3-on-surface-variant);
    padding: var(--m3-sp-6) 0;
    font-size: var(--m3-body-small-size);
    line-height: var(--m3-body-small-line);
}

.footer-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--m3-sp-2) var(--m3-sp-4);
    text-align: center;
}

.footer-brand {
    font-weight: 500;
    color: var(--m3-on-surface);
}

/* ===== Blocchi: margini di sezione (enum MargineSuperiore/Inferiore) ===== */
.pt-blocco-2 {
    padding-top: 2rem;
}

.pb-blocco-2 {
    padding-bottom: 2rem;
}

.pt-blocco-3 {
    padding-top: 3rem;
}

.pb-blocco-3 {
    padding-bottom: 3rem;
}

.mt-blocco-2 {
    margin-top: 2rem;
}

.mb-blocco-2 {
    margin-bottom: 2rem;
}

.mt-blocco-3 {
    margin-top: 3rem;
}

.mb-blocco-3 {
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .pt-blocco-2 {
        padding-top: 6rem;
    }

    .pb-blocco-2 {
        padding-bottom: 6rem;
    }

    .pt-blocco-3 {
        padding-top: 9rem;
    }

    .pb-blocco-3 {
        padding-bottom: 9rem;
    }

    .mt-blocco-2 {
        margin-top: 6rem;
    }

    .mb-blocco-2 {
        margin-bottom: 6rem;
    }

    .mt-blocco-3 {
        margin-top: 9rem;
    }

    .mb-blocco-3 {
        margin-bottom: 9rem;
    }
}

/* Ancora di sezione: impatto zero sul layout (guida §2.6 punto 8) */
.sec-anchor {
    display: block;
    height: 0;
}

/* ===== Tipografia dei blocchi =====
   Le dimensioni si moltiplicano per le CSS var --dim-* (enum DimOcchiello/DimTitolo/
   DimSottoTitolo, default 100), emesse inline da getStileDimensioni(). */
.occhiello {
    font-size: calc(var(--m3-label-size) * var(--dim-occhiello, 100) / 100);
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: inherit;
}

.blocco-titolo {
    font-size: calc(1.75rem * var(--dim-titolo, 100) / 100);
    line-height: 1.2;
    font-weight: 500;
    color: inherit;
}

/* I testi secondari NON usano un token di colore fisso ma il colore ereditato, smorzato:
   un blocco con un proprio "Colore del testo" (es. la banda chiara dell'hero) sovrascrive
   il colore della sezione, e un token del tema resterebbe illeggibile sopra quello sfondo. */
.sottotitolo {
    font-size: calc(var(--m3-title-large-size) * var(--dim-sottotitolo, 100) / 100);
    line-height: 1.35;
    color: inherit;
    opacity: 0.8;
}

@media (min-width: 768px) {
    .blocco-titolo {
        font-size: calc(2.25rem * var(--dim-titolo, 100) / 100);
    }
}

/* Scala degli heading dentro il contenuto RTE (guida §7.12): dopo le regole dei titoli
   di blocco, cosi' a pari specificita' vince questa nel contenuto redazionale. */
.contenuto h1,
.contenuto h2,
.contenuto h3,
.contenuto h4,
.contenuto h5,
.contenuto h6 {
    line-height: 1.3;
    margin: 1.4em 0 0.4em;
    font-weight: 500;
}

.contenuto> :first-child {
    margin-top: 0;
}

.contenuto h1 {
    font-size: 1.5em;
}

.contenuto h2 {
    font-size: 1.3em;
}

.contenuto h3 {
    font-size: 1.15em;
}

.contenuto h4 {
    font-size: 1.05em;
}

.contenuto h5 {
    font-size: 1em;
}

.contenuto h6 {
    font-size: 0.9em;
}

.contenuto p:last-child {
    margin-bottom: 0;
}

/* Spaziatura aggiuntiva per elemento (enum SpaziaturaPrima / SpaziaturaDopo): additiva
   via pseudo-elemento, cosi' non tocca i margini di base. */
.sp-prima-doppio::before,
.sp-prima-triplo::before,
.sp-dopo-doppio::after,
.sp-dopo-triplo::after {
    content: "";
    display: block;
}

.sp-prima-doppio::before {
    height: 2rem;
}

.sp-prima-triplo::before {
    height: 3rem;
}

.sp-dopo-doppio::after {
    height: 2rem;
}

.sp-dopo-triplo::after {
    height: 3rem;
}

/* Forzatura tipografica per elemento (enum Tipografia) */
.tipo-normale {
    font-weight: 400 !important;
    font-style: normal !important;
}

.tipo-grassetto {
    font-weight: 700 !important;
}

.tipo-corsivo {
    font-style: italic !important;
}

.tipo-grassetto-corsivo {
    font-weight: 700 !important;
    font-style: italic !important;
}

/* ===== Azioni dei blocchi: pulsanti M3 =====
   .blocco-azioni e' flex: l'allineamento orizzontale (classi text-*) va mappato su
   justify-content, altrimenti non sposta i pulsanti (guida §2.6). */
.blocco-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m3-sp-2);
    margin-top: var(--m3-sp-4);
}

.blocco-azioni.text-center {
    justify-content: center;
}

.blocco-azioni.text-end {
    justify-content: flex-end;
}

.btn-blocco {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--m3-tap);
    padding: 0 var(--m3-sp-6);
    border: 1px solid currentColor;
    border-radius: var(--m3-corner-full);
    font-size: var(--m3-label-size);
    line-height: var(--m3-label-line);
    font-weight: 500;
    text-align: center;
    color: inherit;
    transition: background-color var(--m3-duration) var(--m3-ease);
}

.btn-blocco:hover {
    text-decoration: none;
}

/* Skin dei pulsanti (catalogo psbottoneskin): la variante segue la semantica M3.
   "Pieno" usa i colori di marca FISSI e non i token del tema: e' l'azione principale e
   deve reggere il contrasto anche sui blocchi con uno Sfondo a colore fisso (es. la banda
   chiara dell'hero), dove un colore che segue il tema scuro risulterebbe slavato. */
.btn-skin-filled {
    border-color: transparent;
    background-color: #00639b;
    color: #ffffff;
}

.btn-skin-filled:hover {
    background-color: #001d33;
    color: #ffffff;
}

.btn-skin-tonal {
    border-color: transparent;
    background-color: var(--m3-secondary-container);
    color: var(--m3-on-secondary-container);
}

.btn-skin-tonal:hover {
    background-color: var(--m3-surface-container-high);
    color: var(--m3-on-secondary-container);
}

.btn-skin-outlined {
    border-color: var(--m3-outline);
    background-color: transparent;
    color: var(--m3-primary);
}

.btn-skin-outlined:hover {
    background-color: var(--m3-surface-container);
}

.blocco-allegato {
    margin-top: var(--m3-sp-3);
}

/* ===== Blocco generico ===== */
.blocco-generico .titoli-2col {
    align-items: flex-start;
}

/* Immagine a lato: colonne alla stessa altezza (vince su .align-items-start di Bootstrap) */
.blocco-generico .row.align-items-start {
    align-items: stretch !important;
}

/* Wrapper stretto attorno all'immagine (aggancio dello spinner di caricamento).
   Le immagini piu' strette della colonna restano centrate: un logo o una foto piccola
   allineata a sinistra sotto titoli centrati sembra fuori posto. */
.lazy-img-holder {
    display: block;
    line-height: 0;
    text-align: center;
}

/* ===== Card figlie (griglia) ===== */
.card-figlio {
    background-color: var(--m3-surface-container);
    border-radius: var(--m3-corner-l);
    padding: var(--m3-sp-4);
    overflow: hidden;
}

.card-figlio img,
.figlio-overlay img {
    border-radius: var(--m3-corner-m);
}

.testo-figlio {
    color: inherit;
    opacity: 0.85;
}

/* Allineamento omogeneo dei campi tra card sorelle (CSS subgrid, guida §2.6 punto 5) */
.figli-omogeneo {
    display: grid;
    grid-template-columns: repeat(var(--figli-cols, 3), minmax(0, 1fr));
    gap: var(--m3-sp-6);
    margin-top: var(--m3-sp-6);
}

.figli-omogeneo .card-figlio {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
    gap: var(--m3-sp-2);
}

.figancora-alto .card-figlio {
    align-content: start;
}

.figancora-centro .card-figlio {
    align-content: center;
}

.figancora-basso .card-figlio {
    align-content: end;
}

.figli-omogeneo .fg-spacer {
    min-height: var(--fig-altezza, 0);
}

.figli-omogeneo .fg-media img {
    width: 100%;
    height: var(--fig-altezza, auto);
    object-fit: cover;
}

@media (max-width: 767.98px) {
    .figli-omogeneo {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Testo sovrapposto all'immagine */
.figlio-overlay {
    position: relative;
}

.figlio-overlay .figlio-overlay-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--m3-sp-4);
    color: #ffffff;
    z-index: 2;
}

.figlio-overlay img {
    position: relative;
    z-index: 0;
}

.figlio-overlay::before,
.figli-overlay .card-figlio::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--m3-corner-m);
    pointer-events: none;
}

.grad-leggero::before {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 45%);
}

.grad-medio::before {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0) 60%);
}

.grad-forte::before {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.1) 75%);
}

.grad-nessuno::before {
    background: none;
}

/* Allineamento verticale in basso: il contenuto si ancora al fondo della colonna */
.allinea-basso {
    justify-content: flex-end;
}

/* ===== Figli come elenco (StileFigli != griglia) ===== */
.elenco-passi {
    counter-reset: passo;
    list-style: none;
    padding: 0;
    margin: var(--m3-sp-4) 0 0;
}

.elenco-passi li {
    display: flex;
    gap: var(--m3-sp-4);
    padding: var(--m3-sp-3) 0;
    border-bottom: 1px solid var(--m3-outline-variant);
    counter-increment: passo;
}

.elenco-passi li:last-child {
    border-bottom: 0;
}

.elenco-passi .np-num {
    flex: 0 0 auto;
    min-width: 1.5em;
    font-weight: 500;
    color: var(--m3-primary);
}

.elenco-passi.elenco-romani .np-num::before {
    content: counter(passo, upper-roman);
}

.elenco-passi.elenco-arabi .np-num::before {
    content: counter(passo, decimal);
}

.elenco-passi.elenco-punti .np-num::before {
    content: "\2022";
}

.elenco-passi .np-titolo {
    display: block;
}

.elenco-passi .np-contenuto {
    color: inherit;
    opacity: 0.85;
}

/* ===== Gallery orizzontale (Swiper) ===== */
.gallery-orizzontale {
    position: relative;
}

.gallery-orizzontale .gallery-track,
.sec-fullwidth-gallery .gallery-track {
    overflow: hidden;
}

.gallery-orizzontale:not(.gallery-fullwidth) .gallery-track {
    padding: 0 var(--m3-sp-3);
}

/* Le slide hanno larghezza propria (slidesPerView:'auto'): l'altezza la detta --gallery-h */
.gallery-track .swiper-wrapper {
    align-items: flex-start;
}

.gallery-item {
    width: auto;
    margin: 0;
    max-width: 90vw;
}

.gallery-img {
    height: var(--gallery-h, 60vh);
    width: auto;
    max-width: none;
    display: block;
    object-fit: cover;
    border-radius: var(--m3-corner-m);
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none;
}

/* La didascalia segue la larghezza dell'immagine sopra: width:0 non contribuisce alla
   larghezza della colonna (la fissa l'immagine), min-width:100% la fa poi combaciare. */
.gallery-caption {
    width: 0;
    min-width: 100%;
    box-sizing: border-box;
    padding-top: var(--m3-sp-2);
    font-size: var(--m3-body-small-size);
    line-height: var(--m3-body-small-line);
    color: inherit;
    opacity: 0.85;
}

.gallery-caption .titolo {
    font-size: var(--m3-title-large-size);
    line-height: var(--m3-title-large-line);
}

.gallery-nav {
    position: absolute;
    top: calc(var(--gallery-h, 60vh) / 2);
    transform: translateY(-50%);
    z-index: 3;
    width: var(--m3-tap);
    height: var(--m3-tap);
    border: 0;
    border-radius: var(--m3-corner-full);
    background-color: var(--m3-surface-container-high);
    color: var(--m3-on-surface);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--m3-elev-1);
}

.gallery-nav-prev {
    left: var(--m3-sp-4);
}

.gallery-nav-next {
    right: var(--m3-sp-4);
}

/* Con una sola immagine (watchOverflow) le frecce vanno nascoste, non lasciate inerti */
.gallery-nav.swiper-button-disabled,
.gallery-nav.swiper-button-lock {
    display: none;
}

/* ===== Immagine-Fullwidth: slide a tutta larghezza con overlay ===== */
.sec-fullwidth-gallery {
    position: relative;
}

.fullwidth-slide {
    position: relative;
    height: var(--gallery-h, 100vh);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: var(--m3-surface-container);
}

.sec-fullwidth-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

.fullwidth-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--m3-sp-6);
    color: #ffffff;
    z-index: 2;
}

.fullwidth-overlay-inner {
    position: relative;
    max-width: 46rem;
    padding: var(--m3-sp-4);
    z-index: 0;
}

.fullwidth-overlay-inner.has-scrim::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--scrim, #000000);
    opacity: 0.55;
    border-radius: var(--m3-corner-m);
    z-index: -1;
}

/* Embed Vimeo responsivo 16:9 */
.video-vimeo-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.video-vimeo-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ===== Lazy loading: placeholder + spinner per immagine ===== */
.img-loading {
    position: relative;
}

.img-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid var(--m3-outline-variant);
    border-top-color: var(--m3-primary);
    border-radius: var(--m3-corner-full);
    animation: autolettiga-spin 0.8s linear infinite;
}

@keyframes autolettiga-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== Lightbox (aperta al click su .gallery-img, gestita in main.js) =====
   Overlay con dentro uno Swiper: trascinamento, frecce e bullets stanno DENTRO la foto. */
body.gallery-lightbox-open {
    overflow: hidden;
}

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
}

.gallery-lightbox.is-open {
    display: flex;
}

.gallery-lightbox-swiper {
    position: relative;
    width: min(92vw, 1400px);
    height: 92vh;
}

.gallery-lightbox-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-lightbox-img {
    max-width: 100%;
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--m3-corner-m);
    user-select: none;
    -webkit-user-drag: none;
}

/* Spinner per-slide: la full-size e' generata on-demand, puo' metterci un attimo */
.gallery-lightbox-slide.is-loading::after {
    content: "";
    position: absolute;
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: var(--m3-corner-full);
    animation: autolettiga-spin 0.8s linear infinite;
}

.gallery-lightbox-slide.is-loading .gallery-lightbox-img {
    opacity: 0;
}

/* Bullets: dentro la foto, in basso al centro. La fascia non e' cliccabile (chiuderebbe
   la lightbox), i singoli bullet si'. */
.gallery-lightbox-bullets {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--m3-sp-4);
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: var(--m3-sp-2);
    pointer-events: none;
}

.gallery-lightbox-bullets .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    margin: 0;
    background: #ffffff;
    opacity: 0.45;
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.gallery-lightbox-bullets .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.3);
}

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
    position: absolute;
    z-index: 3;
    min-width: var(--m3-tap);
    min-height: var(--m3-tap);
    border: 0;
    background: transparent;
    color: #ffffff;
    line-height: 1;
    cursor: pointer;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.gallery-lightbox-close {
    top: var(--m3-sp-4);
    right: var(--m3-sp-4);
    font-size: 2.5rem;
}

.gallery-lightbox-prev,
.gallery-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
}

.gallery-lightbox-prev {
    left: var(--m3-sp-2);
}

.gallery-lightbox-next {
    right: var(--m3-sp-2);
}

/* Con una sola foto le frecce vanno nascoste invece che restare inerti */
.gallery-lightbox-prev.swiper-button-disabled,
.gallery-lightbox-next.swiper-button-disabled {
    display: none;
}

/* ===== Pulsante "torna su" (guida §7.15) ===== */
.back-to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: var(--m3-corner-full);
    background-color: var(--m3-primary);
    color: var(--m3-on-primary);
    box-shadow: var(--m3-elev-2);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--m3-duration) var(--m3-ease), transform var(--m3-duration) var(--m3-ease);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 576px) {
    .back-to-top {
        right: 1rem;
        bottom: 1rem;
        width: 44px;
        height: 44px;
    }
}

/* ===== Pagina 404 ===== */
.pagina-404 {
    padding: 4rem 0;
}

.errore-codice {
    font-size: 5rem;
    line-height: 1;
    font-weight: 500;
    color: var(--m3-outline-variant);
    margin-bottom: var(--m3-sp-4);
}

/* ===== Override difensivi Bootstrap =====
   Un redattore puo' scrivere <a class="btn btn-primary"> nel contenuto RTE: senza questi
   override uscirebbe con la palette Bootstrap invece che con quella del sito. */
.btn {
    border-radius: var(--m3-corner-full);
    min-height: var(--m3-tap);
    font-weight: 500;
}

.btn-primary {
    --bs-btn-bg: var(--m3-primary);
    --bs-btn-border-color: var(--m3-primary);
    --bs-btn-color: var(--m3-on-primary);
    --bs-btn-hover-bg: var(--m3-on-primary-container);
    --bs-btn-hover-border-color: var(--m3-on-primary-container);
    --bs-btn-hover-color: var(--m3-on-primary);
}