/* ==========================================================================
   Sezione 02 «I dati raccontano il cambiamento».
   Smartphone (381:17) e tablet (509:623): filetto in alto, testi in colonna,
   card una sotto l'altra (smartphone) o due per riga (tablet), niente riquadro.
   Desktop (384:25, y 766, alta 740): titolo a sinistra, riquadro «Data thread»
   in alto a destra, cinque card sparse sul piano come nel disegno (posizioni sotto).
   Tra 1280 e 1440 px le posizioni scalano con la pagina; card larghe come nel disegno.
   Card NON cliccabili: nessun hover, focus o premuto.
   ========================================================================== */

/* ---------- Smartphone ---------- */
/* Nel disegno compatto tutti gli elementi sono separati da 8 px più uno «spacer»:
   filetto → eyebrow 30 + 2·8, eyebrow → titolo 22 + 2·8, titolo → testo 14 + 2·8,
   testo → card 42 + 2·8, tra le card 22 + 2·8 */
.s02__palco {
  position: relative;
  max-width: var(--larghezza-contenuto);
  margin-inline: auto;
  padding: 0 var(--spazio-20);      /* i 64 px verso la 03 sono in alto nella 03 */
}

/* filetto sopra la sezione (250:28, 509:624), largo quanto il contenuto */
.s02__palco::before {
  content: "";
  display: block;
  border-top: var(--filetto);
}

.s02__eyebrow {
  margin-top: calc(30px + 2 * var(--spazio-8));
  color: var(--testo-accento);
}

.s02__titolo {
  margin-top: calc(22px + 2 * var(--spazio-8));
  color: var(--testo-primario);
}

.s02__introduzione {
  margin-top: calc(14px + 2 * var(--spazio-8));
  color: var(--testo-secondario);
}

/* riquadro «Data thread» (19:6): solo desktop */
.s02__riquadro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--superficie-lilla-chiaro);
  border: 1px solid var(--accento-lilla);
  border-radius: var(--raggio-18);
}

.s02__riquadro-eyebrow {
  color: var(--testo-accento);
}

.s02__riquadro-testo {
  color: var(--testo-primario);
}

/* card (componente «Card sezione 02», 362:29) */
.s02__card {
  display: grid;
  gap: calc(22px + 2 * var(--spazio-8));
  margin: calc(42px + 2 * var(--spazio-8)) 0 0;
  padding: 0;
  list-style: none;
}

.card-02 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* nel disegno i due gruppi sono attaccati */
  /* nel disegno compatto le card hanno altezze fisse (198–238 px): qui l'altezza
     segue il testo, con almeno 32 px tra i due gruppi */
  gap: var(--spazio-32);
  /* in Figma il bordo non occupa spazio: 1 px in meno di padding (18 · 20 · 12) */
  padding: calc(18px - 1px) calc(var(--spazio-20) - 1px) calc(var(--spazio-12) - 1px);
  background: var(--superficie-bianco);
  border: 1px solid var(--accento-lilla);
  border-radius: var(--raggio-24);
  box-shadow: var(--ombra-card-02);
}

.card-02__alto {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-12);
}

.card-02__basso {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-8);
}

.card-02__numero { color: var(--testo-accento); }
.card-02__titolo { color: var(--testo-primario); }
.card-02__testo { color: var(--testo-secondario); }
.card-02__categoria { color: var(--testo-attenuato); }   /* nel disegno: principale al 60% */

/* ---------- Tablet (anche 1024–1279 px) ---------- */
/* due card per riga a 16 px, righe a 8 px; l'ultima card occupa tutta la riga (509:920–922) */
@media (min-width: 600px) {
  /* sotto le card il disegno tablet lascia quattro spaziatori avanzati (509:633–639):
     4 · 22 + 4 · 8 = 120 px in più prima della 03 (docs/PUNTI-APERTI.md B26) */
  .s02__palco { padding: 0 var(--spazio-24) calc(4 * 22px + 4 * var(--spazio-8)); }

  .s02__card {
    grid-template-columns: 1fr 1fr;
    gap: var(--spazio-8) var(--spazio-16);
  }

  .card-02:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  /* su tablet le card sono alte quanto il testo (la più alta della riga) */
  .card-02 { gap: var(--spazio-12); }
}

/* ---------- Desktop ---------- */
@media (min-width: 1280px) {
  /* coordinate del disegno: x in px su 1440 (scala con la pagina), y e larghezze in px:
     card e riquadro restano larghi come nel disegno, così i testi vanno a capo come a 1440 */
  .s02__palco {
    height: var(--s02-altezza);
    padding: 0;
  }

  /* Il disegno ha un livello «Section 02 / Top Hairline» (19:2), ma nella resa
     non si vede: nessun filetto sopra la sezione 02 (vale il disegno) */
  .s02__palco::before { content: none; }

  .s02__eyebrow { margin-top: 0; }
  .s02__titolo { margin-top: var(--spazio-16); }
  .s02__introduzione { margin-top: var(--spazio-4); }

  .s02__testa,
  .s02__riquadro,
  .card-02 {
    position: absolute;
    left: calc(var(--x) / 1440 * 100%);
    top: calc(var(--y) * 1px);
    width: calc(var(--w) * 1px);
    margin: 0;
  }

  .s02__testa { --x: 72; --y: 40; --w: 520; }          /* 19:3, 19:4, 19:5 */
  .s02__introduzione { max-width: calc(430 / 520 * 100%); }

  .s02__riquadro {                                       /* 19:6 */
    --x: 1104; --y: 49; --w: 250;
    min-height: 126px;
    padding: calc(18px - 1px) calc(18px - 1px) calc(var(--spazio-8) - 1px);
  }

  .s02__card { margin: 0; }
  .card-02 { gap: 0; }

  /* 415:2 mRNA · 415:8 CRISPR · 415:14 Immunoterapia · 415:20 Diagnostica · 415:26 Scoperte */
  .card-02:nth-child(1) { --x: 649;  --y: 50;  --w: 250; }
  .card-02:nth-child(2) { --x: 1076; --y: 236; --w: 278; }
  .card-02:nth-child(3) { --x: 783;  --y: 458; --w: 290; }
  .card-02:nth-child(4) { --x: 417;  --y: 426; --w: 265; }
  .card-02:nth-child(5) { --x: 72;   --y: 467; --w: 244; }
}