/* =========================================================================
   GALLERIA — la pagina dei lavori migliori
   Template: page-galleria.php   ·   Script: assets/js/galleria.js

   La palette è quella di MOSAIKO e dell'Atelier: fondo scuro, testi avorio,
   accenti rame. Su un sito di fotografia il fondo scuro non è un vezzo — è
   quello che toglie di mezzo la pagina e lascia parlare gli scatti.

   La griglia a mattoncini (masonry) è disegnata in due modi:

     senza JS   colonne CSS (`columns`): funziona sempre, ma le foto si leggono
                una colonna alla volta, dall'alto in basso.
     con JS     colonne vere, riempite dallo script mettendo ogni scatto nella
                colonna più corta. Così l'ordine scelto in bacheca si legge da
                sinistra a destra, come ci si aspetta.

   Le soglie delle colonne (640 / 1024 / 1400) stanno in tre posti che devono
   restare d'accordo: qui, nella funzione `colonne()` di assets/js/galleria.js
   e nell'attributo `sizes` di page-galleria.php. Se se ne cambia una vanno
   cambiate tutte e tre.
   ========================================================================= */

.galleria {
    /* palette condivisa con MOSAIKO e Atelier */
    --ga-ink:        #131211;
    --ga-ink-rgb:    19, 18, 17;   /* lo stesso, per le sfumature che devono essere trasparenti */
    --ga-ivory:      #F2EEE8;
    --ga-stone:      #A79B93;
    --ga-copper:     #C97A5C;

    /* lo spazio fra un mattoncino e l'altro, in griglia */
    --ga-gap: 18px;

    display: block;
    background: var(--ga-ink);
    padding-bottom: 120px;
    font-family: var(--fd);
    color: var(--ga-ivory);
}
.galleria, .galleria *, .galleria *::before, .galleria *::after {
    box-sizing: border-box;
}

/* Il tema veste gli elementi nudi — h1, p, span, button — con colori, pesi e
   margini suoi. Qui vengono spogliati per tutta la pagina, così ogni pezzo
   parte da zero. :where() non pesa nulla: basta una classe per soprascriverlo,
   senza dover ricorrere a !important. */
.galleria :where(h1, h2, p, span, button, figure, figcaption) {
    margin: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    background: none;
    border: 0;
}


/* -------------------------------------------------------------------------
   1. La testata
   ---------------------------------------------------------------------- */

/* Il padding in cima tiene conto della barra, che qui è trasparente e
   galleggia sopra la pagina invece di spostarla in giù. */
.ga-testata {
    max-width: 1500px;
    margin: 0 auto;
    padding: calc(var(--site-nav-h, 82px) + 90px) 24px 64px;
    text-align: center;
}

.ga-occhiello {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .34em;
    text-indent: .34em;      /* recupera lo spazio che la spaziatura aggiunge in coda */
    text-transform: uppercase;
    color: var(--ga-copper);
}

.ga-titolo {
    margin-top: 18px;
    /* lo stesso carattere dei titoli della home (Playfair Display) invece del
       Bespoke Stencil: le due pagine si aprono con la stessa voce. */
    font-family: var(--fs);
    font-weight: 400;
    font-size: clamp(38px, 7vw, 96px);
    line-height: 1.05;
    letter-spacing: .07em;
    text-indent: .07em;
    text-transform: uppercase;
    color: var(--ga-ivory);
}

/* il filo di rame sotto il titolo: entra da solo, una volta */
.ga-filo {
    display: block;
    width: 90px;
    height: 1px;
    margin: 34px auto 0;
    background: var(--ga-copper);
    transform: scaleX(0);
    animation: ga-filo .9s .25s ease forwards;
}
@keyframes ga-filo { to { transform: scaleX(1); } }

/* La frase sotto al titolo: dice come guardare le fotografie che seguono.
   Larga poco piu' di mezza riga di testo, cosi' si legge in un colpo d'occhio
   e non diventa un paragrafo. */
