/* ===================================================
   TOKENS
   =================================================== */
:root {
    --rosso:       #9B1C1F;
    --rosso-scuro: #7A1518;
    --oro:         #C4923A;
    --crema:       #FAF7F2;
    --sabbia:      #F0EBE3;
    --testo:       #2C2C2C;
    --testo-muted: #6B6259;
    --bordo:       #DDD6C9;
    --display:     Georgia, "Times New Roman", serif;
    --corpo:       "Segoe UI", Arial, sans-serif;
    /* Altezza minima della navbar fissa, definita una sola volta e
       riutilizzata ovunque il layout deve conoscerla (padding del body,
       posizione del menu mobile, scroll-margin delle ancore). Un solo
       punto da cambiare invece di valori 72px ripetuti e disallineabili
       in più punti del foglio di stile. */
    --altezza-navbar: 72px;
}

/* ===================================================
   RESET
   =================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: var(--corpo);
    font-size: 18px;
    line-height: 1.75;
    color: var(--testo);
    background: var(--crema);
    padding-top: var(--altezza-navbar);
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
}

/* ===================================================
   CONTAINER
   =================================================== */
.container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 28px;
}

/* ===================================================
   NAVBAR
   =================================================== */
#navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    /* min-height invece di height fissa: con zoom del browser elevato o su
       schermi molto piccoli, logo e titolo possono richiedere più spazio
       verticale di 72px. Con height fissa il contenuto viene schiacciato
       o tagliato; con min-height la navbar può crescere per contenerlo
       correttamente, mantenendo comunque 72px nel caso normale. */
    min-height: var(--altezza-navbar);
    background: white;
    border-bottom: 1px solid var(--bordo);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    flex-wrap: wrap;
    row-gap: 4px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.logo {
    width: clamp(36px, 5vw, 52px);
    height: auto;
    flex-shrink: 0;
}

.titolo {
    font-family: var(--corpo);
    font-weight: 700;
    font-size: clamp(0.78rem, 1.6vw, 1rem);
    color: var(--testo);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 28px;
    flex-shrink: 0;
}

.nav-links a {
    font-family: var(--corpo);
    font-size: 0.92rem;
    color: var(--testo-muted);
    text-decoration: none;
    letter-spacing: 0.03em;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-links a:hover {
    color: var(--rosso);
    border-bottom-color: var(--rosso);
}

.nav-links a.is-active {
    color: var(--rosso);
    border-bottom-color: var(--rosso);
}

/* ===================================================
   NAVBAR — SOTTOMENU (dropdown) per "La Chiesa" e
   "Liturgia e Celebrazioni". Il link principale resta
   sempre cliccabile e porta alla pagina; il sottomenu
   aggiunge un accesso rapido alle sezioni interne.
   =================================================== */
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-item-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--corpo);
    font-size: 0.92rem;
    color: var(--testo-muted);
    text-decoration: none;
    letter-spacing: 0.03em;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-item-link:hover,
.nav-item-link.is-active {
    color: var(--rosso);
    border-bottom-color: var(--rosso);
}

.nav-item-caret {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Desktop: il sottomenu compare come pannello assoluto sotto la voce,
   all'hover o quando il focus è al suo interno (accessibilità da tastiera). */
.nav-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: white;
    border: 1px solid var(--bordo);
    border-radius: 10px;
    box-shadow: 0 16px 32px rgba(44, 44, 44, 0.14);
    padding: 8px;
    margin-top: 10px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    z-index: 110;
}

.nav-item.ha-submenu:hover .nav-submenu,
.nav-item.ha-submenu:focus-within .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}

.nav-item.ha-submenu:hover .nav-item-caret,
.nav-item.ha-submenu:focus-within .nav-item-caret {
    transform: rotate(180deg);
}

.nav-submenu li + li {
    margin-top: 2px;
}

.nav-submenu a {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--testo);
    text-decoration: none;
    white-space: normal;
}

.nav-submenu a:hover,
.nav-submenu a:focus-visible {
    background: var(--sabbia);
    color: var(--rosso);
}

/* Sotto-punti di secondo livello (es. le singole cappelle sotto "Le cappelle
   laterali"): elenco puntato, rientrato e in corpo minore rispetto alle voci
   principali del sottomenu. Sempre visibile quando il sottomenu è aperto,
   non è un ulteriore livello ad hover: resta un semplice elenco. */
