/**
 * DevSign · CTA Band — stile del blocco.
 *
 * Pannello di conversione a due colonne: contenuto + firma con i segnali di
 * fiducia. Layout `split` (default) e `compact` (chiusura leggera dei post).
 *
 * I colori sono variabili locali dichiarate per variante, così la dark mode si
 * scrive una volta sola ridefinendo i token invece di duplicare le regole.
 * Nei valori si usano i ruoli semantici (--ds-text/--ds-card/--ds-line/--ds-soft):
 * i token grezzi --ds-ink/--ds-paper/--ds-surface non flippano in dark e qui
 * compaiono solo dentro le varianti che restano volutamente fisse.
 */

.ds-cta {
	/* Era padding-block 6rem sulla sezione PIÙ 6rem sull'inner: 96px fissi
	   anche a 390px. Ora la sezione respira e l'inner scala col viewport. */
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.ds-cta__inner {
	width: 100%;
	max-width: 1080px;
	margin-inline: auto;
	padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 3rem);
	border-radius: var(--ds-radius-lg, 12px);
	background: var(--ds-cta-bg);
	color: var(--ds-cta-fg);
	border: 1px solid var(--ds-cta-edge, transparent);
}

/* Split: il contenuto guida, la firma accompagna. */
.ds-cta--split.ds-cta--has-signature .ds-cta__inner {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: stretch;
}

.ds-cta.alignfull .ds-cta__inner {
	max-width: var(--ds-content, 1280px);
	border-radius: 0;
}

/* ----------------------------------------------------------------------------
 * Contenuto
 * ------------------------------------------------------------------------- */
.ds-cta__heading {
	margin: 0 0 var(--ds-space-s, 1rem);
	font-family: var(--ds-font-display, serif);
	font-weight: 500;
	font-size: clamp(1.75rem, 3.4vw, 2.625rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
	color: var(--ds-cta-fg);
}

.ds-cta__sub {
	/* Prima ereditava lo stesso identico colore del titolo: su fondo saturo
	   la gerarchia si appiattiva. Ora il sottotitolo arretra di un gradino. */
	margin: 0 0 var(--ds-space-l, 2rem);
	max-width: 46ch;
	font-size: clamp(1rem, 1.4vw, 1.125rem);
	line-height: 1.55;
	color: var(--ds-cta-fg-soft);
}

.ds-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 2vw, 1.75rem);
	align-items: center;
}

.ds-cta__btn-primary {
	background: var(--ds-cta-btn-bg);
	color: var(--ds-cta-btn-fg);
	border-color: transparent;
	transition: background-color var(--ds-t-fast, 160ms) var(--ds-ease, ease),
		color var(--ds-t-fast, 160ms) var(--ds-ease, ease),
		transform var(--ds-t-fast, 160ms) var(--ds-ease, ease);
}

.ds-cta__btn-primary:hover,
.ds-cta__btn-primary:focus-visible {
	background: var(--ds-cta-btn-bg-hover);
	color: var(--ds-cta-btn-fg-hover);
}

/* Azione secondaria come link, non come bottone bordato: nessun confine non
   testuale da portare a 3:1 (WCAG 1.4.11), e il peso visivo torna coerente
   con la frizione dell'azione. La sottolineatura è il motivo-firma. */
.ds-cta__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	font-family: var(--ds-font-body, sans-serif);
	font-weight: 500;
	font-size: 1rem;
	color: var(--ds-cta-fg);
	text-decoration: none;
}

.ds-cta__link-label {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	padding-bottom: 2px;
}

.ds-cta__link-arrow {
	width: 1em;
	height: 1em;
	flex: none;
}

@media (prefers-reduced-motion: no-preference) {
	.ds-cta__link-label {
		background-size: 0 1px;
		transition: background-size var(--ds-t-base, 260ms) var(--ds-ease, ease);
	}

	.ds-cta__link:hover .ds-cta__link-label,
	.ds-cta__link:focus-visible .ds-cta__link-label {
		background-size: 100% 1px;
	}

	.ds-cta__link-arrow {
		transition: transform var(--ds-t-fast, 160ms) var(--ds-ease, ease);
	}

	.ds-cta__link:hover .ds-cta__link-arrow,
	.ds-cta__link:focus-visible .ds-cta__link-arrow {
		transform: translateX(3px);
	}
}

/* ----------------------------------------------------------------------------
 * Firma — chi risponde, in quanto tempo, con quale impegno
 * ------------------------------------------------------------------------- */
.ds-cta__signature {
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	border-radius: var(--ds-radius-md, 12px);
	background: var(--ds-cta-panel);
	border: 1px solid var(--ds-cta-panel-edge);
	/* stretch sulla griglia + centratura interna: la card accompagna l'altezza
	   della colonna di contenuto invece di lasciare un vuoto sotto di sé. */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ds-cta__sig-head {
	display: flex;
	align-items: center;
	gap: 0.875rem;
}

.ds-cta__avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ds-cta-avatar-bg);
	color: var(--ds-cta-avatar-fg);
	font-family: var(--ds-font-display, serif);
	font-weight: 600;
	font-size: 1.25rem;
	letter-spacing: 0.02em;
	line-height: 1;
}

