/* ==========================================================================
   SMAGENCY · domande.css
   Lo stile che serve solo alla pagina Domande (domande.html).
   Quello uguale in tutte le pagine sta in css/comune.css.

   Sui computer è una scena a scorrimento: lo schermo resta fermo, a destra
   le domande in vetro arrivano e si "accendono" una alla volta, a sinistra
   una linea lime si riempie (--p, scritto da js/comune.js).
   Sul telefono (o su schermi bassi) le domande non ci starebbero in uno
   schermo: diventa una sezione normale, con le domande che compaiono allo
   scroll (.rivela).
   ========================================================================== */

.domande__griglia {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: start;
  gap: clamp(32px, 6vw, 80px);
}

.domande__sinistra .titolo-sezione { font-size: clamp(2.6rem, 5.5vw, 4.6rem); }
.domande__sinistra p { max-width: 24em; color: var(--bianco-2); font-size: 1.1rem; }

/* La linea che si riempie */
.domande__avanzamento {
  width: 100%;
  max-width: 280px;
  height: 3px;
  margin-top: 28px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--linea);
}
.domande__avanzamento span { display: block; height: 100%; background: var(--lime); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* Le domande */
.domande { display: grid; gap: 14px; }
.domanda { border-radius: 24px; }
.domanda summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -.02em;
  list-style: none;
  cursor: pointer;
}
.domanda summary::-webkit-details-marker { display: none; }
/* Il + che diventa × quando la domanda è aperta */
.domanda summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--lime);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1;
  transition: transform .3s var(--curva);
}
.domanda[open] summary::after { transform: rotate(45deg); }
.domanda p { margin: 0; padding: 0 24px 22px; color: var(--bianco-2); }


/* ---------- La scena (computer con schermo abbastanza alto) ----------
   --t va da 0 a 1 per la domanda numero --i: prima la 0, poi la 1, ...
   (con --p a 0,73 sono già tutte accese, poi si ha tempo per leggerle).
   overflow: visible: se si apre una risposta lunga non viene tagliata. */
@media (min-width: 901px) and (min-height: 820px) {
  .js .domande-sezione { height: 240vh; height: 240svh; padding: 0; }
  .js .domande__scena { display: flex; align-items: center; padding-top: 60px; overflow: visible; }
  .js .domande__scena > .contenitore { width: 100%; }
  .js .domande-sezione .domanda.rivela {
    --t: clamp(0, calc(var(--p, 0) * 11 - var(--i)), 1);
    opacity: calc(.12 + .88 * var(--t));
    translate: calc((1 - var(--t)) * 70px) 0;
    transition: none;
    will-change: transform, opacity;
  }
}

/* Telefono e schermi bassi: niente scena */
@media (max-width: 900px), (max-height: 819px) {
  .js .domande__scena { position: static; height: auto; overflow: visible; }
  .domande__sinistra { position: sticky; top: 120px; }
}

@media (max-width: 900px) {
  .domande__griglia { grid-template-columns: 1fr; }
  .domande__sinistra { position: static; }
}