/**
 * Che vuò fà — banda rossa con la mano a cavallo del bordo, la scritta
 * scorrevole e le tre azioni.
 *
 * Colori, scala tipografica e immagine di sfondo arrivano dal blocco; qui
 * resta la parte che i supports non esprimono: la mano fuori dal flusso, il
 * nastro che scorre e la griglia delle tre carte.
 */

.action-trio {
	position: relative;
	/* Il padding alto lascia spazio alla mano, che entra nella banda per
	   metà della propria altezza. Niente overflow: hidden, o l'altra metà
	   verrebbe tagliata proprio dove deve sconfinare. */
	padding-block: clamp( 160px, 18vw, 240px ) clamp( 84px, 5vw, 100px );

	/* Il blocco imposta l'immagine con background-repeat predefinito: in
	   "cover" la ripetizione non si vede, ma su schermi molto larghi o alti
	   riaffiora sui bordi. Il riferimento la esclude. */
	background-repeat: no-repeat;
}

/* Quando segue il pannello blu — cioè in home, dove risale dentro la banda —
   il rosso si allunga per accoglierlo. Senza, il pannello salirebbe sopra le
   tre azioni invece che su rosso vuoto.
   Nella pagina "Il Caffè" la porta non è preceduta da questa banda, quindi la
   regola non la tocca.

   Solo sopra i 900px: sotto quella soglia `.porta__card` azzera la propria
   risalita e il pannello si appoggia sotto la banda invece di entrarci, quindi
   la riserva non accoglierebbe niente — resterebbe rosso vuoto, e col minimo
   della clamp sarebbero 280px su un telefono. La soglia è la stessa da cui la
   porta rinuncia alla risalita: le due regole descrivono lo stesso momento e
   devono cambiare insieme. */
@media ( min-width: 901px ) {
	.action-trio:has( + .porta ) {
		padding-bottom: clamp( 280px, calc( 22vw + 70px ), 456px );
	}
}

/* La distanza fra nastro e carte la decide il margine del nastro, non i 24px
   che core stampa fra i blocchi di primo livello: sommandosi darebbero 94px
   dove ne servono 70. */
.action-trio > * {
	margin-block-start: 0;
}

/* --- La mano ---------------------------------------------------------- */

/* A cavallo del bordo superiore: metà sulla sezione precedente, metà su
   questa. È decorativa, quindi non intercetta il puntatore e non ha testo
   alternativo. */
.action-trio__hand {
	position: absolute;
	top: 0;
	left: max(
		var(--wp--preset--spacing--50),
		calc( ( 100vw - var(--wp--custom--layout--frame) ) / 2 + var(--wp--preset--spacing--50) )
	);
	z-index: 5;
	width: clamp( 160px, 16vw, 240px );
	margin: 0;
	transform: translateY( -50% );
	pointer-events: none;
}

.action-trio__hand img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Nastro scorrevole ------------------------------------------------ */

/* La meccanica sta in `marquee.css`, che vale per entrambe le bande: qui solo
   quel che è di questa. Il passo e la maschera sono quelli di partenza. */

.action-trio__marquee {
	margin-block-end: 70px;
}

/* Corsivo e tondo un filo più pieni del 300 di base. */
.action-trio__track .is-italic,
.action-trio__track .is-regular {
	font-weight: 400;
}

/* --- Le tre azioni ---------------------------------------------------- */

.action-trio__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: clamp( 28px, 4vw, 60px );
}

.action-trio__grid > * {
	margin-block-start: 0;
}

/* Le carte si allungano fino alla stessa altezza e il bottone resta in
   fondo, allineato fra le tre colonne anche con testi di lunghezza diversa. */
.action-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}

.action-card > * {
	margin-block-start: 0;
}

.action-card__icon {
	display: flex;
	align-items: flex-end;
	min-height: 56px;
	/* Sei pixel oltre il gap: nel riferimento l'icona respira un po' più del
	   resto perché il disegno arriva fino al bordo del suo box. */
	margin: 0 0 6px;
}

