/* =============================================================================
   PUROTATTO — collezione.html: in apertura una foto di campagna intera, larga quanto lo schermo, che si scorre; il titolo
   «Collezione Purotatto FW26» col bottone non si muove mai: resta fermo al centro dello schermo e si vede solo sopra la foto,
   così quando la foto finisce i capi gli passano sopra e lo coprono (Gianluca, 26/10 sera: «il titolo deve rimanere fermo, non
   deve scrollare insieme allo scroll»). Da metà foto, fermo com'è, sfuma via (js/pages/collezione.js).
   Dal 3/11 la foto è A74I2099, il cappotto blu notte davanti alle mura: dove passa il titolo c'è il viso al primo istante (voluto)
   e poi solo il cappotto scuro; sopra l'abito stampato della funicolare (A74I2049) il titolo non si leggeva.
   Poi tutti i capi in scala cromatica, nella griglia a due blocchi (.griglia-blocchi, css/system.css)
   (3/11, Andrea, call 2/11: «una carrellata di tutti i prodotti»; le sei schede di categoria sono tornate in home).
   Niente filtri per categoria (Gianluca, 3/11 sera: «sennò poi ti sembra una ripetizione»): le categorie stanno nell'header.
   La hero usa .hero / .hero-media / .hero-copy del sistema (css/system.css, sezione 7).
   ============================================================================= */
/* clip-path ritaglia il titolo fisso sulla foto: fuori dalla foto non si vede e non si clicca */
/* Dal 5/11 sul computer è alta quanto lo schermo (prima 4:5, due schermi a 1440: i capi arrivavano tardi); il telefono resta sotto */
.hero--collezione { height: 100vh; height: 100svh; min-height: 560px; aspect-ratio: auto; clip-path: inset(0); }
.hero--collezione .hero-media { filter: brightness(.86); object-position: 50% 0; }

/* Fisso al centro dello spazio sotto l'header, su due righe; dal 29/10 sussurrato come gli altri titoli delle hero
   (--t-hero in system.css, sezione 4: il cliente ha in mente Cucinelli), fermo e con la sua dissolvenza come prima */
.hero-copy--collezione {
  --ts: var(--t-hero);
  position: fixed; left: 0; right: 0; top: calc(50svh + var(--hdr) / 2); transform: translateY(-50%);
  padding: 0 var(--gutter);
}
.hero-copy--collezione .titolo { white-space: nowrap; }
.hero-copy--collezione .titolo > span { display: block; }
.hero-copy--collezione::before { background: radial-gradient(closest-side, rgba(24, 18, 15, .42), rgba(24, 18, 15, 0)); }   /* alone più scuro: al primo istante sotto passa il viso */

/* Da metà foto il titolo sfuma via restando fermo, prima che la foto finisca (Gianluca, 26/10 sera): --vis da 1 a 0 lo scrive
   js/pages/collezione.js. Sta sui figli e sull'alone, così l'opacità della hero-copy resta alla sua dissolvenza d'ingresso (system.css, sezione 7) */
.hero-copy--collezione > *, .hero-copy--collezione::before { opacity: var(--vis, 1); }
.hero-copy--collezione.is-sparito { pointer-events: none; }
.hero-copy--collezione.is-sparito .btn { visibility: hidden; }   /* trasparente: niente clic né tab sul bottone */

/* La griglia: respiro dopo la foto d'apertura (lo stesso che lasciava la riga dei filtri, uscita il 3/11 sera) e prima del footer */
.coll-griglia { padding-top: clamp(48px, 5vw, 88px); padding-bottom: clamp(56px, 6vw, 104px); }

/* Telefono: larga quanto lo schermo la foto sarebbe più bassa dello schermo; la hero è alta un quarto di schermo in più
   e la foto la riempie tagliando i lati, centrata sul viso. */
@media (max-width: 759px) {
  .hero--collezione { aspect-ratio: auto; height: 125svh; min-height: 0; }
  .hero--collezione .hero-media { object-position: 48% 0; }
  .hero-copy--collezione .titolo { white-space: normal; }
  .coll-griglia { padding-top: 36px; }
}