/*
 * GOYN — Pagina Filosofia
 *
 * Fonte: `FiloHero`, `FiloManifesto`, `FiloPillars`, `FiloSteps` e `FiloPromise`
 * in src/components/PhilosophySections.jsx, con le classi `.filo-*` di
 * src/styles.css.
 *
 * Un foglio per le cinque sezioni della pagina, come per gli ingredienti e per
 * la scheda prodotto: condividono la testatina, la scala dei colori e i tre
 * fondi caldi, e nessuna si usa da sola.
 *
 * ⚠️ NON confondere con `philosophy.css`, che è la SEZIONE della home
 *    (`goyn_philosophy`): quattro pilastri su fondo petrol dentro la home. Qui
 *    c'è la pagina intera, e i suoi pilastri sono un'altra cosa — quattro
 *    principi numerati con l'icona in un cerchio.
 *
 * ⚠️ La sesta sezione — la banda di chiusura fotografica — NON è qui: è il
 *    widget condiviso `goyn_cta_band` con il suo `cta-band.css`, perché la
 *    stessa fascia serve anche a Contatti (`.ct-cta` dell'originale).
 *
 * ISOLAMENTO: nessun selettore globale. Prefissi `goyn-filo-hero`,
 * `goyn-filo-manifesto`, `goyn-filo-pillars`, `goyn-filo-steps`,
 * `goyn-filo-promise`.
 *
 * DAL TEMA: `.goyn-photo`, `.goyn-zoom`, `.goyn-line`, `.goyn-display`,
 * `.goyn-label`, `.goyn-eyebrow`, `.goyn-wrap`, `.goyn-veil--petrol`,
 * `.goyn-texture--petrol`, `.goyn-texture--cream`.
 *
 * DA reveal.css: `data-goyn-rise`, `data-goyn-rise-line`, `data-goyn-rise-wipe`.
 * DA parallax.js: `--goyn-parallax-p`.
 * DA count.js: nulla di CSS — il numero è testo, e il valore finale sta già nel
 * markup.
 *
 * INDICE
 *   1. Testata con le statistiche
 *   2. Manifesto
 *   3. Testatina condivisa fra pilastri e fasi
 *   4. I quattro pilastri
 *   5. Le tre fasi
 *   6. La promessa: cosa dentro, cosa fuori
 *   7. Entrate
 *   8. Responsive
 *   9. prefers-reduced-motion
 */

/* ============================================================
   1. Testata con le statistiche
   ============================================================ */

.goyn-filo-hero {
	--goyn-fh-bg: #f0e0cc;
	--goyn-fh-title: var(--goyn-cream, #e9e5d9);
	--goyn-fh-text: rgba(244, 241, 234, 0.9);
	/*
	 * I tre valori fluidi dell'originale — altezza minima e i due padding —
	 * restano `clamp()`: il controllo del pannello è il TETTO, cioè il valore su
	 * uno schermo grande, e il termine centrale resta scritto qui. Un valore
	 * fisso al posto del clamp cambierebbe la fascia su ogni finestra che non è
	 * quella di riferimento: a 900px di altezza l'originale dà 130px di padding
	 * in alto, non 180. Stessa forma della testata di pagina.
	 */
	--goyn-fh-min: 860px;
	--goyn-fh-pad-top: 180px;
	--goyn-fh-pad-bottom: 84px;
	--goyn-fh-text-max: 430px;
	--goyn-fh-run: 16%;

	/*
	 * Il progresso scritto da parallax.js. Il valore qui è quello del caso senza
	 * JavaScript: fotografia ferma in cima alla propria corsa, cioè esattamente
	 * come si vede al caricamento.
	 */
	--goyn-parallax-p: 0;

	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: clamp(520px, 52vw, var(--goyn-fh-min));
	padding: clamp(130px, 14vh, var(--goyn-fh-pad-top)) var(--goyn-pad)
		clamp(50px, 6vh, var(--goyn-fh-pad-bottom));
	background-color: var(--goyn-fh-bg);
}

/*
 * Il livello che scorre. `inset: 0` esatto, NON più alto della fascia — ed è una
 * differenza che si misura.
 *
 * ⚠️ Un livello più alto sembra prudente ma falsa la corsa: `translateY` in
 *    percentuale si risolve sull'altezza DELL'ELEMENTO, mentre un `inset`
 *    negativo in percentuale si risolve su quella del CONTENITORE. Allargando il
 *    livello del 16% per «non scoprire il bordo», la corsa diventa il 16% più
 *    lunga di quella dell'originale: misurato, a 400px di scorrimento la
 *    fotografia scendeva di 69,1px invece di 64.
 *
 *    E il bordo non si scopre comunque, perché questa fascia ha l'offset
 *    `start start | end start`: la striscia scoperta in cima è alta
 *    `corsa × progresso` (al massimo 16% dell'altezza) mentre il bordo alto
 *    dello schermo è già a `altezza × progresso` — sempre più in basso. La
 *    striscia resta quindi sopra la piega a ogni posizione. Vale per una testata
 *    in cima alla pagina, non per una fascia a metà: là il livello va allargato,
 *    e infatti quello del manifesto lo è.
 */
.goyn-filo-hero__shift {
	position: absolute;
	inset: 0;
	transform: translate3d(0, calc(var(--goyn-parallax-p) * var(--goyn-fh-run)), 0);
	will-change: transform;
}

/*
 * ⚠️ Discendente e non una classe sola: `.elementor img` e `.goyn-widget img`
 *    del tema sono (0,1,1) e batterebbero `.goyn-photo img`. Qui serve solo il
 *    punto di interesse — il resto lo fa già il tema.
 */
.goyn-filo-hero .goyn-photo img {
	object-position: var(--goyn-fh-focus, right center);
}

/*
 * Il velo della testata NON è `.goyn-veil--left` del tema: quello arriva a 0,9
 * sul bordo sinistro e qui il massimo è 0,62, con la coda che si spegne del
 * tutto al 76% invece di risalire. Sono due tarature diverse dello stesso
 * gesto, e questa vale solo qui.
 */
.goyn-filo-hero__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(
		90deg,
		rgba(12, 36, 41, 0.62) 0%,
		rgba(12, 36, 41, 0.42) 34%,
		rgba(12, 36, 41, 0.12) 58%,
		rgba(12, 36, 41, 0) 76%
	);
}

