/* =====================================================================
   Variante «form a card» (11/10/2026) — si appoggia a form-popup.css.
   Il passo 1 è diviso in due card dentro lo stesso <form>:
   card 1 Nome + Cognome → «Avanti»; card 2 Email + Telefono → invio.
   Movimento solo transform/opacity, spento con prefers-reduced-motion.
   ===================================================================== */

/* ---------- Bottone dell'hero più grande ---------- */
/* M (default) = 64 px, testo 20 px · L = 72 px, testo 22 px (?bottone=72).
   Su fondo verde resta C1 giallo con testo verde scuro (5,3:1 → con #083d2c 9,5:1). */
/* testo su UNA riga anche a 360 px: il corpo scala con la larghezza, fino al tetto */
.hero__azione .c1--grande { max-width: none; min-height: 64px; font-size: min(1.25rem, 5.1vw); padding: 1rem 0.75rem; white-space: nowrap; }
.hero__azione .c1--grande .freccia { font-size: 1.5rem; }
html[data-bottone="72"] .hero__azione .c1--grande { min-height: 72px; font-size: min(1.375rem, 5.2vw); }
html[data-bottone="56"] .hero__azione .c1--grande { min-height: 56px; font-size: 1.0625rem; }
@media (min-width: 48rem) { .hero__azione .c1--grande { max-width: 30rem; } }

/* ---------- Le card ---------- */
.foglio--card .card { display: grid; gap: var(--s-4); }
.foglio--card .card[hidden] { display: none; }
.foglio--card .card.entra-avanti { animation: card-avanti 0.28s var(--curva) both; }
.foglio--card .card.entra-indietro { animation: card-indietro 0.28s var(--curva) both; }
@keyframes card-avanti { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes card-indietro { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }

/* il modulo già spazia i campi: dentro la card si usa il gap */
.foglio--card .card .campo { margin: 0; }

.card__saluto { margin: 0; font-family: var(--font-titoli); font-weight: 600; font-size: var(--t-h3); line-height: 1.15; color: var(--verde-scuro); }
.card__saluto:focus { outline: none; }

/* «Avanti» e invio: stesso C1, a tutta larghezza, appoggiati al fondo del foglio */
.foglio--card .card .c1 { position: sticky; bottom: calc(0.75rem + env(safe-area-inset-bottom)); z-index: 2; max-width: none; margin-top: var(--s-2); }
.foglio--card .card .c1 .freccia { color: var(--giallo); }

.card__indietro {
  justify-self: start; min-height: 44px; padding: 0 0.25rem; border: 0; background: none; cursor: pointer;
  font: 700 1rem/1.2 var(--font-testo); color: var(--verde); text-decoration: underline; text-underline-offset: 3px;
}
.card__indietro:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; border-radius: 4px; }

/* card 1: l'intro (tempi di contatto) e l'informativa servono solo dove servono */
#stato-passo1[data-card-attiva="1"] .informativa { display: none; }
#stato-passo1[data-card-attiva="2"] .scheda-form__titolo,
#stato-passo1[data-card-attiva="2"] .scheda-form__intro { display: none; }

/* tastiera aperta (lo decide form-card.js dal visualViewport): via tutto ciò che non è un campo */
.foglio--card.tastiera .scheda-form__intro,
.foglio--card.tastiera .nota-form,
.foglio--card.tastiera .informativa,
.foglio--card.tastiera .card__indietro { display: none; }
.foglio--card.tastiera .scheda-form__titolo { font-size: var(--t-h3); }
.foglio--card.tastiera .card { gap: var(--s-3); }
.foglio--card.tastiera .card__saluto { font-size: 1.125rem; }
.foglio--card.tastiera .scheda-form { padding-top: 0.75rem; }

/* indicatore di passo: due trattini, onesto (il passo 2 facoltativo non conta) */
.foglio--card .foglio__passo .barra i { width: 28px; }

@media (prefers-reduced-motion: reduce) {
  .foglio--card .card.entra-avanti, .foglio--card .card.entra-indietro { animation: none; }
}