/**
 * Loyalty — banda blu: «Ma vale 'a pena?» e la tabella dei tre tagli.
 *
 * Quote da `FASE2_pagina_loyalty.ai`, misurate sul rendering a 72 dpi (un
 * pixel, un punto della tavola). La banda è alta 765 e la sua colonna di
 * contenuto è la solita da 1512, che il tema porta a 1168: fattore 0,772.
 *
 * Nella tavola i corpi sono 70 per il nastro, 23 per le intestazioni, 36 per
 * le celle, 32 per l'invito e 17 per la nota; qui valgono i preset del tema
 * alle misure più vicine.
 */

.conviene {
	/* Base del nastro a 113 nella tavola, cioè 87 qui. */
	padding-block: 22px 56px;
	overflow: hidden;
}

/* --- Il nastro scorrevole ------------------------------------------------ */

/* La meccanica sta in `marquee.css`, che vale anche per la banda "Che vuò fà":
   qui solo quel che è di questa. Il corsivo e il tondo restano al 300 di base.

   Il nastro comincia a destra del disco delle mani invece che a filo di
   finestra: le parole spariscono lì. Non è un rientro del blocco — sarebbe da
   accordare con i margini che core dà a un `alignfull` e col padding della
   sezione — ma la maschera stessa, in percentuale della banda: il disco sta a
   8,07vw ed è largo 14,8, e nella tavola la prima parola comincia 71 punti
   dopo il suo bordo. */
