/* ══════════════════════════════════════════════════════════════════════════
   REGIAPRO — I TEMPLATE DELLE GALLERIE, IL RIQUADRO DENTRO LA PAGINA
   ==========================================================================
   Lo usa una pagina sola: regiapro-gallery. Sta in un file suo e non dentro
   sito.css perche' cosi' si aggiunge e si toglie senza rimettere le mani
   nel file che regge tutte le altre pagine.

   I DISEGNINI NON SONO FOTOGRAFIE, ED E' VOLUTO. Sono caselle vuote che
   fanno vedere la DISPOSIZIONE e basta. Le anteprime con le foto vere
   stanno nella pagina template-gallerie, e il pulsante in fondo ci porta.
   Mettere qui dei finti quadrati colorati spacciandoli per fotografie, su
   una pagina di vendita letta da un fotografo, si vedrebbe subito.

   NIENTE COLORI SCRITTI A MANO: solo i nomi dei colori del tema
   (css/temi.css). Cosi' il riquadro segue da solo il tema chiaro e quello
   scuro, e il controllo automatico del sito non protesta.

   PER AGGIUNGERE UN TEMPLATE: una voce in strumenti/template-gallerie.json
   e qui sotto un blocco «.tpl-schema-<chiave>» col suo disegnino.
   ══════════════════════════════════════════════════════════════════════════ */

/* --- la griglia delle schede --- */
/* «align-items:start» e non lo stiramento di serie: la scheda del cinema ha
   una nota in piu' e le altre, stirate alla sua altezza, restavano con un
   pezzo di vuoto in fondo che sembrava un difetto. Cosi' ognuna e' alta
   quanto serve, e quella con la nota sporge — proprio dove serve guardare. */
.tpl-griglia{list-style:none;margin:22px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;
  align-items:start}

.tpl-carta{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-l);padding:15px 16px 17px;
  display:flex;flex-direction:column;gap:9px}

.tpl-nome{font-size:17px;font-weight:800;color:var(--ink-strong);
  line-height:1.2;margin-top:3px}
.tpl-sotto{font-size:14.5px;font-weight:700;color:var(--accent);line-height:1.45}
.tpl-quando{font-size:14px;color:var(--ink-2);line-height:1.55}

/* La nota: staccata dal resto da una riga tratteggiata, perche' non e' la
   descrizione del template ma un avvertimento su come si vede. */
.tpl-nota{font-size:13.5px;color:var(--ink-3);line-height:1.5;
  border-top:1px dashed var(--line);padding-top:9px;margin-top:2px}

.tpl-coda{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px;
  align-items:center}
.tpl-coda-nota{font-size:14px;color:var(--ink-2);max-width:44ch;line-height:1.55}

/* --- il disegnino: caselle, non foto --- */
.tpl-schema{display:grid;gap:3px;height:100px;width:100%;
  background:var(--surface-2);border:1px solid var(--line-soft);
  border-radius:var(--r-s);padding:5px}
.tpl-schema i{display:block;background:var(--line);border-radius:2px}
/* La casella che comanda l'impianto (la foto di apertura, l'indice fermo):
   piu' scura, cosi' si capisce a colpo d'occhio chi guida. */
.tpl-schema i.tpl-guida{background:var(--accent-bright)}

/* Mosaico — QUATTRO colonne (SEGNO_3524, prima erano due).
   Il lotto 2220 ha portato il mosaico vero da 2 colonne a 4: con 34 foto la
   pagina passava da 10.581 punti a 3.135. Il disegnino era rimasto a due, e
   chi guardava comprava una galleria diversa da quella che riceveva.
   Le altezze restano molto diverse fra loro APPOSTA: e' l'unica cosa che
   distingue il mosaico dalle righe piene. */
.tpl-schema-mosaico{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(12,1fr)}
.tpl-schema-mosaico i:nth-child(1){grid-area:1/1/span 5/span 1}
.tpl-schema-mosaico i:nth-child(2){grid-area:6/1/span 4/span 1}
.tpl-schema-mosaico i:nth-child(3){grid-area:10/1/span 3/span 1}
.tpl-schema-mosaico i:nth-child(4){grid-area:1/2/span 3/span 1}
.tpl-schema-mosaico i:nth-child(5){grid-area:4/2/span 6/span 1}
.tpl-schema-mosaico i:nth-child(6){grid-area:10/2/span 3/span 1}
.tpl-schema-mosaico i:nth-child(7){grid-area:1/3/span 4/span 1}
.tpl-schema-mosaico i:nth-child(8){grid-area:5/3/span 3/span 1}
.tpl-schema-mosaico i:nth-child(9){grid-area:8/3/span 5/span 1}
.tpl-schema-mosaico i:nth-child(10){grid-area:1/4/span 6/span 1}
.tpl-schema-mosaico i:nth-child(11){grid-area:7/4/span 2/span 1}
.tpl-schema-mosaico i:nth-child(12){grid-area:9/4/span 4/span 1}

