/**
 * L'invito finale: il blocco che chiede il prossimo passo.
 *
 * **È un componente, non un pezzo di una pagina.** Nato in fondo alla pagina dei
 * proprietari, lo usa anche «Chi siamo» e lo userà chiunque debba chiedere una
 * cosa sola: sta qui perché due copie della stessa idea si scostano al primo
 * ritocco, e perché la seconda pagina che ne aveva bisogno avrebbe copiato la
 * prima.
 */

/*
 * **La targhetta dice di che cosa si parla prima che il titolo lo dica.** È la
 * stessa idea dell'occhiello dell'apertura — una parola sopra il titolo, in
 * maiuscoletto spaziato — ma su fondo chiaro non serve la pastiglia di vetro:
 * basta il colore dell'accento, che è già il segno di questa pagina.
 *
 * **Gli stessi valori delle altre targhette del sito.** Corpo, peso e
 * spaziatura sono quelli con cui ogni sezione annuncia sé stessa: qui sono
 * riscritti perché il componente vive per conto proprio e non può dipendere dal
 * foglio di una pagina, ma le due targhette devono restare indistinguibili.
 */
.pms-cta__badge {
	margin: 0 0 clamp(0.75rem, 1.4vw, 1rem);
	font-size: var(--step-2);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-primary);
}

/*
 * **Una misura sola per i titoli dei capitoli.** I quattro che si annunciano allo
 * stesso modo — targhetta, titolo, filetto — devono anche pesare allo stesso
 * modo. Ciascuno si era scelto la propria: trentotto pixel il come funziona,
 * quarantaquattro la chiamata all'azione, trentasei gli altri due, e la pagina
 * scendeva a scalini che nessuno aveva deciso. La misura è quella con cui la
 * pagina iniziale annuncia il proprio capitolo editoriale, e da qui in poi è
 * scritta una volta.
 *
 * **Fuori restano le due cose che non sono titoli di sezione**: la frase del
 * passaggio, che è un'affermazione a tutta pagina e ha una scala sua, e «Dicono
 * di noi», che è la sezione condivisa con la pagina iniziale e tiene la misura di
 * là — cambiarla qui la cambierebbe anche lì.
 */
.pms-cta__title {
	font-size: clamp(1.625rem, 2.6vw, 2.25rem);
	line-height: 1.22;
	letter-spacing: -0.02em;
}

/* ============================================== l'invito: il prossimo passo. */

/*
 * **Un blocco solo, e tutto al centro.** Fra i benefici e le testimonianze c'è
 * la sola cosa che si chiede: nessuna fotografia, nessuna scheda dentro, nessuna
 * colonna. Un rettangolo quasi bianco sul bianco della pagina, con molto respiro
 * sopra e sotto il testo — è il vuoto a dare importanza all'invito, non il
 * colore.
 *
 * `overflow: hidden` non è pignoleria: le circonferenze escono dal riquadro da
 * tutti e due gli angoli, e quello che le taglia — con lo stesso raggio degli
 * angoli — è questo.
 */
.pms-cta {
	position: relative;
	overflow: hidden;
	padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 5vw, 5rem);
	text-align: center;

	/*
	 * **Il fondo è il colore d'accento, appena accennato.** Sei centesimi di
	 * accento sul nulla: non un grigio scelto a mano che resterebbe grigio anche
	 * dopo che chi amministra ha cambiato la palette, ma la stessa tinta della
	 * targhetta, del filetto e del pulsante, diluita fino a diventare una
	 * superficie. Il valore non è scritto qui: si compone dal token, come tutti
	 * gli altri derivati del tema.
	 */
	background: color-mix(in srgb, var(--color-primary) 6%, transparent);
	border-radius: 28px;
}

/*
 * **Le circonferenze sono un rilievo, non un disegno.** Bianco su quasi bianco,
 * un tratto e mezzo, ferme: si vedono se le si cerca e non si notano se si sta
 * leggendo, che è esattamente il loro compito. Nessun colore in più, nessuna
 * ripetizione, nessun movimento.
 */
