/*
 * GOYN — Pagina Ingredienti
 *
 * Fonte: `IngHero`, `IngRows`, `IngChain` e `IngCards` in
 * src/components/IngredientsSections.jsx, con le classi `.ing-*` di
 * src/styles.css.
 *
 * Un foglio per le quattro sezioni della pagina, come per le sezioni della scheda
 * prodotto: condividono la scala dei colori e nessuna si usa da sola.
 *
 * ⚠️ NON confondere con `ingredients.css`, che è il MOSAICO della home
 *    (`goyn_ingredients`). Due sezioni diverse sullo stesso argomento: quella è
 *    un riquadro di sei foto, questa è la pagina intera.
 *
 * ISOLAMENTO: nessun selettore globale. Prefissi `goyn-ing-hero`,
 * `goyn-ing-rows`, `goyn-ing-chain`, `goyn-ing-cards`.
 *
 * DAL TEMA: `.goyn-photo`, `.goyn-zoom`, `.goyn-btn`, `.goyn-line`,
 * `.goyn-display`, `.goyn-label`, `.goyn-accent`, `.goyn-wrap`,
 * `.goyn-texture--petrol`.
 *
 * DA reveal.css: `data-goyn-rise`, `data-goyn-rise-line`, `data-goyn-rise-wipe`.
 * DA parallax.js: `--goyn-parallax-p`.
 *
 * INDICE
 *   1. Testata
 *   2. Righe degli ingredienti
 *   3. Catena degli attivi
 *   4. Schede beneficio
 *   5. Entrate
 *   6. Responsive
 *   7. Editor di Elementor
 *   8. prefers-reduced-motion
 */

/* ============================================================
   1. Testata
   ============================================================ */

.goyn-ing-hero {
	--goyn-ih-bg: #f2e7dc;
	--goyn-ih-title: var(--goyn-petrol, #1f535d);
	--goyn-ih-text: var(--goyn-petrol-deep, #163e46);
	--goyn-ih-stroke: 1.5px;
	--goyn-ih-focus: 82% 94%;
	--goyn-ih-min: 660px;
	--goyn-ih-pad-top: 170px;
	--goyn-ih-text-max: 380px;
	--goyn-ih-run: 16%;

	/*
	 * Il progresso scritto da parallax.js. Il valore qui è quello del caso
	 * "nessuno scrive": fotografia in cima alla corsa e testo pienamente visibile.
	 * Non è uno stato di partenza — è il comportamento senza JavaScript.
	 */
	--goyn-parallax-p: 0;

	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(420px, 46vw, var(--goyn-ih-min));
	overflow: hidden;
	padding: clamp(120px, 13vh, var(--goyn-ih-pad-top)) var(--goyn-pad, clamp(22px, 5vw, 80px))
		clamp(50px, 6vh, 84px);
	background-color: var(--goyn-ih-bg);
}

/*
 * Il livello che scorre: più alto della fascia della corsa, così scendendo non
 * scopre il bordo in alto.
 */
.goyn-ing-hero__shift {
	position: absolute;
	inset: calc(var(--goyn-ih-run) * -1) 0 0;
	transform: translateY(calc(var(--goyn-parallax-p) * var(--goyn-ih-run)));
}

.goyn-ing-hero__shift .goyn-photo {
	position: absolute;
	inset: 0;
}

/*
 * ⚠️ Regola discendente: `.goyn-widget img { height: auto }` del tema e
 *    `.elementor img` sono (0,1,1) e batterebbero una classe sola.
 */
.goyn-ing-hero .goyn-ing-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--goyn-ih-focus);
}

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

/*
 * Il testo svanisce mentre la fascia esce. `1 - p * 1.18` perché nell'originale
 * l'opacità arriva a zero all'85% della corsa, non alla fine.
 */
.goyn-ing-hero--fade .goyn-ing-hero__copy {
	opacity: clamp(0, calc(1 - var(--goyn-parallax-p) * 1.18), 1);
}