.nav-submenu-children {
    list-style: disc;
    margin: 2px 0 6px 0;
    padding-left: 26px;
}

.nav-submenu-children li + li {
    margin-top: 0;
}

.nav-submenu-children a {
    display: list-item;
    padding: 5px 4px;
    font-size: 0.78rem;
    color: var(--testo-muted);
}

.nav-submenu-children a:hover,
.nav-submenu-children a:focus-visible {
    background: transparent;
    color: var(--rosso);
    text-decoration: underline;
}

/* Bottone hamburger: visibile solo in versione mobile, vedi media query sotto */
.nav-toggle {
    display: none;
    border: 0;
    background: none;
    color: var(--testo);
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
}

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

    .nav-links {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: fixed;
        top: var(--altezza-navbar);
        left: 0;
        right: 0;
        width: 100%;
        box-sizing: border-box;
        background: white;
        border-bottom: 0;
        box-shadow: none;
        padding: 0;
        margin: 0;
        /* Nascosto di default: il JS aggiunge/rimuove .aperto al click sul bottone hamburger.
           max-height:0 da solo può lasciare residui visibili (bordo/ombra) su alcuni
           motori di rendering quando il contenuto interno è un flex-column con contenuto:
           visibility:hidden + border/shadow azzerati garantiscono che nulla sia visibile
           quando il menu è chiuso, indipendentemente dal motore di rendering. */
        max-height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: max-height 0.25s ease, visibility 0s linear 0.25s;
    }

    .nav-links.aperto {
        display: flex;
        flex-direction: column;
        width: 100%;
        /* Altezza fissata a 100vh (non dvh): su Firefox per Android, dvh
           si ricalcola dinamicamente durante l'interazione con la pagina
           (per adattarsi alla barra indirizzi che appare/scompare); se
           questo ricalcolo avviene mentre l'utente sta scorrendo dentro
           il menu, il contenitore viene ridimensionato a scroll in corso
           e il browser resetta la posizione di scroll interna, dando la
           sensazione che il menu "salti indietro" da solo. vh classico
           resta fisso per tutta la durata dell'interazione ed elimina
           questo salto, al prezzo di qualche decina di pixel di margine
           in meno o in più rispetto allo spazio realmente visibile. */
        max-height: calc(100vh - var(--altezza-navbar));
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        visibility: visible;
        padding: 8px 0;
        border-bottom: 1px solid var(--bordo);
        box-shadow: 0 12px 24px rgba(44, 44, 44, 0.08);
        transition: max-height 0.25s ease, visibility 0s linear 0s;
    }

    .nav-links a {
        padding: 14px 28px;
        border-bottom: 1px solid var(--bordo);
        width: 100%;
        box-sizing: border-box;
    }

    .nav-links a:last-child,
    .nav-links > .nav-item:last-child .nav-item-link {
        border-bottom: 0;
    }

    .nav-links a.is-active,
    .nav-links a:hover {
        background: var(--crema);
        border-bottom-color: var(--bordo);
    }

    /* Sottomenu mobile: niente hover, l'apertura è gestita dal JS con la
       classe .sottomenu-aperto sul contenitore .nav-item. Il pannello
       diventa un blocco "a fisarmonica" sotto la voce, non più un popup
       assoluto (che su schermi stretti sforerebbe). */
    .nav-item {
        display: block;
        width: 100%;
    }

    .nav-item-link {
        width: 100%;
        box-sizing: border-box;
        padding: 14px 28px;
        border-bottom: 1px solid var(--bordo);
        justify-content: space-between;
    }

    .nav-submenu {
        position: static;
        display: none;
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
        background: var(--crema);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        padding: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        /* Nessuno scroll interno qui: lo scroll è unico e gestito da
           .nav-links.aperto per tutto il menu, sottomenu compresi. Un
           sottomenu espanso si limita ad allungare il contenitore
           esterno, che rimane l'unico elemento scrollabile su touch,
           evitando due aree di scroll annidate che su schermi touch
           possono confondere quale delle due il dito sta muovendo. */
    }

    .nav-item.sottomenu-aperto .nav-submenu {
        display: block;
    }

    .nav-item.sottomenu-aperto .nav-item-caret {
        transform: rotate(180deg);
    }

    /* Voci con tendina attiva solo da desktop (vedi nav_items() in
       includes/layout.php, flag 'submenu_only_desktop'): da mobile il
       caret si nasconde e il pannello a tendina resta sempre chiuso,
       cosi il link principale si comporta come un link diretto uguale
       alle altre voci del menu senza sottomenu. */
    .nav-item[data-tendina-solo-desktop] .nav-item-caret {
        display: none;
    }

    .nav-item[data-tendina-solo-desktop] .nav-submenu {
        display: none !important;
    }

    .nav-submenu a {
        padding: 12px 28px 12px 44px;
        border-bottom: 1px solid var(--bordo);
        border-radius: 0;
    }

    .nav-submenu li:last-child > a {
        border-bottom: 1px solid var(--bordo);
    }

    /* Sotto-punti di secondo livello su mobile: stesso principio del
       desktop, elenco puntato rientrato ulteriormente e in corpo minore,
       già visibile quando il sottomenu padre è aperto (nessun ulteriore
       tap richiesto per vederli). */
    .nav-submenu-children {
        list-style: disc;
        margin: 0;
        padding: 2px 0 6px 64px;
        background: var(--crema);
    }

    .nav-submenu-children li {
        border-bottom: 0;
    }

    .nav-submenu-children a {
        display: list-item;
        padding: 8px 4px;
        border-bottom: 0;
        font-size: 0.8rem;
        color: var(--testo-muted);
    }

    .nav-submenu-children li:last-child a {
        border-bottom: 0;
    }
}