.pms-cta__decoro {
	position: absolute;
	width: clamp(260px, 34vw, 420px);
	height: clamp(260px, 34vw, 420px);
	fill: none;
	stroke: rgba(255, 255, 255, 0.9);
	stroke-width: 1.5;

	/* Non intercetta niente: sotto ci passa il dito come se non ci fosse. */
	pointer-events: none;
}

.pms-cta__decoro--alto {
	top: 0;
	left: 0;
	transform: translate(-22%, -30%);
}

.pms-cta__decoro--basso {
	right: 0;
	bottom: 0;
	transform: translate(22%, 30%);
}

/* Il contenuto ha un livello proprio: le decorazioni gli stanno sempre sotto. */
.pms-cta__testo {
	position: relative;
	z-index: 1;
}

/*
 * Il titolo è il pezzo grosso della sezione, e la misura è quella dichiarata in
 * cima al foglio per tutti i capitoli.
 *
 * **Due righe, e il capo dove finisce la prima frase.** La larghezza massima è
 * scelta in `ch`, cioè nella misura del carattere: sta larga quanto basta a
 * tenere «La tua casa può rendere di più.» su una riga — ventuno — e stretta
 * abbastanza da non tenerci anche il resto — trentuno. Cambiando la finestra il
 * corpo e la larghezza scalano insieme, quindi il capo cade sempre lì.
 *
 * Niente `balance`: bilanciare le righe significa spezzare a metà della prima
 * frase per pareggiarne le lunghezze, ed è esattamente ciò che non si vuole qui.
 */
.pms-cta__title {
	max-width: 24ch;
	margin: 0 auto;
	font-weight: 700;
	color: var(--color-heading);
	text-wrap: pretty;
}

/* Il solito filetto del sito, qui centrato sotto il titolo. */
.pms-cta__title::after {
	content: '';
	display: block;
	width: 56px;
	height: 3px;
	margin: clamp(1rem, 1.8vw, 1.5rem) auto 0;
	border-radius: 999px;
	background: var(--color-primary);
}

/* E come le introduzioni degli altri capitoli, al corpo dei testi del sito. */
.pms-cta__lead {
	max-width: 56ch;
	margin: clamp(1.25rem, 2.4vw, 2rem) auto 0;
	font-size: var(--text-body);
	line-height: var(--line-height-text);
	color: var(--color-muted-strong);
}

.pms-cta__lead p:last-child { margin-bottom: 0; }

.pms-cta__action {
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
}

/*
 * Il pulsante è quello del sito e non cambia; qui si dice soltanto che su uno
 * schermo che si tocca deve restare comodo da premere.
 */
.pms-cta__action .pms-button {
	padding-block: 14px;
	padding-inline: clamp(1.5rem, 3vw, 2.25rem);
}

.pms-cta__action .pms-icon {
	width: 18px;
	height: 18px;
}

/*
 * **La riga sotto il pulsante parla piano.** Toglie l'ultimo dubbio — a che cosa
 * mi impegno premendo — e per farlo non deve competere con l'invito: prende il
 * gradino dei testi minuti e il grigio del testo secondario, cioè il posto che il
 * sito riserva alle note.
 */
.pms-cta__nota {
	margin: 0.875rem 0 0;
	font-size: var(--text-dense);
	line-height: 1.45;
	color: var(--color-muted);
}

@media (max-width: 640px) {
	.pms-cta {
		padding-inline: clamp(1.25rem, 6vw, 2rem);
		border-radius: 22px;
	}

	/*
	 * Su schermo stretto le circonferenze restano, più piccole e più tagliate: un
	 * accenno negli angoli, non due macchie che si contendono il testo.
	 */
	.pms-cta__decoro {
		width: 210px;
		height: 210px;
	}
}