.goyn-ing-hero .goyn-ing-hero__title {
	margin: 0;
	/* Il carattere è dichiarato: il Kit stampa `.elementor-kit-5 h1`, che ha
	   specificità (0,1,1) e batterebbe `.goyn-display`. */
	font-family: var(--goyn-font-display);
	font-size: clamp(38px, 4.8vw, 78px);
	line-height: 0.92;
	color: var(--goyn-ih-title);
}

/*
 * La riga vuota col solo contorno. `-webkit-text-stroke` non ha un equivalente
 * standard con lo stesso supporto: dove manca, il ripiego è il testo pieno —
 * leggibile, solo meno scenografico.
 */
.goyn-ing-hero__outline {
	color: transparent;
	-webkit-text-stroke: var(--goyn-ih-stroke) var(--goyn-ih-title);
}

.goyn-ing-hero__text {
	max-width: var(--goyn-ih-text-max);
	margin: 26px 0 0;
	font-size: 15px;
	line-height: 1.75;
	color: var(--goyn-ih-text);
}

.goyn-ing-hero__btn {
	margin-top: 26px;
}

/* ============================================================
   2. Righe degli ingredienti
   ------------------------------------------------------------
   Fotografia e testo si scambiano di lato a ogni riga, e il fondo alterna due
   tonalità: è ciò che separa una riga dall'altra senza filetti.
   ============================================================ */

