/* =====================================================================
   MARCA_84771_PORTFOLIO_VETRINA -- la fascia in cima alla vetrina
   /portfolio quando la copertina e' una STRISCIA. 29 settembre 2026,
   reparto PORTFOLIO.

   QUESTO FOGLIO NON DISEGNA LA STRISCIA. La striscia (le carte, il
   fondo sfocato, le frecce, i pallini, il contatore, i filmati) e'
   gia' disegnata da galleria-carosello-81991.css, che qui si carica
   tale e quale: sono le stesse classi .gc-*, non una copia.

   QUI C'E' SOLO IL POSTO DOVE LA STRISCIA STA. Nella galleria del
   cliente il contenitore e' .gal-apertura-carosello; sulla vetrina e'
   .pf-banner, che oggi e' una fascia alta 380 punti con la foto sotto
   e la scritta appoggiata in fondo. Queste righe fanno per .pf-banner
   esattamente quello che quel foglio fa per .gal-apertura-carosello:
   il titolo DENTRO la fotografia, e pallini e contatore SOTTO, cosi'
   non cadono sulle facce.

   FOGLIO A PARTE, e si carica SOLO quando la striscia c'e': senza
   striscia la vetrina non scarica nemmeno questo file e resta identica
   a ieri, banner compreso. E' la stessa regola di tutti gli altri
   fogli del portfolio -- non si tocca modern-theme.css, che in questi
   giorni lo stanno gia' modificando altri reparti.
   ===================================================================== */

.pf-banner-vetrina {
  /* L'altezza della fascia: lo STESSO numero della galleria del cliente
     (galleria-carosello-81991.css). Non cambia mai da una fotografia
     all'altra -- e' fisso, non dipende dalla forma -- cosi' la fascia
     sta ferma mentre si sfoglia e la pagina sotto non salta. */
  /* MARCA_85065_VETRINA_COME_LE_STORIE (D521, 30/9): 76 per cento, come
     nella galleria del cliente (era 64). Sul telefono vedi piu' sotto. */
  --gc-alta: clamp(440px, 76svh, 900px);
  --gc-raggio: var(--gal-raggio, 14px);
  /* Quanto e' larga DAVVERO la fotografia che si sta guardando: la
     scrive il programma a ogni cambio. Senza programma vale 100%. */
  --gc-largo-foto: 100%;

  height: auto;
  min-height: 0;
  /* LA FASCIA SOTTO LA FOTOGRAFIA: ci stanno i pallini (o il contatore).
     Nella galleria del cliente e' la stessa misura. */
  padding: 0 0 clamp(64px, 7.5svh, 92px);
  /* OBBLIGATORIO: .pf-banner nasce con overflow:hidden, e i pallini
     stanno APPOSTA sotto il bordo della striscia (bottom:-58px). Con
     l'overflow nascosto sparirebbero senza dire niente. */
  overflow: visible;
  background: var(--ground);
  display: grid;
  grid-template-areas: "vetrina";
  grid-template-columns: 1fr;
  justify-items: stretch;
  align-items: stretch;
  text-align: center;
  position: relative;
}

.pf-banner-vetrina .gc-striscia { grid-area: vetrina; }

/* ------------------------------------------------------------------ */
/*  IL NOME DELLO STUDIO: DENTRO LA FOTOGRAFIA, IN CIMA                 */
/* ------------------------------------------------------------------ */
/* Con la copertina singola sta in fondo, appoggiato sul velo. Con la
   striscia il velo non c'e' (si vedrebbe su dieci fotografie diverse,
   e su quella intera cadrebbe anche sullo sfocato), quindi la scritta
   va in cima e si porta dietro la sua sfumatura, come nella galleria
   del cliente. */
