/**
 * Pilastri della qualità — tre colonne su crema, con chicchi flottanti.
 *
 * Il markup a blocchi porta struttura, contenuto, colori e scala tipografica
 * (tutti da preset). Qui resta lo strato che i supports non esprimono: la
 * griglia a tre colonne, la riserva in alto per i chicchi e l'ancoraggio dei
 * chicchi stessi, che sono l'unica parte davvero delicata di questa sezione.
 */

.pillars {
	position: relative;
	z-index: 1;
	padding-block: clamp( 80px, 9vw, 110px );
}

.pillars__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	align-items: start;
	gap: clamp( 32px, 5vw, 80px );
}

/* 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 e sfalsano le colonne. */
.wp-block-group.pillars__grid > * + * {
	margin-block-start: 0;
}

/* Anche la sezione ha bisogno del suo reset: il titolo per i soli lettori di
   schermo è il primo figlio, la griglia il secondo, e il blockGap le regalava
   24px in testa che nel riferimento non ci sono. Il titolo è fuori flusso,
   quindi quei pixel non si vedono come spazio fra due cose: spostano in giù
   tutta la sezione, chicchi compresi. */
.wp-block-group.pillars > * + * {
	margin-block-start: 0;
}

/* --- Colonna ---------------------------------------------------------- */

/* Il padding in alto è la riserva su cui i chicchi sconfinano: senza, si
   sovrapporrebbero all'icona invece di stare sopra la colonna. */
.pillars__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp( 18px, 2vw, 28px );
	padding-top: clamp( 80px, 10vw, 130px );
	text-align: center;
}

.wp-block-group.pillars__item > * + * {
	margin-block-start: 0;
}

.pillars__icon {
	display: grid;
	place-items: center;
	height: clamp( 56px, 5.5vw, 72px );
	margin: 0;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.pillars__icon img {
	width: auto;
	height: 100%;
}

.pillars__icon:hover {
	transform: scale( 1.06 );
	opacity: 0.85;
}

/* Il limite in caratteri non è decorativo: nel riferimento manda "Materia prima
   di qualità" su due righe, e senza di esso la prima colonna è più bassa delle
   altre due — con il chicco che ci è ancorato che sale di conseguenza. */
.pillars__title {
	max-width: 18ch;
	margin: 0;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.pillars__desc {
	max-width: 36ch;
	margin: 0;
	font-weight: 500;
	line-height: 1.65;
}

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

/* Ancorati alla colonna, non alla griglia: ognuno sconfina dal proprio angolo.
   `height: auto` e nessun aspect-ratio perché i tre file hanno proporzioni
   diverse e vanno rispettate. */
.pillars__bean {
	position: absolute;
	top: 0;
	width: clamp( 80px, 9vw, 120px );
	height: auto;
	margin: 0;
	pointer-events: none;
	user-select: none;
}

.pillars__bean--left {
	left: 0;
	transform: translate( -15%, -25% ) rotate( -12deg );
}

/* Il secondo non sta in alto: scende sotto la colonna. */
.pillars__bean--center {
	left: 50%;
	top: auto;
	bottom: 0;
	transform: translate( -50%, 130% ) rotate( 8deg );
}

/* Il terzo è una coppia di chicchi, quindi più largo degli altri due. */
.pillars__bean--right {
	right: 0;
	width: clamp( 120px, 13vw, 170px );
	transform: translate( 15%, -25% ) rotate( 8deg );
}

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

@media ( max-width: 900px ) {
	/* A colonna singola i chicchi vanno ai bordi e si alternano: sinistra,
	   destra, sinistra. Non sono centrati come si potrebbe supporre, e non
	   conservano né l'ancoraggio né la rotazione del desktop — il chicco
	   centrale in particolare torna in alto invece di scendere sotto. */
	.pillars {
		/* I chicchi sporgono dai lati: senza questo il documento guadagnerebbe
		   scroll orizzontale. `clip` e non `hidden` per non creare un contenitore
		   di scroll che romperebbe l'ancoraggio degli sticky in pagina. */
		overflow-x: clip;
	}

	.pillars__grid {
		grid-template-columns: 1fr;
		gap: clamp( 40px, 8vw, 60px );
	}

	.pillars__bean--left,
	.pillars__bean--center,
	.pillars__bean--right {
		top: 0;
		bottom: auto;
		z-index: 4;
		width: clamp( 72px, 17vw, 104px );
	}

	.pillars__bean--left {
		left: clamp( 8px, 3vw, 20px );
		right: auto;
		transform: translateY( 6% ) rotate( -14deg );
	}

	.pillars__bean--center {
		right: clamp( 8px, 3vw, 20px );
		left: auto;
		transform: translateY( 6% ) rotate( 12deg );
	}

	.pillars__bean--right {
		left: clamp( 8px, 3vw, 20px );
		right: auto;
		transform: translateY( 6% ) rotate( -14deg );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.pillars__icon {
		transition: none;
	}

	.pillars__icon:hover {
		transform: none;
	}
}