.ga-introduzione {
    max-width: 640px;
    margin: 32px auto 0;
    /* il carattere di lettura del sito, nel peso piu' leggero e con le lettere
       un po' distanziate: chiara quanto basta per leggersi, mai quanto la
       scritta grande sopra. */
    font-weight: 300;
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.9;
    letter-spacing: .022em;
    color: rgba(242, 238, 232, .72);
}
/* fra un capoverso e l'altro basta un respiro, non uno stacco */
.ga-introduzione + .ga-introduzione {
    margin-top: 16px;
}

/* l'ultima riga: stesso corsivo, piu' piccola e color rame, come una firma
   sotto una lettera. Chiude la testata e lascia andare alle fotografie. */
.ga-congedo {
    max-width: 640px;
    margin: 30px auto 0;
    font-weight: 300;
    font-size: clamp(14px, 1.4vw, 16px);
    line-height: 1.7;
    letter-spacing: .07em;
    color: var(--ga-copper);
}

.ga-avviso {
    width: calc(100% - 48px);   /* sul telefono non tocca i bordi */
    max-width: 640px;
    margin: 0 auto;
    padding: 22px 24px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ga-stone);
    border: 1px dashed rgba(201, 122, 92, .5);
}
.ga-avviso strong { color: var(--ga-ivory); }


/* -------------------------------------------------------------------------
   2. La griglia a mattoncini
   ---------------------------------------------------------------------- */

.ga-griglia {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- ripiego senza JS: colonne CSS ---------- */
.ga-griglia:not(.ga-griglia--js) {
    columns: 4;
    column-gap: var(--ga-gap);
}
.ga-griglia:not(.ga-griglia--js) .ga-voce {
    break-inside: avoid;      /* uno scatto non si spezza fra due colonne */
    margin-bottom: var(--ga-gap);
}

/* ---------- con JS: colonne vere, riempite dallo script ---------- */
.ga-griglia--js {
    display: flex;
    align-items: flex-start;
    gap: var(--ga-gap);
}
.ga-colonna {
    flex: 1 1 0;
    min-width: 0;             /* senza, una foto larga allargherebbe la colonna */
    display: flex;
    flex-direction: column;
    gap: var(--ga-gap);
}

.ga-voce {
    position: relative;
    overflow: hidden;
    background: #1b1917;      /* il colore che si vede finché la foto arriva */
}

/* Tutto lo scatto è il pulsante che lo ingrandisce: è il bersaglio più grande
   e più ovvio, e funziona anche con la tastiera. */
.ga-apri {
    display: block;
    width: 100%;
    padding: 0;
    cursor: zoom-in;
    text-decoration: none;   /* nell'anteprima .ga-apri è un link, non un pulsante */
}
.ga-apri:focus-visible {
    outline: 2px solid var(--ga-copper);
    outline-offset: -2px;
}

.ga-img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .7s cubic-bezier(.2, .7, .3, 1), opacity .4s ease;
}
/* un respiro appena al passaggio del mouse: la foto si avvicina, non salta */
.ga-apri:hover .ga-img { transform: scale(1.035); }

/* il velo di rame che accende lo scatto sotto il mouse */
.ga-voce::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(19, 18, 17, .55));
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease;
}
.ga-voce:hover::after { opacity: 1; }


/* -------------------------------------------------------------------------
   3. Il riquadro a tutto schermo
   ---------------------------------------------------------------------- */

.ga-lente {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 72px;
    background: rgba(10, 9, 9, .96);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .3s ease;
}
/* `hidden` da solo perderebbe contro il display:flex qui sopra */
.ga-lente[hidden] { display: none; }
.ga-lente.is-aperta { opacity: 1; }

.ga-lente-quadro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 100%;
    max-height: 100%;
}
.ga-lente-img {
    display: block;
    max-width: 100%;
    /* toglie l'altezza del piede, o su schermo basso la foto uscirebbe sotto */
    max-height: calc(100vh - 150px);
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transition: opacity .35s ease;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
}
.ga-lente-img.is-pronta { opacity: 1; }

.ga-lente-piede {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--ga-stone);
}
.ga-lente-didascalia { max-width: 60ch; text-align: center; }
.ga-lente-conta {
    font-size: 11px;
    letter-spacing: .18em;
    color: var(--ga-copper);
}

/* ---------- i comandi ---------- */

