/* Le schede dei lavori dei clienti, in coda alla griglia di /progetti.
 *
 * Qui c'e' solo l'involucro: la sezione, la griglia e le celle. Le schede
 * dentro sono quelle di Framer, con le loro classi, e si vestono da sole -
 * vedi tools/progetti.mjs. Le misure ricalcano quelle della griglia sopra
 * (1180 px, due colonne da 580, trenta di respiro fra le righe e venti fra le
 * colonne), cosi' le due file si leggono come una sola.
 *
 * La larghezza va detta per esteso. La sezione finisce dentro un contenitore
 * che e' flex in colonna con align-items:center: li' dentro un figlio senza
 * larghezza si stringe al suo contenuto, e la prima volta la griglia e'
 * venuta larga 512 px invece di 1180. Le sezioni di Framer, infatti, la
 * larghezza se la scrivono tutte.
 *
 * Finche' mirror/boost/progetti.js non l'ha messa al suo posto la sezione sta
 * in fondo alla pagina, dove la scrive il generatore: li' resta invisibile,
 * altrimenti per un istante la si vedrebbe sotto al piede. Chi legge senza
 * JavaScript - i motori di ricerca - la trova comunque nel documento. */

.np {
  display: none;
  width: 100%;
  align-self: stretch;
}
.np[data-np-pronta] { display: block; }

.np-griglia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 30px;
  width: 100%;
  max-width: 1180px;
  /* Meno cinquanta, non trenta: fra l'ultima riga di Framer e la prima nostra
   * ci sono gia' ottanta pixel che vengono dal fondo della sezione sopra, e
   * senza toglierli il distacco sarebbe di centodieci contro i trenta che
   * separano le righe fra loro - si vedrebbero come due griglie diverse. */
  margin: -50px auto 0;
  padding: 0;
  box-sizing: border-box;
}

/* La cornice attorno alla scheda: angoli, anello bianco e fondo chiaro sono
 * di chi sta SOPRA la scheda nella griglia di Framer, non della scheda - e
 * quelle regole sono legate al contenitore, quindi fuori non valgono. Si
 * ricopiano qui con le stesse misure lette dalla pagina: 16 px di raggio,
 * quattro di anello bianco, dieci di respiro sopra e ai lati e venti sotto. */
/* IL RIQUADRO DELLA FOTO.
 *
 * Sul computer e sulla tavoletta le misure di Framer vanno bene come sono e
 * non si toccano: la finestra della foto e' alta 360 e taglia quel che avanza,
 * e l'immagine dentro e' un riquadro appoggiato in cima, alto 360 anche lui.
 * Serve che l'altezza sia scritta in pixel: da «auto» il browser non sa
 * passare a un numero, e il salto del passaggio del mouse - qui sotto -
 * avveniva in un fotogramma solo, senza animazione.
 *
 * Sul telefono invece la scheda si stringe a 330 e con 360 di altezza la foto
 * verrebbe tagliata troppo: li' - e solo li', dove il mouse non c'e' - il
 * riquadro segue il rapporto delle nostre schermate, 1400 su 900, e la foto
 * si vede intera. Quella regola sta in fondo, fra le misure del telefono.
 *
 * LA RIGA SOTTO IL NOME SI SCOPRE PASSANDOCI SOPRA.
 *
 * Nelle schede di Framer la scheda e' alta 399 fissi e nasconde quel che
 * avanza: fra foto (360) e blocco dei testi (99) avanza proprio la
 * descrizione, che infatti da ferma non si vede. Col mouse sopra, Framer
 * cambia variante e accorcia la finestra della foto a 285: il testo sale di
 * settantacinque e la riga compare. L'immagine, che sta in un riquadro suo
 * alto 360, non si schiaccia: resta ferma e viene tagliata sotto. La variante
 * la governa React, che le nostre schede non le conosce, quindi il salto lo
 * rifacciamo qui - con le stesse due misure lette dal foglio di Framer.
 *
 * E CON LO STESSO ANDAMENTO. Framer non ha una transizione scritta nel
 * foglio di stile: il movimento lo fa il suo JavaScript, con una molla che
 * dura circa un secondo, sfora di un pixel oltre il bersaglio e poi si
 * assesta. Una curva a tre parole non le somiglia, quindi quella molla e'
 * stata misurata fotogramma per fotogramma su una scheda di Framer - andata e
 * ritorno, che vengono uguali - e riscritta qui appiglio per appiglio, uno
 * ogni venti millesimi: ricalca la curva vera entro un pixel e mezzo su
 * settantacinque. La riga con ease-out viene prima, per i browser vecchi che
 * linear() non lo conoscono: senza, resterebbero allo scatto secco.
 * tools/progetti-verifica.mjs rimisura le due curve e le confronta. */