.pf-banner-vetrina .pf-banner-testo {
  /* MARCA_85065_VETRINA_COME_LE_STORIE (D521, 30/9): come nella galleria
     del cliente, il nome (o il logo) e il telefono stanno in basso a
     sinistra, piccoli, su una pastiglia scura semitrasparente, e non piu'
     in cima su una sfumatura larga quanto la fascia. */
  grid-area: vetrina;
  align-self: end;
  justify-self: start;
  z-index: 4;
  position: relative;
  padding: 12px 16px 13px;
  width: auto;
  max-width: min(46%, 520px);
  margin: 0 0 18px 18px;
  gap: 5px;
  align-items: flex-start;
  text-align: left;
  border-radius: 12px;
  background: rgba(10, 10, 17, .58);
  /* La scritta non deve rubare il clic alla striscia: si sfoglia anche
     passando sopra al nome. I collegamenti veri se lo riprendono
     (le due righe qui sotto). */
  pointer-events: none;
}
@supports (backdrop-filter: blur(8px)) {
  .pf-banner-vetrina .pf-banner-testo {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
.pf-banner-vetrina .pf-banner-nome { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; }
.pf-banner-vetrina .pf-banner-logo { height: 32px; max-width: 160px; margin-bottom: 0; }
.pf-banner-vetrina .pf-banner-testo a,
.pf-banner-vetrina .pf-banner-testo button { pointer-events: auto; }

.pf-banner-vetrina .pf-banner-recapiti { justify-content: flex-start; }

/* Il velo di sempre non serve piu': la sfumatura sta sulla scritta. */
.pf-banner-vetrina .pf-banner-velo { display: none; }

/* ------------------------------------------------------------------ */
/*  IL CONTATORE E IL TASTO DELLO SCORRIMENTO AUTOMATICO                */
/* ------------------------------------------------------------------ */
/* SUL TELEFONO si coprivano: misurato, il contatore «1 / 7» (24x26 in
   basso a sinistra) finiva TUTTO sotto il tasto tondo dello scorrimento
   automatico (44x44, nello stesso angolo) -- 624 punti quadrati su 624,
   cioe' il contatore non si vedeva affatto.
   La correzione esiste gia', ed e' quella della vetrina delle gallerie
   (vetrina-ordine-84811.css, righe 128-138): il contatore si sposta a
   destra del tasto, 44 punti piu' 10 di respiro. Li' pero' e' scritta
   dentro «.gal-apertura-carosello», che su questa pagina non c'e': una
   regola ancorata a un contenitore che qui non esiste smette di prendere
   senza dirlo. Quindi si rifa' lo STESSO conto per questa fascia, con gli
   STESSI numeri: se un giorno cambiano li', vanno cambiati anche qui. */
.pf-banner-vetrina .gc-conta {
  left: calc(clamp(12px, 2vw, 22px) + 54px);
}
/* Quando il tasto non c'e' (chi ha chiesto meno animazioni) il contatore
   torna al suo posto: la classe la mette il programma sulla striscia. */
.pf-banner-vetrina .gc-striscia-senza-scorri .gc-conta {
  left: clamp(12px, 2vw, 22px);
}

/* ------------------------------------------------------------------ */
/*  IL TONDO DEL PROFILO                                                */
/* ------------------------------------------------------------------ */
/* Sta a cavallo del bordo fra banner e pagina, con un margine negativo.
   Con la fascia piu' alta il conto non cambia -- il margine e' sulla
   sezione sotto, non sul banner -- ma la striscia gli finirebbe sopra
   se non gli si dicesse chi sta davanti. */
.pf-banner-vetrina + .pf-intestazione { position: relative; z-index: 5; }

/* ------------------------------------------------------------------ */
/*  IL TASTO PER RIENTRARE NEL CRM                                      */
/* ------------------------------------------------------------------ */
/* Lo vede SOLO il fotografo, e sta fisso in alto a sinistra (12 punti
   dal bordo, alto 40). Con la copertina di sempre il nome dello studio
   sta in FONDO alla fascia e non si incontrano mai; con la striscia il
   nome sta in CIMA, e su uno schermo stretto il tasto ci finisce sopra.
   MISURATO a 375 punti: 4.350 punti quadrati di nome coperti su 7.830,
   cioe' piu' della meta'. Qui il nome si sposta sotto il tasto.
   Solo quando il tasto c'e' davvero (la classe la scrive il server) e
   solo dove si incontrano: sopra gli 860 punti il nome sta al centro e
   il tasto resta lontano. Chi guarda la vetrina non vede nessuna
   differenza. */
/* MARCA_85065_VETRINA_COME_LE_STORIE: dal 30/9 il nome sta in BASSO, e
   il tasto in alto a sinistra non lo incontra piu'. La riga che lo
   spostava sotto il tasto (padding-top: 64px) avrebbe solo allungato la
   pastiglia: tolta. Le tacche della vetrina invece scendono sotto il
   tasto (vetrina-ordine-84811.css). */

/* ------------------------------------------------------------------ */
/*  IL TELEFONO                                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 700px) {
  .pf-banner-vetrina {
    /* MARCA_84773_VETRINA_DUE_POSIZIONI -- qui c'era un'altezza tutta
       sua per il telefono (62svh). Tolta: adesso la fascia e' ALTA COME
       NELLE GALLERIE (64svh, 375 x 520), cosi' la cornice del telefono
       nel pannello ha la forma vera in tutti e due i posti. */
    padding-bottom: clamp(56px, 7svh, 76px);
  }
  .pf-banner-vetrina .pf-banner-testo {
    margin: 0 0 12px 12px;
    padding: 10px 13px 11px;
    /* 80 = 12 di margine + 44 del tasto del filmato (in basso a destra)
       + 24 di respiro: misurato a 375, senza questa riga i due si
       sovrapponevano di 15 punti. */
    max-width: calc(100% - 80px);
  }
  .pf-banner-vetrina .pf-banner-nome { font-size: 18px; }
  .pf-banner-vetrina .pf-banner-logo { height: 26px; max-width: 120px; }
}
/* MARCA_85065_VETRINA_COME_LE_STORIE: sul telefono la fascia e' alta una
   volta e mezza la larghezza (375 x 562: una verticale 2:3 larga quanto
   lo schermo), come nella galleria del cliente. */
@media (max-width: 640px) {
  .pf-banner-vetrina { --gc-alta: min(150vw, 74svh); }
}