/* Le radici e la rassegna (11 ott 2026, approvato da Salvo).
 * Lo carica chi-siamo (it/en): la fascia «Le nostre radici», «Ne hanno parlato» e i ritocchi
 * della cronologia (foto e titoli cliccabili, pulsante «Guarda il progetto» leggibile).
 * Ogni scheda e' un unico collegamento; data-evento la misura (site.js, registro delle visite).
 * Lo pubblica scripts/deploy-sito.js (ASSET_SITO). */

/* ── Le nostre radici ── */
.radici{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:8px}
.radice{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.09);background:rgba(255,255,255,0.03);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.radice:hover,.radice:focus-visible{transform:translateY(-3px);border-color:rgba(96,165,250,0.6);box-shadow:0 10px 28px rgba(59,130,246,0.18)}
.radice:focus-visible{outline:2px solid #60a5fa;outline-offset:3px}
.radice img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#0b1220}
.radice-corpo{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;flex:1}
.radice-anno{font-family:var(--font-mono,monospace);font-size:0.78rem;letter-spacing:0.18em;color:#60a5fa;font-weight:600}
.radice-nome{font-size:1.15rem;font-weight:500;color:#fff;margin:0}
.radice-riga{font-size:0.9rem;line-height:1.6;color:rgba(241,245,249,0.74);font-weight:300;margin:0;flex:1}
.radice-invito{margin-top:10px;font-size:0.92rem;font-weight:600;color:#93c5fd}
.radice:hover .radice-invito{color:#fff}

/* ── Ne hanno parlato ── */
.rassegna{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:8px}
.fonte{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,0.09);background:rgba(255,255,255,0.03);
  transition:transform .25s ease,border-color .25s ease}
.fonte:hover,.fonte:focus-visible{transform:translateY(-3px);border-color:rgba(96,165,250,0.6)}
.fonte:focus-visible{outline:2px solid #60a5fa;outline-offset:3px}
.fonte img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;background:#0b1220}
.fonte-corpo{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;flex:1}
.fonte-testata{font-size:1.02rem;font-weight:600;color:#fff;margin:0}
.fonte-anno{font-family:var(--font-mono,monospace);font-size:0.74rem;letter-spacing:0.16em;color:#60a5fa;font-weight:600}
.fonte-riga{font-size:0.9rem;line-height:1.6;color:rgba(241,245,249,0.74);font-weight:300;margin:0;flex:1}
.fonte-invito{margin-top:10px;font-size:0.88rem;font-weight:600;color:#93c5fd}
.fonte:hover .fonte-invito{color:#fff}
/* la scheda Altera: larga, con la citazione in evidenza */
.fonte--altera{grid-column:1 / -1;flex-direction:row}
.fonte--altera img{width:46%;flex:0 0 46%;aspect-ratio:auto;object-fit:cover;object-position:top left}
.fonte--altera .fonte-corpo{justify-content:center;padding:24px 26px}
.fonte--altera .fonte-riga{flex:none}
.fonte-citazione{margin:6px 0 4px;padding-left:16px;border-left:3px solid var(--accent,#3b82f6);font-size:1.05rem;line-height:1.6;font-weight:300;color:#fff}
.fonte-citazione span{color:#93c5fd}
/* la fonte senza ritaglio (l'annuncio Ramtron): una tessera tipografica al posto dell'immagine */
.fonte-tessera{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(135deg,rgba(59,130,246,0.22),rgba(6,182,212,0.08));border-bottom:1px solid rgba(255,255,255,0.08)}
.fonte-tessera b{font-family:var(--font-mono,monospace);font-size:1.5rem;letter-spacing:0.08em;color:#fff;font-weight:600}
.fonte-tessera i{font-style:normal;font-size:0.8rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(241,245,249,0.74)}

/* le fiere: una riga di tre tessere piccole */
.fiere-titolo{font-size:0.7rem;letter-spacing:0.3em;text-transform:uppercase;color:#60a5fa;font-family:var(--font-mono,monospace);margin:38px 0 14px}
.fiere{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fiera{position:relative;display:block;text-decoration:none;color:#fff;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.09);transition:border-color .25s ease,transform .25s ease}
.fiera:hover,.fiera:focus-visible{border-color:rgba(96,165,250,0.6);transform:translateY(-2px)}
.fiera:focus-visible{outline:2px solid #60a5fa;outline-offset:3px}
.fiera img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.fiera-testo{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.86));font-size:0.84rem;line-height:1.4}
.fiera-testo strong{display:block;font-weight:600}
.fiera-testo span{color:rgba(241,245,249,0.8);font-weight:300}

/* ── La cronologia: foto e titoli cliccabili, pulsante leggibile ── */
.tl-item h3 a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(96,165,250,0.45)}
.tl-item h3 a:hover,.tl-item h3 a:focus-visible{color:#93c5fd;border-bottom-color:#93c5fd}
.tl-item .tl-link{font-size:0.92rem;letter-spacing:0.01em;text-transform:none;padding:10px 18px}
.tl-media a{display:block}
.tl-media a:focus-visible{outline:2px solid #60a5fa;outline-offset:-2px}
.tl-media--verticale{max-width:300px}

/* testo per chi usa la sintesi vocale */
.storia-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:860px){
  .radici{grid-template-columns:1fr;gap:18px}
  .rassegna{grid-template-columns:1fr;gap:18px}
  .fonte--altera{flex-direction:column}
  .fonte--altera img{width:100%;flex:none;aspect-ratio:16/10}
  .fiere{grid-template-columns:1fr;gap:12px}
}
@media(prefers-reduced-motion:reduce){
  .radice,.fonte,.fiera{transition:none}
  .radice:hover,.fonte:hover,.fiera:hover{transform:none}
}