/* =====================================================================
   MARCA_76691_ASPETTO_PORTFOLIO -- tema, layout dell'elenco e sfondo di
   copertina della vetrina pubblica /portfolio (direttiva D106, reparto
   GALLERIE, 15 settembre 2026).

   PERCHE' UN FOGLIO A PARTE, e non dentro modern-theme.css o
   portfolio-copertine.css: in questi stessi giorni un altro reparto
   (D105, stessa fascia di numeri di questa consegna) sta gia' toccando
   sia modern-theme.css sia galleria_pubblica.html per il trascinamento
   delle copertine. Un foglio nuovo, caricato SOLO da
   portfolio_pubblico.html (vedi il <link> aggiunto li'), non aspetta e
   non pesta quel lavoro: le due consegne si possono applicare in
   qualunque ordine.

   NIENTE VARIABILI DI COLORE NUOVE. Il TEMA riusa, a lettera, le stesse
   classi ".gal-tema-<valore>" che modern-theme.css gia' definisce per le
   gallerie (blocco 76525 li'): quelle classi si limitano a impostare le
   variabili --accent/--accent-2/--accent-ink/--on-accent, senza
   restrizioni su dove compaiono nella pagina. Il portfolio le applica
   sul contenitore piu' esterno (vedi portfolio_pubblico.html) e tutte le
   regole che portfolio-copertine.css scrive gia' con var(--accent,...)
   (i puntini attivi, il bordo della lente sulle copertine, la barra di
   ricerca...) cambiano colore DA SOLE, senza che questo foglio debba
   riscriverle. Qui sotto ci sono solo le RIFINITURE in piu' -- i pochi
   punti dove un tema deve cambiare anche un font o un effetto, non solo
   un colore -- sempre annidate sotto ".gal-tema-*", mai da sole: senza
   nessun tema scelto (il ripiego "moderno", che non ha classe) questo
   foglio non cambia una virgola rispetto a oggi.
   ===================================================================== */

/* -----------------------------------------------------------------------
   IL LAYOUT DELL'ELENCO -- come si dispongono le copertine dei lavori.

   "quadrato" e' il ripiego (vedi RIPIEGO_LAYOUT_PORTFOLIO in
   gallerie_stili.py) e NON ha classe: e' la griglia che
   portfolio-copertine.css disegna gia' da sola, per cui un portfolio che
   non ha mai scelto niente resta pixel per pixel quello di oggi.
   ----------------------------------------------------------------------- */

/* MOSAICO -- ogni copertina con la sua forma vera (la stessa idea
   dell'impianto "Mosaico" delle gallerie: niente ritaglio forzato).
   Un mosaico a colonne fluide (CSS columns), non una griglia: e' la
   differenza vera con "quadrato", dove ogni tessera e' un rettangolo
   4:5 identico. */
.pf-copertine.pf-layout-mosaico{
  display:block;
  column-count:2;
  column-gap:14px;
}
@media (min-width:640px){
  .pf-copertine.pf-layout-mosaico{column-count:3;column-gap:var(--gal-respiro,20px)}
}
@media (min-width:980px){
  .pf-copertine.pf-layout-mosaico{column-count:4}
}
.pf-copertine.pf-layout-mosaico .pf-copertina{
  aspect-ratio:auto;
  width:100%;
  break-inside:avoid;
  margin-bottom:14px;
  display:block;
}
@media (min-width:640px){
  .pf-copertine.pf-layout-mosaico .pf-copertina{margin-bottom:var(--gal-respiro,20px)}
}
/* La foto in flusso naturale (non piu' assoluta a riempire un riquadro
   fisso): e' quello che fa vedere la sua forma vera. */
.pf-copertine.pf-layout-mosaico .pf-copertina-foto{
  position:static;width:100%;height:auto;display:block;
  transition:none; /* lo zoom al passaggio del mouse non ha senso qui: la
                       tessera non ha un riquadro fisso da riempire */
}
@media (hover:hover){
  .pf-copertine.pf-layout-mosaico .pf-copertina:hover .pf-copertina-foto{transform:none}
}