/* ===================================================
   HERO
   =================================================== */
.hero {
    position: relative;
    height: 600px;
    overflow: hidden;
}

@media (max-width: 600px) {
    .hero { height: 100svh; }
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(10, 5, 5, 0.72) 0%,
        rgba(10, 5, 5, 0.38) 50%,
        rgba(10, 5, 5, 0.10) 100%
    );
}

.hero-content {
    position: absolute;
    bottom: 64px;
    left: 0;
    padding: 0 52px;
    color: white;
}

@media (max-width: 600px) {
    .hero-content {
        bottom: 48px;
        padding: 0 28px;
    }
}

.hero-eyebrow {
    font-family: var(--corpo);
    font-size: 0.76rem;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.68);
    margin-bottom: 12px;
}

.hero-title {
    font-family: var(--display);
    font-size: clamp(2.4rem, 6vw, 4rem);
    font-weight: 400;
    line-height: 1.08;
    margin-bottom: 32px;
}

.btn-primary {
    display: inline-block;
    background: var(--rosso);
    color: white;
    text-decoration: none;
    padding: 12px 30px;
    font-family: var(--corpo);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 2px solid var(--rosso);
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.btn-primary:hover {
    background: transparent;
    color: white;
    border-color: white;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}

.btn-secondary {
    display: inline-block;
    background: rgba(255, 255, 255, 0.06);
    color: white;
    text-decoration: none;
    padding: 12px 22px;
    font-family: var(--corpo);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 2px solid rgba(255, 255, 255, 0.72);
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.btn-secondary:hover {
    background: white;
    color: var(--rosso);
    border-color: white;
}

@media (max-width: 600px) {
    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===================================================
   BANDA INTRO
   =================================================== */
.intro-banda {
    background: var(--rosso);
    padding: 36px 0;
}

.intro-testo {
    font-family: var(--display);
    font-size: clamp(1.1rem, 2.5vw, 1.42rem);
    font-style: italic;
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    line-height: 1.7;
}

/* ===================================================
   SEZIONI
   =================================================== */
#chiesa,
#comitato {
    scroll-margin-top: var(--altezza-navbar);
}

#trasparenza {
    scroll-margin-top: var(--altezza-navbar);
}

.sezione {
    padding: 80px 0;
}

.sezione-chiara {
    background: var(--crema);
}

.sezione-calda {
    background: var(--sabbia);
}

.etichetta {
    display: block;
    font-family: var(--corpo);
    font-size: 0.74rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--oro);
    margin-bottom: 10px;
}

.titolo-sezione {
    font-family: var(--display);
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    font-weight: 400;
    color: var(--rosso);
    line-height: 1.15;
}

/* Divisore con croce: elemento firma del sito */
.divisore {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--oro);
    font-size: 0.88rem;
    margin: 20px 0 28px;
}

.divisore::before,
.divisore::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--bordo);
}

.sezione p {
    color: var(--testo);
    margin-bottom: 18px;
}