/* Righe piene — ogni riga finisce dove finisce la pagina. */
.tpl-schema-righe{grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(4,1fr)}
.tpl-schema-righe i:nth-child(1){grid-area:1/1/span 1/span 4}
.tpl-schema-righe i:nth-child(2){grid-area:1/5/span 1/span 3}
.tpl-schema-righe i:nth-child(3){grid-area:1/8/span 1/span 5}
.tpl-schema-righe i:nth-child(4){grid-area:2/1/span 1/span 5}
.tpl-schema-righe i:nth-child(5){grid-area:2/6/span 1/span 7}
.tpl-schema-righe i:nth-child(6){grid-area:3/1/span 1/span 3}
.tpl-schema-righe i:nth-child(7){grid-area:3/4/span 1/span 4}
.tpl-schema-righe i:nth-child(8){grid-area:3/8/span 1/span 5}
.tpl-schema-righe i:nth-child(9){grid-area:4/1/span 1/span 6}
.tpl-schema-righe i:nth-child(10){grid-area:4/7/span 1/span 6}

/* Rivista — la prima prende tutta la larghezza, poi righe alternate. */
.tpl-schema-rivista{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr)}
.tpl-schema-rivista i:nth-child(1){grid-area:1/1/span 1/span 6}
.tpl-schema-rivista i:nth-child(2){grid-area:2/1/span 1/span 4}
.tpl-schema-rivista i:nth-child(3){grid-area:2/5/span 1/span 2}
.tpl-schema-rivista i:nth-child(4){grid-area:3/1/span 1/span 2}
.tpl-schema-rivista i:nth-child(5){grid-area:3/3/span 1/span 4}
.tpl-schema-rivista i:nth-child(6){grid-area:4/1/span 1/span 4}
.tpl-schema-rivista i:nth-child(7){grid-area:4/5/span 1/span 2}

/* Collage — misure mescolate, nessuna griglia regolare. Nessuna casella
   ha la stessa altezza di quella accanto: se ne avessero due uguali il
   disegnino tornerebbe a sembrare una griglia, ed e' il contrario. */
.tpl-schema-collage{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(12,1fr)}
.tpl-schema-collage i:nth-child(1){grid-area:1/1/span 7/span 2}
.tpl-schema-collage i:nth-child(2){grid-area:1/3/span 4/span 4}
.tpl-schema-collage i:nth-child(3){grid-area:5/3/span 5/span 2}
.tpl-schema-collage i:nth-child(4){grid-area:5/5/span 8/span 2}
.tpl-schema-collage i:nth-child(5){grid-area:8/1/span 5/span 2}
.tpl-schema-collage i:nth-child(6){grid-area:10/3/span 3/span 2}

/* Storia — una alla volta, e in mezzo il respiro. La riga vuota fra le due
   caselle non e' un buco: e' proprio l'aria che c'e' fra una foto e l'altra
   mentre si scorre. */
.tpl-schema-storia{grid-template-columns:1fr;grid-template-rows:repeat(12,1fr)}
.tpl-schema-storia i:nth-child(1){grid-area:1/1/span 5/span 1}
.tpl-schema-storia i:nth-child(2){grid-area:7/1/span 6/span 1}

/* Quadrato — tutte uguali, come un provino. Sette per quattro e non
   quattro per due: con poche caselle venivano rettangoli larghi e il
   disegnino sembrava quello delle righe piene, che e' un'altra cosa. */
.tpl-schema-quadrato{grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(4,1fr)}

/* Colonna fissa — l'indice sta fermo a sinistra. */
.tpl-schema-colonna{grid-template-columns:1.1fr 2fr 2fr;grid-template-rows:repeat(4,1fr)}
.tpl-schema-colonna i:nth-child(1){grid-area:1/1/span 4/span 1}

/* Cinema — il primo grande, gli altri DUE per riga: e' voluto. */
.tpl-schema-cinema{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr)}
.tpl-schema-cinema i:nth-child(1){grid-area:1/1/span 1/span 2}
/* Il pallino del play: dice che li' dentro c'e' un filmato, non una foto. */
.tpl-schema-cinema i{position:relative}
.tpl-schema-cinema i::after{content:"";position:absolute;inset:0;margin:auto;
  width:9px;height:9px;border-radius:50%;background:var(--surface-2);opacity:.9}

/* --- telefono --- */
@media (max-width:560px){
  .tpl-griglia{grid-template-columns:1fr;gap:13px}
  .tpl-schema{height:112px}
}

