/* =============================================================================
   scatole.com — GALLERIA «previous projects» (home)
   -----------------------------------------------------------------------------
   Allegato di 000923-scatole-progetti.php. Ogni regola e' racchiusa in
   `.sc-prog`, che esiste su una pagina sola: niente di qui puo' arrivare
   altrove per sbaglio.

   TUTTI I COLORI SONO GETTONI di scatole-officina-00-fondamenta.css. Nessun
   valore letterale, spaziature comprese: il giorno in cui la tavolozza cambia,
   questa sezione cambia con lei invece di restare indietro.

   PERCHE' NON SONO SCHEDE CON IL RIQUADRO
   La fascia che contiene questa sezione e' gia' dipinta di `--sc-carta` da
   01-base (regola su .elementor-element-afa4d66). Una scheda di `--sc-carta`
   su una fascia di `--sc-carta` non si vedrebbe, e una di `--sc-fondo` farebbe
   1,04:1 contro il fondo: un riquadro invisibile con un filo attorno, cioe'
   ornamento puro. Seguo invece la regola che 06 si e' data per questa pagina —
   «sopra le fotografie mai un filtro, mai una trama» — e lascio che sia la
   fotografia a fare la scheda: cornice ad angolo morbido, testo appoggiato
   sotto sulla fascia. E' anche il motivo per cui non c'e' nessun contorno da
   portare a 3:1: qui non c'e' nessun contorno che porti informazione.

   CONTRASTI MISURATI su --sc-carta #FAFAF8, che e' il fondo vero della fascia
     titolo    --sc-ink       #0F1115   18,2:1   AAA
     sommario  --sc-ink-3     #616A75    5,3:1   AA
     invito    --sc-mar-testo #226E78    5,6:1   AA
     fuoco     --sc-mar-scuro #1A555E    8,0:1   ampiamente oltre il 3:1
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. IL POSTO
   Elementor tiene l'elemento 3dd01b7 a `width: 42.245%` allineato a sinistra:
   era la misura di un carosello da due miniature, ed e' la ragione per cui
   nella cattura di prova le due fotografie stavano sbilanciate a sinistra.
   Lo riporto a tutta larghezza e lo centro.

   `!important` serve davvero: la larghezza personalizzata Elementor la stampa
   in un <style> dentro la pagina, cioe' piu' avanti nella cascata di qualunque
   foglio esterno. E' mirato su una classe sola — non e' una clava.
-------------------------------------------------------------------------------- */
body.home #main .elementor-element-3dd01b7 {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  align-self: stretch !important;
}

.sc-prog {
  box-sizing: border-box;
  width: 100%;
  max-width: 1080px;
  margin: var(--sc-s6) auto 0;
  padding-inline: var(--sc-s4);
}

/* -----------------------------------------------------------------------------
   2. LA GRIGLIA
   Il minimo di colonna e' dentro `min()` e non un valore in px secco: sotto i
   340 px di spazio utile una colonna «minimo 300 px» non ci starebbe e la
   griglia sborderebbe. `min(300px, 100%)` non puo' mai chiedere piu' spazio di
   quello che c'e' — e' la riga che tiene lontana la barra orizzontale.
-------------------------------------------------------------------------------- */
.sc-prog__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--sc-s5);
  align-items: start;
}

/* Con due soli progetti `auto-fit` su schermo largo li stirerebbe a 520 px
   l'uno: la sezione diventerebbe il centro della pagina invece di un invito, e
   davanti c'e' gia' la fila delle sei schede prodotto. Con tre torna comoda la
   ripartizione automatica, e questo blocco non fa piu' niente. */
@media (min-width: 1000px) {
  .sc-prog__griglia--1 { grid-template-columns: minmax(0, 460px); justify-content: center; }
  .sc-prog__griglia--2 { grid-template-columns: repeat(2, minmax(0, 440px)); justify-content: center; }
}

/* -----------------------------------------------------------------------------
   3. LA SCHEDA — un collegamento, non un riquadro
-------------------------------------------------------------------------------- */
.sc-prog__carta {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  /* Solo `transform`: nessuna proprieta' che costringa a rifare
     l'impaginazione mentre il puntatore passa. */
  transition: transform .22s ease;
}

.sc-prog__carta:hover { transform: translateY(-3px); }

/* Il fuoco da tastiera deve restare visibile anche dove il tema decide
   altrimenti: e' l'unico modo che ha chi non usa il mouse per sapere dov'e'.
   Sul collegamento intero, non sulla sola fotografia. */
.sc-prog__carta:focus-visible {
  outline: 2px solid var(--sc-mar-scuro);
  outline-offset: 4px;
  border-radius: var(--sc-r);
}

/* Chi ha chiesto meno animazioni al sistema non deve vedere niente muoversi.
   Resta l'ombra piu' marcata, che dice la stessa cosa senza moto. */
@media (prefers-reduced-motion: reduce) {
  .sc-prog__carta,
  .sc-prog__carta:hover { transition: none; transform: none; }
}

/* -----------------------------------------------------------------------------
   4. LA FOTOGRAFIA
   `aspect-ratio` sulla cornice e non un'altezza in pixel: lo spazio e'
   riservato dal primo istante, prima ancora che il file parta. Senza, la
   pagina salterebbe di circa 330 px per scheda all'arrivo delle immagini —
   le due copertine sono quadrate (1979 e 1202 px di lato) e il browser non
   puo' sapere quanto saranno alte finche' non le ha.
   Il taglio 4:3 e' stato verificato sulle due fotografie vere, non dedotto:
   il soggetto e' centrato in entrambe e non viene toccato.
-------------------------------------------------------------------------------- */
.sc-prog__cornice {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--sc-r);
  background: var(--sc-incasso);   /* il piano su cui posa finche' non arriva */
  box-shadow: var(--sc-ombra-1);
  transition: box-shadow .22s ease;
}

.sc-prog__carta:hover .sc-prog__cornice,
.sc-prog__carta:focus-visible .sc-prog__cornice {
  box-shadow: var(--sc-ombra-2);
}

.sc-prog__foto {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.sc-prog__carta:hover .sc-prog__foto { transform: scale(1.035); }

@media (prefers-reduced-motion: reduce) {
  .sc-prog__foto,
  .sc-prog__carta:hover .sc-prog__foto { transition: none; transform: none; }
}

/* -----------------------------------------------------------------------------
   5. IL TESTO
-------------------------------------------------------------------------------- */
.sc-prog__testo {
  display: flex;
  flex-direction: column;
  gap: var(--sc-s2);
  padding-top: var(--sc-s4);
}

.sc-prog__titolo {
  font-family: var(--sc-disp);
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--sc-ink);
}

.sc-prog__somm {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--sc-ink-3);
}

.sc-prog__invito {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-top: var(--sc-s1);
  font-family: var(--sc-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sc-mar-testo);
}

.sc-prog__invito svg { flex: none; transition: transform .22s ease; }
.sc-prog__carta:hover .sc-prog__invito svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .sc-prog__invito svg,
  .sc-prog__carta:hover .sc-prog__invito svg { transition: none; transform: none; }
}

/* -----------------------------------------------------------------------------
   6. TELEFONO
   A 390 px le due schede si impilano. Stringo margini e spazi, non il corpo
   del testo: sotto i 14 px il sommario diventa faticoso proprio dove si legge
   peggio.
-------------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .sc-prog          { margin-top: var(--sc-s5); padding-inline: var(--sc-s3); }
  .sc-prog__griglia { gap: var(--sc-s6); }
  .sc-prog__testo   { padding-top: var(--sc-s3); }
  .sc-prog__titolo  { font-size: 18px; }
}