.conviene__marquee {
	--stop: 26.6%;
	--marquee-passo: 0.5em;
	--marquee-maschera: linear-gradient( 90deg, transparent var(--stop), #000 calc( var(--stop) + 1.5% ), #000 96%, transparent 100% );
}

/* --- La tabella ---------------------------------------------------------- */

/* Nella tavola le colonne cadono a 23, 309, 573, 875 e 1203 dal bordo della
   colonna di contenuto: larghezze irregolari, misurate una per una. */
.wp-block-table.conviene__tabella {
	margin: 92px 0 0;
}

.conviene__tabella table {
	table-layout: fixed;
	width: 100%;
	border-collapse: separate;
	/* Lo stacco fra una riga e l'altra: 4 punti nella tavola. */
	border-spacing: 0 3px;
}

.conviene__tabella th,
.conviene__tabella td {
	border: 0;
	padding: 0;
	text-align: left;
	vertical-align: middle;
}

.conviene__tabella th:first-child,
.conviene__tabella td:first-child {
	/* I 23 punti di rientro del testo dentro alla fascia di riga. */
	padding-left: 1.52%;
}

.conviene__tabella th:nth-child(1),
.conviene__tabella td:nth-child(1) {
	width: 20.4%;
}

.conviene__tabella th:nth-child(2),
.conviene__tabella td:nth-child(2) {
	width: 17.5%;
}

.conviene__tabella th:nth-child(3),
.conviene__tabella td:nth-child(3) {
	width: 20%;
}

.conviene__tabella th:nth-child(4),
.conviene__tabella td:nth-child(4) {
	width: 21.7%;
}

/* Le intestazioni: maiuscoletto, e sopra alle fasce di riga, non dentro.
   Il blocco tabella di core non porta corpi per cella: le misure della tavola
   — 23 per le intestazioni, 36 per le celle — arrivano qui dai preset. */
.conviene__tabella thead th {
	font-size: var(--wp--preset--font-size--body-md);
	padding-bottom: 11px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Le fasce: nella tavola la prima e la terza riga sono più scure del fondo,
   la seconda no. Alla riga alta 48 il testo sta in mezzo. */
.conviene__tabella tbody td {
	font-size: var(--wp--preset--font-size--heading-compact);
	height: 48px;
	font-weight: 700;
	line-height: 1.15;
}

.conviene__tabella tbody tr:nth-child(odd) td {
	background-color: rgba( 0, 0, 0, 0.22 );
}

/* --- Nota e invito ------------------------------------------------------- */

.conviene__nota {
	margin: 16px 0 0;
	/* Nella tavola la nota finisce 14 prima del bordo destro della fascia. */
	padding-right: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.wp-block-group.conviene__cta {
	margin-top: 60px;
	gap: 30px;
}

.wp-block-group.conviene__cta > * {
	margin-block: 0;
}

.conviene__cta .wp-block-button__link {
	font-weight: 700;
	transition: background-color 0.2s ease;
}

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

/* Dal pannello Carattere della tavola: Montserrat Bold 33pt, interlinea 42,
   tracking −25. Il corpo al fattore del tema è 25,5 e il preset più vicino ne
   dà 26; l'interlinea è 42/33 e il tracking −25 millesimi di em. */
.conviene__invito {
	font-weight: 700;
	line-height: 1.27;
	letter-spacing: -0.025em;
}

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

	
}

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

@media ( max-width: 900px ) {
	/* Il rientro alto tiene conto del disco delle mani, che è ancorato in fondo
	   alla sezione precedente e sporge di 60px dentro a questa banda — è il
	   `bottom: -60px` di `.funziona__disc` sotto i 900px, in
	   `loyalty-funziona.css`. Con i 20px di prima il nastro cominciava dentro a
	   quel tratto e il disco gli passava sopra: delle sue cinquantuno righe se
	   ne leggevano undici. Sessanta più sedici d'aria lo fanno cominciare sotto
	   al disco. Se là cambia la sporgenza, questo numero va rifatto. */
	.conviene {
		padding-block: 76px clamp( 40px, 10vw, 64px );
	}

	/* A schermo stretto il disco delle mani si sposta a destra e non taglia
	   più il nastro: le parole tornano a correre da bordo a bordo. */
	.conviene__marquee {
		--stop: 0%;
	}

	/* Cinque colonne in 335px non si leggono. La tabella si riapre in tre
	   schede, una per taglio: il taglio fa da titolo e ogni valore si porta
	   accanto la sua intestazione, che il filtro `add_table_cell_labels` ha
	   messo in `data-etichetta`. Il documento resta una tabella con la sua
	   intestazione: qui cambia solo come si dispone. */
	.wp-block-table.conviene__tabella {
		margin-top: clamp( 40px, 9vw, 72px );
	}

	.conviene__tabella table {
		border-spacing: 0;
	}

	.conviene__tabella thead {
		display: none;
	}

	.conviene__tabella tbody,
	.conviene__tabella tbody tr {
		display: block;
	}

	.conviene__tabella tbody tr {
		padding: 14px 16px 16px;
		border-radius: var(--wp--custom--radius--md);
		background-color: rgba( 0, 0, 0, 0.22 );
	}

	.conviene__tabella tbody tr + tr {
		margin-top: 12px;
	}

	/* Le larghezze di colonna del desktop pesano più di una regola sul solo
	   `td`: qui vanno sciolte con la stessa specificità, o le celle restano
	   strette e le voci vanno a capo. */
	.conviene__tabella tbody td:nth-child(n) {
		width: auto;
	}

	.conviene__tabella tbody td,
	.conviene__tabella tbody tr:nth-child(odd) td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		width: auto;
		height: auto;
		padding: 0;
		background: none;
		font-size: var(--wp--preset--font-size--body-md);
	}

	.conviene__tabella tbody td + td {
		margin-top: 6px;
	}

	.conviene__tabella tbody td::before {
		content: attr( data-etichetta );
		flex: 0 1 auto;
		font-size: var(--wp--preset--font-size--note);
		font-weight: 700;
		text-transform: uppercase;
		opacity: 0.72;
	}

	/* Il taglio fa da titolo della scheda: niente etichetta, corpo pieno e un
	   filo che lo stacca dai valori.

	   La riga `tr:nth-child(odd) td` qui sopra pesa più di un `td:first-child`
	   secco: senza pareggiarla, nelle schede dispari — 20€ e 100€ — il taglio
	   restava al corpo dei valori mentre quello di 50€ saliva. */
	.conviene__tabella tbody td:first-child,
	.conviene__tabella tbody tr:nth-child(odd) td:first-child {
		display: block;
		margin-bottom: 12px;
		/* Il rientro della prima colonna vale solo sul desktop, dove la fascia
		   di riga è più larga del testo. */
		padding: 0 0 10px;
		border-bottom: 1px solid rgba( 255, 255, 255, 0.22 );
		font-size: var(--wp--preset--font-size--subheading);
	}

	.conviene__tabella tbody td:first-child::before {
		content: none;
	}

	.wp-block-group.conviene__cta {
		margin-top: clamp( 32px, 8vw, 60px );
		gap: clamp( 16px, 4vw, 30px );
	}

	/* Il pulsante si prende la riga, come quello del footer. Il gruppo CTA è un
	   flex a capo: il blocco pulsanti va forzato a riga intera, altrimenti si
	   restringe al testo e l'invito gli si affianca. */
	.conviene__cta .conviene__buttons {
		flex: 1 0 100%;
	}

	.conviene__cta .wp-block-button,
	.conviene__cta .wp-block-button__link {
		width: 100%;
	}

	/* I 43px di rientro laterali restano dalla tavola: a riga piena l'etichetta
	   va centrata, o resta appoggiata a sinistra dentro a un pulsante largo. */
	.conviene__cta .wp-block-button__link {
		justify-content: center;
		text-align: center;
	}
}