/* ===== Mingardo — stile base sito a blocchi ===== */

/* Futura PT — self-hosted (woff2/woff). Book = pesi normali, Bold = grassetti. */
@font-face {
    font-family: 'Futura PT';
    src: url('../fonts/futura-pt/Futura%20PT%20Book.woff2') format('woff2'),
        url('../fonts/futura-pt/Futura%20PT%20Book.woff') format('woff');
    font-weight: 100 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura PT';
    src: url('../fonts/futura-pt/Futura%20PT%20Bold.woff2') format('woff2'),
        url('../fonts/futura-pt/Futura%20PT%20Bold.woff') format('woff');
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --clr-bg: #ffffff;
    --clr-text: #000000;
    --clr-muted: #999999;
    --font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --font-sans: 'Futura PT', 'Century Gothic', 'Avenir Next', 'Segoe UI', Arial, sans-serif;
    --header-h: 90px;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: var(--font-sans);
    font-weight: 300;
    color: var(--clr-text);
    background: var(--clr-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

/* Tipografia: titoli in EB Garamond, testo/paragrafi/pulsanti in Futura PT */
h1, h2, h3, h4, h5, h6,
.title, .titolo, .titoletto {
    font-family: var(--font-serif);
    font-weight: 500;
}

p, li, span, a, small, label, blockquote, figcaption, td, th,
button, .btn, input, textarea, select {
    font-family: var(--font-sans);
}

/* Occhiello (sopra il titolo) e sottotitolo (sotto il titolo): stile identico, Futura PT */
.occhiello,
.sottotitolo {
    font-family: var(--font-sans);
}

/* Blocco-Generico (padre + figli): titolo +40%, occhiello/sottotitolo +20% rispetto al testo (base) */
.blocco-generico h2,
.blocco-generico h4 {
    font-size: 1.4em;
}

.blocco-generico .occhiello,
.blocco-generico .sottotitolo {
    font-size: 1.2em;
}

/* Contenuto figlio allineato in basso: spinge il contenuto al fondo della col (equal-height),
   tutto flush senza margini tra gli elementi */
.blocco-generico .allinea-basso > :first-child {
    margin-top: auto;
}

.blocco-generico .allinea-basso > *,
.blocco-generico .allinea-basso *:last-child {
    margin-bottom: 0 !important;
}

/* Trim del semi-leading sotto l'ultima riga di testo (line-height), per far combaciare
   il testo col fondo della colonna allineata in basso */
.blocco-generico .allinea-basso > :last-child,
.blocco-generico .allinea-basso *:last-child > :last-child,
.blocco-generico .allinea-basso p:last-child {
    margin-bottom: calc((1em - 1lh) / 2) !important;
}

/* Trim del semi-leading sopra la prima riga di testo, per far partire il testo dal
   bordo alto della colonna (colonne allineate in alto, non le immagini) */
.blocco-generico .row > [class*="col-"]:not(.allinea-basso) > :first-child:not(img) {
    margin-top: calc((1em - 1lh) / 2);
}

/* Spaziatura di 1em prima del testo (contenuto) nei figli, solo se preceduto da altro */
.blocco-generico .testo-figlio:not(:first-child) {
    margin-top: 1em;
}

/* ===== Gallery orizzontale (scroll full-width, altezza fissa, lightbox) ===== */
.gallery-orizzontale {
    width: 100%;
    position: relative; /* contenitore per le frecce in overlay */
}

.gallery-track {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem; /* 50% del gap standard g-4 (1.5rem) usato in Blocco-Generico */
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0.75rem; /* con didascalie: margine laterale = gap tra le immagini */
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    /* scrollbar nascosta: lo scorrimento avviene con frecce o trascinamento */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}

/* Senza didascalie: immagini edge-to-edge, prima foto full-width (nessun bordo bianco) */
.gallery-orizzontale.gallery-fullwidth .gallery-track {
    padding: 0;
}

.gallery-track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.gallery-track.is-dragging {
    cursor: grabbing;
    user-select: none;
}

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

/* Altezza fissa dalla gallery (--gallery-h), larghezza proporzionale (auto) */
.gallery-img {
    height: var(--gallery-h, 60vh);
    width: auto;
    max-width: none;
    display: block;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-drag: none; /* evita il ghost-drag nativo dell'immagine */
}

/* Frecce di scorrimento: trasparenti, sopra le immagini, centrate sulla banda immagine */
.gallery-nav {
    position: absolute;
    top: calc(var(--gallery-h, 60vh) / 2);
    transform: translateY(-50%);
    z-index: 3;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 2.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.5rem 1rem;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6); /* leggibile anche su immagini chiare */
}

.gallery-nav-prev {
    left: 0.25rem;
}

.gallery-nav-next {
    right: 0.25rem;
}

.gallery-nav.is-hidden {
    display: none;
}

/* La didascalia segue SEMPRE 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: 0.6rem;
}

.gallery-caption .occhiello {
    font-size: 0.85em;
    margin-bottom: 0.1rem;
}

.gallery-caption .titolo {
    font-size: 1.15em;
    margin-bottom: 0.1rem;
}

.gallery-caption .sottotitolo {
    font-size: 0.95em;
    margin-bottom: 0.2rem;
}

.gallery-caption .gallery-testo {
    font-size: 0.9em;
}

/* Lightbox (aperta al click su .gallery-img, gestita in main.js) */
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-img {
    max-width: 92vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
    position: absolute;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    padding: 0.5rem 1rem;
}

.gallery-lightbox-close {
    top: 1rem;
    right: 1.25rem;
    font-size: 2.5rem;
}

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

.gallery-lightbox-prev {
    left: 0.5rem;
}

.gallery-lightbox-next {
    right: 0.5rem;
}

/* ===== News (card, archivio, blocco Ultime News) ===== */
.news-card {
    display: block;
    color: inherit;
    height: 100%;
}

.news-card-img-wrap {
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.news-card-img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

.news-card:hover .news-card-img {
    transform: scale(1.03);
}

.news-card .news-data {
    font-size: 0.8em;
    color: var(--clr-muted);
    margin-bottom: 0.25rem;
}

.news-card-titolo {
    font-size: 1.25em;
    margin-bottom: 0.15rem;
}

.news-card:hover .news-card-titolo {
    text-decoration: underline;
}

/* Blocco Ultime News: link "Leggi tutte" a destra, allineato in basso col titolo */
.ultime-news-header {
    gap: 1rem;
}

.btn-leggi-news {
    white-space: nowrap;
    text-decoration: underline;
    font-size: 0.95em;
}

.btn-leggi-news:hover {
    opacity: 0.6;
}

/* Dettaglio news */
.news-detail .news-data {
    font-size: 0.85em;
    color: var(--clr-muted);
}

.news-detail .news-contenuto {
    margin-top: 1rem;
}

/* Sentinella infinite scroll (nessun ingombro visivo) */
.infinite-sentinel {
    width: 100%;
    height: 1px;
}

/* ===== Header ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(6px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.header-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: var(--header-h);
    gap: 1rem;
}

.nav-group {
    list-style: none;
    display: flex;
    gap: 2.75rem;
    margin: 0;
    padding: 0;
}

.nav-left {
    justify-content: flex-start;
}

.nav-right {
    justify-content: flex-end;
}

.nav-social {
    display: none;
}

.nav-link {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--clr-text);
    transition: opacity 0.2s ease;
}

.nav-link:hover {
    opacity: 0.6;
}

.nav-disabled {
    color: var(--clr-text);
    cursor: default;
}

.nav-disabled:hover {
    opacity: 1;
}

.site-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-logo img {
    height: 22px;
    width: auto;
    display: block;
}

.footer-lang {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.5rem;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
}

.lang-link {
    color: var(--clr-muted);
    transition: color 0.2s ease;
}

.lang-link.active,
.lang-link:hover {
    color: var(--clr-text);
}

.lang-sep {
    color: rgba(0, 0, 0, 0.25);
}

.nav-toggle {
    display: none;
    background: none;
    border: 0;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--clr-text);
    display: block;
}

/* ===== Blocchi ===== */
main,
.site-content {
    flex: 1 0 auto;
}

section.sec-auto {
    width: 100%;
}

/* ===== Footer ===== */
.site-footer {
    margin-top: auto;
    padding: 3rem 0 2rem;
    font-size: 0.9rem;
    color: var(--clr-text);
}

.footer-top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}

.footer-social {
    display: flex;
    gap: 1.5rem;
    justify-content: flex-start;
}

.footer-brand {
    text-align: center;
}

.footer-brand img {
    height: 17px;
    width: auto;
    display: inline-block;
}

.footer-policy {
    display: flex;
    gap: 1.5rem;
    justify-content: flex-end;
}

.footer-social a,
.footer-policy a {
    transition: opacity 0.2s ease;
}

.footer-social a:hover,
.footer-policy a:hover {
    opacity: 0.6;
}

.footer-bottom {
    margin-top: 0.4rem;
    text-align: center;
    font-size: 0.64rem;
    color: var(--clr-text);
}

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
    .header-nav {
        grid-template-columns: 1fr auto;
        min-height: 0;
        padding: 16px 0;
        row-gap: 0;
        align-content: center;
    }

    .site-logo {
        order: 1;
        justify-content: flex-start;
    }

    .site-logo img {
        height: 18px;
    }

    .nav-toggle {
        display: flex;
        order: 2;
        margin-left: auto;
    }

    .nav-group {
        order: 3;
        grid-column: 1 / -1;
        flex-direction: column;
        gap: 1rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .nav-left,
    .nav-right {
        justify-content: flex-start;
    }

    .site-header.nav-open .nav-group {
        max-height: 60vh;
        padding: 1rem 0;
    }

    .nav-social {
        display: flex;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        text-align: center;
    }

    /* Social spostati nel burger menu → nascosti nel footer */
    .footer-social {
        display: none;
    }

    /* Privacy / Cookie / Lang prima del logo */
    .footer-policy {
        order: 1;
        justify-content: center;
    }

    .footer-brand {
        order: 2;
    }
}