/* Chi ha chiesto meno animazioni non deve vedere niente muoversi: qui non
   c'e' nulla che si muove, ma il bordo al passaggio del mouse resta utile. */
@media (hover:hover){
  .tpl-carta:hover{border-color:var(--accent)}
}

/* ══════ LOTTO 3524:inizio — le schede si aprono ══════════════════════════
   Niente colori nuovi: solo i nomi del tema, cosi' il blocco segue da solo
   il chiaro e lo scuro.

   IL PULSANTE E' GRANDE QUANTO LA SCHEDA e la freccina e' solo il disegno
   che ci sta dentro, in basso a destra. Stessa scelta del lotto 3204 sulla
   prima pagina: un <button> non puo' contenere un titolo, quindi il
   pulsante sta sopra la scheda e il titolo resta fuori.

   ⚠ NIENTE ::after CON INSET NEGATIVI per allargare il pulsante: sulla
   prima pagina allungava la pagina di ottocento punti di lato, e si e'
   visto solo guardando.
   ═══════════════════════════════════════════════════════════════════════ */
.tpl-carta{position:relative}

.apri-tpl{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;padding:0;border:0;background:transparent;
  border-radius:inherit;cursor:pointer;color:var(--ink-3);
  -webkit-appearance:none;appearance:none;
  transition:color .15s ease;
}
.apri-tpl svg{
  position:absolute;right:13px;bottom:13px;width:18px;height:18px;
  transition:transform .2s ease;
}
.apri-tpl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tpl-carta:hover .apri-tpl{color:var(--accent)}
.apri-tpl[aria-expanded="true"]{color:var(--accent)}
.apri-tpl[aria-expanded="true"] svg{transform:rotate(180deg)}
.tpl-carta:has(.apri-tpl[aria-expanded="true"]){
  border-color:var(--accent);background:var(--surface-2);
}
/* La freccina occupa l'angolo in basso a destra: l'ultima riga di testo
   della scheda le lascia il posto, se no ci finisce sotto. */
.tpl-carta > .tpl-quando,.tpl-carta > .tpl-nota{padding-right:26px}

@media (prefers-reduced-motion: no-preference){
  .tpl-carta{transition:border-color .15s ease, background-color .15s ease, transform .2s ease}
  .tpl-carta:hover{transform:translateY(-2px)}
}

/* ── la fascia che si apre ────────────────────────────────────────────── */
.pannello-tpl{
  grid-column:1 / -1;
  display:grid;gap:20px;align-items:start;
  background:var(--surface);border:1px solid var(--accent);
  border-radius:var(--r-m);padding:18px;min-width:0;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:760px){
  .pannello-tpl{grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:24px;padding:22px}
}
.tpl-pannello-foto{margin:0;min-width:0}

/* L'ANTEPRIMA GRANDE, E COME CI SI METTONO LE FOTOGRAFIE VERE.
   Sotto c'e' il disegnino grande; sopra, un riquadro che porta la
   fotografia come SFONDO. Se il file non c'e' ancora, lo sfondo non si vede
   e resta il disegnino: nessuna icona di figura rotta, nessun buco.
   Quando le diciotto fotografie di immagini/impianti/ arrivano, la
   fotografia copre il disegnino DA SOLA. Mettere le foto vere e' copiare
   file, e nient'altro. */
.tpl-anteprima{position:relative;display:block}
.tpl-anteprima .tpl-grande{
  height:auto;aspect-ratio:16 / 10;
  border-style:dashed;
}
.tpl-foto{
  position:absolute;inset:0;border-radius:var(--r-s);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.tpl-pannello-nota{
  margin:8px 0 0;font-size:12.5px;line-height:1.4;color:var(--ink-3);
  text-align:center;letter-spacing:.02em;
}
.tpl-pannello-testo{min-width:0}
.tpl-pannello-testo h3{
  font-size:17px;line-height:1.3;letter-spacing:-.01em;
  color:var(--ink-strong);margin:0 0 10px;
}
.tpl-pannello-testo p{font-size:14.5px;line-height:1.6;color:var(--ink-2);
  margin:0 0 12px;max-width:62ch}
.tpl-pannello-testo ul{margin:0;padding-left:18px;display:grid;gap:8px;list-style:disc}
.tpl-pannello-testo li{font-size:14px;line-height:1.55;color:var(--ink-2);max-width:62ch}
.tpl-pannello-testo li::marker{color:var(--accent)}

@media (max-width:640px){
  .pannello-tpl{padding:14px;gap:14px}
  .tpl-pannello-testo h3{font-size:16px}
}
/* ══════ LOTTO 3524:fine ══════ */