/* ===========================================================================
   Recapiti incorporati in un'altra pagina (v. `pages_inlined`).

   ⚠ Foglio CARICATO SOLO da chi incorpora una pagina (cli/build.mjs): un
   progetto che non lo fa non riceve nemmeno il file, e il suo tema resta
   identico. Ogni regola scende sotto `.contact-section`, la sezione che
   `withPaginaIncorporata` emette: nessun selettore esistente viene toccato.

   Perché esiste: un negozio che raccoglie i recapiti in fondo alla home
   invece che in una pagina propria — la forma che il cliente chiede quando
   dice «Contatti come voce di menu ma è un'ancora alla sezione in basso».

   ⚠⚠ La funzione RIMUOVE la banda `.cta-band` della pagina ospite e la
   rifonde col modulo: una sola superficie, non due sullo stesso argomento a
   150px di distanza. Qui si vestono le parti che il verticale non conosce.
   =========================================================================== */

/* ⚠⚠ La testata è STICKY: senza scarto di scorrimento chi arriva da
   `/#contatti` — cioè dal menu, da OGNI pagina interna e dal piè — atterra
   col titolo coperto dalla barra. È il difetto che nessuno screenshot mostra,
   perché appare solo navigando davvero. */
.contact-section { scroll-margin-top: calc(var(--space-8) + 3.5rem); }

/* Le due colonne: il modulo prende più spazio del riquadro dei dati, perché è
   il gesto — il preventivo è il centro di questo mestiere, non il carrello. */
.contact-section .contact-cols {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-7);
  align-items: start;
}

/* I titoli interni scendono a h3 sotto il titolo della sezione: sono parti di
   quella, non sezioni di pari grado. ⚠ La misura è quella del verticale
   (`--text-lg`), non una nuova: un titolo che passa da riga piena a colonna
   scende di un gradino, ed è la lezione già pagata tre volte in flotta. */
.contact-section .contact-form h3,
.contact-section .contact-info h3 { font-size: var(--text-lg); margin-top: 0; }

/* Il riquadro dei dati sta su una superficie CHIARA e staccata: dentro la
   sezione è l'unico blocco che si legge come scheda, non come prosa. */
.contact-section .contact-info {
  background: var(--surface);
  border-radius: var(--radius-lg, 14px);
  padding: var(--space-6);
}
.contact-section .contact-info dl { margin: 0; }
.contact-section .contact-info dl > div { margin-top: var(--space-4); }
.contact-section .contact-info dl > div:first-child { margin-top: 0; }
.contact-section .contact-info dt {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.contact-section .contact-info dd { margin: 0; }
.contact-section .contact-info .hours { list-style: none; margin: 0; padding: 0; }
.contact-section .contact-info .hours li { display: flex; justify-content: space-between; gap: var(--space-4); }

/* ⚠ Consenso e nota si fermavano alla misura di lettura dentro una colonna già
   stretta, lasciando scoperti gli ultimi pixel: qui la misura la dà la colonna.
   È la regola dell'owner — la misura di lettura vale sui PARAGRAFI, non sugli
   elementi di layout. */
.contact-section .contact-form .consent,
.contact-section .contact-form .form-note { max-width: none; }

/* Il richiamo telefonico resta accanto al titolo: nella banda era l'azione
   diretta, e il modulo che gli sta sotto non la sostituisce — chi vuole
   parlare non compila un form. */
.contact-section .contact-intro__actions { margin-top: var(--space-5); }

/* Sotto i 900px le colonne si impilano: prima il modulo (il gesto), poi i
   dati. È già l'ordine sorgente, quindi qui basta lo stacco fra i due blocchi,
   che impilati si toccherebbero. */
@media (max-width: 900px) {
  .contact-section .contact-cols { grid-template-columns: 1fr; gap: var(--space-6); }
}