/* =====================================================================
   REGIAPRO - GLI IMPIANTI DELLE GALLERIE, PER LA PAGINA DI VENDITA
   =====================================================================
   DA DOVE VIENE QUESTO FILE, E PERCHE' E' UNA COPIA.
   Le regole qui sotto sono copiate da:

       ~/Desktop/photography-crm/frontend/static/css/modern-theme.css
       (i blocchi ".gal-colonne / .gal-tessera" e ".gal-layout-*")

   letto il 30 agosto 2026. E' una COPIA e non un richiamo perche' il
   sito di presentazione e' fatto di file statici e sta su un altro
   indirizzo dal CRM: non puo' leggere il foglio di stile del CRM.

   IL RISCHIO DELLA COPIA, DETTO INVECE CHE NASCOSTO: il giorno che
   qualcuno cambia un impianto nel CRM, questa pagina continua a
   mostrare quello vecchio e nessuno se ne accorge. Per accorgersene
   c'e' lo script "controlla-impianti.sh" consegnato insieme a questa
   pagina: confronta i due file e dice se si sono allontanati.

   QUELLO CHE NON E' STATO COPIATO, ed e' voluto: il cuore per segnare
   le preferite, il tasto per scaricare, l'ingranditore. Qui non
   servono - questa e' una vetrina, non una galleria da usare.
   ===================================================================== */

/* le misure di partenza (nel CRM stanno su .gal-cliente) */
.gal-cliente{--gal-larghezza:1240px;--gal-margine:0px;
  --gal-respiro:14px;--gal-raggio:12px}

.gal-corpo-foto{max-width:var(--gal-larghezza);margin:0 auto;
  padding:0 var(--gal-margine)}
.gal-colonne{display:flex;align-items:flex-start;gap:var(--gal-respiro)}
.gal-colonna{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
  gap:var(--gal-respiro)}
.gal-tessera{margin:0;position:relative;border-radius:var(--gal-raggio);
  overflow:hidden;background:var(--sunken);line-height:0}
.gal-tessera img{width:100%;height:auto;display:block;object-fit:cover;
  background:var(--sunken)}

/* un filmato senza copertina: fondo scuro come una pellicola, cosi' si
   capisce che e' un video e non una foto che non si e' caricata */
