/*
 * Contatto — stile del blocco.
 *
 * Migrato da assets/css/concept-contatto.css il 17/09/2026, quando Riccardo ha
 * scelto il concept A. Fuori sono rimaste le sole classi che servivano alla
 * pagina di prova (`.cc-nota`, `.cc-eti`): erano l'impalcatura del confronto
 * fra le tre varianti, non la sezione.
 *
 * Composizione: l'email è il protagonista, la card firma le sta accanto a
 * destra, e il modulo vive dentro una modale a tutto schermo che si apre al
 * clic. Con la colonna firma spenta la sezione diventa la variante «nuda»:
 * colonna unica e email più grande (`.ds-contatto--nuda`). ⚠️ Nascondere la
 * card SENZA quel trattamento lascerebbe una metà destra vuota, cioè «la A con
 * un buco».
 *
 * Token semantici (--ds-text / --ds-bg / --ds-card / --ds-line / --ds-soft):
 * mai i grezzi, che sono light-only.
 */

/* --------------------------------------------------------------------------
 * LA BASE
 * ----------------------------------------------------------------------- */
.ds-contatto {
	padding-block: clamp(4rem, 9vw, 8rem);
}

.ds-contatto__inner {
	width: 100%;
	max-width: var(--ds-content, 1280px);
	margin-inline: auto;
	padding-inline: var(--ds-space-m, 1.5rem);
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.62fr);
	gap: clamp(2.5rem, 6vw, 5rem);
	/* ⚠️ `center`, non `start`: l'altezza della sezione la detta la card della
	   firma (il ritratto e' 4:5), e con le colonne allineate in alto sotto al
	   testo restava un vuoto alto quanto mezza sezione. Misurato sul reso, non
	   dedotto dal codice. */
	align-items: center;
}

/* Eyebrow: stesso motivo di `stat`, `confronto` e `process` — trattino
   smeraldo e mono. Il pavimento di craft lo vieterebbe; qui e' una decisione
   chiusa del progetto («restano tutti»), e il mondo visivo gia' impegnato
   vince sul default. */
.ds-contatto__eyebrow {
	margin: 0 0 var(--ds-space-m, 1.5rem);
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ds-soft, #6b6862);
}