.goyn-filo-hero__copy {
	position: relative;
	z-index: 2;
	width: 100%;
}

.goyn-filo-hero__title {
	margin: 0;
	font-size: clamp(38px, 4.6vw, 74px);
	line-height: 0.94;
	color: var(--goyn-fh-title);
}

.goyn-filo-hero__text {
	max-width: var(--goyn-fh-text-max);
	margin: 26px 0 0;
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--goyn-fh-text);
}

.goyn-filo-hero__stats {
	display: flex;
	gap: clamp(20px, 2.4vw, 40px);
	margin-top: clamp(28px, 3vw, 44px);
}

.goyn-filo-hero__stat + .goyn-filo-hero__stat {
	padding-left: clamp(20px, 2.4vw, 40px);
	border-left: 1px solid rgba(244, 241, 234, 0.26);
}

.goyn-filo-hero__value {
	font-size: clamp(24px, 2.3vw, 34px);
	line-height: 1;
	color: var(--goyn-fh-title);
}

.goyn-filo-hero__label {
	margin-top: 8px;
	font-size: 9.5px;
	font-weight: 400;
	letter-spacing: 1.6px;
	color: rgba(244, 241, 234, 0.72);
}

/* ============================================================
   2. Manifesto
   ============================================================ */

.goyn-filo-manifesto {
	--goyn-fm-col-copy: 1fr;
	--goyn-fm-col-photo: 1fr;
	/* Tetto del clamp, come nella testata: l'originale è clamp(320px, 32vw, 470px). */
	--goyn-fm-photo-min: 470px;
	--goyn-fm-run: 6%;
	--goyn-fm-bg: var(--goyn-cream-2, #efebe0);
	--goyn-fm-eyebrow: var(--goyn-rust, #c0603c);
	--goyn-fm-title: var(--goyn-petrol, #1f535d);
	--goyn-fm-text: var(--goyn-ink, #1a2c30);

	/* Parallasse a due versi: a metà corsa la fotografia è a riposo. */
	--goyn-parallax-p: 0.5;

	display: grid;
	grid-template-columns: minmax(0, var(--goyn-fm-col-copy)) minmax(0, var(--goyn-fm-col-photo));
	align-items: stretch;
	background-color: var(--goyn-fm-bg);
}

.goyn-filo-manifesto__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/*
	 * Il padding sinistro tiene il testo sullo STESSO asse verticale del testo
	 * della testata, che vive dentro `.goyn-wrap` e quindi è centrato a 1360px.
	 * Da qui il `max()`: sotto i 1360 vale il margine di pagina, sopra la metà
	 * dello spazio avanzato.
	 */
	padding: clamp(48px, 5vw, 86px) clamp(26px, 3vw, 56px) clamp(48px, 5vw, 86px)
		max(var(--goyn-pad), calc((100vw - var(--goyn-wrap, 1360px)) / 2));
}

/*
 * ⚠️ `margin: 0` esplicito su ogni sovratitolo. Nell'originale è uno `<span>`
 *    dentro un `Rise`, qui è un `<p>` — e un paragrafo si porta dietro i 14,4px
 *    di margine inferiore del reset (0,9em su 16px). Misurato: la banda di
 *    chiusura veniva 7px più alta dell'originale. È la stessa riga che sta su
 *    `.goyn-ps__eyebrow` nelle sezioni della scheda prodotto.
 */
.goyn-filo-manifesto__eyebrow,
.goyn-filo-head__eyebrow,
.goyn-filo-promise__eyebrow {
	margin: 0;
}

.goyn-filo-manifesto__eyebrow {
	font-size: 11px;
	letter-spacing: 4px;
	color: var(--goyn-fm-eyebrow);
}

.goyn-filo-manifesto__title {
	margin: 16px 0 0;
	font-size: clamp(28px, 3.3vw, 52px);
	line-height: 0.96;
	color: var(--goyn-fm-title);
}

.goyn-filo-manifesto__p {
	margin: 26px 0 0;
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--goyn-fm-text);
}

.goyn-filo-manifesto__photo {
	position: relative;
	overflow: hidden;
	min-height: clamp(320px, 32vw, var(--goyn-fm-photo-min));
}

/*
 * ⚠️ Due livelli: la tendina d'entrata sta sul riquadro qui sopra, il parallasse
 *    su questo figlio. Un elemento con un'animazione di reveal.css non può
 *    ricevere altre trasformazioni — il perché è in testa a reveal.css.
 *
 * Il livello è più alto del riquadro (`inset: -8% 0`) così, spostandosi, non
 * scopre i bordi; il resto lo taglia l'`overflow` del riquadro.
 */
.goyn-filo-manifesto__shift {
	position: absolute;
	inset: -8% 0;
	transform: translate3d(0, calc((0.5 - var(--goyn-parallax-p)) * var(--goyn-fm-run) * 2), 0);
	will-change: transform;
}

/* ============================================================
   3. Testatina condivisa fra pilastri e fasi
   ------------------------------------------------------------
   `.filo-head` dell'originale: titolo a sinistra, paragrafo a destra allineato
   in basso. La usano due sezioni di questa pagina con colori diversi, quindi le
   regole stanno qui una volta e il colore lo mette la sezione.
   ============================================================ */

.goyn-filo-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 3vw, 56px);
	align-items: end;
}