/* Sotto-titoli all'interno di una sezione (es. singole cappelle, campane) */
.sezione h3 {
    font-family: var(--display);
    font-size: clamp(1.25rem, 2.6vw, 1.6rem);
    font-weight: 400;
    color: var(--rosso-scuro);
    line-height: 1.2;
    margin: 36px 0 12px;
}

.sezione h3:first-of-type {
    margin-top: 0;
}

/* Sotto-sottotitoli (es. "Il restauro del 2025" dentro una singola cappella) */
.sezione h4 {
    font-family: var(--corpo);
    font-size: 1rem;
    font-weight: 700;
    color: var(--rosso-scuro);
    margin: 26px 0 10px;
}

/* Indice di navigazione interna per pagine lunghe con più sezioni ad ancora */
.indice-pagina {
    margin-top: 32px;
    padding: 28px;
    background: var(--sabbia);
    border: 1px solid var(--bordo);
    border-radius: 8px;
}

.indice-titolo {
    display: block;
    font-family: var(--corpo);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oro);
    margin-bottom: 14px;
}

.indice-lista {
    list-style: none;
    display: grid;
    gap: 10px;
}

/* Sottovoci dell'indice (es. le singole cappelle sotto "Le cappelle laterali") */
.indice-lista .indice-sottolista {
    list-style: none;
    display: grid;
    gap: 8px;
    margin-top: 8px;
    padding-left: 18px;
    border-left: 1px solid var(--bordo);
}

.indice-lista .indice-sottolista .link-esterno {
    font-size: 0.85rem;
}

/* Nota conclusiva su fonti/curatela in fondo a una sezione lunga */
.sezione-fonte {
    margin-top: 12px;
    padding-top: 18px;
    border-top: 1px solid var(--bordo);
    font-size: 0.85rem;
    color: var(--testo-muted);
    font-style: italic;
}

/* Nota breve in linea dentro un paragrafo (es. rimando a un regolamento):
   stesso trattamento cromatico di .sezione-fonte ma senza separatore,
   pensata per restare dentro il flusso del testo circostante. */
.nota-piccola {
    font-size: 0.82rem;
    color: var(--testo-muted);
    font-style: italic;
}

/* Variante rossa di .intro-testo, per intestazioni introduttive che devono
   risaltare nel colore principale del sito invece del bianco di default
   usato sullo sfondo scuro di .intro-banda. */
.intro-testo.testo-evidenza {
    color: var(--rosso);
}

/* Layout testo + immagine affiancati (es. testo con logo a fianco).
   Va a colonna singola su schermi stretti, con l'immagine centrata sopra
   o sotto il testo a seconda dell'ordine nel markup. */
.testo-con-logo {
    display: flex;
    align-items: center;
    gap: 32px;
}

.testo-con-logo-testo {
    flex: 1 1 auto;
    min-width: 0;
}

.testo-con-logo-immagine {
    flex: 0 0 auto;
    max-width: 140px;
    height: auto;
}

@media (max-width: 700px) {
    .testo-con-logo {
        flex-direction: column;
        gap: 20px;
    }

    .testo-con-logo-immagine {
        max-width: 110px;
    }
}

/* Elenco puntato dentro una sezione (es. orari delle celebrazioni):
   riprende margini e colore di .sezione p, con bullet coerenti col resto del sito. */
.sezione ul.lista-orari {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.sezione ul.lista-orari li {
    position: relative;
    padding-left: 22px;
    color: var(--testo);
}

.sezione ul.lista-orari li::before {
    content: "✝";
    position: absolute;
    left: 0;
    color: var(--oro);
    font-size: 0.85em;
}

/* Box di approfondimento (es. "Il miracolo della Vergine del Rosario") */
.box-approfondimento {
    background: rgba(196, 146, 58, 0.08);
    border-left: 3px solid var(--oro);
    padding: 18px 22px;
    margin: 22px 0;
    border-radius: 0 8px 8px 0;
}

.box-approfondimento h4 {
    font-family: var(--corpo);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--oro);
    margin-bottom: 10px;
}

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

/* Indice di navigazione interna per pagine lunghe a più parti */
.indice-pagina {
    max-width: 640px;
    margin: 0 auto 8px;
    padding: 24px 28px;
    background: var(--crema);
    border: 1px solid var(--bordo);
    border-radius: 12px;
}

.indice-pagina-titolo {
    font-family: var(--corpo);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--testo-muted);
    margin-bottom: 12px;
}

