/**
 * "Il vero caffè da 3C" — copy a sinistra, illustrazione a destra, due chicchi
 * ancorati alla sezione.
 *
 * Il markup a blocchi porta struttura, contenuto, colori e scala tipografica
 * (tutti da preset). Qui resta la griglia sbilanciata, il ritmo verticale della
 * colonna di testo e l'ancoraggio dei chicchi — che è la parte delicata, perché
 * a schermo stretto cambia del tutto.
 */

.trec {
	position: relative;
	padding-block: clamp( 60px, 8vw, 140px );
}

/* Le due colonne non sono uguali: l'illustrazione ne prende un filo di più.
   `minmax( 0, … )` e non `1.05fr` secco perché un SVG larghezza-intrinseca
   imporrebbe la propria misura minima alla traccia e sfonderebbe la griglia. */
.trec__inner {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.05fr );
	align-items: center;
	gap: clamp( 40px, 6vw, 96px );
}

/* Il gruppo ha layout di flusso lato blocco e qui diventa una griglia: senza
   questo i margini fra fratelli che core stampa per il blockGap si sommano
   alla riga. Stesso motivo per la sezione, dove i due chicchi sono fratelli
   del contenitore e gli passerebbero un margine in testa. */
.wp-block-group.trec > * + *,
.wp-block-group.trec__inner > * + * {
	margin-block-start: 0;
}

/* --- Colonna di testo -------------------------------------------------- */

.trec__copy {
	max-width: 36rem;
}

/* Il ritmo verticale è dell'attacco: un margine sopra e uno sotto, diversi fra
   loro. Reset e valori stanno alla stessa specificità, altrimenti le due classi
   che servono a battere il blockGap batterebbero anche i margini voluti. */
.wp-block-group.trec__copy > * {
	margin-block-start: 0;
}

.wp-block-group.trec__copy > .trec__lede {
	margin-block: clamp( 20px, 2.2vw, 32px ) clamp( 18px, 2vw, 26px );
}

.trec__title {
	margin: 0;
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* La seconda metà del titolo è in rosso e in grassetto: nel markup è il
   grassetto del rich text, così resta modificabile dall'editor. */
.trec__title strong {
	margin-inline-start: 0.18em;
	color: var( --wp--preset--color--rosso );
	font-weight: 700;
}

.trec__lede {
	font-weight: 700;
	line-height: 1.45;
}

.trec__desc {
	max-width: 34rem;
	line-height: 1.65;
}

.trec__desc strong {
	font-weight: 700;
}

/* --- Illustrazione ------------------------------------------------------ */

.trec__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp( 280px, 32vw, 460px );
}

/* Sopra i chicchi a schermo largo: il chicco in basso a destra passa dietro
   l'illustrazione, non davanti. */
.trec__art {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 640px;
	margin: 0;
}

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

/* Ancorati alla sezione, non alla griglia: uno in alto al centro sopra il
   titolo, uno in basso a destra. Sconfinano oltre il padding della sezione,
   che per questo non va mai messa in `overflow: hidden`. */
.trec__beans-top,
.trec__bean-br {
	position: absolute;
	z-index: 20;
	height: auto;
	margin: 0;
	pointer-events: none;
	user-select: none;
}

.trec__beans-top {
	top: clamp( 14px, 2.5vw, 40px );
	left: 50%;
	width: clamp( 96px, 11vw, 150px );
	transform: translateX( -50% );
}

.trec__bean-br {
	right: clamp( 16px, 4vw, 72px );
	bottom: clamp( 8px, 2.5vw, 40px );
	width: clamp( 70px, 7.5vw, 110px );
}

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

@media ( max-width: 900px ) {
	.trec__inner {
		grid-template-columns: 1fr;
		gap: clamp( 40px, 8vw, 64px );
	}

	.trec__copy {
		max-width: none;
	}

	.trec__visual {
		min-height: clamp( 240px, 60vw, 360px );
	}

	/* A colonna singola i due chicchi scendono entrambi in fondo alla sezione e
	   si dividono l'asse orizzontale: in alto al centro il primo starebbe sopra
	   al titolo, e in basso a destra si sovrapporrebbero fra loro. Passano
	   anche sotto l'illustrazione (z-index 1 contro il 20 del desktop). */
	.trec__beans-top {
		top: auto;
		bottom: clamp( 8px, 3vw, 24px );
		left: 30%;
		z-index: 1;
		width: clamp( 70px, 17vw, 104px );
		transform: translateX( -50% ) rotate( -10deg );
	}

	.trec__bean-br {
		right: auto;
		bottom: clamp( 8px, 3vw, 24px );
		left: 72%;
		z-index: 1;
		width: clamp( 70px, 16vw, 100px );
		transform: translateX( -50% ) rotate( 8deg );
	}
}