/**
 * Contatti — "Scrivici".
 *
 * Il guscio della sezione: fondo crema, colonna stretta e centrata, occhiello e
 * titolo al centro sopra al modulo. La veste dei campi non è qui — è in
 * `form.css`, perché è la stessa di ogni altro modulo del sito.
 *
 * Nel riferimento la colonna è più stretta del resto delle sezioni (900px
 * contro 1280): un modulo largo quanto la pagina si legge male, perché l'occhio
 * deve tornare indietro da un capo all'altro a ogni campo.
 */

.contatti-form {
	padding-block: clamp( 64px, 8vw, 120px );
}

.contatti-form__inner {
	max-width: 900px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
	text-align: center;
}

.wp-block-group.contatti-form__inner > * {
	margin-block-start: 0;
}

/* Fra occhiello e titolo il riferimento mette 16px, e fra titolo e modulo 40.
   Il ritmo lo danno i margini dei singoli elementi e non il passo del gruppo,
   che ne imporrebbe uno solo per tutti. */
.wp-block-group.contatti-form__inner > .contatti-form__title {
	margin-block-start: 16px;
}

.wp-block-group.contatti-form__inner > .contatti-form__form {
	margin-block-start: 40px;
}

/* Occhiello e titolo ripetono la coppia di `story-split`: stesso corsivo
   leggero, stessa parte in evidenza in rosso. Qui però sono centrati, ed è
   l'unica differenza. */
/* `inline-block` come nel riferimento, e qui la differenza si vede: un
   elemento in linea porta con sé la riga che lo contiene, quindi sotto
   all'occhiello restano un paio di pixel di interlinea che si sommano ai 16
   del titolo. A blocco quello spazio sparisce e il titolo sale. Il centraggio
   arriva dal `text-align` del contenitore, che vale anche per gli inline. */
.contatti-form__eyebrow {
	display: inline-block;
	font-style: italic;
	font-weight: 500;
	line-height: 1.1;
}

.contatti-form__title {
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.contatti-form__title strong {
	font-weight: 700;
	color: var(--wp--preset--color--rosso);
}

/* Il modulo torna allineato a sinistra: il centraggio vale per la testata, non
   per i campi, che con etichette centrate diventerebbero illeggibili. Il
   bottone resta al centro, e quello lo dispone `form.css`. */
.contatti-form__form {
	text-align: start;
}