/* 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);
}

/* ---- 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{ width:100%; height:auto; }

.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; }

/* ---- 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; }
  .blocco--testo > *,
  .blocco--testo.stretto > *,
  .blocco--coppia > *,
  .blocco--doppio-testo > *,
  .blocco--terzetto > *{ grid-column:1 / 13; }
  .blocco--coppia > *:nth-child(2){ margin-top:clamp(20px,4vh,48px); }
}