.ds-cta__avatar--photo {
	background: none;
}

.ds-cta__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ds-cta__sig-id {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.ds-cta__sig-name {
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	color: var(--ds-cta-fg);
}

.ds-cta__sig-role {
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--ds-cta-fg-soft);
	text-wrap: balance;
}

.ds-cta__points {
	margin: 1.25rem 0 0;
	padding: 1.25rem 0 0;
	list-style: none;
	border-top: 1px solid var(--ds-cta-panel-edge);
	display: grid;
	gap: 0.625rem;
}

.ds-cta__point {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--ds-cta-fg);
}

.ds-cta__check {
	width: 1.125em;
	height: 1.125em;
	flex: none;
	margin-top: 0.1em;
	color: var(--ds-cta-check);
}

/* ----------------------------------------------------------------------------
 * Layout compact — chiusura leggera (post del blog)
 * ------------------------------------------------------------------------- */
.ds-cta--compact .ds-cta__inner {
	max-width: 820px;
}

.ds-cta--compact .ds-cta__heading {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.ds-cta--compact .ds-cta__sub {
	margin-bottom: var(--ds-space-m, 1.5rem);
}

/* Elenco semantico che si legge come una riga sola: il separatore è decorativo
   e vive nel CSS, così lo screen reader annuncia tre voci e non una frase. */
.ds-cta__inline-points {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5rem;
	margin: var(--ds-space-m, 1.5rem) 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--ds-cta-fg-soft);
}

.ds-cta__inline-points li {
	/* Blocco, non flex: così il separatore segue l'ultima riga della voce
	   quando il testo va a capo, invece di restare appeso a destra. */
	display: block;
}

.ds-cta__inline-points li:not(:last-child)::after {
	content: "\00B7";
	margin-inline-start: 0.5rem;
	color: inherit;
	opacity: 0.6;
}

/* ----------------------------------------------------------------------------
 * Varianti — light
 * ------------------------------------------------------------------------- */