.gal-tessera-video{position:relative}
.gal-tessera-vuota{position:relative;display:block;width:100%;
  aspect-ratio:16/9;border-radius:var(--gal-raggio);
  background:linear-gradient(135deg,#2A2A36,#15151D)}
.gal-tessera-vuota svg{position:absolute;left:12px;top:12px;
  width:26px;height:26px;color:rgba(255,255,255,.55)}
.gal-tessera-vuota::after{content:"video";position:absolute;left:12px;
  bottom:12px;color:rgba(255,255,255,.55);font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase}
.gal-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;z-index:3;display:grid;
  place-items:center;background:rgba(10,10,17,.62);color:#fff;
  font-size:19px;line-height:1}

/* ---- layout: quadrato classico invece del mosaico (punto 11) ----
   Il mosaico resta il motore vero (colonne calcolate in JS, forma
   originale delle foto): il quadrato e' un vestito diverso sullo
   STESSO markup. .gal-colonna sparisce dal calcolo del layout
   (display:contents), cosi' ogni tessera diventa una cella diretta di
   una griglia semplice; l'aspect-ratio calcolato in linea si
   sovrascrive per forza a 1:1 (e' un attributo di stile, ci vuole
   !important per batterlo). */
.gal-layout-quadrato .gal-colonne{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
.gal-layout-quadrato .gal-colonna{display:contents}
.gal-layout-quadrato .gal-tessera img{aspect-ratio:1 !important;object-fit:cover}

/* ---- i tre layout STRUTTURALI (completamento gallerie, parte A):
   "rivista", "storia" e "collage" cambiano davvero come le foto stanno
   in pagina, non solo colore/carattere -- stessa idea del quadrato qui
   sopra (.gal-colonna sparisce con display:contents, ogni tessera
   diventa una cella diretta di una griglia), portata avanti con celle
   di larghezza e altezza diverse invece che tutte uguali. ---- */

/* RIVISTA: una foto protagonista in alto (tutta la larghezza), poi
   righe che alternano una foto larga e una stretta, come le pagine di
   un giornale patinato. object-fit:cover con aspect-ratio forzato ad
   "auto": qui e' la CELLA della griglia a dettare la forma (span di
   colonne/righe), non piu' la forma vera della foto come nel mosaico --
   e' il compromesso che rende possibile allineare righe fatte di foto
   di proporzioni diverse. */
.gal-layout-rivista .gal-colonne{display:grid;
  grid-template-columns:repeat(6,1fr);grid-auto-rows:130px;gap:14px}
.gal-layout-rivista .gal-colonna{display:contents}
.gal-layout-rivista .gal-tessera{height:100%}
.gal-layout-rivista .gal-tessera img{width:100%;height:100%;
  aspect-ratio:auto !important;object-fit:cover}
.gal-layout-rivista .gal-tessera:first-of-type{grid-column:span 6;grid-row:span 4}
.gal-layout-rivista .gal-tessera:nth-of-type(4n+2):not(:first-of-type){
  grid-column:span 4;grid-row:span 2}
.gal-layout-rivista .gal-tessera:nth-of-type(4n+3){grid-column:span 2;grid-row:span 2}
.gal-layout-rivista .gal-tessera:nth-of-type(4n){grid-column:span 2;grid-row:span 2}
.gal-layout-rivista .gal-tessera:nth-of-type(4n+1):not(:first-of-type){
  grid-column:span 4;grid-row:span 2}
@media (max-width:640px){
  .gal-layout-rivista .gal-colonne{grid-template-columns:repeat(2,1fr);
    grid-auto-rows:150px}
  .gal-layout-rivista .gal-tessera{grid-column:span 1 !important;grid-row:span 2 !important}
  .gal-layout-rivista .gal-tessera:first-of-type{
    grid-column:span 2 !important;grid-row:span 3 !important}
}

/* RIGHE PIENE (consegna 1702): righe tutte della stessa altezza, ogni
   foto con la sua forma vera, nessun ritaglio, e il margine destro
   sempre dritto. E' l'impianto delle gallerie professionali.

   COME FUNZIONA, in due righe: ogni foto chiede una larghezza pari
   alla sua forma per l'altezza di riga (una foto larga il doppio
   dell'altezza chiede il doppio dello spazio), e poi lo spazio che
   avanza sulla riga viene diviso NELLA STESSA PROPORZIONE. Cosi'
   tutte le foto della riga finiscono esattamente alla stessa altezza,
   e nessuna va ritagliata. "--gal-prop" e' la forma della foto e la
   mette la pagina, foto per foto (consegna 1700).

   L'ULTIMA RIGA non si stira: se avanza una foto sola, senza questo
   accorgimento diventerebbe grande quanto tutta la pagina. Lo spazio
   che resta lo prende un riempitivo invisibile. */
.gal-layout-righe .gal-colonne{display:flex;flex-wrap:wrap;
  align-items:flex-start;gap:8px;--gal-riga:250px}
.gal-layout-righe .gal-colonna{display:contents}
.gal-layout-righe .gal-tessera{margin:0;min-width:0;
  flex-grow:var(--gal-prop,1.5);
  flex-basis:calc(var(--gal-prop,1.5) * var(--gal-riga))}
.gal-layout-righe .gal-tessera img{width:100%;height:auto;display:block}
.gal-layout-righe .gal-colonne::after{content:"";flex-grow:99999;
  flex-basis:0;height:0;margin:0}
@media (max-width:900px){.gal-layout-righe .gal-colonne{--gal-riga:190px;gap:6px}}
@media (max-width:640px){.gal-layout-righe .gal-colonne{--gal-riga:140px;gap:4px}}

/* STORIA: scorrimento verticale a tutta larghezza, una foto alla volta,
   grande e minimale -- niente carte, niente bordi arrotondati, niente
   cuore/scarica finche' non ci si passa sopra (stesso comportamento del
   mosaico, solo che qui c'e' una foto sola per "riga"). galleria-
   cliente.js forza colonneQuante a 1 per questo layout (vedi
   misuraColonne()): serve una sola .gal-colonna perche' l'ordine di
   scorrimento resti quello vero, non quello a turno fra due colonne. */
.gal-layout-storia .gal-corpo-foto{max-width:none;padding-left:0;padding-right:0}
.gal-layout-storia .gal-guida,
.gal-layout-storia .gal-tab{max-width:46ch;margin-left:auto;margin-right:auto}
.gal-layout-storia .gal-colonne{display:block}
.gal-layout-storia .gal-colonna{display:block}
.gal-layout-storia .gal-tessera{width:100%;margin:0 0 3px;border-radius:0}
.gal-layout-storia .gal-tessera img{width:100%;height:auto;max-height:92vh;
  object-fit:cover;border-radius:0;aspect-ratio:auto !important}

/* COLLAGE: composizione asimmetrica, foto di misure diverse mescolate,
   non allineate a una griglia regolare -- il contrario apposta del
   quadrato qui sopra. grid-auto-flow:dense riempie i buchi che uno span
   diverso lascia, cosi' non restano celle vuote. Il ciclo si ripete
   ogni 7 foto: abbastanza lungo da non sembrare un motivo che si vede
   ripetere a colpo d'occhio, corto abbastanza da restare leggibile qui
   nel foglio di stile. */
.gal-layout-collage .gal-colonne{display:grid;
  grid-template-columns:repeat(8,1fr);grid-auto-rows:90px;
  grid-auto-flow:dense;gap:10px}
.gal-layout-collage .gal-colonna{display:contents}
.gal-layout-collage .gal-tessera{height:100%}
.gal-layout-collage .gal-tessera img{width:100%;height:100%;
  aspect-ratio:auto !important;object-fit:cover}
.gal-layout-collage .gal-tessera:nth-of-type(7n+1){grid-column:span 4;grid-row:span 4}
.gal-layout-collage .gal-tessera:nth-of-type(7n+2){grid-column:span 2;grid-row:span 2}
.gal-layout-collage .gal-tessera:nth-of-type(7n+3){grid-column:span 2;grid-row:span 3}
.gal-layout-collage .gal-tessera:nth-of-type(7n+4){grid-column:span 3;grid-row:span 2}
.gal-layout-collage .gal-tessera:nth-of-type(7n+5){grid-column:span 3;grid-row:span 3}
.gal-layout-collage .gal-tessera:nth-of-type(7n+6){grid-column:span 2;grid-row:span 2}
.gal-layout-collage .gal-tessera:nth-of-type(7n){grid-column:span 4;grid-row:span 3}
@media (max-width:640px){
  .gal-layout-collage .gal-colonne{grid-template-columns:repeat(4,1fr);
    grid-auto-rows:110px}
  .gal-layout-collage .gal-tessera{grid-column:span 2 !important;grid-row:span 2 !important}
  .gal-layout-collage .gal-tessera:nth-of-type(3n+1){
    grid-column:span 4 !important;grid-row:span 3 !important}
}

/* ---- LA GALLERIA IN ANTEPRIMA (consegna 1920) ----
   Serve a due cose sole: dire al cliente com'e' messa, e togliere di
   mezzo i gesti distratti con cui una foto si porta via (il
   trascinamento sul desktop, la selezione, il menu lungo del telefono).
   NON e' la protezione: quella la fa il server, che in anteprima non
   manda mai il file grande. Vedi la nota in galleria-cliente.js. */
.gal-anteprima-avviso{text-align:center;font-size:13.5px;line-height:1.75;
  color:var(--ink-2);margin:0 auto 34px;max-width:54ch;padding:18px 22px;
  border:1px solid var(--line);border-radius:14px;background:var(--sunken);
  text-wrap:balance}
.gal-anteprima-avviso strong{display:block;color:var(--ink);font-weight:600;
  font-size:15px;margin-bottom:5px}
.gal-anteprima-avviso span{display:block}

.gal-anteprima .gal-tessera img,
.gal-anteprima .gal-schermo img{
  -webkit-user-drag:none;user-drag:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none;user-select:none}

/* =====================================================================
   COLONNA FISSA E CINEMA (consegna 2544)
   =====================================================================
   Copiate dal CRM
       ~/Desktop/photography-crm/frontend/static/css/modern-theme.css
       (blocco "2222-colonna-e-cinema"), letto il 31 agosto 2026.
   Vale lo stesso avvertimento scritto in cima a questo file: e' una
   COPIA, e il giorno che qualcuno cambia l'impianto nel CRM questa
   pagina resta indietro senza dirlo. Per accorgersene c'e'
   "controlla-impianti.sh".
   ===================================================================== */
/* ================================================================
   DUE IMPIANTI NUOVI (consegna 2222)

   COLONNA FISSA -- la pagina si divide in due. A sinistra una
   striscia stretta che RESTA FERMA mentre le foto scorrono (la riga
   di istruzioni e l'elenco delle cartelle); a destra le foto, larghe
   quanto lo schermo. E' l'unico impianto in cui la pagina non e' una
   colonna sola: con mille foto e sei cartelle, avere l'indice sempre
   sotto gli occhi vale piu' di qualunque effetto.

   CINEMA -- pensato per i FILMATI. Il primo grande quanto la pagina,
   gli altri due per riga, tutti nella forma di uno schermo (16:9)
   con la copertina dentro, il tasto di riproduzione al centro e il
   nome sempre in vista. Qui la regola delle quattro affiancate NON
   vale, ed e' voluto: una galleria di filmati ne ha dieci, non
   mille, e un filmato in un quarto di schermo non si guarda.
   ================================================================ */

/* LA DURATA, in alto a destra sul fotogramma. Senza questa regola la
   scritta usciva bianca in mezzo all'immagine e non si vedeva.
   Copiata da modern-theme.css (righe 3337-3339). */
.gal-durata{position:absolute;right:7px;top:7px;z-index:3;
  background:rgba(10,10,17,.72);color:#fff;font-size:11px;font-weight:600;
  padding:2px 7px;border-radius:5px;font-variant-numeric:tabular-nums}

/* LA TARGHETTA DEL FILMATO: il nome sopra, il formato sotto.
   Anche questa mancava nella prima copia, e senza di lei il nome e il
   formato uscivano attaccati sulla stessa riga -- "Il film del
   matrimonioMP4" -- e mezzi tagliati fuori dal riquadro. Sulla pagina
   con cui si vende l'impianto fatto per i filmati, il nome del
   filmato illeggibile e' il difetto peggiore che ci potesse essere.
   Copiata da modern-theme.css (righe 3427-3441). */
.gal-targhetta{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;gap:2px;padding:26px 12px 10px;
  pointer-events:none;border-radius:0 0 10px 10px;
  background:linear-gradient(to top,rgba(8,8,14,.86),rgba(8,8,14,0))}
.gal-targhetta-nome{color:#fff;font-size:13.5px;font-weight:600;
  line-height:1.3;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.gal-targhetta-peso{color:rgba(255,255,255,.74);font-size:11.5px;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* LA RIGA DI ISTRUZIONI E L'INDICE DELLE CARTELLE.
   Queste due erano rimaste indietro nella prima copia, e senza di
   loro l'impianto "colonna" sul sito usciva SBAGLIATO: l'indice
   veniva fuori come una fila di pulsanti grigi di sistema invece che
   come un indice in colonna. Il guaio non e' estetico -- e' che la
   pagina di vendita faceva vedere una cosa diversa da quella che il
   CRM consegna davvero. Visto guardando la pagina, non con un
   controllo automatico.
   Copiate anche loro da modern-theme.css (righe 1603-1614). */
.gal-guida{text-align:center;font-size:13.5px;color:var(--ink-3);
  line-height:1.7;margin:0 auto 34px;max-width:46ch}
.gal-guida strong{color:var(--ink-2);font-weight:600}
.gal-tab{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;
  margin:0 auto 40px}
.gal-tab button{border:0;background:none;padding:5px 0;color:var(--ink-3);
  font:inherit;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;border-bottom:1px solid transparent}
.gal-tab button:hover{color:var(--ink)}
.gal-tab-attiva{color:var(--ink)!important;border-bottom-color:var(--ink)!important}

/* La scatola della striscia di lato: display:contents vuol dire "fai
   finta che non ci sia". Cosi' in tutti gli impianti tranne
   "colonna" la pagina resta esattamente com'era prima. */
.gal-lato{display:contents}

/* ------------------------- COLONNA FISSA ------------------------- */
/* Le foto: righe della stessa altezza, ogni foto intera, nessun
   ritaglio, bordo destro dritto. E' il motore di "Righe piene"
   (consegna 1702) -- qui pero' dentro una pagina divisa in due e
   larga quanto lo schermo, non dentro la colonna centrale da 1240.
   galleria-cliente.js mette "colonna" fra gli impianti a griglia:
   serve UNA sola .gal-colonna, altrimenti l'ordine delle foto
   diventa 1,3,5... e poi 2,4,6... */
.gal-layout-colonna .gal-colonne{display:flex;flex-wrap:wrap;
  align-items:flex-start;gap:8px;--gal-riga:170px}
.gal-layout-colonna .gal-colonna{display:contents}
.gal-layout-colonna .gal-tessera{margin:0;min-width:0;
  flex-grow:var(--gal-prop,1.5);
  flex-basis:calc(var(--gal-prop,1.5) * var(--gal-riga))}
.gal-layout-colonna .gal-tessera img{width:100%;height:auto;display:block}
/* l'ultima riga non si stira: senza questo, una foto rimasta sola
   diventerebbe grande quanto tutta la pagina. */
.gal-layout-colonna .gal-colonne::after{content:"";flex-grow:99999;
  flex-basis:0;height:0;margin:0}
@media (max-width:900px){.gal-layout-colonna .gal-colonne{--gal-riga:150px;gap:6px}}
@media (max-width:640px){.gal-layout-colonna .gal-colonne{--gal-riga:105px;gap:4px}}

/* La divisione in due comincia da 1000 px. Sotto, la striscia torna
   semplicemente in cima e le foto sotto: su uno schermo stretto una
   colonna laterale si mangerebbe meta' della larghezza delle foto. */
@media (min-width:1000px){
  .gal-layout-colonna .gal-corpo-foto{max-width:1580px;padding-top:44px}
  .gal-layout-colonna .gal-dentro{display:grid;
    grid-template-columns:248px minmax(0,1fr);column-gap:44px;
    align-items:start}
  /* tutto quello che non sono le foto sta nella striscia di sinistra */
  .gal-layout-colonna .gal-dentro > *{grid-column:1}
  /* le foto prendono la colonna di destra per tutta l'altezza: e'
     quella riga alta che da' alla striscia lo spazio per restare
     ferma mentre si scorre. */
  .gal-layout-colonna .gal-dentro > .gal-colonne{grid-column:2;
    grid-row:1 / span 999}
  .gal-layout-colonna .gal-lato{display:block;position:sticky;top:26px;
    align-self:start;text-align:left}
  .gal-layout-colonna .gal-lato .gal-guida{text-align:left;max-width:none;
    margin:0 0 22px;font-size:13px}
  .gal-layout-colonna .gal-lato .gal-tab{flex-direction:column;
    align-items:flex-start;gap:10px;margin:0 0 22px;justify-content:flex-start}
  .gal-layout-colonna .gal-lato .gal-tab button{padding:0;font-size:11.5px}
  .gal-layout-colonna .gal-lato .gal-tab-attiva{
    border-bottom-color:transparent!important}
  /* Il trattino lungo davanti alla cartella aperta. Il "\2014" va
     scritto con DUE barre qui dentro: con una sola, Python la legge
     come un numero e nel foglio di stile finisce un carattere
     invisibile seguito da un "4" -- e sulla pagina si leggeva
     "4 TUTTE" invece di "-- TUTTE". Visto guardando. */
  .gal-layout-colonna .gal-lato .gal-tab-attiva::before{content:"\2014 "}
}

/* ----------------------------- CINEMA ---------------------------- */
/* aspect-ratio va forzato con !important: la pagina scrive la forma
   vera della foto direttamente sull'elemento, e uno stile scritto li'
   batte il foglio di stile se non lo si forza. */
.gal-layout-cinema .gal-colonne{display:grid;
  grid-template-columns:repeat(2,1fr);gap:22px}
.gal-layout-cinema .gal-colonna{display:contents}
.gal-layout-cinema .gal-tessera{border-radius:10px;background:#0b0b0f}
.gal-layout-cinema .gal-tessera img{width:100%;height:100%;
  aspect-ratio:16/9 !important;object-fit:cover}
/* il primo grande quanto la pagina: e' il montaggio del matrimonio,
   gli altri sono gli estratti. */
.gal-layout-cinema .gal-tessera:first-of-type{grid-column:1 / -1}
/* qui il tasto di riproduzione e' il centro della tessera, non un
   segno in un angolo: si guarda un filmato, non si sceglie una foto. */
.gal-layout-cinema .gal-play{width:74px;height:74px;font-size:27px;
  line-height:74px}
.gal-layout-cinema .gal-tessera:first-of-type .gal-play{width:96px;
  height:96px;font-size:35px;line-height:96px}
/* il nome del filmato sempre in vista, non solo passandoci sopra:
   con dieci filmati "quale dei dieci" e' la prima domanda. */
.gal-layout-cinema .gal-targhetta{opacity:1}
@media (max-width:760px){
  .gal-layout-cinema .gal-colonne{grid-template-columns:1fr;gap:14px}
  .gal-layout-cinema .gal-play{width:60px;height:60px;font-size:22px;line-height:60px}
}