.indice-pagina-lista {
    list-style: none;
    display: grid;
    gap: 8px;
}

.indice-pagina-lista a {
    color: var(--rosso);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.indice-pagina-lista a:hover,
.indice-pagina-lista a:focus-visible {
    border-bottom-color: var(--rosso);
}

.link-esterno {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--rosso);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-top: 6px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.link-esterno::after {
    content: "›";
    font-size: 1.15rem;
    line-height: 1;
}

.link-esterno:hover {
    border-bottom-color: var(--rosso);
}

/* ===================================================
   GRIGLIA COMITATO
   =================================================== */
.griglia-comitato {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: start;
}

@media (max-width: 700px) {
    .griglia-comitato {
        grid-template-columns: 1fr;
        gap: 36px;
    }
}

.comitato-testo p {
    margin-bottom: 18px;
}

.comitato-foto {
    margin: 0;
}

.foto {
    width: 100%;
    height: auto;
    display: block;
}

.comitato-foto figcaption {
    font-size: 0.83rem;
    color: var(--testo-muted);
    font-style: italic;
    line-height: 1.55;
    margin-top: 10px;
}

.comitato-foto figcaption em {
    font-style: normal;
    font-weight: 700;
}

/* ===================================================
   TRASPARENZA
   =================================================== */
.sezione-trasparenza {
    background: linear-gradient(180deg, var(--crema) 0%, #fff 100%);
}

.trasparenza-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 30px;
}

@media (max-width: 900px) {
    .trasparenza-grid {
        grid-template-columns: 1fr;
    }
}

.trasparenza-card {
    background: white;
    border: 1px solid var(--bordo);
    border-left: 4px solid var(--rosso);
    padding: 24px 22px;
    box-shadow: 0 12px 30px rgba(44, 44, 44, 0.05);
}

.trasparenza-card h3 {
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--rosso);
    line-height: 1.2;
    margin-bottom: 10px;
}

.trasparenza-card p {
    margin-bottom: 0;
}

.trasparenza-card .causale-avviso {
    color: var(--rosso);
}

/* ===================================================
   SITI AMICI
   =================================================== */
.siti-amici-lista {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ===================================================
   ARTICOLI E GALLERIE PUBBLICHE
   =================================================== */
.news-grid,
.gallery-list-grid {
    display: grid;
    gap: 18px;
    margin-top: 24px;
}

.news-grid,
.gallery-list-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
}

.news-card,
.gallery-list-card,
.article-page {
    background: white;
    border: 1px solid var(--bordo);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 10px 28px rgba(44, 44, 44, 0.04);
}

.gallery-photo-trigger {
    width: 100%;
    display: block;
    border: 0;
    padding: 0;
    background: none;
    cursor: zoom-in;
    text-align: left;
}

.gallery-photo-trigger img {
    transition: transform 0.18s ease, filter 0.18s ease;
}

.gallery-photo-trigger:hover img {
    transform: scale(1.01);
    filter: brightness(1.02);
}

.gallery-photo-trigger:focus-visible {
    outline: 2px solid var(--rosso);
    outline-offset: 4px;
    border-radius: 12px;
}

/* Indicatore di riproduzione sovrapposto alle thumbnail dei video */
.gallery-video-trigger {
    position: relative;
    cursor: pointer;
}

.gallery-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(10, 5, 5, 0.68);
    pointer-events: none;
}

.gallery-video-play::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent #fff;
}

/* Placeholder per i video senza thumbnail disponibile (es. Vimeo) */
.gallery-video-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #2a2422, #14100f);
}

.news-card h3,
.gallery-list-card h3 {
    font-family: var(--display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--rosso);
    margin: 8px 0;
}

.news-cover {
    width: 100%;
    display: block;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 12px;
    aspect-ratio: 16 / 10;
}

.article-cover {
    width: 100%;
    display: block;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 12px;
}

.news-meta {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--testo-muted);
}

.article-page {
    max-width: 860px;
    margin: 0 auto;
}

.article-title {
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 3.4rem);
    color: var(--rosso);
    line-height: 1.1;
    margin: 8px 0 18px;
}

.article-content {
    display: grid;
    gap: 14px;
}

/* Carosello a pagina intera in gallery.php: un solo blocco, centrato,
   più alto rispetto alle mini-anteprime della home. Riusa .carosello
   e le classi correlate definite più sotto (finestra/striscia/frecce/barra). */