/* LIME (default): smeraldo pieno, testo ink. Testo ink su #20b07a = 5.23:1. */
.ds-cta--lime {
	--ds-cta-bg: var(--ds-lime, #20b07a);
	--ds-cta-fg: var(--ds-ink, #292929);
	/* Ink pieno, non smorzato (28/09/2026): allo 0.92 il sottotitolo misurava
	   4,65:1 sui pixel, al limite. Su smeraldo il massimo è 5,23 (ink pieno):
	   la gerarchia la fanno famiglia e corpo del carattere, non l'opacità. */
	--ds-cta-fg-soft: var(--ds-ink, #292929);
	--ds-cta-edge: transparent;
	/*
	 * Bottone PAPER con testo INK, non il contrario. La stessa etichetta
	 * ("Parlami del tuo progetto") nell'header e' smeraldo con testo ink: con il
	 * fondo ink e il testo paper i due bottoni raccontavano due sistemi
	 * diversi, e nella band il testo sembrava piu' scarico. Qui lo smeraldo non
	 * si puo' usare come fondo (il pannello e' gia' smeraldo e il bottone
	 * sparirebbe), ma il TESTO torna ink come nell'header.
	 * Ink su paper = 12.67:1; il bordo del bottone contro lo smeraldo supera
	 * il 3:1 richiesto ai confini non testuali.
	 */
	--ds-cta-btn-bg: var(--ds-paper, #f1efeb);
	--ds-cta-btn-fg: var(--ds-ink, #292929);
	--ds-cta-btn-bg-hover: var(--ds-ink, #292929);
	--ds-cta-btn-fg-hover: var(--ds-paper, #f1efeb);
	--ds-cta-panel: rgba(255, 255, 255, 0.16);
	--ds-cta-panel-edge: rgba(41, 41, 41, 0.16);
	--ds-cta-avatar-bg: var(--ds-ink, #292929);
	--ds-cta-avatar-fg: var(--ds-lime, #20b07a);
	--ds-cta-check: var(--ds-ink, #292929);
}

/* INK: fondo scuro, testo paper, bottone smeraldo (firma su scuro). */
.ds-cta--ink {
	--ds-cta-bg: var(--ds-ink, #292929);
	--ds-cta-fg: var(--ds-paper, #f1efeb);
	--ds-cta-fg-soft: rgba(241, 239, 235, 0.76);
	--ds-cta-edge: transparent;
	--ds-cta-btn-bg: var(--ds-lime, #20b07a);
	--ds-cta-btn-fg: var(--ds-ink, #292929);
	--ds-cta-btn-bg-hover: var(--ds-paper, #f1efeb);
	--ds-cta-btn-fg-hover: var(--ds-ink, #292929);
	--ds-cta-panel: rgba(255, 255, 255, 0.05);
	--ds-cta-panel-edge: rgba(241, 239, 235, 0.16);
	--ds-cta-avatar-bg: var(--ds-lime, #20b07a);
	--ds-cta-avatar-fg: var(--ds-ink, #292929);
	--ds-cta-check: var(--ds-lime, #20b07a);
}

/* PAPER: superficie card, filetto, bottone ink. */
.ds-cta--paper {
	--ds-cta-bg: var(--ds-card, #fff);
	--ds-cta-fg: var(--ds-text, #292929);
	--ds-cta-fg-soft: var(--ds-soft, #6b6862);
	--ds-cta-edge: var(--ds-line, #e2dfd9);
	--ds-cta-btn-bg: var(--ds-lime, #20b07a);
	--ds-cta-btn-fg: var(--ds-ink, #292929);
	--ds-cta-btn-bg-hover: var(--ds-ink, #292929);
	--ds-cta-btn-fg-hover: var(--ds-paper, #f1efeb);
	--ds-cta-panel: var(--ds-inset, #f1efeb);
	--ds-cta-panel-edge: var(--ds-line, #e2dfd9);
	--ds-cta-avatar-bg: var(--ds-ink, #292929);
	--ds-cta-avatar-fg: var(--ds-lime, #20b07a);
	--ds-cta-check: var(--ds-accent-text, #0d6f4a);
}

/* ----------------------------------------------------------------------------
 * Dark mode — la variante lime degrada a pannello scuro con accento smeraldo.
 * A schermo pieno lo smeraldo saturo era una lampada; l'accento resta la firma
 * (bordo, avatar, check, bottone) invece di essere l'intero fondo.
 * ------------------------------------------------------------------------- */
:root[data-theme="dark"] .ds-cta--lime,
:root[data-theme="dark"] .ds-cta--paper {
	--ds-cta-bg: var(--ds-card, #262626);
	--ds-cta-fg: var(--ds-text, #f1efeb);
	--ds-cta-fg-soft: var(--ds-soft, #a8a49c);
	--ds-cta-edge: var(--ds-lime, #20b07a);
	--ds-cta-btn-bg: var(--ds-lime, #20b07a);
	--ds-cta-btn-fg: var(--ds-ink, #292929);
	--ds-cta-btn-bg-hover: var(--ds-text, #f1efeb);
	--ds-cta-btn-fg-hover: var(--ds-ink, #292929);
	--ds-cta-panel: rgba(255, 255, 255, 0.04);
	--ds-cta-panel-edge: var(--ds-line, #3a3a3a);
	--ds-cta-avatar-bg: var(--ds-lime, #20b07a);
	--ds-cta-avatar-fg: var(--ds-ink, #292929);
	--ds-cta-check: var(--ds-lime, #20b07a);
}

@media (prefers-color-scheme: dark) {
	:root[data-theme="auto"] .ds-cta--lime,
	:root[data-theme="auto"] .ds-cta--paper {
		--ds-cta-bg: var(--ds-card, #262626);
		--ds-cta-fg: var(--ds-text, #f1efeb);
		--ds-cta-fg-soft: var(--ds-soft, #a8a49c);
		--ds-cta-edge: var(--ds-lime, #20b07a);
		--ds-cta-btn-bg: var(--ds-lime, #20b07a);
		--ds-cta-btn-fg: var(--ds-ink, #292929);
		--ds-cta-btn-bg-hover: var(--ds-text, #f1efeb);
		--ds-cta-btn-fg-hover: var(--ds-ink, #292929);
		--ds-cta-panel: rgba(255, 255, 255, 0.04);
		--ds-cta-panel-edge: var(--ds-line, #3a3a3a);
		--ds-cta-avatar-bg: var(--ds-lime, #20b07a);
		--ds-cta-avatar-fg: var(--ds-ink, #292929);
		--ds-cta-check: var(--ds-lime, #20b07a);
	}
}

/* ----------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.ds-cta--split.ds-cta--has-signature .ds-cta__inner {
		grid-template-columns: 1fr;
		gap: clamp(1.5rem, 4vw, 2rem);
	}
}

@media (max-width: 560px) {
	.ds-cta__actions {
		gap: 1rem;
	}

	.ds-cta__btn-primary {
		width: 100%;
	}
}

/* --- Reveal on-scroll (gated su .js) --- */
@media (prefers-reduced-motion: no-preference) {
	.js .ds-cta[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-cta[data-reveal].is-revealed {
		opacity: 1;
		transform: none;
	}
}

/*
 * Nota sotto le CTA: la rassicurazione "nessuna email" va DOVE SI CLICCA.
 * Misurato il 29/08: la CTA al calcolatore sta su 23 pagine e solo 2 dicevano
 * che non serve l'email — la si leggeva all'arrivo, cioe' dopo la decisione.
 * Il template la mostra solo quando la CTA secondaria e' davvero il calcolatore.
 */
.ds-cta__note {
	margin: var(--ds-space-s, 1rem) 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	/*
	 * --ds-cta-fg-soft e NON un token globale: il pannello di questo blocco
	 * cambia superficie (smeraldo / ink / paper) e ogni variante definisce il
	 * proprio testo secondario. Misurato: con --ds-accent-on-invert la nota
	 * spariva sul pannello smeraldo in light (2.00:1) e cadeva a 2.83 in dark.
	 */
	color: var(--ds-cta-fg-soft);
}