/**
 * Striscia contatti — fascia sabbia, una riga e un bottone.
 *
 * Colori e corpo del testo arrivano dai preset; qui restano il respiro della
 * fascia, la distanza fra riga e bottone e il pin del bottone, che i supports
 * non sanno esprimere.
 */

.contact-cta__inner {
	justify-content: center;
	align-items: center;
	gap: clamp( 20px, 3vw, 48px );
	padding-block: clamp( 18px, 2vw, 28px );
}

.contact-cta__text {
	margin: 0;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}

/* Il bottone non si stringe quando la riga di testo è lunga: prima va a capo
   la riga, non il bottone. */
.contact-cta__cta {
	flex-shrink: 0;
}

.contact-cta__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	letter-spacing: 0.01em;
	transition: background-color 0.2s ease;
}

/* Pin decorativo: pseudo-elemento, così non finisce nell'albero di
   accessibilità e non va descritto. */
.contact-cta__cta .wp-block-button__link::before {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-image: var(--cn-media-pin-coffee-inverse);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.contact-cta__cta .wp-block-button__link:hover,
.contact-cta__cta .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--burgundy-dark) !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.contact-cta__cta .wp-block-button__link {
		transition: none;
	}

	
}

/* --- Schermi stretti -------------------------------------------------- */

/* Come le altre pastiglie del sito: sotto i 900px l'interlinea ereditata
   sbilancia le lettere dentro al padding e alza il bottone. */
@media ( max-width: 900px ) {
	.contact-cta__cta .wp-block-button__link {
		line-height: 1;
	}
}

/* Sotto i 700px riga e bottone si impilano: affiancati resterebbero due
   colonne troppo strette per leggere l'una e premere l'altro. */
@media ( max-width: 700px ) {
	.contact-cta__inner {
		flex-direction: column;
		gap: 14px;
	}
}