/* RIGHE -- una fila sola, tessere larghe: come uno scorrere di titoli,
   un lavoro alla volta letto dall'alto in basso invece che a griglia. */
.pf-copertine.pf-layout-righe{
  grid-template-columns:1fr;
  gap:14px;
}
.pf-copertine.pf-layout-righe .pf-copertina{aspect-ratio:16/7}
@media (min-width:640px){
  .pf-copertine.pf-layout-righe{gap:var(--gal-respiro,20px)}
  .pf-copertine.pf-layout-righe .pf-copertina{aspect-ratio:21/8}
}
/* Col riquadro largo il testo si legge meglio piu' grande, come un
   titolo sopra la foto invece che una didascalia in un angolo. */
.pf-copertine.pf-layout-righe .pf-copertina-nome{font-size:19px}
@media (min-width:640px){
  .pf-copertine.pf-layout-righe .pf-copertina-nome{font-size:23px}
}

/* COLONNA -- griglia fitta con piu' tessere per riga: per chi ha tanti
   lavori e vuole vederli tutti senza scorrere all'infinito (la stessa
   idea di "Colonna fissa" nelle gallerie: file piene e fitte). */
.pf-copertine.pf-layout-colonna{
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
}
.pf-copertine.pf-layout-colonna .pf-copertina{aspect-ratio:1/1}
@media (min-width:640px){
  .pf-copertine.pf-layout-colonna{grid-template-columns:repeat(5, 1fr)}
}
@media (min-width:980px){
  .pf-copertine.pf-layout-colonna{grid-template-columns:repeat(7, 1fr)}
}
/* Tessere piccole, testo piu' piccolo: a sette per riga un nome lungo in
   due righe da 16px coprirebbe piu' della meta' della tessera. */
.pf-copertine.pf-layout-colonna .pf-copertina-nome{font-size:12px}
.pf-copertine.pf-layout-colonna .pf-copertina-categoria{font-size:9px}
.pf-copertine.pf-layout-colonna .pf-copertina-conteggio{
  padding:2px 7px;font-size:10px;top:6px;right:6px;
}

/* -----------------------------------------------------------------------
   IL TEMA -- le rifiniture in piu' oltre al colore, che arriva gia' da
   solo con le variabili di modern-theme.css (vedi la nota in cima).
   Ogni regola e' annidata sotto ".gal-tema-<valore>": senza quella
   classe (ripiego "moderno") non fa niente.
   ----------------------------------------------------------------------- */

/* Elegante: corsivo sul nome, come sulle gallerie (blocco 76525). */
.gal-tema-elegante .pf-banner-nome,
.gal-tema-elegante .pf-copertina-nome{font-style:italic}

/* Old style: maiuscoletto e una patina calda sulle foto, come sulle
   gallerie con questo stesso tema. */
.gal-tema-oldstyle .pf-banner-nome{font-variant:small-caps;letter-spacing:.03em}
.gal-tema-oldstyle .pf-copertina-foto{filter:sepia(.2)}

/* Minimale: tutto maiuscolo, foto in bianco e nero -- la stessa scelta
   gia' fatta per le gallerie in questo tema. */
.gal-tema-minimale .pf-banner-nome{text-transform:uppercase;letter-spacing:.02em}
.gal-tema-minimale .pf-copertina-foto{filter:grayscale(1)}

/* Vivace: nome in grassetto pieno, per un tono piu' informale. */
.gal-tema-vivace .pf-banner-nome,
.gal-tema-vivace .pf-copertina-nome{font-weight:800}

/* Pastello: corsivo leggero, tono delicato (newborn, battesimi). */
.gal-tema-pastello .pf-banner-nome{font-style:italic;font-weight:300}