/* =====================================================================
   D93a — la vetrina a COPERTINE del portfolio pubblico (14 settembre 2026)
   Reparto GALLERIE.

   Foglio A PARTE, non dentro modern-theme.css: oggi altri reparti stanno
   gia' toccando quel foglio comune (grafici, cruscotto, calendario), e
   questa vetrina non deve ne' aspettare ne' pestare il loro lavoro. Si
   carica SOLO da portfolio_pubblico.html.

   Nessuna variabile di colore nuova: si riusano quelle che modern-theme.css
   ha gia' per chiaro e scuro (--ink, --ink-2, --line, --surface, --accent,
   --gal-raggio, --gal-respiro...), che questo foglio carica DOPO. Cosi' il
   tema chiaro/scuro funziona da solo, senza duplicare niente qui.
   ===================================================================== */

/* La griglia: 2 colonne sul telefono (base, mobile-first), piu' larga
   sugli schermi grandi. Le proporzioni della singola copertina (4:5,
   verticale come una foto di un evento) restano uguali a ogni misura:
   e' la griglia che aggiunge colonne, non le tessere che si deformano. */
.pf-copertine{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
  margin-bottom:8px;
}
@media (min-width:640px){
  .pf-copertine{grid-template-columns:repeat(3, 1fr);gap:var(--gal-respiro,20px)}
}
@media (min-width:980px){
  .pf-copertine{grid-template-columns:repeat(4, 1fr)}
}

/* Una copertina = una galleria. Aspect-ratio invece di un'altezza fissa:
   la griglia resta ordinata anche quando l'ultima riga non e' piena, e
   niente foto tagliata storta (object-fit:cover fa il resto). */
