/* ============================================================
   CTA "Diventa socio" - trascrizione di components.css
   (.cta-box, .cta-inner, .cta-text, .cta-actions e le varianti
   .btn-white / .btn-outline-white) dell'HTML di riferimento.

   Nel riferimento e' identica su tutte e dodici le pagine che
   la portano: qui e' un pattern solo, quindi resta identica per
   costruzione.

   .section-cta non ha regole nel riferimento, e' solo un nome:
   la classe resta nel markup, il CSS no.

   Il markup e' core/cover, quindi le classi del riferimento
   sono mappate su quelle di core:
     .cta-box + .cta-inner -> .wp-block-cover
     il velo verde al 70%  -> overlayColor + dimRatio del blocco
     .cta-text             -> figlio di .wp-block-cover__inner-container
   ============================================================ */

/* ─── Riquadro ───────────────────────────────────────── */
/* position, display, overflow e il velo li mette core. Restano da battere,
   a specificita' pari, min-height 430px, padding 1em e la centratura. */
.wp-block-cover.cta-box {
	min-height: 0;
	padding: 200px 64px;
	text-align: center;
	border-radius: var(--wp--custom--radius-lg);
	color: var(--wp--preset--color--white);
	/* fondo nero di riserva: se la foto non carica, il testo bianco resta
	   leggibile sul velo verde invece che sul bianco della pagina */
	background-color: #000;
	/* esce dal container fino a 24px dai bordi della viewport */
	margin-inline: calc(50% - 50vw + 24px);
}

/* ─── Testo ──────────────────────────────────────────── */
/* La centratura la porta l'ereditarieta' da .cta-box, e sul sito basta. Nel
   canvas dell'editor pero' il foglio di core/cover riporta a sinistra il
   contenitore interno - .wp-block-cover .wp-block-cover__inner-container, che
   sul frontend non esiste - e il titolo si vede allineato a sinistra. Questa
   regola lo batte a specificita' e sul sito non cambia niente. */
.wp-block-cover.cta-box .wp-block-cover__inner-container {
	text-align: center;
}

.cta-box .cta-text h2 {
	font-size: clamp(4.2rem, 9.5vw, 6.8rem);
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: 16px;
}

.cta-box .cta-text p {
	font-size: 1.15rem;
	line-height: 1.7;
	max-width: 560px;
	margin-block: 0 32px;
	margin-inline: auto;
}

/* ─── Pulsanti ───────────────────────────────────────── */
/* Nel riferimento le due ancore sono figlie dirette di .cta-actions, quindi
   sono elementi flex e si allungano fino all'altezza della riga: il pulsante
   contornato e' 4px piu' alto per via del bordo, e quello pieno lo raggiunge.
   core/button interpone un .wp-block-button fra i due, e allinea al centro:
   senza queste due regole i pulsanti risulterebbero di altezze diverse. */
.wp-block-buttons.cta-actions {
	align-items: stretch;
}

.cta-actions .wp-block-button {
	display: flex;
}


/* Le due varianti sopra la foto. Il resto del pulsante - spaziatura, raggio,
   corpo e peso - arriva da theme.json, e display e transition da style.css.
   La doppia classe batte styles.elements.button di theme.json. */
.wp-block-button.is-style-white .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--secondary);
}

.wp-block-button.is-style-white .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--beige);
}

.wp-block-button.is-style-outline-white .wp-block-button__link {
	background-color: transparent;
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--white) 60%, transparent);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-outline-white .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--white);
	background-color: color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 720px) {
	/* Il padding ridotto della sezione su telefono ora vale per tutte, ed e'
	   scritto in style.css: qui non serve piu' una regola a parte. */

	.wp-block-cover.cta-box {
		padding: 32px;
	}
}