/**
 * DevSign · Form — stile del blocco (contatti / lead magnet / newsletter).
 * Token --ds-* globali. Honeypot off-screen, feedback accessibile, stato successo.
 */

.ds-form {
	padding-block: var(--ds-space-3xl, 6rem);
}

.ds-form__inner {
	width: 100%;
	max-width: 640px;
	margin-inline: auto;
	padding-inline: var(--ds-space-m, 1.5rem);
}

/* Newsletter / lead-magnet: più larghi per la riga unica nome + email */
.ds-form--newsletter .ds-form__inner,
.ds-form--lead-magnet .ds-form__inner {
	max-width: 680px;
}

/* Variante compatta: form dentro una colonna (hero risorse a due colonne).
   Niente padding di sezione né max-width/centratura: riempie la colonna e
   allinea a sinistra come il resto della sezione. */
.ds-form--compact {
	padding-block: 0;
}
.ds-form--compact .ds-form__inner {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}
.ds-form--compact .ds-form__head {
	text-align: left;
	margin-bottom: var(--ds-space-l, 2rem);
}

/* --- Head --- */
.ds-form__head {
	text-align: center;
	margin-bottom: var(--ds-space-xl, 3rem);
}

.ds-form__eyebrow {
	margin: 0 0 var(--ds-space-s, 1rem);
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ds-soft, #6b6862);
}

