/* Pagine per argomento (patente A e B). Si appoggia a ../domande-piu-sbagliate/stile.css
   (stessi token, hero, sfondo a segnali, bottoni): qui solo i pezzi propri. */
section{position:relative;z-index:1;padding:34px 0}
/* "Quiz patente A e B:" e' una frase sola: con text-wrap:balance del titolo il browser la
   spezzava in "Quiz patente A e / B:" anche quando lo spazio c'era. Riga sua, mai spezzata. */
.h1-pre{display:block;white-space:nowrap}
.intro-arg{margin-top:18px;max-width:62ch;color:var(--ink-2);line-height:1.6}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
/* Secondo pulsante, piu' leggero del principale: la teoria gratuita nel manuale (5/10/2026) */
.vai-teoria{display:inline-flex;align-items:center;gap:6px;padding:12px 20px;border-radius:14px;
  background:var(--surface);border:1.5px solid var(--blu);color:var(--blu);font-weight:700;
  text-decoration:none;transition:background .15s,color .15s}
.vai-teoria:hover{background:var(--blu);color:#fff}
.vai-teoria:focus-visible{outline:3px solid var(--blu-glow);outline-offset:2px}

/* tre numeri in alto */
.fatti{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px;max-width:620px}
.fatti div,.fatti a{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.fatti b{display:block;font-family:"Barlow Condensed",sans-serif;font-size:1.9rem;line-height:1;color:var(--ink)}
.fatti b.e{color:var(--e4)}
.fatti a{text-decoration:none;color:inherit;transition:border-color .15s}
.fatti a:hover{border-color:var(--blu)}
.fatti a u{color:var(--blu);text-decoration:none;font-weight:600}
.fatti span{font-size:12.5px;color:var(--ink-2);line-height:1.35;display:block;margin-top:4px}

/* griglia dei segnali (capitoli con le figure) */
.griglia-seg{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px;align-items:start}
.seg{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.seg summary{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:10px 12px;cursor:pointer;list-style:none}
.seg summary::-webkit-details-marker{display:none}
.seg[open]{box-shadow:var(--shadow)}
.sfig{grid-row:1/3;width:56px;height:56px;display:flex;align-items:center;justify-content:center}
.sfig img{max-width:100%;max-height:100%;width:auto;height:auto}
.snome{font-weight:700;line-height:1.25}
.sn{font-size:12.5px;color:var(--ink-3)}
.sdom{margin:0;padding:4px 14px 12px 14px;list-style:none;border-top:1px solid var(--line);font-size:14.5px;line-height:1.45}
.sdom li{padding:7px 0;border-bottom:1px dashed var(--line)}
.sdom li:last-child{border-bottom:0}
.sdom .ans{font-size:12px;margin-right:6px}
/* "Qui ne vedi 6 delle 27" + invito al Tabellone (10/10/2026) */
.spiu{margin:0;padding:9px 14px 13px;border-top:1px solid var(--line);font-size:13px;line-height:1.45;color:var(--ink-3)}
/* tasto: stessa famiglia di .vai-teoria ("Leggi la teoria"), in piccolo — contorno blu, si riempie al passaggio */
.spiu-btn{display:table;margin-top:10px;padding:6px 13px;border-radius:10px;background:var(--surface);
  border:1.5px solid var(--blu);color:var(--blu);font-size:13px;font-weight:700;text-decoration:none;transition:background .15s,color .15s}
.spiu-btn:hover{background:var(--blu);color:#fff}
.spiu-btn:focus-visible{outline:3px solid var(--blu-glow);outline-offset:2px}
.chart.esempi .row{grid-template-columns:78px minmax(0,1fr)}
.thumb img{width:auto;height:auto}

/* coppie vero/falso (capitoli senza figure) */
.coppie{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.coppia{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cv{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;padding:12px 14px;font-size:15px;line-height:1.45}
.cv + .cv{border-top:1px dashed var(--line)}
.cv .ans{font-size:13px}

.dopo-es{margin-top:16px}
.dopo-es a{color:var(--blu);font-weight:700;text-decoration:none}
.dopo-es a:hover{text-decoration:underline}

/* fila degli altri argomenti */
.altri{display:flex;flex-wrap:wrap;gap:8px}
.altri a{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 13px;color:var(--ink);text-decoration:none;font-size:14px}
.altri a:hover{border-color:var(--blu);color:var(--blu)}
.altri a[aria-current]{background:var(--blu);border-color:var(--blu);color:#fff}

/* pagina indice */
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:10px}
.icard{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 15px;color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s}
.icard.config{grid-template-columns:52px minmax(0,1fr) auto}
.icard:hover{border-color:var(--blu);transform:translateY(-1px)}
.ifig{width:52px;height:52px;display:flex;align-items:center;justify-content:center}
.ifig img{max-width:100%;max-height:100%;width:auto;height:auto}
.it b{display:block;font-size:1.02rem;line-height:1.25}
.im{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:4px;font-size:12.5px;color:var(--ink-3)}
.ie{color:var(--e4);font-weight:600}
.freccia{color:var(--blu);font-weight:700}

@media (max-width:760px){.coppie{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.fatti{grid-template-columns:minmax(0,1fr)} .chart.esempi .row{grid-template-columns:60px minmax(0,1fr)}}

/* ─── telefono (sistemato il 5/10/2026 guardando le pagine a 375px) ─── */
@media (max-width:760px){
  /* Percorso: quattro livelli in maiuscolo spaziato non stanno in 330px e la pillola
     diventava alta tre righe. Si tengono gli ultimi due ("Per argomento > Capitolo"):
     il percorso completo resta nei dati strutturati, che e' quello che legge Google. */
  .eyebrow{letter-spacing:.06em;flex-wrap:wrap;row-gap:2px;column-gap:7px;max-width:100%;box-sizing:border-box}
  .eyebrow .qui{overflow-wrap:anywhere;min-width:0}
  .eyebrow.lungo > :nth-child(-n+4){display:none}
  /* Logo CA: su telefono resta dov'e', sopra "Prova subito" (Ciro, 5/10/2026). */
  /* il titolo scala con lo schermo, cosi' "Quiz patente A e B:" sta su una riga anche a 320px */
  /* Il titolo prende tutta la larghezza: "Quiz patente A e B:" riempie la riga (12vw ~ 316px
     su 331 utili a 375px), e il nome dell'argomento va a capo solo quando serve davvero:
     con text-wrap:balance del foglio comune si spezzava prima, lasciando mezza riga vuota. */
  .hero h1{font-size:clamp(1.9rem,12vw,2.9rem)}
  .hero h1 .hl{text-wrap:wrap}
  /* I tre numeri: righe basse (numero a sinistra, testo a destra) invece di tre card
     alte una sopra l'altra, che da sole riempivano mezzo schermo. */
  .fatti{gap:8px}
  .fatti div,.fatti a{display:flex;align-items:center;gap:14px;padding:10px 14px}
  .fatti b{font-size:1.6rem;min-width:3.4ch;flex:0 0 auto}
  .fatti span{margin-top:0}
  /* Esempi d'esame: lo stile della classifica su telefono mette la figura grande sopra
     il testo, e sei righe diventavano tre schermate. Qui figura piccola a sinistra. */
  .chart.esempi .row.es{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-areas:"thumb q";gap:12px;align-items:start;text-align:left;padding:14px}
  .chart.esempi .row.es .thumb{grid-area:thumb;width:56px;height:56px;padding:5px;margin:0;justify-self:start}
  .chart.esempi .row.es .rq{grid-area:q}
}