/* Pagine progetto. La griglia, i blocchi, la testata, la lista in fondo.
   Il vestito viene dai token in comune.css: qui non nascono colori nuovi. */

.caso{ padding:0 var(--pad); }

.caso-griglia{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:clamp(12px, 1.4vw, 24px);
}

/* ---- la hero ----
   La copertina a tutto schermo. L'<img> e' la sorgente della tela e cio' che
   si vede senza JavaScript; la tela ci sta sopra e la ridisegna a griglia —
   heroGriglia() in caso.js. Esce dal padding di .caso con un margine
   negativo e non con 100vw: 100vw conta anche la barra di scorrimento, e
   dove la barra occupa spazio farebbe comparire quella orizzontale. */
.caso-hero{
  position:relative;
  margin:0 calc(var(--pad) * -1);
  height:100vh; height:100svh;
  min-height:420px;
  overflow:hidden;
  background:var(--ink);
}
.caso-hero img,
.caso-hero canvas{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; object-fit:cover;
}
/* La tela entra in dissolvenza quando ha disegnato il primo fotogramma: senza,
   fra l'immagine gia' visibile e la tela vuota si vede un lampo nero. */
.caso-hero canvas{ opacity:0; transition:opacity .5s ease; }
.caso-hero.acceso canvas{ opacity:1; }

/* Con la hero sopra, la testata non deve piu' lasciare posto alla barra:
   quello spazio adesso lo tiene l'immagine. */
.caso-hero + .caso-testata{ padding-top:clamp(40px, 8vh, 120px); }

/* Da telefono l'altezza piena non va: uno schermo 390x844 e' 0,46 di rapporto,
   la copertina e' 1,6, e object-fit:cover di quella copertina ne mostrerebbe
   una colonna centrale alta tutto lo schermo — l'oggetto fotografato esce dai
   bordi e non si capisce piu' cosa sia. Qui l'altezza la detta l'immagine:
   8/5 e' esattamente il rapporto delle copertine — 1600x1000 — quindi qui non
   si taglia niente: si vede la fotografia intera, larga quanto lo schermo. La
   tela segue da sola, il ritaglio se lo ricalcola dalle misure che trova. */
/* La barra e' fissa e la hero parte da zero: senza margine l'immagine le
   finisce sotto, e il marchio piu' i due pulsanti si appoggiano addosso alla
   fotografia. Da telefono, dove la copertina non e' piu' alta tutto lo
   schermo, il margine scopre il nero del fondo e la barra torna a stare su
   una fascia sua. */
@media (max-width:900px){
  .caso-hero{
    height:auto; aspect-ratio:8 / 5; min-height:0;
    margin-top:calc(var(--nav-h) + clamp(8px, 2.4vw, 20px));
  }
}

/* ---- testata ---- */
.caso-testata{
  padding:calc(var(--nav-h) + clamp(40px, 8vh, 120px)) 0 clamp(32px, 6vh, 80px);
  border-bottom:1px solid rgba(244,244,242,.14);
}
.caso-testata .num{ grid-column:1 / 3; color:var(--dim); }
.caso-testata .nome{
  grid-column:1 / 6;
  font-family:var(--f-display); font-weight:var(--w-display);
  font-size:clamp(38px, 6vw, 92px); line-height:.92; letter-spacing:-.045em;
  text-transform:uppercase; margin-top:.28em;
}
.caso-testata .prodotto{ grid-column:6 / 11; color:var(--dim); }
.caso-testata .discipline{ grid-column:6 / 11; margin-top:.9em; }
.caso-testata .anno{ grid-column:11 / 13; justify-self:end; color:var(--dim); }

/* ---- blocchi ---- */
.blocco{ margin-top:clamp(56px, 9vh, 140px); }
.blocco img,
.blocco video{ width:100%; height:auto; display:block; }

/* I link dentro i testi: `a{color:inherit;text-decoration:none}` in comune.css
   li lascerebbe indistinguibili dal testo intorno, e in un paragrafo non c'e'
   nient'altro che dica dove si puo' premere. Stessa forma del banner del
   consenso — sottolineatura staccata — piu' l'arancione al passaggio. */
.blocco--testo a{ text-decoration:underline; text-underline-offset:3px; }
.blocco--testo a:hover{ color:var(--orange); }

.blocco--piena  > *{ grid-column:1 / 13; }
.blocco--testo  > *{ grid-column:1 / 7; font-size:clamp(16px, 1.35vw, 21px); line-height:1.5; }
.blocco--testo.stretto > *{ grid-column:1 / 6; }

.blocco--coppia > *:nth-child(1){ grid-column:1 / 6; }
.blocco--coppia > *:nth-child(2){ grid-column:7 / 10; align-self:end; }