.ga-lente-chiudi,
.ga-lente-freccia {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ga-ivory);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(242, 238, 232, .18);
    border-radius: 50%;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.ga-lente-chiudi:hover,
.ga-lente-freccia:hover {
    background: rgba(201, 122, 92, .22);
    border-color: var(--ga-copper);
    transform: scale(1.08);
}
.ga-lente-chiudi:focus-visible,
.ga-lente-freccia:focus-visible {
    outline: 2px solid var(--ga-copper);
    outline-offset: 2px;
}

.ga-lente-chiudi {
    top: 20px;
    right: 22px;
    width: 44px;
    height: 44px;
    font-size: 26px;
    line-height: 1;
}
.ga-lente-freccia {
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 34px;
    line-height: 1;
}
.ga-lente-freccia:hover { transform: translateY(-50%) scale(1.08); }
.ga-lente-freccia--prec { left: 14px; }
.ga-lente-freccia--succ { right: 14px; }

/* con una foto sola non c'è nessun posto dove andare */
.ga-lente.is-sola .ga-lente-freccia { display: none; }

/* mentre il riquadro è aperto la pagina sotto non deve scorrere */
body.ga-bloccato { overflow: hidden; }


/* -------------------------------------------------------------------------
   4. L'anteprima dentro un'altra pagina — shortcode [galleria_anteprima]
   ---------------------------------------------------------------------- */

/* Stessa griglia della galleria, dentro un'altra pagina. Tre differenze:
   è più stretta (1180px, la misura con cui è impaginata MOSAIKO, invece dei
   1500 della pagina intera), cliccare uno scatto porta alla galleria invece di
   aprirlo grande, e in fondo la griglia sfuma nel fondo della pagina.

   Se si cambia il tetto dei 1180px va cambiato anche SIZES_ANTEPRIMA in
   src/Galleria.php, o il browser scaricherà file di misura sbagliata. */
.galleria--anteprima {
    padding-top: 90px;
    padding-bottom: 100px;
}
.galleria--anteprima .ga-griglia {
    position: relative;      /* per il velo qui sotto */
    max-width: 1180px;
}
.galleria--anteprima .ga-apri { cursor: pointer; }

/* Il velo: sale dal fondo e si spegne salendo, coprendo appena l'ultima fila.
   Serve a non far finire la griglia di netto — le foto si perdono nel fondo
   della pagina e l'occhio scende sul pulsante invece di fermarsi su un bordo.

   È alto 420px per una ragione che si vede solo provandolo: a mattoncini le
   colonne finiscono ad altezze diverse, anche di duecento pixel. Un velo corto
   dissolve l'ultima foto della colonna più lunga e lascia intatte le altre, e
   il fondo della griglia resta frastagliato. Alto, li prende tutti.

   `pointer-events: none` perché è disegnato sopra le foto: senza, l'ultima fila
   non si potrebbe più cliccare. */
.galleria--anteprima .ga-griglia::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 420px;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgb(var(--ga-ink-rgb))       0%,
        rgb(var(--ga-ink-rgb))      10%,   /* pieno in fondo: nasconde il bordo netto della colonna più lunga */
        rgba(var(--ga-ink-rgb), .72) 34%,
        rgba(var(--ga-ink-rgb), .30) 62%,
        rgba(var(--ga-ink-rgb), 0)  100%
    );
}

/* Sotto il velo il pulsante non ha bisogno di molta aria: lo stacco lo fa già
   la sfumatura. */
.ga-piede {
    margin-top: 30px;
    text-align: center;
}

.ga-bottone {
    display: inline-block;
    padding: 16px 38px;
    font-family: var(--fd);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .28em;
    text-indent: .28em;      /* recupera lo spazio che la spaziatura aggiunge in coda */
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ga-ivory);
    background: transparent;
    border: 1px solid var(--ga-copper);
    transition: background .3s ease, color .3s ease;
}
.ga-bottone:hover,
.ga-bottone:focus-visible {
    background: var(--ga-copper);
    color: var(--ga-ink);
}
.ga-bottone:focus-visible {
    outline: 2px solid var(--ga-copper);
    outline-offset: 3px;
}

