/* tap2sip · funzionalita-v1.css — la pagina «Funzionalità» (/funzionalita/).
   Parte dai blocchi dei settori (vertical-v18.css: hero, section, section-head,
   eyebrow, feature, faq, venue-demo-cta) e aggiunge solo i suoi pezzi: l'indice
   della pagina, la legenda e i bollini dei piani.
   I bollini sono testo vero (il colore aiuta, non basta): ognuno ha bordo e fondo
   suoi e un testo ad almeno 7:1, cosi' il contrasto alto del pannello
   «Accessibilità» non deve cambiarli e nei colori forzati restano riconoscibili.
   Ogni misura del testo segue --t2s-fs (tests/scala-testo.mjs). */

/* apertura: niente telefono finto; a destra l'indice della pagina */
.fz-hero{min-height:0;padding:72px 0 48px}
.fz-hero h1{text-wrap:balance}
.fz-proofs{display:flex;flex-wrap:wrap;gap:9px;margin:23px 0 0;padding:0;list-style:none}
.fz-proofs li{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:calc(.8rem*var(--t2s-fs,1));line-height:1.35}
.fz-proofs li i{color:var(--accent-ink,#4b2eb9)}

/* indice della pagina («In questa pagina») */
.fz-index{min-width:0;padding:22px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 18px 55px rgba(41,29,73,.10)}
.fz-index__title{margin:0 0 14px;color:var(--accent-ink,#4b2eb9);font-size:calc(.78rem*var(--t2s-fs,1));font-weight:800;letter-spacing:.16em;line-height:1.3;text-transform:uppercase}
.fz-index ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:10px;margin:0;padding:0;list-style:none}
.fz-index li{min-width:0}
.fz-index a{display:flex;align-items:center;gap:12px;height:100%;min-height:60px;padding:11px 14px 11px 11px;border:1px solid var(--line);border-radius:16px;background:#fbfaff;color:var(--ink);font-size:calc(.98rem*var(--t2s-fs,1));font-weight:750;line-height:1.25;text-decoration:none;transition:border-color .18s ease,background-color .18s ease}
.fz-index a:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--soft)}
.fz-index a>span:last-child{min-width:0;overflow-wrap:break-word;hyphens:auto}
.fz-index__ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--soft);color:var(--accent);font-size:calc(.95rem*var(--t2s-fs,1))}

/* legenda dei bollini, sotto l'apertura */
.fz-legend-band{padding:0 0 12px}
.fz-legend{display:grid;gap:14px;padding:20px 24px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 10px 35px rgba(44,34,70,.055)}
.fz-legend p{max-width:980px;margin:0;color:#3a3646;font-size:calc(.96rem*var(--t2s-fs,1));line-height:1.6}

/* sezioni e schede: i bollini sempre in fondo alla scheda. Le sezioni senza tinta
   hanno lo stesso fondo del body, ma pieno: il contrasto alto del pannello sa su
   che cosa misura i testi (sopra l'alone del body non li toccherebbe) */
.fz-sec{padding:80px 0}
.fz-sec:not(.tint),#faq{background-color:var(--paper)}
.fz-card{display:flex;flex-direction:column}
.fz-card .fz-badges{margin-top:auto;padding-top:18px}

/* bollini: dove è inclusa la funzione */
.fz-badges{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.fz-badge{display:inline-flex;align-items:center;max-width:100%;min-height:28px;padding:4px 10px;border:1px solid;border-radius:9px;font-size:calc(12.5px*var(--t2s-fs,1));font-weight:700;line-height:1.35;overflow-wrap:break-word;hyphens:auto}
.fz-badge--all{border-color:#b9e2d0;background:#e7f6ef;color:#0a5a41}
.fz-badge--tier{border-color:#d3c6f7;background:#f1ecfe;color:#4527a8}
.fz-badge--module{border-color:#c3d6f0;background:#eaf2fc;color:#14467f}
.fz-badge--note{border-color:#ddd8e5;background:#f4f2f7;color:#3a3646}
.fz-badge--new{border-color:#9b1545;background:#9b1545;color:#fff;letter-spacing:.05em;text-transform:uppercase}

/* domande frequenti: il link al configuratore si vede come link */
.faq p a{color:var(--accent-ink,#4b2eb9);font-weight:650;text-underline-offset:3px}

/* chiusura: due bottoni, la demo e il configuratore. Le colonne della griglia
   possono stringersi sotto la parola più lunga del titolo, che va a capo: col testo
   1,3×, più spazio e il carattere leggibile, a 320 px «établissement» era più largo
   del telefono e il riquadro usciva dallo schermo */
.venue-demo-panel>*{min-width:0}
.venue-demo-panel__copy h2{overflow-wrap:anywhere;hyphens:auto}
.fz-demo-actions{display:grid;gap:10px;min-width:220px}
.fz-demo-actions .btn{width:100%}
.venue-demo-panel .fz-demo-cfg{border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;white-space:normal;text-align:center}
.venue-demo-panel .fz-demo-cfg:hover{background:rgba(255,255,255,.1)}

@media(max-width:980px){
  .fz-hero{padding:52px 0 36px}
}
@media(max-width:760px){
  .fz-demo-actions{min-width:0}
}
/* telefono: l'indice diventa una riga di pastiglie che va a capo */
@media(max-width:620px){
  .fz-hero{padding:40px 0 30px}
  .fz-index{padding:18px 16px;border-radius:20px}
  .fz-index ul{display:flex;flex-wrap:wrap;gap:8px}
  .fz-index a{gap:9px;min-height:44px;padding:6px 13px 6px 6px;border-radius:999px;font-size:calc(.93rem*var(--t2s-fs,1))}
  .fz-index__ico{width:32px;height:32px;border-radius:50%;font-size:calc(.85rem*var(--t2s-fs,1))}
  .fz-legend{padding:18px}
  .fz-sec{padding:60px 0}
}

/* animazioni ferme (pannello «Accessibilità» o "riduci il movimento"): niente transizioni */
html.t2s-a11y-m .fz-index a{transition:none}
@media(prefers-reduced-motion:reduce){.fz-index a{transition:none}}
@media(forced-colors:active){.fz-index a,.fz-legend{border-color:CanvasText}}