.blocco--doppio-testo > *:nth-child(1){ grid-column:7 / 10; }
.blocco--doppio-testo > *:nth-child(2){ grid-column:10 / 13; }
.blocco--doppio-testo h2{ color:var(--dim); margin-bottom:1.2em; }
.blocco--doppio-testo p{ font-size:15px; line-height:1.55; }

.blocco--terzetto > *{ grid-column:span 4; }

/* ---- la chiusura ----
   Un'immagine verticale e il testo che la riguarda, in una riga sola. Nasce
   da un difetto vero: un oggetto verticale dentro un blocco--piena, o da solo
   in un blocco--terzetto, lascia otto colonne di nero a destra, e su
   Processing Community Day di blocchi cosi' ce n'erano due di fila che si
   leggevano come due sezioni vuote una sotto l'altra.

   Il testo va di fianco, non sotto: parla del video, e messo sotto sarebbe
   una didascalia lontana dalla cosa che didascalizza. Allineato in fondo e
   non in cima — accanto a un 9:16 alto quasi settecento pixel, a filo di cima
   resterebbe appeso in aria con il vuoto sotto. La riga finisce alla colonna
   10 come ogni blocco--coppia della pagina: il margine a destra e' lo stesso
   di tutti gli altri, non un buco. */
.blocco--chiusura > *:nth-child(1){ grid-column:1 / 5; }
.blocco--chiusura > *:nth-child(2){ grid-column:5 / 10; align-self:end; }
/* La riga sopra il testo e' la stessa della testata, stesso colore e stesso
   spessore: senza, appoggiato in fondo alla colonna e alto un quarto del
   video, il blocchetto sembrava caduto li' invece che messo li'. */
.blocco--chiusura > *:nth-child(2){
  border-top:1px solid rgba(244,244,242,.14);
  padding-top:clamp(16px, 2vh, 28px);
}
.blocco--chiusura h2{ color:var(--dim); margin-bottom:1.2em; }
.blocco--chiusura p{ font-size:15px; line-height:1.55; }

/* ---- l'entrata delle immagini ---- */
/* Stessa idea delle card in #showcase: l'immagine si muove dentro una
   maschera. Senza la maschera lo spostamento si vedrebbe come un salto. */
.blocco figure{ overflow:hidden; }
.blocco figure img{ will-change:transform; }

/* ---- l'archivio in fondo ----
   E' la sezione #work della home, non una lista di qui: righe, fascia
   arancione e anteprima al puntatore stanno tutte in comune.css, e le monta
   montaArchivio(). Qui serve solo togliere il padding laterale, che main.caso
   porta gia' addosso, e staccarla dall'ultimo blocco. Il fondo non si
   dichiara: la sezione sta dentro una pagina che e' gia' nera. */
#work.caso-archivio{ padding:clamp(80px, 14vh, 200px) 0 0; }

@media (max-width:900px){
  .caso-testata .nome,
  .caso-testata .num,
  .caso-testata .prodotto,
  .caso-testata .discipline{ grid-column:1 / 13; }
  .caso-testata .anno{ grid-column:1 / 13; justify-self:start; }
  /* I selettori larghi non bastano: in alto le colonne sono assegnate con
     :nth-child(), che pesa piu' di `.blocco--coppia > *`, e le regole a
     media query non prendono peso dallo stare dentro un @media. Con
     `.blocco--coppia > *{grid-column:1/13}` le due immagini restavano
     affiancate e i due testi restavano due colonne strette da mezzo
     schermo — su un telefono, sei o sette caratteri per riga. Ogni riga
     qui sotto ripete quindi lo stesso :nth-child() di quella che annulla. */
  .blocco--testo > *,
  .blocco--testo.stretto > *,
  .blocco--terzetto > *,
  .blocco--coppia > *:nth-child(1),
  .blocco--coppia > *:nth-child(2),
  .blocco--doppio-testo > *:nth-child(1),
  .blocco--doppio-testo > *:nth-child(2),
  .blocco--chiusura > *:nth-child(1),
  .blocco--chiusura > *:nth-child(2){ grid-column:1 / 13; }
  .blocco--coppia > *:nth-child(2){ margin-top:clamp(20px,4vh,48px); }
  .blocco--doppio-testo > *:nth-child(2){ margin-top:clamp(20px,4vh,48px); }
  /* Da telefono le due colonne diventano due righe e il testo finisce sotto
     il video: resta da staccarlo, se no la riga sottile gli si appoggia
     addosso. */
  .blocco--chiusura > *:nth-child(2){ margin-top:clamp(20px,4vh,48px); }
}