.ds-form__heading {
	margin: 0 0 var(--ds-space-s, 1rem);
	font-family: var(--ds-font-display, serif);
	font-weight: 500;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.ds-form__intro {
	margin: 0 auto;
	max-width: 48ch;
	color: var(--ds-soft, #6b6862);
	font-size: clamp(1.0625rem, 1.8vw, 1.1875rem);
}

/* --- Riepilogo stima dal calcolatore --- */
.ds-form__summary {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-bottom: var(--ds-space-l, 2rem);
	padding: var(--ds-space-m, 1.5rem);
	background: var(--ds-lime, #afff6f);
	color: var(--ds-ink, #292929);
	border-radius: var(--ds-radius, 12px);
}

/* Rispetta l'attributo [hidden]: senza questo il display:flex sopra
   batte lo stile user-agent [hidden]{display:none} e il box lime
   comparirebbe vuoto finché il calcolatore non fornisce una stima. */
.ds-form__summary[hidden] {
	display: none;
}

.ds-form__summary-label {
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ds-form__summary-value {
	font-weight: 600;
	font-size: 1.0625rem;
}

/* --- Rows --- */
.ds-form__rows {
	display: grid;
	gap: var(--ds-space-m, 1.5rem);
}

/* Rispetta l'attributo [hidden]: senza questa riga il display:grid sopra
   (0,1,0) batte il display:none dello user-agent e allo stato di successo
   restavano visibili campi, Turnstile e soprattutto il bottone, fermo su
   "Invio…" e disabilitato sotto il messaggio di conferma. Stessa trappola
   gia' annotata su .ds-form__summary. */
.ds-form__rows[hidden] {
	display: none;
}

.ds-form__row {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

/*
 * ⚠️ Label in mono maiuscolo sopra il campo, non piu' in grassetto: e' il
 * design dei campi della pagina Studio, portato qui il 01/09/2026. Nello
 * Studio erano 9px, qui 12px — sotto quella misura una riga con
 * letter-spacing .08em diventa illeggibile, e il colore --ds-soft e' gia' al
 * minimo di margine (4.84:1).
 */
.ds-form__label {
	/* Stesso rientro del testo dentro il campo (--ds-field-pad): etichetta,
	   valore digitato ed eventuale errore restano incolonnati. */
	padding-inline-start: var(--ds-field-pad, 0.75rem);
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ds-soft, #6b6862);
}

/*
 * CAMPI A SOLA SOTTOLINEATURA — 01/09/2026, dal blocco Studio · Contatti.
 * Niente riquadro, niente fondo: resta il tratto sotto. Su un form da 5 campi
 * cinque rettangoli pieni pesano piu' del contenuto che raccolgono.
 *
 * ⚠️ Tre cose dello Studio NON sono state portate, e non sono dettagli:
 * 1. il tratto e' `--ds-line-strong`, non un rgba al 24%: e' il confine di un
 *    controllo e deve stare a 3:1 (WCAG 1.4.11);
 * 2. niente `outline: none` sul focus — nello Studio c'e', e cancellerebbe
 *    l'anello globale a tre strati del tema. Qui il focus NON dichiara
 *    box-shadow proprio, cosi' l'anello globale arriva intatto e il tratto
 *    inferiore raddoppia;
 * 3. `min-height: 44px` resta: e' il target touch.
 */
.ds-form__input {
	width: 100%;
	min-height: 44px;
	/* Il testo non parte incollato al bordo: dentro il gruppo email toccava
	   proprio il filetto del riquadro. Il tratto inferiore resta a larghezza
	   piena, si rientra solo il contenuto. */
	padding: 0.7rem var(--ds-field-pad, 0.75rem);
	font: inherit;
	color: var(--ds-text, #292929);
	background: transparent;
	border: 0;
	/* Confine di un controllo → 3:1 (1.4.11). --ds-line sta a 1.33:1. */
	border-bottom: 1px solid var(--ds-line-strong, #8a857c);
	border-radius: 0;
	transition: border-color var(--ds-t-fast, 160ms) var(--ds-ease, ease),
		box-shadow var(--ds-t-fast, 160ms) var(--ds-ease, ease);
}

.ds-form__input:hover {
	border-bottom-color: var(--ds-text, #292929);
}

.ds-form__input:focus-visible {
	/* :focus-visible, non :focus — e senza outline:none, che cancellava il
	   doppio anello globale del tema. Nessun box-shadow qui: dichiararlo
	   sostituirebbe quello dell'anello globale. */
	border-bottom-color: var(--ds-text, #292929);
	border-bottom-width: 2px;
	padding-bottom: calc(0.7rem - 1px);
}

.ds-form__textarea {
	resize: vertical;
	min-height: 7rem;
	/* L'unico campo che tiene il riquadro: senza, un'area di testo alta 7rem
	   con il solo tratto in fondo non si legge come uno spazio da riempire. */
	padding: 0.8rem var(--ds-field-pad, 0.75rem);
	border: 1px solid var(--ds-line-strong, #8a857c);
	border-radius: var(--ds-radius-md, 12px);
}

.ds-form__textarea:focus-visible {
	border-color: var(--ds-text, #292929);
	border-width: 1px;
	padding-bottom: 0.8rem;
}

.ds-form__selectwrap {
	position: relative;
	display: block;
}

.ds-form__selectwrap::after {
	content: "";
	position: absolute;
	right: var(--ds-field-pad, 0.75rem);
	top: 50%;
	width: 0.5rem;
	height: 0.5rem;
	margin-top: -0.35rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	color: var(--ds-soft, #6b6862);
	pointer-events: none;
}

.ds-form__select {
	appearance: none;
	/* La freccia era un SVG col fill cablato #292929: nero su fondo scuro,
	   cioè invisibile in dark. Disegnata in CSS eredita currentColor. */
	background-image: none;
	padding-right: calc(1.75rem + var(--ds-field-pad, 0.75rem));
}

/* --- Newsletter / lead-magnet: riga unica nome + email con button annidato --- */
.ds-form__inline {
	display: grid;
	gap: var(--ds-space-m, 1.5rem);
}

@media (min-width: 560px) {
	.ds-form__inline {
		grid-template-columns: 1fr 1.5fr;
		align-items: end;
	}
}

/* Il "gruppo" È il campo email (bordo + focus); l'input dentro è borderless
   e il button è annidato a destra con un piccolo inset. */
.ds-form__inputgroup {
	display: flex;
	align-items: stretch; /* il button riempie tutta l'altezza del campo */
	overflow: hidden; /* clippa i corner del button a quelli arrotondati del campo */
	background: var(--ds-card, #fff);
	/* Il gruppo È il campo: il suo bordo è il confine del controllo → 3:1. */
	border: 1px solid var(--ds-line-strong, #8a857c);
	border-radius: var(--ds-radius, 12px);
	transition: border-color var(--ds-t-fast, 160ms) var(--ds-ease, ease),
		box-shadow var(--ds-t-fast, 160ms) var(--ds-ease, ease);
}

.ds-form__inputgroup:focus-within {
	border-color: var(--ds-text, #292929);
	box-shadow: 0 0 0 3px var(--ds-lime, #20b07a);
}

.ds-form__inputgroup .ds-form__submit {
	flex: 0 1 auto;
	min-width: 0;
	white-space: nowrap;
}

/*
 * Su schermo stretto il bottone annidato smette di comprimere il campo e va
 * sotto: con un'etichetta lunga (es. "Iscriviti subito alla newsletter
 * gratuita") l'email scendeva al minimo e la pagina andava in overflow
 * orizzontale a 390px.
 */
@media (max-width: 480px) {
	.ds-form__inputgroup {
		flex-direction: column;
		align-items: stretch;
	}

	.ds-form__inputgroup .ds-form__submit {
		flex: 1 1 auto;
		width: 100%;
		white-space: normal;
		border-top: 1px solid var(--ds-line, #e2dfd9);
	}
}

.ds-form__inputgroup .ds-form__input {
	flex: 1 1 auto;
	/* Difesa: con un'etichetta lunga sul bottone l'email si schiacciava a ~70px. */
	min-width: 8rem;
	border: 0;
	background: transparent;
	border-radius: 0;
}

.ds-form__inputgroup .ds-form__input:focus {
	outline: none;
	box-shadow: none;
}

/* Solo da 481px in su: sotto quella soglia vince la regola in @media (max-width: 480px) sopra. */
@media (min-width: 481px) {
	.ds-form__inputgroup .ds-form__submit {
		flex: 0 0 auto;
		width: auto;
		min-height: 0;
		margin: 0; /* flush ai bordi del campo, incl. margin-right: 0 */
		padding: 0.55rem 1.35rem;
		border-radius: 0; /* i corner li arrotonda l'overflow del gruppo */
		white-space: nowrap;
	}
}

/* Informativa privacy (art. 13) sotto la checkbox di iscrizione: NON un consenso. */
.ds-form__notice {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--ds-soft, #6b6862);
}

.ds-form__notice a {
	color: var(--ds-text, #292929);
	text-decoration-color: var(--ds-lime, #afff6f);
}

/* --- Honeypot: off-screen, non display:none --- */
.ds-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Consenso (checkbox) --- */
.ds-form__consent {
	gap: 0;
}

.ds-form__check {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 0.9375rem;
	color: var(--ds-soft, #6b6862);
	cursor: pointer;
	line-height: 1.4;
}

.ds-form__check input[type="checkbox"] {
	/* Erano 18,4px con solo accent-color: sotto il target touch e, in dark,
	   quadrati bianchi brillanti. Disegnato coi token del tema. */
	flex: 0 0 auto;
	appearance: none;
	width: 1.375rem;
	height: 1.375rem;
	margin: 0;
	border: 1px solid var(--ds-soft, #6b6862);
	border-radius: var(--ds-radius-sm, 6px);
	background: var(--ds-card, #fff);
	cursor: pointer;
	transition: background-color var(--ds-t-fast, 160ms) var(--ds-ease, ease),
		border-color var(--ds-t-fast, 160ms) var(--ds-ease, ease);
}

.ds-form__check input[type="checkbox"]::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transition: transform var(--ds-t-fast, 160ms) var(--ds-ease, ease);
	background: currentColor;
	clip-path: polygon(19% 47%, 8% 58%, 39% 88%, 92% 29%, 81% 19%, 38% 66%);
}

.ds-form__check input[type="checkbox"]:checked {
	background: var(--ds-lime, #20b07a);
	border-color: var(--ds-lime, #20b07a);
	color: var(--ds-ink, #292929);
}

.ds-form__check input[type="checkbox"]:checked::before {
	transform: scale(1);
}

/* L'area cliccabile arriva a 44px senza ingrandire il quadrato. */
.ds-form__check {
	min-height: 44px;
	padding-block: 0.35rem;
}

.ds-form__check a {
	color: var(--ds-text, #292929);
	text-decoration-color: var(--ds-lime, #afff6f);
}

/* --- Turnstile --- */
.ds-form__turnstile {
	min-height: 65px;
}

/* --- Actions --- */
.ds-form__actions {
	margin: 0;
}

.ds-form__submit {
	width: 100%;
}

.ds-form__submit:disabled {
	opacity: 0.6;
	cursor: progress;
}

/* --- Feedback --- */
.ds-form__feedback {
	margin: 0;
	padding: 0.85rem 1rem;
	border-radius: var(--ds-radius, 12px);
	font-size: 0.9375rem;
}

.ds-form__feedback.is-error {
	background: var(--ds-danger-soft);
	color: var(--ds-danger-text);
	border: 1px solid var(--ds-danger-line);
}

.ds-form__feedback.is-ok {
	background: var(--ds-lime, #afff6f);
	color: var(--ds-ink, #292929);
}

/* --- Stato successo --- */
.ds-form__success {
	text-align: center;
	padding: var(--ds-space-xl, 3rem) var(--ds-space-l, 2rem);
	background: var(--ds-card, #fff);
	border: 1px solid var(--ds-line, #e2dfd9);
	border-radius: var(--ds-radius-lg, 20px);
}

.ds-form__success-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: var(--ds-space-s, 1rem);
	border-radius: 999px;
	background: var(--ds-lime, #afff6f);
	color: var(--ds-ink, #292929);
	font-size: 1.5rem;
	font-weight: 700;
}

.ds-form__success p {
	margin: 0 auto;
	max-width: 40ch;
	font-size: 1.0625rem;
}

/* --- noscript --- */
.ds-form__noscript {
	margin-top: var(--ds-space-m, 1.5rem);
	padding: var(--ds-space-m, 1.5rem);
	background: var(--ds-card, #fff);
	border: 1px solid var(--ds-line, #e2dfd9);
	border-radius: var(--ds-radius, 12px);
	text-align: center;
}

/* --- Reveal on-scroll (gated su .js) --- */
@media (prefers-reduced-motion: no-preference) {
	.js .ds-form[data-reveal] {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity var(--ds-t-base, 260ms) var(--ds-ease, ease),
			transform var(--ds-t-base, 260ms) var(--ds-ease, ease);
	}

	.js .ds-form[data-reveal].is-revealed {
		opacity: 1;
		transform: none;
	}
}


/* ============================================================================
 * Stati di errore — token che flippano in dark
 * Il pannello errore era #fdecec / #8a1f1f / #f3c2c2 cablati: in dark diventava
 * un rettangolo rosa fluo. Questi tre ruoli seguono il tema.
 * ========================================================================= */
.ds-form {
	--ds-danger-soft: #fdecec;
	--ds-danger-text: #8a1f1f;
	--ds-danger-line: #f3c2c2;
}

:root[data-theme="dark"] .ds-form {
	--ds-danger-soft: rgba(255, 92, 82, 0.12);
	--ds-danger-text: #ff9b94;
	--ds-danger-line: rgba(255, 92, 82, 0.38);
}

@media (prefers-color-scheme: dark) {
	:root[data-theme="auto"] .ds-form {
		--ds-danger-soft: rgba(255, 92, 82, 0.12);
		--ds-danger-text: #ff9b94;
		--ds-danger-line: rgba(255, 92, 82, 0.38);
	}
}

/* --- Messaggio d'errore del singolo campo --- */
.ds-form__error {
	display: block;
	margin-top: 0.4rem;
	padding-inline-start: var(--ds-field-pad, 0.75rem);
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--ds-danger-text);
}

.ds-form__error[hidden] {
	display: none;
}

.ds-form__row.has-error .ds-form__input,
.ds-form__row.has-error .ds-form__inputgroup {
	border-color: var(--ds-danger-line);
}

.ds-form__row.has-error .ds-form__check input[type="checkbox"] {
	border-color: var(--ds-danger-line);
}

/* --- Legenda campi obbligatori --- */
.ds-form__legend {
	margin: 0 0 var(--ds-space-m, 1.5rem);
	font-size: 0.8125rem;
	color: var(--ds-soft, #6b6862);
}

/* --- Via d'uscita se la verifica anti-spam non carica --- */
.ds-form__fallback {
	margin: 0;
	padding: 0.85rem 1rem;
	border-radius: var(--ds-radius, 12px);
	background: var(--ds-inset, #f1efeb);
	border: 1px solid var(--ds-line, #e2dfd9);
	font-size: 0.9375rem;
	color: var(--ds-text, #292929);
}

.ds-form__fallback[hidden] {
	display: none;
}

/* --- Successo: non più un vicolo cieco --- */
.ds-form__success:focus-visible {
	outline: none;
}

/* Stessa ragione della regola qui sopra: senza l'elemento nel selettore questo
   margine veniva mangiato e la riga dell'indirizzo restava attaccata al
   messaggio (misurato: 0 px). */
.ds-form__success p.ds-form__success-meta {
	margin: var(--ds-space-s, 1rem) auto 0;
	max-width: 44ch;
	font-size: 0.9375rem;
	color: var(--ds-soft, #6b6862);
}

/*
 * Secondo messaggio senza ricaricare la pagina. Livello TERZIARIO del sistema
 * bottoni: il momento di massima fiducia deve restare la conferma ricevuta,
 * non un invito a riscrivere. Un bottone pieno qui competerebbe col messaggio.
 */
/*
 * ⚠️ Selettore con l'elemento, non la sola classe. `.ds-form__success p`
 * (riga 463) vale (0,1,1) e batteva `.ds-form__success-again` (0,1,0): il
 * `margin-top` qui sotto non arrivava mai, e il filetto finiva incollato al
 * paragrafo sopra (misurato: 0 px). Stessa trappola della chiusura FAQ,
 * dove `.ds-faq__closing a` batteva `.ds-faq__closing-cta`.
 * **Per vincere serve la stessa forma**, non una classe più lunga.
 */
.ds-form__success p.ds-form__success-again {
	margin: var(--ds-space-m, 1.5rem) auto 0;
	padding-top: var(--ds-space-m, 1.5rem);
	border-top: 1px solid var(--ds-line, #e2dfd9);
}

.ds-form__success-edit {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--ds-accent-text, #0d6f4a);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* ----------------------------------------------------------------------------
 * Variante a due colonne (--split). Si accende solo quando i campi della
 * colonna laterale sono compilati: il form da solo, centrato a 640px dentro
 * un contenitore da 1280, lasciava due fasce vuote ai lati.
 * Stessa proporzione della sezione contatto in home (42/58).
 * ------------------------------------------------------------------------- */
.ds-form--split .ds-form__inner {
	max-width: var(--ds-content, 1280px);
}

.ds-form__grid {
	display: grid;
	gap: var(--ds-space-xl, 3rem);
	grid-template-columns: 1fr;
}

.ds-form__aside-heading {
	margin: 0;
	font-family: var(--ds-font-display, serif);
	font-weight: 500;
	font-size: clamp(1.75rem, 3.4vw, 2.25rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
	color: var(--ds-text, #292929);
}

.ds-form__aside-text {
	margin: var(--ds-space-m, 1.5rem) 0 0;
	max-width: 34rem;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ds-soft, #6b6862);
}

/* I contatti della colonna laterale li rende ora il pannello firma
   (.ds-firma__contacts in assets/css/style.css): stesso componente della home. */

/* 782px: stessa soglia della sezione contatto in home, cosi' le due colonne
   compaiono insieme invece che a larghezze diverse. */
@media (min-width: 782px) {
	.ds-form__grid {
		grid-template-columns: 42fr 58fr;
		gap: var(--ds-space-2xl, 4rem);
		align-items: start;
	}

	/* Il form e' alto: la colonna di testo resta in vista mentre si compila. */
	.ds-form__aside {
		position: sticky;
		top: calc(var(--ds-header-h, 80px) + var(--ds-space-l, 2rem));
	}

	.ds-form--split .ds-form__main .ds-form__form {
		margin-inline: 0;
	}
}

/* ----------------------------------------------------------------------------
 * CAMPI IN DUE COLONNE + COLONNE DELLA SEZIONE INVERTITE — 01/09/2026
 *
 * Presi dal blocco Studio · Contatti: campi a coppie invece che impilati, e
 * l'intestazione dentro la colonna del form invece che sopra tutto.
 *
 * ⚠️ CONTAINER query, non media query. Questo blocco vive in tre larghezze
 * molto diverse: pagina Contatti a due colonne, home dentro una colonna del
 * contenuto, pagine risorse a tutta larghezza. Il viewport non dice niente
 * sullo spazio che il form ha davvero — con una media query il form della home
 * si sarebbe spaccato in due colonne dentro una colonna stretta.
 *
 * ⚠️ Soglia a 560px, non 620: misurata la larghezza reale dei tre casi, il
 * form della home ne ha 592 (sta nella colonna 58% della sezione contatto) e
 * a 620 restava a colonna singola proprio dove le due colonne servono di piu'.
 * A 560 le due colonne sono da ~265px l'una, che con label mono e campi a
 * sola sottolineatura reggono.
 *
 * ⚠️ La riga inline (newsletter: email con il bottone annidato) NON entra in
 * questa griglia: li' il bordo E' il campo e il bottone ci sta dentro, quindi
 * i campi a sola sottolineatura non si applicano. Resta com'era.
 * ------------------------------------------------------------------------- */

.ds-form__form {
	container-type: inline-size;
	container-name: dsform;
}

/* Tutto full-width per default: solo i campi corti stanno a meta'. */
@container dsform (min-width: 560px) {
	.ds-form__rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--ds-space-m, 1.5rem);
	}

	.ds-form__rows > * {
		grid-column: 1 / -1;
	}

	.ds-form__row--half {
		grid-column: span 1;
	}

	/*
	 * Il bottone torna alla sua misura naturale e si allinea a destra, in fondo
	 * alla griglia. ⚠️ Cambiano SOLO le misure: colore, raggio e gesto di hover
	 * restano quelli di `.btn--primary`, cioe' del sistema a tre livelli.
	 */
	.ds-form__actions {
		display: flex;
		justify-content: flex-end;
	}

	.ds-form__submit {
		width: auto;
		min-width: 14rem;
	}

	/* L'inline ha il suo bottone annidato nel campo: non lo tocca. */
	.ds-form__submit--inline {
		min-width: 0;
	}
}

/* La sottolineatura dei campi a coppie non deve attaccarsi alla riga dopo. */
@container dsform (min-width: 560px) {
	.ds-form__rows {
		row-gap: var(--ds-space-l, 2rem);
	}
}

/* ----------------------------------------------------------------------------
 * Variante --split: ORDINE INVERTITO.
 * Prima: colonna di testo a sinistra (42), form a destra (58).
 * Ora: intestazione + form a sinistra (58), foto e contatti a destra (42).
 * Il DOM segue l'ordine visivo, quindi non serve nessun `order`.
 * ------------------------------------------------------------------------- */
@media (min-width: 782px) {
	.ds-form__grid {
		grid-template-columns: 58fr 42fr;
	}

	/* Lo sticky passa alla colonna di servizio: e' la piu' corta, e il form
	   accanto e' l'elemento alto che scorre. */
	.ds-form__aside {
		position: sticky;
		top: calc(var(--ds-header-h, 80px) + var(--ds-space-l, 2rem));
	}
}

/*
 * Foto quadrata nella colonna di servizio. ⚠️ La regola sta QUI e non su
 * `.ds-firma__frame` in assets/css/style.css: quel componente e' condiviso con
 * il blocco `firma` della home, dove il ritratto e' 4/5 e deve restarci.
 */
.ds-form__aside .ds-firma__frame {
	aspect-ratio: 1;
}

/*
 * Intestazione a sinistra nella variante a due colonne, a ogni larghezza.
 * ⚠️ Il default del blocco e' `text-align: center`, ed e' giusto per il form
 * isolato al centro di una pagina risorse. Qui no: il titolo apre la colonna
 * dei campi, che sono allineati a sinistra — centrato sopra campi allineati a
 * sinistra sembra appartenere a un'altra sezione. Vale anche sotto la soglia
 * delle due colonne, dove le colonne si incolonnano ma il rapporto resta.
 */
.ds-form--split .ds-form__head {
	text-align: left;
}

.ds-form--split .ds-form__intro {
	margin-inline: 0;
}

/*
 * Via al brief guidato, sotto la casella del progetto (15/09/2026).
 * Deliberatamente un link di prosa, non un bottone: non deve competere con
 * l'invio del modulo, che resta l'azione primaria di questa pagina.
 */
.ds-form__brief {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.6rem;
	margin: calc(var(--ds-space-s, 1rem) * -0.25) 0 var(--ds-space-m, 1.5rem);
	padding-inline-start: var(--ds-field-pad, 0.75rem);
}

.ds-form__brief-nota {
	color: var(--ds-soft, #6b6862);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.ds-form__brief-link {
	font-size: 0.8125rem;
	/* ⚠️ --ds-accent-text, non --ds-lime: lo smeraldo pieno come colore di
	   testo su carta sta a 2,42:1. */
	color: var(--ds-accent-text, #14795a);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Il link alla risorsa dentro lo stato di successo: è l'esito che la persona
   è venuta a prendere, quindi sta sopra le note e prima delle vie d'uscita. */
/* ⚠️ Con l'elemento nel selettore (29/09/2026): `.ds-form__success p` (0,1,1)
   batteva la sola classe e il bottone restava a 0 px dalla riga «Non è
   l'indirizzo giusto?». Segnalato da Riccardo provando. */
.ds-form__success p.ds-form__success-asset {
	margin: var(--ds-space-l, 2rem) auto 0;
}