/**
 * Loyalty — banda d'apertura.
 *
 * Riusa `page-hero` per la banda e la colonna del titolo: qui sta solo quello
 * in cui il disegno della Loyalty se ne discosta, cioè una banda più bassa, un
 * titolo che alterna peso normale e grassetto sulla stessa riga, e i due
 * gruppi di chicchi che scavalcano il bordo inferiore.
 *
 * Le misure vengono dal file Illustrator, che è impaginato su 1920: la banda è
 * alta 480 dei 1920 di larghezza, cioè un quarto esatto, e da lì il `25vw`.
 */

.page-hero.loyalty-hero {
	/* Un quarto della larghezza, come nel file: 480px a 1920, 360 a 1440. Il
	   minimo tiene in piedi la banda quando `vw` non basta più — sotto i
	   1040px il titolo su due righe non ci starebbe. */
	min-height: clamp( 260px, 25vw, 480px );

	/* I chicchi sporgono sotto il bordo, quindi il taglio verticale di
	   `page-hero` va tolto. Resta quello orizzontale, e non per prudenza: nel
	   disegno il primo chicco è tagliato di netto dal bordo sinistro della
	   pagina. `clip` e non `hidden` per non creare un contenitore di scroll.

	   I due assi si dichiarano separati perché `visible` e `hidden` insieme
	   non sono ammessi — il browser porterebbe l'asse `visible` ad `auto` e
	   comparirebbe una barra di scorrimento. Con `clip` la coppia è lecita. */
	overflow-x: clip;
	overflow-y: visible;

	/* Riferimento per i chicchi. */
	position: relative;
}

/* --- Velatura ---------------------------------------------------------- */

/* Nel file la metà sinistra della fotografia è scurita, ed è quella velatura a
   rendere leggibile il titolo bianco: senza, «conviene.» finisce sulla tovaglia
   rossa accesa e sulla tazzina. La curva è misurata sul file, confrontando
   pixel per pixel la banda impaginata con lo scatto originale: nero all'80%
   fino a un quinto della larghezza, poi in dissolvenza fino a sparire a poco
   più di due terzi.

   Non si riusa `page-hero--scrim` perché quello è un altro disegno — parte dal
   55% e non si spegne mai del tutto, resta un velo del 10% anche sul bordo
   destro — e qui coprirebbe il blu e il cornetto al pistacchio, che nel file
   sono a piena luce. */
.loyalty-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: linear-gradient(
		to right,
		rgba( 0, 0, 0, 0.8 ) 0%,
		rgba( 0, 0, 0, 0.8 ) 22%,
		rgba( 0, 0, 0, 0 ) 70%
	);
}

.loyalty-hero .page-hero__inner {
	position: relative;
	z-index: 1;
}

/* --- Titolo ------------------------------------------------------------ */

/* Nelle altre pagine il titolo è tutto in peso pieno e la prima riga è un
   corsivo leggero. Qui il contrasto è dentro la riga — «A un amico **leale**»
   — quindi la base torna a peso normale e il grassetto lo porta <strong>, che
   è un formato di core e lascia il titolo modificabile nell'editor. */
.page-hero__title.loyalty-hero__title {
	font-weight: 400;

	/* Il 40% di `page-hero` è tarato su righe corte — «This is Simply», «Sul
	   Menù» — e qui mandava a capo dentro la riga: «A un amico / leale / il
	   caffè / conviene.», quattro righe che sfondavano la banda. Le due righe
	   le decide il <br>, non l'incolonnamento. */
	width: 60%;

	/* `page-hero` calcola un'interlinea che tiene conto del corsivo più grande
	   della prima riga; qui le righe hanno lo stesso corpo e quel valore le
	   allontanava di un terzo in più di quanto fa il disegno, dove il passo fra
	   le righe è 77 su un corpo di 75. */
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.loyalty-hero__title strong {
	font-weight: 700;
}

/* --- Chicchi ----------------------------------------------------------- */

/* Due immagini e non quattro: nel disegno i chicchi stanno a coppie, e le
   coppie del tema hanno già lo scarto giusto fra i due — quello liscio più in
   alto a sinistra, quello inciso più in basso a destra.

   L'ancoraggio è al bordo inferiore della banda perché è lì che il disegno li
   appoggia, a cavallo fra la fotografia e la sezione che segue. Lo scarto è
   una percentuale dell'altezza dell'immagine, non un valore fisso: così la
   quota di chicco che resta sopra la cucitura non cambia al variare della
   larghezza. */
.loyalty-hero__beans {
	position: absolute;
	bottom: 0;
	z-index: 3;
	width: clamp( 130px, 11.2vw, 215px );
	height: auto;
	margin: 0;
	pointer-events: none;
	user-select: none;
}

/* Le due ascisse sono quelle della tavola — il primo chicco tagliato dal bordo
   sinistro, l'altro a poco più di due punti e mezzo dal destro — ma misurate
   sulla tela, non sulla finestra. Scritte in percentuale nuda restavano
   incollate ai bordi dello schermo a ogni larghezza: su un monitor da 3124 il
   titolo si ferma dentro la cornice e i chicchi finivano da soli negli angoli,
   a settecento pixel dal resto della composizione.

   Sono scarti dal centro, quindi fino a 1920 danno esattamente il punto di
   prima e oltre restano dove il disegno li mette. */
.loyalty-hero__beans--left {
	left: calc( 50% - 0.51 * var(--wp--custom--layout--canvas) );
	transform: translateY( 77% );
}

.loyalty-hero__beans--right {
	right: calc( 50% - 0.474 * var(--wp--custom--layout--canvas) );
	transform: translateY( 81% );
}

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

@media ( max-width: 900px ) {
	/* Sotto la soglia la banda si ferma al minimo e la foto si ricentra: il
	   taglio del disegno è pensato su una banda larga quattro volte l'altezza,
	   e su schermo stretto lascerebbe fuori la tazzina.

	   `!important` perché `background-position` arriva come stile inline dal
	   background support del blocco — è la stessa ragione per cui `page-hero`
	   lo usa nella sua media query. */
	.page-hero.loyalty-hero {
		background-position: 50% 50% !important;
	}

	/* Il titolo prende tutta la larghezza, quindi la velatura non può più
	   spegnersi a due terzi: va portata fino in fondo, come fa `page-hero`
	   nella stessa media query e per lo stesso motivo. */
	.loyalty-hero::after {
		background-image: linear-gradient(
			to right,
			rgba( 0, 0, 0, 0.78 ) 0%,
			rgba( 0, 0, 0, 0.6 ) 55%,
			rgba( 0, 0, 0, 0.42 ) 100%
		);
	}

	.page-hero__title.loyalty-hero__title {
		width: 100%;
	}

	/* I chicchi si rimpiccioliscono e rientrano: alla larghezza del telefono
	   una coppia da 215px coprirebbe un terzo della banda. */
	.loyalty-hero__beans {
		width: clamp( 90px, 22vw, 140px );
	}

	.loyalty-hero__beans--left {
		left: -4%;
		transform: translateY( 70% );
	}

	.loyalty-hero__beans--right {
		right: -4%;
		transform: translateY( 74% );
	}
}