.goyn-filo-head__eyebrow {
	font-size: 11px;
	letter-spacing: 4px;
}

.goyn-filo-head__title {
	margin: 16px 0 0;
	font-size: clamp(28px, 3.3vw, 52px);
	line-height: 0.96;
}

.goyn-filo-head__text {
	max-width: 480px;
	margin: 0;
	font-size: 14.5px;
	line-height: 1.8;
}

/* ============================================================
   4. I quattro pilastri
   ============================================================ */

.goyn-filo-pillars {
	--goyn-fp-count: 4;
	--goyn-fp-bg: var(--goyn-petrol-deep, #163e46);
	--goyn-fp-accent: var(--goyn-peach, #e8c39f);
	--goyn-fp-title: var(--goyn-cream, #e9e5d9);

	position: relative;
	overflow: hidden;
	padding: clamp(56px, 5.6vw, 92px) var(--goyn-pad);
	background-color: var(--goyn-fp-bg);
	color: var(--goyn-fp-title);
}

.goyn-filo-pillars__inner {
	position: relative;
}

.goyn-filo-pillars .goyn-filo-head__eyebrow {
	color: var(--goyn-fp-accent);
}

.goyn-filo-pillars .goyn-filo-head__text {
	color: rgba(233, 229, 217, 0.78);
}

/*
 * ⚠️ Il conteggio arriva dal template come `--goyn-fp-count` e le colonne si
 *    ricavano QUI: se il template scrivesse direttamente le colonne, essendo uno
 *    stile inline, nessun media query potrebbe più portarle a due. Errore già
 *    pagato sulle schede degli ingredienti.
 */
.goyn-filo-pillars__grid {
	display: grid;
	grid-template-columns: repeat(var(--goyn-fp-count), minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 42px);
	margin-top: clamp(38px, 4vw, 64px);
}

.goyn-filo-pillars__item {
	padding-left: clamp(14px, 1.6vw, 26px);
}

.goyn-filo-pillars__item:first-child {
	padding-left: 0;
}

.goyn-filo-pillars__item + .goyn-filo-pillars__item {
	border-left: 1px solid rgba(232, 195, 159, 0.22);
}

.goyn-filo-pillars__ico {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border: 1px solid rgba(232, 195, 159, 0.38);
	border-radius: 50%;
	color: var(--goyn-fp-accent);
}

.goyn-filo-pillars__num {
	margin-top: 22px;
	font-size: 22px;
	line-height: 1;
	color: var(--goyn-fp-title);
}

.goyn-filo-pillars__name {
	margin: 8px 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2.4px;
	color: var(--goyn-fp-title);
}

.goyn-filo-pillars__desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.75;
	color: rgba(233, 229, 217, 0.7);
}

/* ============================================================
   5. Le tre fasi
   ============================================================ */

.goyn-filo-steps {
	--goyn-fs-count: 3;
	--goyn-fs-bg: #f5f0e6;
	--goyn-fs-col-photo: 0.92fr;
	--goyn-fs-col-copy: 1.08fr;
	/* Tetto del clamp: l'originale è clamp(160px, 15vw, 210px). */
	--goyn-fs-min: 210px;
	--goyn-fs-card: var(--goyn-cream-2, #efebe0);
	--goyn-fs-title: var(--goyn-petrol, #1f535d);
	--goyn-fs-text: var(--goyn-ink, #1a2c30);

	padding: clamp(56px, 5.6vw, 92px) var(--goyn-pad);
	background-color: var(--goyn-fs-bg);
}

.goyn-filo-steps .goyn-filo-head__eyebrow {
	color: var(--goyn-rust, #c0603c);
}

.goyn-filo-steps .goyn-filo-head__title {
	color: var(--goyn-fs-title);
}

.goyn-filo-steps .goyn-filo-head__text {
	color: var(--goyn-fs-text);
}

.goyn-filo-steps__grid {
	display: grid;
	grid-template-columns: repeat(var(--goyn-fs-count), minmax(0, 1fr));
	gap: clamp(16px, 2vw, 30px);
	margin-top: clamp(34px, 3.6vw, 56px);
}

/*
 * ⚠️ `fr` non si può usare dentro `calc()`: l'unità viaggia dentro il valore
 *    della variabile (`0.92fr`), non nella dichiarazione. Con
 *    `calc(0.92 * 1fr)` la riga viene scartata per intero e la scheda torna a
 *    una colonna. Errore già pagato nel manifesto della home.
 */
.goyn-filo-steps__card {
	display: grid;
	grid-template-columns: minmax(0, var(--goyn-fs-col-photo)) minmax(0, var(--goyn-fs-col-copy));
	min-height: clamp(160px, 15vw, var(--goyn-fs-min));
	background-color: var(--goyn-fs-card);
}

.goyn-filo-steps__photo {
	position: relative;
	overflow: hidden;
	background-color: var(--goyn-cream, #e9e5d9);
}

.goyn-filo-steps__copy {
	display: flex;
	flex-direction: column;
	padding: clamp(16px, 1.6vw, 24px);
}

.goyn-filo-steps__phase {
	font-size: 9.5px;
	font-weight: 400;
	letter-spacing: 2px;
	color: var(--goyn-muted, #5e6e6e);
}

.goyn-filo-steps__title {
	margin: 8px 0 10px;
	font-size: clamp(17px, 1.6vw, 23px);
	line-height: 1;
	color: var(--goyn-fs-title);
}

.goyn-filo-steps__desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.75;
	color: var(--goyn-fs-text);
}

/* ============================================================
   6. La promessa: cosa dentro, cosa fuori
   ============================================================ */

.goyn-filo-promise {
	--goyn-fpr-bg: #f2e7da;
	--goyn-fpr-eyebrow: var(--goyn-rust, #c0603c);
	--goyn-fpr-title: var(--goyn-petrol, #1f535d);
	--goyn-fpr-text: var(--goyn-ink, #1a2c30);
	--goyn-fpr-item: var(--goyn-petrol-deep, #163e46);
	--goyn-fpr-in: var(--goyn-petrol, #1f535d);
	--goyn-fpr-out: rgba(31, 83, 93, 0.45);

	position: relative;
	overflow: hidden;
	padding: clamp(56px, 5.6vw, 92px) var(--goyn-pad);
	background-color: var(--goyn-fpr-bg);
}

.goyn-filo-promise__inner {
	position: relative;
}

.goyn-filo-promise__head {
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

.goyn-filo-promise__eyebrow {
	font-size: 11px;
	letter-spacing: 4px;
	color: var(--goyn-fpr-eyebrow);
}

.goyn-filo-promise__title {
	margin: 16px 0 0;
	font-size: clamp(28px, 3.3vw, 52px);
	line-height: 0.96;
	color: var(--goyn-fpr-title);
}

.goyn-filo-promise__text {
	max-width: 520px;
	margin: 18px auto 0;
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--goyn-fpr-text);
}

.goyn-filo-promise__lists {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 64px);
	max-width: 900px;
	margin: clamp(34px, 3.6vw, 56px) auto 0;
}

.goyn-filo-promise__list {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.goyn-filo-promise__item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--goyn-fpr-item);
}

.goyn-filo-promise__mark {
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border: 1px solid currentColor;
	border-radius: 50%;
}

/*
 * Spunta e croce hanno tratto 2,4 nell'originale, mentre il registro delle
 * icone disegna a 1,4. In CSS `stroke-width` batte l'attributo di presentazione
 * scritto dall'SVG, quindi si corregge qui invece di aggiungere un parametro
 * alla firma di `GOYN_Widgets_Icons::svg()` per due sole icone.
 */
.goyn-filo-promise__mark svg {
	stroke-width: 2.4;
}

.goyn-filo-promise__mark--in {
	color: var(--goyn-fpr-in);
}

.goyn-filo-promise__mark--out {
	color: var(--goyn-fpr-out);
}

/* ============================================================
   7. Entrate
   ------------------------------------------------------------
   Le cascate: ogni sezione esprime i propri ritardi con `--goyn-delay`, che è
   il contratto di reveal.css. Le due entrate PROPRIE di questa pagina — le
   statistiche della testata e le voci degli elenchi, che arrivano di lato —
   stanno qui e non in reveal.css: sono di questa pagina, e si agganciano allo
   stesso interruttore `.is-armed` / `.is-in`.
   ============================================================ */

/*
 * Le entrate di questa pagina usano la corsa e la durata del `Rise` predefinito
 * dell'originale — 34px in 0,9s — mentre reveal.css ha per ripiego 24px in
 * 0,85s, che è la taratura della home. Si dichiarano una volta sulle cinque
 * sezioni invece di ripeterle su ogni elemento.
 */
.goyn-filo-hero,
.goyn-filo-manifesto,
.goyn-filo-pillars,
.goyn-filo-steps,
.goyn-filo-promise {
	--goyn-rise-shift: 34px;
	--goyn-rise-dur: 0.9s;
}

/*
 * Le cascate che dipendono da una posizione nell'elenco si calcolano qui
 * dall'indice che il template scrive: un ritardo per voce scritto inline
 * sarebbe lo stesso numero ripetuto in quattro punti, e non si potrebbe più
 * cambiare da un posto solo.
 */
.goyn-filo-hero__stat {
	/* 0,35s prima della prima, poi 0,09s per ognuna: i due valori dell'originale. */
	--goyn-delay: calc(350ms + var(--goyn-fh-index, 0) * 90ms);
}

.goyn-filo-pillars__item {
	--goyn-rise-shift: 26px;
	--goyn-rise-dur: 0.75s;
	--goyn-delay: calc(var(--goyn-fp-index, 0) * 90ms);
}

.goyn-filo-steps__card {
	--goyn-rise-shift: 30px;
	--goyn-rise-dur: 0.8s;
	--goyn-delay: calc(var(--goyn-fs-index, 0) * 100ms);
}

.goyn-filo-promise__item {
	--goyn-delay: calc(var(--goyn-fpr-index, 0) * 70ms);
}

/* Le righe dei titoli: 90ms fra una e l'altra, lo `stagger` predefinito di
   `SplitLines`. La testata ne ha 100, e lo dichiara il suo template. */
.goyn-filo-manifesto__title .goyn-line,
.goyn-filo-head__title .goyn-line,
.goyn-filo-promise__title .goyn-line {
	--goyn-delay: calc(var(--goyn-filo-line, 0) * 90ms);
}

/* --- statistiche della testata: salgono con dissolvenza --- */

[data-goyn-scene].is-armed .goyn-filo-hero__stat {
	opacity: 0;
	transform: translateY(16px);
}

[data-goyn-scene].is-armed.is-in .goyn-filo-hero__stat {
	animation: goyn-filo-stat 0.6s var(--goyn-ease) var(--goyn-delay, 0ms) both;
}

@keyframes goyn-filo-stat {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* --- voci degli elenchi: entrano di lato, ognuna dal proprio bordo --- */

[data-goyn-scene].is-armed .goyn-filo-promise__item {
	opacity: 0;
	transform: translateX(var(--goyn-fpr-shift, -14px));
}

[data-goyn-scene].is-armed.is-in .goyn-filo-promise__item {
	animation: goyn-filo-item 0.55s var(--goyn-ease) var(--goyn-delay, 0ms) both;
}

.goyn-filo-promise__list--out .goyn-filo-promise__item {
	--goyn-fpr-shift: 14px;
}

@keyframes goyn-filo-item {
	from {
		opacity: 0;
		transform: translateX(var(--goyn-fpr-shift, -14px));
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* ============================================================
   8. Responsive
   ------------------------------------------------------------
   ⚠️ Dal più largo al più stretto: fra due media query di pari specificità
      decide l'ordine nel file, non la larghezza. Il blocco ≤560 messo prima
      dell'860 perderebbe.
   ============================================================ */

@media (max-width: 860px) {
	/*
	 * I capi a mano dei paragrafi compongono le righe sul desktop; qui
	 * spezzerebbero il testo a metà. Lo spazio fra le parole nel markup c'è
	 * comunque, quindi sparendo non incollano niente. Soglia dell'originale, la
	 * stessa della pagina Ingredienti.
	 */
	.goyn-filo-br {
		display: none;
	}

	.goyn-filo-hero {
		min-height: 78vh;
		padding: 116px var(--goyn-pad) 48px;
	}

	/*
	 * Le tre statistiche vanno a capo. Il filetto verticale resta su ogni voce
	 * che non è la prima della FILA: a capo il bordo sinistro tornerebbe utile
	 * come separatore, e a differenza dell'originale qui non c'è modo di sapere
	 * dove cade il capo — si tiene il comportamento dell'originale.
	 */
	.goyn-filo-hero__stats {
		flex-wrap: wrap;
		gap: 18px;
	}

	.goyn-filo-hero__stat + .goyn-filo-hero__stat {
		padding-left: 18px;
	}

	.goyn-filo-manifesto {
		grid-template-columns: minmax(0, 1fr);
	}

	.goyn-filo-manifesto__copy {
		padding: 44px var(--goyn-pad) 50px;
	}

	.goyn-filo-manifesto__photo {
		min-height: 44vh;
	}

	.goyn-filo-head {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
		align-items: start;
	}

	.goyn-filo-pillars__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 20px;
	}

	.goyn-filo-pillars__item,
	.goyn-filo-pillars__item:first-child {
		padding-left: 0;
	}

	.goyn-filo-pillars__item + .goyn-filo-pillars__item {
		border-left: none;
	}

	.goyn-filo-steps__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.goyn-filo-steps__card {
		min-height: 150px;
	}

	.goyn-filo-promise__lists {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}

@media (max-width: 560px) {
	/*
	 * La scheda della fase perde la colonna: su ~150px di larghezza il testo
	 * scenderebbe a righe di tre parole. La fotografia va sopra, panoramica.
	 */
	.goyn-filo-steps__card {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
	}

	.goyn-filo-steps__photo {
		aspect-ratio: 16 / 9;
	}
}

/* ============================================================
   9. prefers-reduced-motion
   ------------------------------------------------------------
   ⚠️ Si annulla la PROPRIETÀ FINALE, non la variabile del controllo: Elementor
      stampa le variabili su un selettore con l'id del documento, che batte
      qualunque classe. Azzerare `--goyn-fh-run` qui non avrebbe effetto.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.goyn-filo-hero__shift,
	.goyn-filo-manifesto__shift {
		transform: none;
	}

	[data-goyn-scene].is-armed .goyn-filo-hero__stat,
	[data-goyn-scene].is-armed .goyn-filo-promise__item {
		opacity: 1;
		transform: none;
	}

	[data-goyn-scene].is-armed.is-in .goyn-filo-hero__stat,
	[data-goyn-scene].is-armed.is-in .goyn-filo-promise__item {
		animation: none;
	}
}