.goyn-ing-rows {
	--goyn-ir-bg: var(--goyn-cream-2, #efebe0);
	--goyn-ir-bg-alt: #f3eee4;
	--goyn-ir-title: var(--goyn-petrol, #1f535d);
	--goyn-ir-claim: var(--goyn-rust, #c0603c);
	--goyn-ir-text: var(--goyn-muted, #5e6e6e);
	--goyn-ir-spec: var(--goyn-petrol, #1f535d);
	--goyn-ir-icon: var(--goyn-rust, #c0603c);
	--goyn-ir-photo-min: 300px;
	--goyn-ir-text-max: 330px;
	--goyn-ir-run: 6%;
}

.goyn-ing-rows__row {
	--goyn-parallax-p: 0.5;

	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	background-color: var(--goyn-ir-bg);
}

.goyn-ing-rows__row:nth-child(even) {
	background-color: var(--goyn-ir-bg-alt);
}

/*
 * `order: 2` sposta la fotografia a destra. Non si scambiano le colonne della
 * griglia: l'ordine del DOM resta fotografia-testo, che è l'ordine in cui va
 * letto.
 */
.goyn-ing-rows__row.is-flip .goyn-ing-rows__photo {
	order: 2;
}

.goyn-ing-rows__photo {
	position: relative;
	min-height: clamp(200px, 21vw, var(--goyn-ir-photo-min));
	overflow: hidden;
	background-color: var(--goyn-cream, #e9e5d9);
}

/*
 * ⚠️ La trasformazione sta QUI e non sul genitore, che ha la tendina d'entrata:
 *    un'animazione con `fill: both` lascia scritta la propria `transform` e batte
 *    qualunque dichiarazione normale. Vedi reveal.css.
 */
.goyn-ing-rows__shift {
	position: absolute;
	inset: calc(var(--goyn-ir-run) * -1) 0;
	transform: translateY(calc((0.5 - var(--goyn-parallax-p)) * var(--goyn-ir-run) * 2));
}

.goyn-ing-rows__shift .goyn-photo {
	position: absolute;
	inset: 0;
}

.goyn-ing-rows .goyn-ing-rows__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.goyn-ing-rows__body {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(18px, 2.4vw, 42px);
	align-items: center;
	padding: clamp(28px, 3vw, 46px) clamp(24px, 3vw, 54px);
}

.goyn-ing-rows .goyn-ing-rows__title {
	margin: 0;
	font-family: var(--goyn-font-display);
	font-size: clamp(24px, 2.4vw, 36px);
	line-height: 1;
	color: var(--goyn-ir-title);
}

.goyn-ing-rows__claim {
	margin: 12px 0 0;
	font-size: 16px;
	color: var(--goyn-ir-claim);
}

.goyn-ing-rows__text {
	max-width: var(--goyn-ir-text-max);
	margin: 12px 0 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--goyn-ir-text);
}

.goyn-ing-rows__specs {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.goyn-ing-rows__spec {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(31, 83, 93, 0.14);
	border-bottom-color: color-mix(in srgb, var(--goyn-ir-spec) 14%, transparent);
}

/* L'ultima non ha filetto: chiuderebbe un elenco che è già finito. */
.goyn-ing-rows__spec:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.goyn-ing-rows__spec-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	color: var(--goyn-ir-icon);
	border: 1px solid rgba(184, 92, 56, 0.35);
	border-color: color-mix(in srgb, var(--goyn-ir-icon) 35%, transparent);
	border-radius: 50%;
}

.goyn-ing-rows__spec-label {
	display: block;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 1.6px;
	color: var(--goyn-ir-spec);
}

.goyn-ing-rows__spec-sub {
	display: block;
	margin-top: 3px;
	font-size: 10.5px;
	letter-spacing: 1.4px;
	color: var(--goyn-ir-text);
}

/* ============================================================
   3. Catena degli attivi
   ============================================================ */

.goyn-ing-chain {
	--goyn-ic-bg: var(--goyn-petrol-abyss, #0c2429);
	--goyn-ic-title: var(--goyn-cream, #e9e5d9);
	--goyn-ic-icon: var(--goyn-peach, #e8c39f);
	--goyn-ic-veil: #0c2429;
	--goyn-ic-texture-opacity: 0.35;

	/* Il diametro del cerchio e lo spazio fra due nodi: servono anche alla
	   posizione della freccia, che sta a metà strada fra due centri. */
	--goyn-ic-ico: clamp(40px, 3.6vw, 54px);
	--goyn-ic-gap: 6px;

	position: relative;
	overflow: hidden;
	padding: clamp(34px, 3.4vw, 54px) var(--goyn-pad, clamp(22px, 5vw, 80px));
	color: var(--goyn-ic-title);
	background-color: var(--goyn-ic-bg);
}

.goyn-ing-chain .goyn-ing-chain__texture {
	opacity: var(--goyn-ic-texture-opacity);
}

/*
 * ⚠️ Il valore in `rgba()` precede il `color-mix()`: su un browser che non lo
 *    supporta la dichiarazione viene scartata e il velo sparirebbe, lasciando le
 *    etichette sulla texture nuda.
 */
.goyn-ing-chain__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(180deg, rgba(12, 36, 41, 0.9), rgba(12, 36, 41, 0.82));
	background-image: linear-gradient(
		180deg,
		color-mix(in srgb, var(--goyn-ic-veil) 90%, transparent),
		color-mix(in srgb, var(--goyn-ic-veil) 82%, transparent)
	);
}

.goyn-ing-chain__inner {
	position: relative;
}

.goyn-ing-chain__title {
	margin: 0 0 clamp(22px, 2.4vw, 34px);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 3.4px;
	text-align: center;
	color: var(--goyn-ic-title);
}

/*
 * Una fila che scorre in orizzontale quando non c'è spazio. `overflow-x: auto`
 * e non `wrap`: le frecce puntano al nodo accanto, e andando a capo punterebbero
 * nel vuoto. Sotto gli 860px diventa una griglia e le frecce si spengono.
 */
.goyn-ing-chain__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--goyn-ic-gap);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
}

.goyn-ing-chain__node {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	min-width: 74px;
	text-align: center;
}

.goyn-ing-chain__ico {
	display: grid;
	place-items: center;
	width: var(--goyn-ic-ico);
	aspect-ratio: 1;
	color: var(--goyn-ic-icon);
	border: 1px solid rgba(232, 195, 159, 0.4);
	border-color: color-mix(in srgb, var(--goyn-ic-icon) 40%, transparent);
	border-radius: 50%;
}

.goyn-ing-chain__label {
	margin-top: 10px;
	font-size: 9.5px;
	line-height: 1.4;
	letter-spacing: 1.4px;
	color: rgba(233, 229, 217, 0.82);
	color: color-mix(in srgb, var(--goyn-ic-title) 82%, transparent);
}

/* A metà strada fra il centro di questo cerchio e quello del successivo. */
.goyn-ing-chain__arrow {
	position: absolute;
	top: calc(var(--goyn-ic-ico) / 2);
	left: calc(100% + var(--goyn-ic-gap) / 2);
	font-size: 13px;
	line-height: 1;
	color: rgba(232, 195, 159, 0.5);
	color: color-mix(in srgb, var(--goyn-ic-icon) 50%, transparent);
	translate: -50% -50%;
}

/* ============================================================
   4. Schede beneficio
   ------------------------------------------------------------
   Il filetto fra le schede è il fondo che si vede attraverso un `gap` di un
   pixel: un bordo darebbe due linee dove le schede si toccano.
   ============================================================ */

.goyn-ing-cards {
	--goyn-ik-bg: var(--goyn-cream-2, #efebe0);
	--goyn-ik-title: var(--goyn-petrol, #1f535d);
	--goyn-ik-text: var(--goyn-muted, #5e6e6e);
	--goyn-ik-rule: rgba(31, 83, 93, 0.12);

	/*
	 * ⚠️ Il template scrive `--goyn-ik-count` INLINE (quante schede sono), e le
	 *    colonne sono una variabile a parte. Scrivere direttamente
	 *    `--goyn-ik-cols` inline sembrava più semplice e non funzionava: uno stile
	 *    inline batte qualunque foglio, quindi il media query non riusciva a
	 *    portarle a una colonna. Misurato: a 560px restavano tre.
	 */
	--goyn-ik-cols: var(--goyn-ik-count, 3);
	--goyn-ik-min: 200px;
	--goyn-zoom-scale: 1.06;

	display: grid;
	grid-template-columns: repeat(var(--goyn-ik-cols), minmax(0, 1fr));
	gap: 1px;
	background-color: var(--goyn-ik-rule);
}

.goyn-ing-cards__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;
	min-height: clamp(150px, 14vw, var(--goyn-ik-min));
	background-color: var(--goyn-ik-bg);
}

.goyn-ing-cards__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(20px, 2vw, 30px);
}

.goyn-ing-cards .goyn-ing-cards__title {
	margin: 0;
	font-family: var(--goyn-font-display);
	font-size: clamp(20px, 1.9vw, 28px);
	line-height: 1;
	color: var(--goyn-ik-title);
}

.goyn-ing-cards__list {
	display: grid;
	gap: 3px;
	margin: 12px 0 0;
	padding: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--goyn-ik-text);
	list-style: none;
}

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

.goyn-ing-cards__photo .goyn-photo {
	position: absolute;
	inset: 0;
}

.goyn-ing-cards .goyn-ing-cards__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ============================================================
   5. Entrate
   ------------------------------------------------------------
   Il meccanismo è condiviso (reveal.css); qui i tempi dell'originale.
   ============================================================ */

.goyn-ing-hero [data-goyn-rise],
.goyn-ing-rows [data-goyn-rise],
.goyn-ing-chain [data-goyn-rise],
.goyn-ing-cards [data-goyn-rise] {
	--goyn-rise-shift: 18px;
	--goyn-rise-dur: 0.7s;
}

.goyn-ing-hero .goyn-line > span[data-goyn-rise-line] {
	--goyn-rise-dur: 1s;
	--goyn-delay: calc(var(--goyn-ih-line, 0) * 100ms);
}

.goyn-ing-rows .goyn-line > span[data-goyn-rise-line] {
	--goyn-rise-dur: 1s;
}

.goyn-ing-rows__photo[data-goyn-rise-wipe] {
	--goyn-rise-dur: 0.9s;
}

.goyn-ing-rows .goyn-ing-rows__spec {
	--goyn-rise-shift: 16px;
	--goyn-rise-dur: 0.6s;
	--goyn-delay: calc(var(--goyn-ir-index, 0) * 80ms);
}

.goyn-ing-chain .goyn-ing-chain__node {
	--goyn-rise-shift: 14px;
	--goyn-rise-dur: 0.5s;
	--goyn-delay: calc(var(--goyn-ic-index, 0) * 50ms);
}

.goyn-ing-cards .goyn-ing-cards__card {
	--goyn-rise-shift: 26px;
	--goyn-delay: calc(var(--goyn-ik-index, 0) * 100ms);
}

/* ============================================================
   6. Responsive
   ============================================================ */

@media (max-width: 860px) {
	/*
	 * I capi a mano del paragrafo servono a comporre le righe sul desktop; qui
	 * spezzerebbero il testo a metà. Nel markup lo spazio fra le parole c'è
	 * comunque, quindi sparendo non incollano niente. Soglia dell'originale.
	 */
	.goyn-ing-hero__br {
		display: none;
	}

	.goyn-ing-hero {
		--goyn-ih-min: 0px;

		min-height: 0;
		padding: 120px var(--goyn-pad, clamp(22px, 5vw, 80px)) 54px;
	}

	/* Una colonna: la fotografia sopra, il testo sotto. */
	.goyn-ing-rows__row {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Senza colonne lo scambio di lato non ha più senso. */
	.goyn-ing-rows__row.is-flip .goyn-ing-rows__photo {
		order: 0;
	}

	.goyn-ing-rows__photo {
		min-height: 200px;
	}

	.goyn-ing-rows__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
		padding: 26px var(--goyn-pad, clamp(22px, 5vw, 80px)) 32px;
	}

	/*
	 * La catena era una striscia scorrevole: senza un appiglio visivo sembrava
	 * avere solo i primi tre nodi. Qui diventa una griglia che li mostra tutti, e
	 * le frecce — che puntavano al nodo accanto — spariscono.
	 */
	.goyn-ing-chain__row {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 26px 10px;
		overflow-x: visible;
	}

	.goyn-ing-chain__node {
		min-width: 0;
	}

	.goyn-ing-chain__arrow {
		display: none;
	}

	.goyn-ing-cards {
		--goyn-ik-cols: 1;
	}
}

@media (max-width: 560px) {
	/* Tre nodi per riga: a 4 le etichette si spezzavano su tre righe. */
	.goyn-ing-chain__row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/*
	 * La scheda diventa una colonna con la FOTOGRAFIA SOPRA: le aree nominate
	 * scambiano l'ordine visivo senza toccare quello del documento, dove il titolo
	 * viene prima della sua immagine.
	 */
	.goyn-ing-cards__card {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: 'photo' 'copy';
		min-height: 0;
	}

	.goyn-ing-cards__copy {
		grid-area: copy;
	}

	.goyn-ing-cards__photo {
		grid-area: photo;
		aspect-ratio: 16 / 9;
	}
}

/* ============================================================
   7. Editor di Elementor
   ------------------------------------------------------------
   Le entrate se le spegne reveal.css. Qui restano i due progressi di scroll, che
   nell'editor nessuno scrive: la fotografia della testata va a inizio corsa e il
   testo pienamente visibile, le righe a metà corsa.
   ============================================================ */

.elementor-editor-active .goyn-ing-hero,
.elementor-editor-preview .goyn-ing-hero {
	--goyn-parallax-p: 0;
}

.elementor-editor-active .goyn-ing-rows__row,
.elementor-editor-preview .goyn-ing-rows__row {
	--goyn-parallax-p: 0.5;
}

/* ============================================================
   8. prefers-reduced-motion
   ------------------------------------------------------------
   parallax.js legge la stessa preferenza e non si iscrive allo scroll: queste
   regole servono al caso in cui la preferenza cambi a pagina già aperta, con le
   variabili dell'ultimo frame ancora scritte inline.
   ============================================================ */

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

	/* Il testo della testata va letto: non si fa svanire. */
	.goyn-ing-hero--fade .goyn-ing-hero__copy {
		opacity: 1;
	}

	.goyn-ing-cards .goyn-zoom:hover .goyn-photo img {
		transform: none;
	}
}