.pf-copertina{
  position:relative;
  display:block;
  aspect-ratio:4 / 5;
  padding:0;
  border:0;
  border-radius:var(--gal-raggio,14px);
  overflow:hidden;
  cursor:pointer;
  background:var(--surface-2,#eee);
  -webkit-tap-highlight-color:transparent;
}
.pf-copertina:focus-visible{outline:2px solid var(--accent,#0f8a4f);outline-offset:3px}

.pf-copertina-foto{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover){
  .pf-copertina:hover .pf-copertina-foto{transform:scale(1.05)}
}

/* Il velo scuro in basso: serve solo a far leggere il testo bianco sopra
   qualunque foto, chiara o scura che sia -- non e' un effetto, e' la
   condizione perche' il nome del lavoro si legga sempre. */
.pf-copertina-velo{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.7) 100%);
}

.pf-copertina-testo{
  position:absolute;left:12px;right:12px;bottom:12px;
  color:#fff;text-align:left;pointer-events:none;
}
.pf-copertina-categoria{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;opacity:.92;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.pf-copertina-nome{
  display:block;margin-top:3px;font-size:14.5px;font-weight:650;
  line-height:1.28;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
  /* Al massimo due righe: un nome molto lungo non deve spingere il
     riquadro fuori dalla sua proporzione 4:5. */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}

.pf-copertina-conteggio{
  position:absolute;top:10px;right:10px;pointer-events:none;
  padding:3px 9px;border-radius:999px;
  background:rgba(15,12,9,.5);color:#fff;
  font-size:11px;font-weight:650;letter-spacing:.01em;
}

@media (min-width:640px){
  .pf-copertina-categoria{font-size:11.5px}
  .pf-copertina-nome{font-size:16.5px}
}

/* =====================================================================
   LA SOTTOVISTA -- dentro una galleria
   ===================================================================== */
.pf-sottovista{margin-top:2px}

.pf-sottovista-testata{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-bottom:24px;
}
.pf-sottovista-indietro{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line,#ddd);background:var(--surface,#fff);
  color:var(--ink,#333);padding:9px 16px 9px 12px;border-radius:999px;
  cursor:pointer;font-size:14px;font-weight:600;
  transition:border-color .15s, color .15s;
}
.pf-sottovista-indietro svg{width:16px;height:16px;flex-shrink:0}
.pf-sottovista-indietro:hover{border-color:var(--accent,#0f8a4f);color:var(--accent,#0f8a4f)}
.pf-sottovista-indietro:focus-visible{outline:2px solid var(--accent,#0f8a4f);outline-offset:2px}

.pf-sottovista-titolo{display:flex;flex-direction:column;min-width:0}
.pf-sottovista-categoria{
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2,#777);
}
.pf-sottovista-titolo h2{
  margin:2px 0 0;font-size:clamp(19px,2.6vw,26px);font-weight:700;
  color:var(--ink,#222);line-height:1.2;
}

/* blocco 77292: MARCA_77292_PORTFOLIO_CAROSELLO_CATEGORIE
   (sotto-blocco MARCA_77292_PORTFOLIO_VIDEO_SENZA_FOTO) -- segnaposto
   della carta video quando la galleria non ha nessuna copertina caricata
   (solo filmati, senza foto ne' copertina scelta): stessa idea e stessa
   icona di .pf-scatto-vuoto (modern-theme.css), qui in un foglio a parte
   perche' questo file governa gia' le carte del portfolio. */
.pf-video-card-vuota{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--ink-3,#8b8b96);background:var(--sunken,#f1f1f1)}
.pf-video-card-vuota svg{width:38px;height:38px}

/* blocco 77412: MARCA_77412_VIDEO_IN_VETRINA -- il segno del play sulla
   copertina di un filmato scelto per la vetrina, dentro la sottovista di
   una galleria. Stessa forma e stesso colore del play gia' in uso sulle
   carte della scheda "Solo video" (.pf-video-card-play, modern-theme.css),
   in piccolo: non e' un secondo linguaggio, e' lo stesso. */
.pf-scatto-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:rgba(8,8,14,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;pointer-events:none}
.pf-scatto-play svg{width:20px;height:20px;margin-left:2px}

/* blocco 77418: MARCA_77418_COPERTINA_TRASCINABILE_PORTFOLIO -- la
   copertina di ogni tessera rispetta la posizione trascinata dentro la
   galleria (object-position "62% 30%"): sopra i 640 punti quella per lo
   schermo largo, sotto quella per il telefono. Vuote = var non definita
   -> il ripiego "50% 50%" (centrata), come sempre: nessuna tessera gia'
   online cambia inquadratura da sola. Stessa idea di --gal-pos-oriz/
   --gal-pos-vert gia' in uso sulla copertina della galleria (blocco
   76674/76750, modern-theme.css), qui con nome suo per non confondersi
   con quelle (sono variabili diverse, su elementi diversi). */
.pf-copertina-foto{object-position:var(--pf-pos-oriz,50% 50%)}
@media (max-width:640px){
  .pf-copertina-foto{object-position:var(--pf-pos-vert,50% 50%)}
}
/* blocco 81115: MARCA_81115_COPERTINA_RITAGLIO (D359) -- anche
   l'INGRANDIMENTO scelto nella galleria (--pf-zoom-oriz/--pf-zoom-vert,
   scritte SOLO se scelto: senza, "scale" resta "none" e la tessera e'
   identica a prima). Si ingrandisce attorno al punto trascinato, e si
   somma all'avvicinamento al passaggio del mouse (che e' su "transform").
   Nel layout "mosaico" la foto si vede intera, nella sua forma vera, e
   non c'e' nessun ritaglio: li' l'ingrandimento non si applica. */
.pf-copertina-foto{scale:var(--pf-zoom-oriz,none)}
.pf-copertina .pf-copertina-foto[style*="--pf-zoom-"]{transform-origin:var(--pf-pos-oriz,50% 50%)}
@media (max-width:640px){
  .pf-copertina-foto{scale:var(--pf-zoom-vert,none)}
  .pf-copertina .pf-copertina-foto[style*="--pf-zoom-"]{transform-origin:var(--pf-pos-vert,50% 50%)}
}
.pf-copertine.pf-layout-mosaico .pf-copertina .pf-copertina-foto{scale:none}