.ds-contatto__eyebrow-mark {
	width: 22px;
	height: 1px;
	background: var(--ds-lime, #20b07a);
}

.ds-contatto__mailwrap {
	margin: 0;
}

/*
 * L'email e' il protagonista della sezione, e resta un link vero.
 * ⚠️ Inchiostro pieno, NON il carattere a contorno della reference: una
 * traccia sottile e' il contrasto piu' basso possibile proprio
 * sull'informazione piu' importante. Il rilievo lo da' la scala, il segno lo
 * da' la sottolineatura disegnata.
 */
.ds-contatto__mail {
	position: relative;
	display: inline-block;
	font-family: var(--ds-font-display, serif);
	font-weight: 500;
	/* Massimo 4,6rem: il pavimento di craft ferma il display a 6rem, e qui
	   sopra i 74px l'indirizzo andrebbe a capo dentro la colonna. */
	/* Il minimo e' 2,5rem e non 1,75: a 390px la clamp cadeva sul minimo e
	   l'indirizzo usciva a 28px, cioe' poco piu' di un paragrafo. A 40px sta
	   in 280px su 342 disponibili. */
	font-size: clamp(2.5rem, 6.2vw, 4.6rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--ds-text, #292929);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.ds-contatto__mail-text {
	position: relative;
	z-index: 1;
}

.ds-contatto__mail-underline {
	position: absolute;
	left: -0.5%;
	bottom: -0.1em;
	width: 101%;
	height: 0.26em;
	color: var(--ds-lime, #20b07a);
	overflow: visible;
	pointer-events: none;
}

/*
 * Reazione: il segno si ispessisce, il testo non si muove. E' il gesto del
 * sistema bottoni — inversione o peso, mai spostamento — quindi non c'e'
 * niente da disattivare sotto `prefers-reduced-motion`.
 */
.ds-contatto__mail:hover .ds-contatto__mail-underline,
.ds-contatto__mail:focus-visible .ds-contatto__mail-underline {
	height: 0.36em;
}

.ds-contatto__lead {
	margin: var(--ds-space-l, 2rem) 0 0;
	max-width: 46ch;
	color: var(--ds-soft, #6b6862);
	font-size: 1.0625rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.ds-contatto__actions {
	margin-top: var(--ds-space-l, 2rem);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ds-space-s, 1rem);
}

.ds-contatto__noscript {
	width: 100%;
	max-width: var(--ds-content, 1280px);
	margin: 0 auto var(--ds-space-2xl, 4rem);
	padding-inline: var(--ds-space-m, 1.5rem);
	color: var(--ds-soft, #6b6862);
}

/*
 * Variante C — nuda. La colonna della firma non c'e', quindi la griglia resta
 * a una colonna sola e la meta' destra e' vuota davvero: e' il punto della
 * variante, non una dimenticanza.
 *
 * ⚠️ L'email sale a 5,5rem e non oltre: il pavimento di craft ferma il display
 * a 6rem, e qui e' l'unica cosa in pagina — se non cresce, C e' solo la A
 * con un buco al posto della card.
 */
.ds-contatto--nuda .ds-contatto__inner {
	grid-template-columns: minmax(0, 1fr);
}

.ds-contatto--nuda .ds-contatto__mail {
	font-size: clamp(2.5rem, 7.4vw, 5.5rem);
}

.ds-contatto--nuda .ds-contatto__main {
	max-width: 46rem;
}

@media (max-width: 860px) {
	.ds-contatto__inner {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
 * LA MODALE
 *
 * <dialog> nativo: porta con se' focus trap, Escape e inerzia del resto della
 * pagina. Le tre trappole note di questo tema le gestisce il JS (cursore
 * custom nel top layer, Lenis fermo, scroll del pannello).
 * ----------------------------------------------------------------------- */
.ds-contatto-modal {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--ds-bg, #f1efeb);
	color: var(--ds-text, #292929);
	overflow: hidden;
}

.ds-contatto-modal::backdrop {
	background: color-mix(in srgb, var(--ds-ink, #292929) 72%, transparent);
}

.ds-contatto-modal__shell {
	position: relative;
	height: 100%;
}

.ds-contatto-modal__close {
	position: absolute;
	top: clamp(0.75rem, 2vw, 1.5rem);
	right: clamp(0.75rem, 2vw, 1.5rem);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--ds-line-strong, #b9b4aa);
	border-radius: var(--ds-radius-md, 12px);
	background: var(--ds-bg, #f1efeb);
	color: var(--ds-text, #292929);
	cursor: pointer;
	transition: background-color var(--ds-t-fast, 160ms) var(--ds-ease, ease),
		color var(--ds-t-fast, 160ms) var(--ds-ease, ease);
}

/* Inversione, come ogni altro controllo del tema. */
.ds-contatto-modal__close:hover,
.ds-contatto-modal__close:focus-visible {
	background: var(--ds-text, #292929);
	color: var(--ds-bg, #f1efeb);
}

.ds-contatto-modal__close svg {
	width: 20px;
	height: 20px;
}

.ds-contatto-modal__body {
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ds-contatto-modal__inner {
	width: 100%;
	max-width: var(--ds-content, 1280px);
	margin-inline: auto;
	padding: clamp(4rem, 9vh, 7rem) var(--ds-space-m, 1.5rem) clamp(3rem, 7vh, 5rem);
	display: grid;
	grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
	/*
	 * Tre aree, non due colonne: su desktop contesto e firma stanno l'uno
	 * sotto l'altro nella colonna sinistra, su mobile si impilano nell'ordine
	 * che serve — contesto, modulo, chi risponde.
	 */
	grid-template-areas:
		"side form"
		"card form";
	grid-template-rows: auto 1fr;
	column-gap: clamp(2.5rem, 6vw, 5rem);
	row-gap: var(--ds-space-l, 2rem);
	align-items: start;
	/* Quando il contenuto sta dentro lo schermo si centra, invece di
	   appoggiarsi in alto lasciando una fascia vuota in fondo; quando non ci
	   sta, `min-height` cede e il pannello scorre normalmente. */
	min-height: 100%;
	align-content: center;
}

.ds-contatto-modal__title {
	margin: 0;
	font-family: var(--ds-font-display, serif);
	font-weight: 500;
	font-size: clamp(2rem, 4.4vw, 3rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* L'accento del titolo: stesso ruolo di `.ds-heading-accent` nel resto del
   tema. Non corsivo — `em` qui e' la semantica, il rilievo lo da' il colore. */
.ds-contatto-modal__title em {
	font-style: normal;
	color: var(--ds-accent-text, #157a55);
}

.ds-contatto-modal__text {
	margin: var(--ds-space-m, 1.5rem) 0 var(--ds-space-l, 2rem);
	max-width: 42ch;
	color: var(--ds-soft, #6b6862);
	line-height: 1.6;
	text-wrap: pretty;
}

/*
 * L'apertura e' l'unico momento autoriale della pagina: il pannello sale e
 * si scopre con un ease-out esponenziale, e dentro le due colonne entrano
 * sfalsate riusando `data-stagger` (nessun meccanismo nuovo).
 */
@media (prefers-reduced-motion: no-preference) {
	.ds-contatto-modal[open] .ds-contatto-modal__shell {
		animation: cc-modal-in 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
	}
}

@keyframes cc-modal-in {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.ds-contatto-modal__side {
	grid-area: side;
}

.ds-contatto-modal__formcol {
	grid-area: form;
}

.ds-contatto-modal__card {
	grid-area: card;
}

@media (max-width: 860px) {
	.ds-contatto-modal__inner {
		grid-template-columns: 1fr;
		grid-template-areas:
			"side"
			"form"
			"card";
		grid-template-rows: none;
		padding-top: clamp(4.5rem, 12vh, 6rem);
	}

	/* Il contesto sopra al modulo si accorcia: due righe, non un paragrafo. */
	.ds-contatto-modal__text {
		margin-bottom: var(--ds-space-m, 1.5rem);
	}
}