/* ==========================================================================
   Blocco HERO CON FORM e IL FORM — responsive
   PROVVISORIO. Il mockup mobile non esiste. Nessuna riga fuori da @media.

   A >= 1512 restano quelli del mockup: titolo largo 1432, card 872, griglia a
   due colonne con gap 40/16, campi 51, textarea 150.
   ========================================================================== */


/* --------------------------------------------------------------------------
   <= 1023 · Tablet — la card smette di essere larga 872
   872 su 1024 di finestra lascia 76px di margine per parte: si passa a
   larghezza piena col gutter, che e piu onesto.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .hero-form__card {
    width: 100%;
    /* ⚠️ L'altezza minima di Contact Us vale solo alla larghezza del mockup:
       appena i campi si restringono e il testo cresce, quel numero non
       significa piu niente e lascerebbe una fascia vuota. */
    min-height: 0;
  }
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile — il form va in colonna singola
   Due campi affiancati su 375px sono larghi 160: si scrive dentro a fatica e
   il segnaposto viene tagliato.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero-form__card { padding: var(--space-4); }   /* 40 -> 32 */

  .vidim-form__griglia,
  .wpcf7-form {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);                          /* 40 -> 32, righe e colonne */
  }

  /* In colonna singola ogni campo occupa gia tutta la riga: la regola dello
     span diventa inutile ma non dannosa, e resta per semplicita. */
  .campo__input--area,
  .wpcf7 textarea { height: 120px; }              /* 150 -> 120, MIO */

  /* L'altezza fissa del gruppo di chip vale solo finche stanno su una riga.
     A 375px vanno a capo tutte e quattro: qui deve crescere. */
  .campo--chip { height: auto; }
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .hero-form__card { padding: 24px; }

  .campo__input,
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 textarea {
    padding-inline: var(--space-3);               /* 24 -> 16, MIO */
  }
}


/* --------------------------------------------------------------------------
   <= 1023 · Il consenso si allinea alla PRIMA riga

   A 1512 l'etichetta del consenso sta su una riga e `align-items: center`
   mette la casella al suo centro, che e giusto. Su una colonna da 342px la
   stessa etichetta va su quattro righe e la casella si ritrova a meta del
   blocco, staccata dalla frase che dovrebbe spuntare. Si allinea in alto, con
   i 3px che la portano sulla mediana della prima riga (casella 12, riga 19).

   Il bersaglio da toccare non cambia ed e gia grande: e il <label>, che copre
   casella e testo.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .consenso,
  .campo--consenso .wpcf7-list-item label {
    align-items: flex-start;
  }

  .consenso__casella,
  .campo--consenso input[type="checkbox"] {
    margin-top: 3px;
  }
}