.gallery-carosello {
    margin-top: 24px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(44, 44, 44, 0.12);
}

.gallery-carosello .carosello-finestra {
    aspect-ratio: 4 / 3;
}

@media (max-width: 700px) {
    .gallery-carosello {
        margin-top: 20px;
        border-radius: 0;
        box-shadow: none;
    }

    .gallery-carosello .carosello-finestra {
        aspect-ratio: 1 / 1;
    }
}

.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;
}

.gallerie-vuote {
    margin: 24px 28px 0;
    color: rgba(255, 255, 255, 0.7);
}

/* ===================================================
   FOOTER
   =================================================== */
.footer {
    background: var(--testo);
    padding: 52px 0;
}

.footer-contenuto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.footer-nome {
    font-family: var(--display);
    font-size: 1.2rem;
    font-style: italic;
    color: white;
}

.footer-luogo {
    font-size: 0.87rem;
    color: rgba(255, 255, 255, 0.55);
}

.footer-copy {
    font-size: 0.77rem;
    color: rgba(255, 255, 255, 0.30);
    margin-top: 18px;
}

.footer-links {
    font-size: 0.8rem;
    margin-top: 6px;
}

.footer-links a {
    display: inline-block;
    color: rgba(196, 146, 58, 0.75);
    text-decoration: none;
    letter-spacing: 0.03em;
    background-image: linear-gradient(var(--oro), var(--oro));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: color 0.2s ease, background-size 0.2s ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: var(--oro);
    background-size: 100% 1px;
}

.footer-contatti {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-contatti-label {
    color: rgba(255, 255, 255, 0.55);
}

.footer-icona-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(196, 146, 58, 0.75);
    line-height: 0;
    background-image: none;
    transition: color 0.2s ease;
}

.footer-icona-link svg {
    display: block;
}

.footer-icona-link:hover,
.footer-icona-link:focus-visible {
    color: var(--oro);
}

/* ===================================================
   ACCESSIBILITA'
   =================================================== */
a:focus-visible {
    outline: 2px solid var(--rosso);
    outline-offset: 3px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}

/* ===================================================
   GALLERIE — CAROSELLO
   =================================================== */
#gallerie {
    scroll-margin-top: var(--altezza-navbar);
}

.sezione-gallerie {
    background: var(--sabbia);
    padding: 80px 0 72px;
}

/* Griglia delle gallerie: 2 colonne su desktop (usata in home) */
.gallerie-griglia {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px;
    padding: 0 28px;
    max-width: 1100px;
    margin: 0 auto;
}

/* Gli item della grid devono poter restringersi sotto la loro larghezza
   intrinseca: senza questo, il carosello flex al loro interno (che ha una
   larghezza naturale pari a N slide affiancate) può sforare la colonna
   assegnata dalla grid, tagliando la galleria e allargando la pagina
   su mobile. */
.gallerie-griglia-item {
    min-width: 0;
    width: 100%;
}

@media (max-width: 700px) {
    .gallerie-griglia {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 0 16px;
    }
}

/* Variante a colonna singola: usata nella pagina elenco gallerie (galleries.php)
   per mostrare caroselli più grandi e leggibili, uno sotto l'altro. */
.gallerie-griglia--singola {
    grid-template-columns: 1fr;
    max-width: 900px;
    gap: 48px;
}

.carosello-nome-galleria {
    font-family: var(--display);
    font-size: 1.3rem;
    margin-bottom: 6px;
}

.carosello-descrizione-galleria {
    color: var(--testo-muted);
    font-size: 0.95rem;
    margin-bottom: 14px;
}

.carosello-link-galleria {
    display: inline-block;
    margin-top: 14px;
}

/* Singolo blocco carosello */
.carosello {
    position: relative;
    background: #111;
    max-width: 100%;
    min-width: 0;
}

/* Finestra: mostra una foto alla volta.
   min-width: 0 impedisce che la larghezza intrinseca della striscia flex
   interna (una per ogni slide) si propaghi verso l'esterno facendo
   sforare il contenitore (vedi anche .gallerie-griglia-item). */
.carosello-finestra {
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

/* Striscia interna che scorre orizzontalmente */
.carosello-striscia {
    display: flex;
    height: 100%;
    transition: transform 0.40s cubic-bezier(0.42, 0, 0.28, 1);
    will-change: transform;
}

/* Ogni slide */
.carosello-slide {
    flex: 0 0 100%;
    min-width: 0;
    height: 100%;
    position: relative;
    cursor: zoom-in;
}

.carosello-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Overlay scuro al hover (invito a cliccare) */
.carosello-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.22s ease;
    pointer-events: none;
}

