/* =========================================================
   Pagina Contatti — brandogallo.com
   Sorgente: _design-system/components/preview/preview-page-contatti.html (v2 — 2026-05-17)
   Implementa: .bg-contatti-intro, .bg-contatti-layout, .bg-contact-info, .bg-contact-form
   Dipendenze: variables.css, hero.css (caricato da page-contatti.php)
   ========================================================= */

/* --------- Reset Astra/Gutenberg per pagina contatti ---------------------
   `overflow-x: clip` previene scroll orizzontale senza creare contenitore di
   scroll (sticky dei discendenti continua a funzionare).
   -------------------------------------------------------------------------- */

body.bg-contatti-page {
	overflow-x: clip;
}

/* `overflow-x: clip` riattiva #masthead sticky che altrove era neutralizzato
   dall'overflow del body. Su /contatti/ lo riportiamo a static per non
   sovrapporsi alla mappa sticky della colonna info. */
body.bg-contatti-page #masthead {
	position: static !important;
}

body.bg-contatti-page .bg-page-content {
	padding: 0 !important;
	max-width: 100% !important;
	margin: 0 !important;
}

body.bg-contatti-page #content .ast-container,
body.bg-contatti-page #content,
body.bg-contatti-page .site-content,
body.bg-contatti-page #primary,
body.bg-contatti-page #main,
body.bg-contatti-page .site-main,
body.bg-contatti-page .entry-content {
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

body.bg-contatti-page .site-main {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* =========================================================
   Token locali della pagina contatti
   Replicano la :root della preview-page-contatti.html v2.
   I token canonici (--bg, --text, --accent, --f-serif, --f-sans, --dur-*,
   --ease-out, --max-width, ecc.) sono ereditati da variables.css.
   Qui aggiungiamo SOLO i token assenti dal DS o con override editoriale.
   ========================================================= */

/* Card form scura — pattern .bg-card del DS (card.css):
   transparent + border var(--border), hover border-hover. */

/* =========================================================
   .bg-contatti-intro — intro a bandiera sinistra, full-width
   Allineata al padding interno di .bg-contatti-layout.
   ========================================================= */

.bg-contatti-intro {
	max-width: 920px;
	margin: 0 auto;
	/* Override locale del --pad-x DS (20-40px) per dare piu respiro alla
	   pagina contatti. Sinistra: padding layout → bordo sinistro della card.
	   Destra: padding layout + gap + colonna info (300px) → il testo va a capo
	   sul bordo destro della card, confinato nella colonna della form. */
	padding-inline: clamp(20px, 4vw, 40px) calc(clamp(20px, 4vw, 40px) + clamp(1.25rem, 2.5vw, 2.5rem) + 300px);
	padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
	text-align: left;
}

.bg-contatti-intro p {
	font-family: var(--f-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.65;
	color: var(--text);
	letter-spacing: var(--track-normal, -0.01em);
	text-wrap: pretty;
	max-width: none;
	margin: 0 0 1.1rem;
}

.bg-contatti-intro p:last-child {
	margin-bottom: 0;
}

/* =========================================================
   .bg-contatti-layout — form sx (1fr) + info dx (300px)
   align-items: stretch → la card form si allunga fino all'altezza della
   colonna info (che termina con la mappa).
   ========================================================= */

.bg-contatti-layout {
	max-width: 920px;
	margin: 0 auto;
	padding-inline: clamp(20px, 4vw, 40px);
	padding-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: clamp(1.25rem, 2.5vw, 2.5rem);
	align-items: stretch;
}

.bg-contatti-layout .bg-contact-form-col { order: 1; align-self: stretch; display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }
.bg-contatti-layout .bg-contact-info     { order: 2; align-self: stretch; }

/* Schermi grandi (≥1680px): intro e layout passano da 920 a --max-width-wide
   (1440px), coerenti con home/bio. La colonna info resta 300px → il form (1fr)
   assorbe l'allargamento. Scelta esplicita 2026-06-05 (uniformità sopra
   ergonomia del campo). Soglia allineata a home-sections.css. */
@media (min-width: 1680px) {
	body.bg-contatti-page .bg-contatti-intro,
	body.bg-contatti-page .bg-contatti-layout {
		max-width: var(--max-width-wide);
	}
}

/* Il form riempie l'altezza del wrapper per consentire al textarea di crescere
   (regola .bg-field--grow piu sotto). */
.bg-contact-form-col .bg-contact-form { flex: 1; min-height: 0; }

/* Il campo Messaggio cresce a riempire lo spazio rimanente nel form allungato. */
.bg-contact-form .bg-field--grow { flex: 1; min-height: 0; }
.bg-contact-form .bg-field--grow textarea { flex: 1; min-height: 7rem; }

/* =========================================================
   .bg-contact-info — colonna sx (sticky), gap compatto 1rem
   ========================================================= */

.bg-contact-info {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-self: stretch;
	max-width: 300px;
}

.bg-contact-info__block {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.bg-contact-info__label {
	font-family: var(--f-sans);
	text-transform: uppercase;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: var(--track-wide, 0.14em);
	color: var(--text-3);
}

.bg-contact-info__value {
	font-family: var(--f-sans);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--text);
	letter-spacing: var(--track-body, 0);
}

.bg-contact-info__value a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--border);
	transition: border-color var(--dur-m, 280ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.bg-contact-info__value a:hover { border-color: var(--text); }

/* Social: lista inline separata da middot, font 1.05rem */
.bg-contact-info__social-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
	font-family: var(--f-sans);
	font-size: 0.8rem;
	letter-spacing: var(--track-body, 0);
	color: var(--text);
}

.bg-contact-info__social-list a {
	color: var(--text);
	text-decoration: none;
	border-bottom: 1px solid var(--border);
	transition: border-color var(--dur-m, 280ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
				color var(--dur-m, 280ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.bg-contact-info__social-list a:hover { border-color: var(--text); }
.bg-contact-info__social-sep         { color: var(--text-3); }

/* =========================================================
   .bg-contact-info__block--map — posizione attuale + mappa Esri
   Citta in Lora italic 1.1rem (bianco pieno, anche se non e link).
   Mappa: aspect 5/6, max 300px, border radius 5px, marker pulsante.
   ========================================================= */

/* Blocco mappa: eredita gap da .bg-contact-info__block per uniformita' con
   gli altri blocchi (email/telefono/social). Lo stacco verso la mappa e'
   gestito separatamente da .bg-contact-info__map margin-top. */
.bg-contact-info__block--map {
	/* gap ereditato */
	/* Spinge la mappa in fondo alla colonna info, allineando l'altezza
	   con la card form (entrambe stretch nel grid). */
	margin-top: auto;
}

/* Blocco temporaneamente nascosto (markup conservato per ripristino rapido).
   Per riattivare un blocco: rimuovere la classe --hidden dal markup. */
.bg-contact-info__block--hidden {
	display: none;
}

.bg-contact-info__value--city {
	font-family: var(--f-sans);
	font-style: normal;
	font-size: 0.8rem;
	line-height: 1.4;
	letter-spacing: var(--track-body, 0);
	color: var(--text);
}

.bg-contact-info__map {
	margin-top: 0.6rem;
	width: 100%;
	max-width: 300px;
	aspect-ratio: 5 / 6;
	border-radius: 5px;
	overflow: hidden;
	border: 0;
	background: #0a0a0a;
}

.bg-contact-info__map .leaflet-container {
	width: 100%;
	height: 100%;
	background: #0a0a0a;
	/* Basemap chiara (MapTiler Outdoor): appena smorzata per non stridere sul fondo
	   nero della pagina, senza allontanarsi dalla palette della mappa interattiva. */
	filter: brightness(0.95) contrast(0.98);
	font-family: var(--f-sans);
}

/* Crediti cartografici — riga di metadato sotto il riquadro, non widget dentro
   la mappa. Obbligatori per licenza (OpenStreetMap ODbL), quindi tenuti leggibili
   pur restando in secondo piano. */
.bg-contact-info__map-credits {
	margin: 0.35rem 0 0;
	max-width: 300px;
	font-family: var(--f-sans);
	font-size: 9px;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: rgba(255,255,255,0.38);
}

.bg-contact-info__map-credits a,
.bg-contact-info__map-credits a:hover,
.bg-contact-info__map-credits a:focus,
.bg-contact-info__map-credits a:visited {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 1px;
}

.bg-contact-info__map-credits a:hover,
.bg-contact-info__map-credits a:focus {
	color: rgba(255,255,255,0.7);
}

.bg-contact-info__map-pulse {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	/* Su basemap chiara: cerchio bianco con anello scuro, come i cluster della
	   mappa interattiva. L'alone pulsante è nero, non bianco. */
	background: #ffffff;
	box-shadow: 0 0 0 1.5px rgba(0,0,0,0.85),
				0 0 0 5px rgba(0,0,0,0.18);
	animation: bgMapPulse 2.4s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) infinite;
}

@keyframes bgMapPulse {
	0%, 100% { box-shadow: 0 0 0 1.5px rgba(0,0,0,0.85), 0 0 0 5px rgba(0,0,0,0.18); }
	50%      { box-shadow: 0 0 0 1.5px rgba(0,0,0,0.85), 0 0 0 11px rgba(0,0,0,0.07); }
}

@media (prefers-reduced-motion: reduce) {
	.bg-contact-info__map-pulse { animation: none; }
}

/* =========================================================
   .bg-contact-form — card scura (pattern .bg-card del DS: transparent + border)
   ========================================================= */

.bg-contact-form {
	background: transparent;
	border: 1px solid var(--border);
	border-radius: var(--radius-card, 16px);
	padding: clamp(1.75rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	color: var(--text);
	width: 100%;
	max-width: 100%;
	margin: 0;
}

/* =========================================================
   TEMA SCURO DELLA CARD FORM — solo /contatti
   ---------------------------------------------------------
   La struttura resta quella canonica della form servizi
   (services-page.css §9, scoped su .bg-card--light): layout,
   spaziature, dimensioni e comportamenti NON si toccano.
   Qui si inverte solo la palette, ridefinendo i token --p-*
   che quelle regole leggono, più i pochi punti che hardcodano
   bianco/nero. Le pagine servizio non sono interessate: tutto
   è scoped su body.bg-contatti-page.
   ========================================================= */

body.bg-contatti-page .bg-service-booking .bg-card--light.bg-contact-form {
	background: #000000 !important;
	background-color: #000000 !important;
	background-image: none !important;
	border: 1px solid rgba(242, 242, 242, 0.35);
	color: var(--text);

	/* Token paper invertiti — li leggono inputs.css §OVERRIDE PAPER
	   e services-page.css §9 (label, input, border, checkbox, link). */
	--p-text:         #F2F2F2;
	--p-text-2:       rgba(242, 242, 242, 0.62);
	--p-text-3:       rgba(242, 242, 242, 0.42);
	--p-border:       rgba(242, 242, 242, 0.20);
	--p-border-hover: rgba(242, 242, 242, 0.45);
	/* --paper è la "tinta della carta": la usano la maschera autofill e
	   il tick della checkbox. Su fondo nero diventa il nero stesso. */
	--paper:          #000000;
}

/* Tick della checkbox: l'indicator checked ha background --p-text (ora
   bianco), quindi la V va nera. Originale: border solid #FFFFFF. */
body.bg-contatti-page .bg-service-booking .bg-card--light .bg-checkbox input[type="checkbox"]:checked + .bg-checkbox__indicator::after {
	border-color: #000000;
}

/* Submit pill: fondo --p-text (ora bianco) → testo nero.
   Originale: color #FFFFFF su pill nera. */
body.bg-contatti-page .bg-service-booking .bg-card--light .bg-contact-form__submit,
body.bg-contatti-page .bg-service-booking .bg-card--light .bg-contact-form__submit:hover,
body.bg-contatti-page .bg-service-booking .bg-card--light .bg-contact-form__submit:focus-visible {
	color: #000000;
}

/* Date picker nativo in scuro. services-page.css:1541 forza color-scheme:
   light (nato per la card paper): su fondo nero apriva un pannello bianco.
   Con `dark` Chrome/Edge/Safari disegnano il calendario di sistema scuro. */
body.bg-contatti-page .bg-service-booking .bg-card--light .bg-input--date {
	color-scheme: dark;
}

/* Underline animato del link Privacy Policy: da nero a bianco. */
body.bg-contatti-page .bg-service-booking .bg-card--light .bg-link-narrative {
	background-image: linear-gradient(rgba(242, 242, 242, 0.5), rgba(242, 242, 242, 0.5));
}

/* Honeypot — invisibile a umani, accessibile a bot */
.bg-contact-form__hp {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Banner success/error */
.bg-contact-form__banner {
	font-family: var(--f-sans);
	font-size: 0.9rem;
	line-height: 1.5;
	padding: 1rem 1.25rem;
	border-radius: var(--radius-btn, 2px);
	margin: 0;
}

.bg-contact-form__banner--success {
	background-color: rgba(242,242,242,0.04);
	color: var(--text);
	border-left: 3px solid var(--text);
}

.bg-contact-form__banner--error {
	background-color: rgba(230, 57, 41, 0.08);
	color: var(--accent);
	border-left: 3px solid var(--accent);
}

/* Riga Nome + Email */
.bg-contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

/* =========================================================
   .bg-field — input/textarea scuri (border-bottom only)
   ========================================================= */

.bg-contact-form .bg-field {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	position: relative;
	z-index: 1;
	min-width: 0;
}

/* Riga Nome+Email: assicura che i due grid items non collassino su contenuti
   con whitespace (label "Nome / Ente" ha lo slash, alcuni browser su zoom
   alto possono creare overflow). min-width: 0 sui figli + overflow visible. */
.bg-contact-form .bg-contact-form__row > .bg-field {
	min-width: 0;
	overflow: visible;
}

.bg-contact-form .bg-field__label {
	font-family: var(--f-sans);
	text-transform: uppercase;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: var(--track-wide, 0.14em);
	color: rgba(242,242,242,0.40);
}

.bg-contact-form .bg-input,
.bg-contact-form .bg-textarea {
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--border);
	color: var(--text);
	font-family: var(--f-sans);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: var(--track-body, 0);
	padding: 0.6rem 0;
	outline: none;
	box-shadow: none;
	width: 100%;
}

.bg-contact-form .bg-textarea {
	resize: vertical;
	min-height: 7rem;
}

/* Focus custom: solo border-bottom passa da var(--border) 8% → var(--text) bianco.
   Sovrascrive (a) inputs.css :focus-visible box-shadow inset, (b) UA outline,
   (c) eventuali stili Astra parent / WordPress core su input:focus
       (background bianco + outline dotted al click). */
body.bg-contatti-page .bg-contact-form .bg-input,
body.bg-contatti-page .bg-contact-form .bg-textarea,
body.bg-contatti-page .bg-contact-form input[type="text"].bg-input,
body.bg-contatti-page .bg-contact-form input[type="email"].bg-input,
body.bg-contatti-page .bg-contact-form textarea.bg-textarea {
	background-color: transparent !important;
}

body.bg-contatti-page .bg-contact-form .bg-input:hover,
body.bg-contatti-page .bg-contact-form .bg-input:focus,
body.bg-contatti-page .bg-contact-form .bg-input:focus-visible,
body.bg-contatti-page .bg-contact-form .bg-input:active,
body.bg-contatti-page .bg-contact-form .bg-textarea:hover,
body.bg-contatti-page .bg-contact-form .bg-textarea:focus,
body.bg-contatti-page .bg-contact-form .bg-textarea:focus-visible,
body.bg-contatti-page .bg-contact-form .bg-textarea:active {
	background-color: transparent !important;
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
	border-color: var(--border) !important;
	border-bottom-color: var(--text) !important;
}

/* Outline dotted sul GENITORE: alcune regole globali (Astra/WP/plugin)
   applicano outline su :focus-within del wrapper .bg-field o del row.
   Annullo tutti i :focus / :focus-visible / :focus-within DENTRO la form. */
body.bg-contatti-page .bg-contact-form :focus,
body.bg-contatti-page .bg-contact-form :focus-visible,
body.bg-contatti-page .bg-contact-form :focus-within,
body.bg-contatti-page .bg-contact-form *:focus,
body.bg-contatti-page .bg-contact-form *:focus-visible,
body.bg-contatti-page .bg-contact-form *:focus-within,
body.bg-contatti-page .bg-contact-form .bg-field,
body.bg-contatti-page .bg-contact-form .bg-field:focus,
body.bg-contatti-page .bg-contact-form .bg-field:focus-visible,
body.bg-contatti-page .bg-contact-form .bg-field:focus-within,
body.bg-contatti-page .bg-contact-form .bg-contact-form__row,
body.bg-contatti-page .bg-contact-form .bg-contact-form__row:focus-within,
body.bg-contatti-page .bg-contact-form:focus,
body.bg-contatti-page .bg-contact-form:focus-visible,
body.bg-contatti-page .bg-contact-form:focus-within {
	outline: none !important;
	outline-style: none !important;
	outline-width: 0 !important;
	outline-color: transparent !important;
}

/* Neutralizza azzurrino autofill Chromium/WebKit mantenendo card scura */
.bg-contact-form .bg-input:-webkit-autofill,
.bg-contact-form .bg-input:-webkit-autofill:hover,
.bg-contact-form .bg-input:-webkit-autofill:focus,
.bg-contact-form .bg-textarea:-webkit-autofill,
.bg-contact-form .bg-textarea:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
	box-shadow:         0 0 0 1000px var(--bg) inset;
	-webkit-text-fill-color: var(--text);
	caret-color: var(--text);
	transition: background-color 9999s ease-in-out 0s;
}

/* Errore per-field: bordo accent + messaggio rosso */
.bg-contact-form .bg-field.is-error .bg-input,
.bg-contact-form .bg-field.is-error .bg-textarea {
	border-bottom-color: var(--accent);
}

.bg-contact-form .bg-field__error {
	display: none;
	font-family: var(--f-sans);
	font-size: 0.8rem;
	color: var(--accent);
	margin: 0;
}

.bg-contact-form .bg-field.is-error .bg-field__error {
	display: block;
}

/* =========================================================
   .bg-contact-form__consent — checkbox + label inline
   Checkbox custom scuro (no appearance default).
   ========================================================= */

.bg-contact-form__consent {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-top: 0.25rem;
}

.bg-contact-form__consent-row {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-family: var(--f-sans);
	font-size: 0.9rem;
	color: var(--text-2);
	line-height: 1.5;
	letter-spacing: var(--track-body, 0);
	cursor: pointer;
}

.bg-contact-form__consent-row input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 1rem;
	height: 1rem;
	flex: 0 0 auto;
	margin-top: 0.2rem;
	border: 1px solid var(--border-hover);
	border-radius: var(--radius-btn, 2px);
	background: transparent;
	cursor: pointer;
	position: relative;
	transition: border-color var(--dur-m, 280ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.bg-contact-form__consent-row input[type="checkbox"]:checked {
	border-color: var(--text);
	background: var(--text);
}

.bg-contact-form__consent-row input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 4px;
	height: 8px;
	border: solid var(--bg);
	border-width: 0 2px 2px 0;
	/* offset Y -60% compensa il peso visivo del tick (border bottom+right):
	   senza, appare troppo in basso. */
	transform: translate(-50%, -60%) rotate(45deg);
}

.bg-contact-form__consent-row a {
	color: var(--text);
	text-decoration: none;
	border-bottom: 1px solid var(--border);
	transition: border-color var(--dur-m, 280ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.bg-contact-form__consent-row a:hover { border-color: var(--text); }

.bg-contact-form__consent.is-error .bg-field__error {
	display: block;
	font-family: var(--f-sans);
	font-size: 0.8rem;
	color: var(--accent);
	margin: 0;
}

.bg-contact-form__consent .bg-field__error { display: none; margin: 0; }

/* =========================================================
   .bg-contact-form__submit — bottone "Invia"
   Trasparente con border var(--text), hover/focus invertono. No arrow.
   Override locale: ignora .btn-primary del DS.
   ========================================================= */

.bg-contact-form__submit {
	align-self: flex-end;
	font-family: var(--f-sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: var(--track-ui, 0.1em);
	text-transform: uppercase;
	line-height: 1;
	color: var(--text);
	background: transparent;
	border: 1px solid var(--text);
	border-radius: var(--radius-btn, 2px);
	padding: 1rem 2.25rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	margin-top: 0.5rem;
	transition: background var(--dur-s, 180ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
				color      var(--dur-s, 180ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.bg-contact-form__submit:hover,
.bg-contact-form__submit:focus-visible {
	background: var(--text);
	color: var(--bg);
}

.bg-contact-form__submit:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 3px;
}

/* =========================================================
   Mobile <820px — stack: info sopra, form sotto
   ========================================================= */

@media (max-width: 820px) {

	.bg-contatti-intro {
		/* Mobile: colonna singola, la form è full-width → l'intro torna al
		   padding simmetrico (niente offset per la colonna info assente). */
		padding-inline: clamp(20px, 4vw, 40px);
		padding-bottom: 2.5rem;
	}

	.bg-contatti-layout {
		grid-template-columns: 1fr;
		gap: clamp(2.5rem, 6vw, 3.5rem);
		padding-bottom: 3rem;
	}

	.bg-contatti-layout .bg-contact-form-col {
		order: 1;
	}

	.bg-contatti-layout .bg-contact-info {
		order: 2;
		position: static;
		top: auto;
		max-width: 100%;
	}

	.bg-contact-form__row {
		grid-template-columns: 1fr;
	}

	.bg-contact-info__map {
		max-width: 100%;
	}

}

/* =========================================================
   VARIANTE SERVICE — overrides minimi a contact-form.css
   Scope: body.bg-contact-section--service
   La pagina servizio (es. /fotografia-darchitettura/) riceve
   anche la classe `bg-contatti-page` per attivare i reset
   Astra/Gutenberg necessari al layout .bg-contatti-layout.
   Però NON deve azzerare i padding/larghezza del template che
   contiene anche hero + sezioni servizio.
   Tutto il layout/form-tweak vive in services-page.css §9.
   ========================================================= */

body.bg-contact-section--service.bg-contatti-page #content,
body.bg-contact-section--service.bg-contatti-page #primary,
body.bg-contact-section--service.bg-contatti-page #main,
body.bg-contact-section--service.bg-contatti-page .site-main,
body.bg-contact-section--service.bg-contatti-page .entry-content {
	max-width: none !important;
	width: auto !important;
	padding: revert !important;
	margin: revert !important;
}

body.bg-contact-section--service.bg-contatti-page .site-main {
	padding-top: revert !important;
	padding-bottom: revert !important;
}

/* .bg-contact-info__lead — classe generica del componente FORM_CONTACT.
   Lora italic bianca, vive sopra il primo .bg-contact-info__group.
   Sostituisce la vecchia .bg-contact-form__intro paper sulla variante
   service; può essere riusata su altre varianti del componente. */
.bg-contact-info__lead {
	font-family: var(--f-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
	line-height: 1.55;
	color: var(--text);
	letter-spacing: var(--track-normal, -0.01em);
	text-wrap: pretty;
	max-width: 30ch;
	margin: 0 0 0.5rem;
}

/* =========================================================
   MOTION — piano claude/motion/prompt/11-contatti.md
   Grado Sobrio: il motion serve al feedback, non alla scena.
   Focus e bordi sono già animati sopra (--dur-m, --ease-out):
   qui ci sono solo gli stati che mancavano.

   Nota sul contesto: questa form non è asincrona. Fa POST a
   admin-post.php e torna con un redirect, quindi gli stati di
   errore e successo sono renderizzati dal server e arrivano
   con la pagina già ricaricata. Il feedback a runtime che si
   può dare è uno solo — l'attesa dopo il click — e lo attiva
   contact-form.js.
   ========================================================= */

/* --- Esiti: ingresso ---------------------------------------
   Banner di errore e messaggio di successo riusano il reveal
   condiviso (entrano quando entrano in viewport: dopo il
   redirect la form è sotto il fold, un'animazione al load
   andrebbe persa). Qui solo il delta chiesto dal piano:
   400ms invece di 520, 8px invece di 16 — un esito è un
   messaggio di servizio, non un elemento di scena. */
.bg-contact-form__banner.reveal,
.bg-field--success.reveal {
	transition-duration: var(--dur-m, 400ms);
}

.js .bg-contact-form__banner.reveal,
.js .bg-field--success.reveal {
	transform: translateY(8px);
}

/* --- Errore di validazione: shake --------------------------
   Pattern Error Shake della skill motion-design, versione
   Corporate: 3 oscillazioni, ±10px, ease-in-out, ZERO
   overshoot. Un errore deve sembrare fermo, non elastico.
   Lo applica contact-form.js al primo campo in errore, una
   volta sola dopo il ritorno dal server. Il colore non è mai
   l'unico segnale: resta il testo di .bg-field__error. */
@keyframes bgFieldShake {
	0%, 100% { transform: translateX(0); }
	15%      { transform: translateX(-10px); }
	30%      { transform: translateX(10px); }
	50%      { transform: translateX(-7px); }
	70%      { transform: translateX(7px); }
	85%      { transform: translateX(-3px); }
}

.bg-contact-form .bg-field.is-shaking,
.bg-contact-form .bg-contact-form__privacy.is-shaking {
	animation: bgFieldShake 340ms var(--ease-in-out, cubic-bezier(0.65, 0, 0.35, 1)) both;
}

/* --- Invio in corso ----------------------------------------
   Il pulsante deve dichiarare l'attesa entro 100ms dal click.
   Niente spinner: il testo cambia (lo scrive il JS) e il
   bottone si spegne. `pointer-events:none` blocca il doppio
   invio senza usare [disabled], che in alcuni browser annulla
   il POST se applicato troppo presto. */
.bg-contact-form__submit.is-sending {
	opacity: 0.6;
	pointer-events: none;
	cursor: progress;
}

.bg-contact-form__submit.is-sending .arrow {
	animation: bgSubmitArrow 900ms linear infinite;
}

/* linear è corretto qui: è un indicatore di attesa, l'unico
   caso in cui il piano lo ammette (§4.1). */
@keyframes bgSubmitArrow {
	0%   { transform: translateX(0);    opacity: 1; }
	60%  { transform: translateX(6px);  opacity: 0.2; }
	61%  { transform: translateX(-6px); opacity: 0; }
	100% { transform: translateX(0);    opacity: 1; }
}

/* --- Accessibilità -----------------------------------------
   Lo shake non viene attenuato: viene SOSTITUITO. Chi ha
   chiesto meno movimento riceve lo stesso segnale sotto forma
   di bordo e sfondo, senza spostamenti. Idem per la freccia
   d'attesa: resta il calo di opacità del bottone. */
@media (prefers-reduced-motion: reduce) {

	.bg-contact-form .bg-field.is-shaking,
	.bg-contact-form .bg-contact-form__privacy.is-shaking {
		animation: bgFieldFlash 340ms steps(1, end) 2 both;
	}

	@keyframes bgFieldFlash {
		0%, 49%   { background-color: rgba(230, 57, 41, 0.10); }
		50%, 100% { background-color: transparent; }
	}

	.bg-contact-form__submit.is-sending .arrow {
		animation: none;
		opacity: 0.4;
	}

	.js .bg-contact-form__banner.reveal,
	.js .bg-field--success.reveal {
		transform: none;
	}
}