.action-card__icon img {
	display: block;
	width: auto;
	height: clamp( 46px, 4.4vw, 56px );
}

/* Due icone sono disegnate con pesi ottici diversi dalle altre: il pin
   risulta piccolo e la mano con la tazzina grande. Le porto alla stessa
   presenza visiva, come nel riferimento. */
.action-trio__grid > :first-child .action-card__icon img {
	height: clamp( 54px, 5.2vw, 66px );
}

.action-trio__grid > :nth-child(2) .action-card__icon img {
	height: clamp( 40px, 3.8vw, 48px );
}

/* Nel riferimento i titoli hanno interlinea 0.98 per regola globale; qui
   l'unica interlinea dichiarata è l'1.6 del corpo, che su un titolo lascia
   sette pixel di aria sopra e sotto e slittava tutta la carta. */
.action-card__title {
	/* 22px come nel riferimento. Sta qui e non fra gli attributi del blocco
	   perché il preset più vicino (lede) vale 18px: lasciarlo avrebbe voluto
	   dire dichiarare nel markup una dimensione diversa da quella resa. */
	font-size: 22px;
	line-height: 0.98;
	font-weight: 700;
	letter-spacing: -0.005em;
}

/* I marchi in corsivo prendono mezzo grado di peso in più: alla dimensione
   del testo di servizio il corsivo da solo sparirebbe. */
.action-card__desc em {
	font-style: italic;
	font-weight: 500;
}

/* È il testo a crescere fino a pareggiare le tre colonne, così i bottoni si
   allineano in fondo restando alla stessa distanza dal proprio paragrafo.
   Spingere il bottone con un margine automatico avrebbe allineato i bottoni
   ma lasciato buchi di ampiezza diversa sopra ciascuno. */
.action-card__desc {
	flex: 1;
	max-width: 32ch;
	line-height: 1.5;
	/* Un gradino sotto il bianco caldo dei titoli. */
	color: color-mix( in srgb, var(--wp--preset--color--floral) 92%, transparent );
}

.action-card__cta {
	margin-block-start: 10px;
}

.action-card__cta .wp-block-button__link {
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color 0.2s ease;
}
/* Il passaggio non e' piu' qui: questi sono bottoni «Secondario», e la
   tinta del passaggio la decide lo stile del blocco, una volta per tutte,
   in `button.css`. La regola che stava qui portava lo stesso colore del
   fondo a riposo, quindi al passaggio non cambiava piu' niente. */

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

	
}

/* Sotto i 900px l'interlinea ereditata è più alta del corpo e lascia sotto le
   maiuscole più aria che sopra: la pastiglia cresce di otto pixel, e con tre
   schede in colonna diventano venticinque sulla sezione. A 1 le lettere si
   centrano nei 14px di padding. È la stessa correzione che il riferimento
   applica a tutte le pastiglie del sito in una regola sola. */
@media ( max-width: 900px ) {
	.action-card__cta .wp-block-button__link {
		line-height: 1;
	}
}

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

@media ( max-width: 900px ) {
	/* Meno spazio sopra: la mano è più piccola e non serve riservarle
	   l'altezza che occupa sul desktop. */
	.action-trio {
		padding-top: clamp( 88px, 18vw, 130px );
	}

	.action-trio__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	/* Il nastro si stringe fra la mano e la prima icona: i 48px lasciavano un
	   vuoto sproporzionato su una colonna sola. */
	.action-trio__marquee {
		margin-block-start: 14px;
		margin-block-end: 18px;
	}

	/* La mano rimpicciolisce e si allinea al margine della pagina, altrimenti
	   su schermo stretto si mangia mezza banda. */
	.action-trio__hand {
		left: var(--wp--preset--spacing--50);
		width: clamp( 120px, 30vw, 160px );
	}
}