.np .np-cella .framer-xw8zf7 {
  transition: height 0.45s ease-out;
  transition: height 1s linear(0, 0.0159 2%, 0.0616 4%, 0.1146 6%, 0.1789 8%, 0.2503 10%, 0.3272 12%, 0.4024 14%, 0.476 16%, 0.5459 18%, 0.6099 20%, 0.6707 22%, 0.7238 24%, 0.7724 26%, 0.8153 28%, 0.8526 30%, 0.8844 32%, 0.9116 34%, 0.9345 36%, 0.9535 38%, 0.9691 40%, 0.9816 42%, 0.9914 44%, 0.9992 46%, 1.005 48%, 1.0091 50%, 1.012 52%, 1.0138 54%, 1.0148 56%, 1.0151 58%, 1.0149 60%, 1.0144 62%, 1.0136 64%, 1.0126 66%, 1.0115 68%, 1.0103 70%, 1.0092 72%, 1.0081 74%, 1.007 76%, 1.006 78%, 1.0051 80%, 1.0043 82%, 1.0035 84%, 1.0029 86%, 1.0023 88%, 1.0018 90%, 1.0014 92%, 1.001 94%, 1.0007 96%, 1.0004 98%, 1 100%);
}
@media (min-width: 810px) {
  .np .np-cella:hover .framer-xw8zf7 { height: 285px; }
}

/* Tutta la scheda e' il collegamento al sito del cliente. L'ancora non deve
 * portare niente di suo - ne' sottolineature ne' il blu dei link - e deve
 * occupare tutta la cella, altrimenti il clic prende solo il testo. */
.np .np-via {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.np .np-via:focus-visible { outline: 2px solid #111; outline-offset: 4px; border-radius: 12px; }

.np-cella {
  position: relative;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 16px;
  padding: 10px 10px 20px;
  background: rgba(242, 244, 246, 0.8);
  box-shadow: 0 0 0 4px rgb(255, 255, 255);
}

/* Sotto i 1200 px Framer passa a una colonna sola, larga 560 e centrata: non
 * a due strette. Le nostre schede devono fare lo stesso, altrimenti sulla
 * tavoletta si vedono due griglie diverse una sotto l'altra. */
@media (max-width: 1199px) {
  .np-griglia {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
    max-width: none;
    padding: 0 30px;
  }
}

@media (max-width: 809px) {
  .np-griglia { grid-template-columns: minmax(0, 1fr); row-gap: 20px; padding: 0 20px; }
  /* La foto intera invece della finestra alta 360: vedi sopra. */
  .np .np-cella .framer-xw8zf7,
  .np .np-cella .framer-1g1g80x { height: auto; aspect-ratio: 1400 / 900; }
  /* Sul telefono non c'e' il mouse e la riga non si potrebbe scoprire: la
   * scheda si prende l'altezza che le serve e la mostra sempre, che e'
   * esattamente quello che fa Framer con la sua scheda da telefono. */
  .np .np-cella .framer-ew8v3p { height: auto; }
}