@media (max-width: 640px) {
    .galleria--anteprima { padding-top: 60px; padding-bottom: 70px; }
    /* una colonna sola: le colonne non finiscono più ad altezze diverse, e un
       velo alto come sul desktop si mangerebbe una foto intera */
    .galleria--anteprima .ga-griglia::after { height: 200px; }
    .ga-bottone {
        padding: 14px 24px;
        font-size: 11px;
        letter-spacing: .2em;
        text-indent: .2em;
    }
}


/* -------------------------------------------------------------------------
   5. Schermi più stretti
   ---------------------------------------------------------------------- */

@media (max-width: 1400px) {
    .ga-griglia:not(.ga-griglia--js) { columns: 3; }
}

@media (max-width: 1024px) {
    .ga-griglia:not(.ga-griglia--js) { columns: 2; }
    .ga-testata { padding-top: calc(var(--site-nav-h, 82px) + 60px); padding-bottom: 48px; }
}

@media (max-width: 640px) {
    .galleria { --ga-gap: 12px; padding-bottom: 80px; }
    .ga-griglia:not(.ga-griglia--js) { columns: 1; }
    .ga-griglia  { padding: 0 16px; }
    .ga-testata  { padding-left: 16px; padding-right: 16px; }
    .ga-titolo   { letter-spacing: .05em; text-indent: .05em; }

    .ga-lente { padding: 60px 12px 46px; }
    .ga-lente-img { max-height: calc(100vh - 190px); }
    /* sul telefono le frecce scendono in fondo: a metà altezza starebbero
       sopra la foto, e si toccherebbero per sbaglio scorrendo */
    .ga-lente-freccia {
        top: auto;
        bottom: 14px;
        width: 46px;
        height: 46px;
        transform: none;
    }
    .ga-lente-freccia:hover { transform: scale(1.08); }
    .ga-lente-freccia--prec { left: 22%; }
    .ga-lente-freccia--succ { right: 22%; }
    .ga-lente-piede { padding-bottom: 52px; }
}

/* Chi ha chiesto al sistema meno animazioni non le vede: né lo zoom sotto il
   mouse, né il filo che entra, né le dissolvenze. */
@media (prefers-reduced-motion: reduce) {
    .galleria .ga-img,
    .galleria .ga-voce::after,
    .ga-lente,
    .ga-lente-img,
    .ga-bottone { transition: none; }
    .ga-apri:hover .ga-img { transform: none; }
    .ga-filo { animation: none; transform: scaleX(1); }
}


/* -------------------------------------------------------------------------
   5. Da qui si esce

   Le due righe in fondo alla galleria. Il disegno e' quello di «Da dove vuoi
   iniziare?» in home (.hm-link-row): riquadro sottile, testo piccolo spaziato,
   freccia in fondo, e al passaggio del mouse il testo fa un passo avanti.
   Le classi sono diverse perche' il foglio della home non arriva qui.
   ---------------------------------------------------------------------- */

.ga-porte {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 96px 24px 130px;
}
.ga-porte-titolo {
    margin: 0 0 34px;
    font-family: var(--fs);
    font-style: italic;
    font-size: clamp(24px, 2.6vw, 34px);
    color: var(--ga-ivory);
    text-align: center;
}
.ga-porte-elenco {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 560px;
}
.ga-porta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 26px;
    text-decoration: none;
    border: 1px solid rgba(242, 238, 232, .16);
    background: rgba(242, 238, 232, .03);
    transition: background .45s ease, border-color .45s ease, padding-left .45s ease;
}
.ga-porta:hover,
.ga-porta:focus-visible {
    background: rgba(201, 122, 92, .1);
    border-color: rgba(201, 122, 92, .6);
    padding-left: 34px;
}
.ga-porta-testi {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ga-porta-titolo {
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ga-ivory);
}
.ga-porta-sub {
    font-weight: 300;
    font-size: 13.5px;
    color: rgba(242, 238, 232, .55);
}
.ga-porta-freccia {
    font-size: 16px;
    color: var(--ga-copper);
}

@media (max-width: 560px) {
    .ga-porte { padding: 74px 22px 100px; }
    .ga-porta { padding: 18px 20px; }
}