/* ═══════════════════════════════════════
   PROGETTI
   Tre schede affiancate: etichetta del luogo,
   foto 3:2, nome, descrizione e link al sito.

   Prima erano tre blocchi a piena schermata
   impilati in sticky, che si scurivano e
   scalavano scorrendo (js/stack.js, ritirato).

   Regola della griglia: tre colonne o una,
   mai due. Con due colonne l'ultimo progetto
   resterebbe solo su una riga, ed e' proprio
   la cosa da evitare.
═══════════════════════════════════════ */

.projects {
  background: var(--bg);
  padding: 56px 40px 88px;
}

/* ── Apertura: badge, titolo e frase ── */

.projects-intro {
  margin-bottom: 64px;
}

.projects-intro .section-label {
  margin-bottom: 40px;
}

/* Titolo e frase spenti dal pannello: resta la sola etichetta.
   Quei 40px servono a staccare l'etichetta dal titolo, e senza titolo non
   separano piu' niente: sommati ai 64px del blocco facevano 104px di vuoto
   fra l'etichetta e le tre schede. Azzerandoli la distanza fra il blocco e
   le schede torna a essere 64px, la stessa che c'e' col titolo acceso.
   Nessun numero nuovo da ricordare: si toglie, non si aggiunge. */
.projects-intro--sola-etichetta .section-label {
  margin-bottom: 0;
}

/* E lo stacco fra il blocco e le schede scende da 64 a 40px: con la sola
   etichetta il blocco pesa molto meno, e la distanza che regge un titolo
   di due righe qui lascia un buco. 40px e' lo stesso valore che questa
   distanza ha gia' su mobile, dove il titolo c'e' ma lo spazio e' poco:
   un numero che il foglio usa gia', non uno nuovo.
   Vale solo a titolo e frase spenti: col titolo acceso restano 64px. */
.projects-intro--sola-etichetta {
  margin-bottom: 40px;
}

/* Titolo a sinistra, frase a fianco.
   La colonna del titolo e' max-content, non 1fr: con 1fr si prendeva tutto
   lo spazio libero e spingeva la frase contro il bordo destro, allontanando
   le due cose su un monitor largo. Con max-content la colonna misura quanto
   la riga piu' lunga del titolo (767px a corpo pieno) e justify-content:
   start tiene il gruppo ancorato a sinistra: lo stacco fra titolo e frase
   resta 56px a qualsiasi larghezza, e l'aria avanza a destra.
   La frase e' centrata verticalmente sul titolo. */
.projects-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, max-content) 390px;
  justify-content: start;
  gap: 28px 56px;
  align-items: center;
}

.projects-title {
  font-family: 'Inter', sans-serif;
  font-size: var(--t-titolo);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--dark);
}

.projects-claim {
  font-size: var(--t-testo);
  line-height: 1.55;
  color: var(--ink-testo);
}

/* ── Griglia delle schede ── */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

/* Colonna flessibile: la descrizione si allunga (flex: 1) e spinge il link
   in fondo, cosi' i tre link restano sulla stessa riga anche quando un nome
   va a capo e l'altro no. */
.project-card {
  display: flex;
  flex-direction: column;
}

/* La citta' sta sotto la foto e il nome del progetto sopra (erano al
   contrario). Resta a bandiera destra, allineata al bordo destro della
   foto. */
.project-card-luogo {
  font-size: var(--t-etichetta);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-didascalia);
  text-align: right;
  margin-bottom: 14px;
}

.project-card-foto {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #e4e4e4;      /* posto della foto finche' non arriva */
  /* Stacco corto verso la citta', che fa da didascalia dell'immagine:
     era 26px quando sotto la foto c'era il nome del progetto. */
  margin-bottom: 12px;
}

.project-card-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-card:hover .project-card-foto img {
  transform: scale(1.03);
}

/* Il nome sta sopra la foto ed e' centrato sulla larghezza della scheda.
   Da mobile torna a bandiera sinistra: vedi responsive.css. */
h3.project-card-nome {
  font-family: 'Inter', sans-serif;
  font-size: clamp(22px, 1.9vw, 34px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--dark);
  text-align: center;
  margin-bottom: 14px;
}

.project-card-desc {
  font-size: var(--t-testo);
  line-height: 1.55;
  color: var(--ink-testo);
  margin-bottom: 28px;
  flex: 1;
}

/* ── Link al sito del progetto ── */

.project-card-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* Questo e' il modello di tutti i pulsanti del sito: i valori stanno
     in base.css (--t-pulsante / --ls-pulsante / --peso-pulsante). */
  font-size: var(--t-pulsante);
  font-weight: var(--peso-pulsante);
  letter-spacing: var(--ls-pulsante);
  text-transform: uppercase;
  color: var(--dark);
  text-decoration: none;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(33, 33, 33, .3);
  transition: border-color .25s;
}

.project-card-cta:hover,
.project-card-cta:focus-visible {
  border-bottom-color: var(--dark);
}

.project-card-freccia {
  transition: transform .25s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-card-cta:hover .project-card-freccia,
.project-card-cta:focus-visible .project-card-freccia {
  transform: translateX(5px);
}

/* ── Monitor stretti ──
   Sotto i 900px tre colonne diventano piu' strette di 250px: il nome va a
   capo due volte e la descrizione si sfilaccia. Si passa direttamente a una
   colonna sola, senza passare per due. Questo punto e' piu' alto del
   breakpoint generale del sito (768px) e vale solo per questa griglia. */
/* ── Soglia larga: 1400px ──
   E' il breakpoint largo del sito, lo stesso dell'header Trademarks.
   Misurato: "Tre destinazioni." a 100px occupa 767px; con 56px di stacco,
   390px per la frase e 80px di padding bastano 1293px perche' le due cose
   stiano affiancate. Il margine di 107px e' voluto: il testo del titolo
   puo' cambiare ancora, e un titolo un po' piu' lungo continua a starci
   senza toccare questo numero. Sotto la soglia la frase scende sotto al
   titolo, sul suo stesso filo a sinistra. */
@media (max-width: 1400px) {
  .projects-intro-grid {
    grid-template-columns: 1fr;
    justify-content: stretch;
    align-items: start;
    /* Stesso stacco della disposizione affiancata e dell'header Trademarks:
       28px in tutte e tre le situazioni, un valore solo da ricordare. */
    gap: 28px;
  }

  .projects-claim {
    max-width: 60ch;
  }
}

@media (max-width: 900px) {
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  /* In colonna unica la scheda non deve diventare larghissima su un tablet:
     la foto e il testo restano su una misura leggibile. */
  .project-card {
    max-width: 640px;
  }

  .project-card-desc {
    flex: none;   /* niente da pareggiare: le schede sono una sotto l'altra */
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-card-foto img,
  .project-card-freccia {
    transition: none;
  }
  .project-card:hover .project-card-foto img {
    transform: none;
  }
}