/* Prova un'intervista */

/* capo con Carlo che intervista (giro 5) */
.prova-capo { align-items: end; margin-bottom: clamp(40px, 7vh, 80px); row-gap: 40px; }
.prova-capo-testo > p { font-size: var(--t-lead); line-height: 1.5; color: var(--sky-chiaro); }

/* 30/10 · gli intervistatori li accompagna la sfera di punti. Fascia di notte: a sinistra il palco con la sfera,
   fermo mentre scorrono, a destra i tre intervistatori. Ognuno dà alla sfera la sua forma (sferaVoci in _sorgenti/sfera.js).
   Le foto restano piccole: dicono chi ti parlerà nella demo, la sfera dice come. */
.voci { margin: clamp(120px, 22vh, 240px) 0 clamp(80px, 16vh, 200px); }
.voci-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 80px); align-items: start; }
.voci-palco { position: sticky; top: var(--testa-h); height: calc(100svh - var(--testa-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.voci-sfera { display: block; width: 100%; max-width: 680px; aspect-ratio: 1; max-height: calc(100svh - var(--testa-h) - 120px); touch-action: pan-y; cursor: pointer; }

/* scelta: tre pillole con il volto, la corrente piena */
.voci-scelta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.voci-scelta a { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 6px; border-radius: 999px; text-decoration: none;
  font: 600 var(--t-piccolo)/1 var(--display); color: var(--sky-chiaro); border: 1px solid var(--linea-forte);
  transition: background-color .4s var(--esce), color .4s var(--esce), border-color .4s var(--esce); }
.voci-scelta img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; filter: saturate(.8); }
.voci-scelta a:hover { color: var(--mint); border-color: var(--sky); }
.voci-scelta a[aria-current] { background: var(--mint); color: var(--notte); border-color: var(--mint); }
.voci-scelta a:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }

/* i tre intervistatori: righe fra fili, una per schermo */
.voci-elenco { list-style: none; margin: 0; padding: 0; }
.voce { min-height: calc(86svh - var(--testa-h)); display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(40px, 8vh, 96px) 0; border-top: 1px solid var(--linea); }
.voce:last-child { border-bottom: 1px solid var(--linea); }
.voce-chi { display: flex; align-items: center; gap: 14px; font: 600 var(--t-t4)/1.2 var(--display); letter-spacing: -.015em; }
.voce-chi img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.voce-durata { margin-left: auto; font-weight: 400; color: var(--sky); }
.voce-titolo { font: 500 var(--t-t2)/1.02 var(--voce); letter-spacing: -.02em; color: var(--titolo); text-wrap: balance; }
.voce-desc { font-size: var(--t-testo); line-height: 1.55; color: var(--sky-chiaro); }
.voce-vai { align-self: flex-start; margin-top: 10px; }
/* la voce che la sfera sta accompagnando è piena, le altre restano un passo indietro */
html.moto .voce { transition: opacity .7s var(--esce); }
html.moto .voci .voce:not(.attiva) { opacity: .42; }
html.moto .voci .voce:not(.attiva):focus-within, html.moto .voci .voce:not(.attiva):hover { opacity: 1; }
.voce { scroll-margin-top: calc(var(--testa-h) + 24px); }

.voci .nota-demo { margin-top: clamp(28px, 5vh, 56px); color: var(--nebbia); }

/* tempi dei dati, su foglio */
.tempi { display: grid; gap: 18px; margin-bottom: clamp(40px, 6vh, 64px); }
.tempo { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 4px 20px; align-items: baseline; }
.tempo-n { grid-row: span 2; font: 400 var(--t-t2)/.9 var(--voce); letter-spacing: -.01em; font-variation-settings: "opsz" 40, "SOFT" 100, "WONK" 0; color: var(--imperial); font-variant-numeric: tabular-nums; }
.tempo-cosa { color: var(--inchiostro-2); }
.tempo-binario { height: 12px; border-radius: 12px; background: #dbe5ec; overflow: hidden; }
.tempo-barra { display: block; height: 100%; width: calc(var(--giorni) / 90 * 100%); border-radius: 12px; background: linear-gradient(90deg, var(--imperial), #4f73b0); }

/* telefono: il palco sta in alto, fermo sotto la testata, e le voci gli scorrono sotto */
@media (max-width: 900px) {
  .voci { margin: clamp(80px, 14vh, 140px) 0 clamp(64px, 12vh, 120px); }
  .voci-griglia { grid-template-columns: minmax(0, 1fr); }
  .voci-palco { z-index: 2; height: auto; gap: 10px; padding: 8px 0 14px; margin: 0 calc(var(--margine) * -1); background: #071c27; }
  .voci-palco::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 40px; pointer-events: none; background: linear-gradient(180deg, #071c27, rgba(7, 28, 39, 0)); }
  .voci-sfera { width: min(32svh, 76vw); max-height: none; }
  .voci-scelta a { height: 40px; padding-right: 14px; }
  .voci-scelta img { width: 28px; height: 28px; }
  .voce { min-height: 0; padding: 48px 0 56px; scroll-margin-top: calc(var(--testa-h) + min(32svh, 76vw) + 70px); }
  .voce:first-child { border-top: 0; }
}
@media (max-width: 420px) { .voci-scelta a { gap: 8px; padding-right: 12px; } }