.carosello-slide:hover::after {
    background: rgba(0, 0, 0, 0.18);
}

/* Icona ingrandisci al hover */
.carosello-slide::before {
    content: "⊕";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    z-index: 2;
    font-size: 2.4rem;
    color: rgba(255, 255, 255, 0);
    pointer-events: none;
    transition: color 0.22s ease, transform 0.22s ease;
}

.carosello-slide:hover::before {
    color: rgba(255, 255, 255, 0.80);
    transform: translate(-50%, -50%) scale(1);
}

/* Frecce prev / next del carosello */
.car-freccia {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    color: white;
    cursor: pointer;
    padding: 14px 11px;
    line-height: 0;
    transition: background 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.car-freccia:hover {
    background: rgba(0, 0, 0, 0.72);
}

.car-freccia:focus-visible {
    outline: 2px solid var(--oro);
    outline-offset: 2px;
}

.car-prev { left: 0; }
.car-next { right: 0; }

/* Barra inferiore: titolo + contatore + punti */
.carosello-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 11px;
    background: rgba(0, 0, 0, 0.55);
    gap: 10px;
}

.carosello-titolo {
    font-family: var(--display);
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.80);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.carosello-punti {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.punto {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

.punto.attivo {
    background: var(--oro);
    transform: scale(1.25);
}

.punto:focus-visible {
    outline: 2px solid var(--oro);
    outline-offset: 3px;
}

.carosello-contatore {
    font-family: var(--corpo);
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

/* ===================================================
   LIGHTBOX
   =================================================== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lightbox.aperto {
    opacity: 1;
    visibility: visible;
}

/* Sfondo cliccabile */
.lb-sfondo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.93);
    cursor: pointer;
}

/* Contenitore immagine */
.lb-centro {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90vw;
    max-height: 82vh;
}

.lb-img {
    max-width: 90vw;
    max-height: 82vh;
    object-fit: contain;
    display: block;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    transition: opacity 0.15s ease;
}

.lb-img.caricamento {
    opacity: 0.4;
}

/* Contenitore video nella lightbox: proporzioni 16:9 responsive */
.lb-video-wrapper {
    width: min(90vw, 1100px);
    aspect-ratio: 16 / 9;
    max-height: 82vh;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.lb-video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Pulsante chiudi */
.lb-chiudi {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    padding: 9px;
    line-height: 0;
    transition: background 0.18s ease, color 0.18s ease;
}

.lb-chiudi:hover {
    background: rgba(255, 255, 255, 0.18);
    color: white;
}

/* Frecce prev/next */
.lb-freccia {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: white;
    cursor: pointer;
    padding: 18px 16px;
    line-height: 0;
    transition: background 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lb-freccia:hover {
    background: rgba(255, 255, 255, 0.20);
}

.lb-prev { left: 18px; }
.lb-next { right: 18px; }

@media (max-width: 600px) {
    .lb-prev { left: 6px; }
    .lb-next { right: 6px; }
    .lb-freccia { padding: 14px 12px; }
}

/* Barra info in basso */
.lb-barra-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 40px 24px 22px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, transparent 100%);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 16px;
    pointer-events: none;
}

.lb-galleria-nome {
    font-family: var(--corpo);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oro);
}

.lb-didascalia {
    font-family: var(--display);
    font-size: 0.98rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.80);
    flex: 1;
    min-width: 0;
}

.lb-contatore {
    font-family: var(--corpo);
    font-size: 0.80rem;
    color: rgba(255, 255, 255, 0.38);
    flex-shrink: 0;
}

.lb-freccia[hidden] {
    display: none;
}

/* Senza queste regole, l'attributo hidden impostato da script.js su lb-img
   e lb-video-wrapper non ha effetto: le rispettive classi impongono già un
   display esplicito (block), che ha una specificità maggiore dello stile
   predefinito applicato dall'attributo hidden e quindi lo sovrascrive.
   Risultato visibile: aprendo un video nella lightbox, l'ultima foto
   caricata in lb-img (di qualunque galleria della pagina) restava
   visibile accanto al video invece di sparire. */
.lb-img[hidden],
.lb-video-wrapper[hidden] {
    display: none;
}