/*
 * GOYN — Ingredienti
 *
 * Fonte: src/components/Ingredients.jsx e le classi .grid-ing / .mosaic /
 * .tile-veil di src/styles.css del progetto React.
 *
 * ISOLAMENTO: nessun selettore globale. Tutto discende da `.goyn-ingredients`,
 * che sta dentro `.goyn-widget`.
 *
 * DAL TEMA, NON RISCRITTI: `.goyn-texture--petrol` (fondo, immagine inclusa nel
 * tema), `.goyn-veil` e `.goyn-veil--bottom` (velo delle didascalie),
 * `.goyn-photo` (ritaglio), `.goyn-zoom` (ingrandimento in hover),
 * `.goyn-link-sweep` + `.goyn-arrow`, `.goyn-line`, `.goyn-wrap`.
 *
 * DA reveal.css: `.is-armed` / `.is-in` e le tre entrate, tendina compresa —
 * `data-goyn-rise-wipe` è il `clip-path` che scopre i riquadri dal basso, ed è
 * condiviso da quando lo usa anche la fotografia del manifesto.
 *
 * DA parallax.js: `--goyn-parallax-p`, il progresso di scroll della sezione.
 *
 * ⚠️ Nessuna regola di base parte da `opacity: 0` o da un ritaglio.
 *
 * INDICE
 *   1. Radice e costanti locali
 *   2. Fondo: texture in parallasse e velo
 *   3. Le due colonne
 *   4. La colonna di testo
 *   5. Il mosaico e la griglia
 *   6. Il riquadro
 *   7. Entrate: le misure di questa sezione
 *   8. Responsive
 *   9. prefers-reduced-motion
 */

/* ============================================================
   1. Radice e costanti locali
   ============================================================ */

.goyn-ingredients {
	--goyn-ing-bg: var(--goyn-petrol-deep, #163e46);
	--goyn-ing-eyebrow: var(--goyn-peach, #e8c39f);
	--goyn-ing-title: var(--goyn-cream, #e9e5d9);
	--goyn-ing-text: var(--goyn-cream-72, rgba(233, 229, 217, 0.72));
	--goyn-ing-link: var(--goyn-peach, #e8c39f);

	--goyn-ing-tile-border: var(--goyn-gold-35, rgba(211, 171, 99, 0.35));
	--goyn-ing-tile-name: var(--goyn-peach, #e8c39f);
	--goyn-ing-tile-text: rgba(233, 229, 217, 0.78);

	--goyn-ing-veil-from: rgba(22, 62, 70, 0.62);
	--goyn-ing-veil-to: rgba(22, 62, 70, 0.88);
	--goyn-ing-texture-opacity: 0.3;
	--goyn-ing-texture-zoom: 1.16;
	--goyn-ing-texture-shift: 24%;

	--goyn-ing-pad-y: 120px;
	--goyn-ing-text-max: 390px;
	--goyn-ing-tiles-gap: 10px;
	--goyn-ing-mosaic-min: 460px;
	--goyn-ing-mosaic-max: 620px;
	--goyn-ing-grid-cols: 3;
	--goyn-ing-stagger: 80ms;

	/* Variabile di `.goyn-zoom` del tema: 1.09 è il valore dell'originale. */
	--goyn-zoom-scale: 1.09;

	/*
	 * Il progresso lo scrive parallax.js. 0.5 è il comportamento senza
	 * JavaScript: texture a metà corsa, cioè ferma al centro.
	 */
	--goyn-parallax-p: 0.5;

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

/* ============================================================
   2. Fondo: texture in parallasse e velo
   ------------------------------------------------------------
   L'originale: `scale: 1.16` sulla texture e un `y` da -12% a +12%.

   L'ingrandimento non è estetico, è ciò che rende possibile lo spostamento: una
   texture a scala 1 scoprirebbe il fondo in cima o in coda della corsa. Le due
   trasformazioni stanno quindi nella stessa dichiarazione, nell'ordine
   spostamento-poi-scala.

   ⚠️ La specificità ripete `.goyn-ingredients` per battere `.goyn-texture--cream`
      e simili del tema a pari specificità: i fogli dei widget sono stampati dopo
      quelli del tema (vedi style_deps() in class-assets.php), quindi a pareggio
      vince questo — ma solo se il pareggio c'è.
   ============================================================ */

.goyn-ingredients .goyn-ingredients__texture {
	opacity: var(--goyn-ing-texture-opacity);
	transform: scale(var(--goyn-ing-texture-zoom));
}

.goyn-ingredients--parallax .goyn-ingredients__texture {
	transform:
		translate3d(0, calc((var(--goyn-parallax-p) - 0.5) * var(--goyn-ing-texture-shift)), 0)
		scale(var(--goyn-ing-texture-zoom));
	will-change: transform;
}

.goyn-ingredients__veil {
	background-image: linear-gradient(180deg, var(--goyn-ing-veil-from), var(--goyn-ing-veil-to));
}

/* ============================================================
   3. Le due colonne
   ------------------------------------------------------------
   `.grid-ing` dell'originale: 0.72fr per il testo, 1.28fr per il mosaico,
   allineate al centro verticale, con una distanza fluida.
   ============================================================ */

.goyn-ingredients__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
	gap: clamp(30px, 4vw, 64px);
	align-items: center;
}

/* ============================================================
   4. La colonna di testo
   ============================================================ */

.goyn-ingredients__eyebrow {
	margin: 0;
	color: var(--goyn-ing-eyebrow);
}

.goyn-ingredients__title {
	margin: 16px 0 0;
	font-size: clamp(38px, 4.9vw, 70px);
	line-height: 0.9;
	color: var(--goyn-ing-title);
}

.goyn-ingredients__text {
	max-width: var(--goyn-ing-text-max);
	margin: 22px 0 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--goyn-ing-text);
}

.goyn-ingredients__actions {
	margin-top: 28px;
}

.goyn-ingredients__link {
	color: var(--goyn-ing-link);
	text-decoration: none;
}

/* ============================================================
   5. Il mosaico e la griglia
   ------------------------------------------------------------
   Il mosaico dell'originale: quattro colonne, due righe, due riquadri alti ai
   lati.

       'a b c d'
       'a e f d'

   Le aree sono assegnate per POSIZIONE (`--pos-1` … `--pos-6`) e non per una
   lettera scelta nel pannello: il cliente ordina i sei ingredienti, il disegno
   resta quello. Se le voci non sono sei il widget passa alla griglia già lato
   server (`prepare_layout()`), quindi qui non serve nessun ripiego.

   L'altezza è fluida come nell'originale, `clamp(460px, 50vw, 620px)`, con gli
   estremi portati a variabili perché sono due controlli.
   ============================================================ */

.goyn-ingredients__tiles {
	display: grid;
	gap: var(--goyn-ing-tiles-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.goyn-ingredients--mosaic .goyn-ingredients__tiles {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(2, minmax(0, 1fr));
	grid-template-areas:
		'a b c d'
		'a e f d';
	height: clamp(var(--goyn-ing-mosaic-min), 50vw, var(--goyn-ing-mosaic-max));
}

.goyn-ingredients--mosaic .goyn-ingredients__tile--pos-1 { grid-area: a; }
.goyn-ingredients--mosaic .goyn-ingredients__tile--pos-2 { grid-area: b; }
.goyn-ingredients--mosaic .goyn-ingredients__tile--pos-3 { grid-area: c; }
.goyn-ingredients--mosaic .goyn-ingredients__tile--pos-4 { grid-area: d; }
.goyn-ingredients--mosaic .goyn-ingredients__tile--pos-5 { grid-area: e; }
.goyn-ingredients--mosaic .goyn-ingredients__tile--pos-6 { grid-area: f; }

/*
 * La griglia a colonne uguali: nessuna altezza imposta, sono le proporzioni dei
 * riquadri a dettarla. `aspect-ratio` e non un'altezza in pixel, così le foto
 * non si deformano al variare della larghezza.
 */
.goyn-ingredients--grid .goyn-ingredients__tiles {
	grid-template-columns: repeat(var(--goyn-ing-grid-cols), minmax(0, 1fr));
}

.goyn-ingredients--grid .goyn-ingredients__tile {
	aspect-ratio: 4 / 3;
}

/* ============================================================
   6. Il riquadro
   ------------------------------------------------------------
   `position: relative` serve a tre figli in posizione assoluta: la foto del
   tema, il velo e la didascalia.
   ============================================================ */

.goyn-ingredients__tile {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--goyn-ing-tile-border);
}

/*
 * La didascalia sale di 4px in hover, come nell'originale. `transition` e non
 * un'animazione: deve tornare giù quando il mouse esce.
 *
 * `:focus-within` accanto a `:hover` non serve oggi — nel riquadro non c'è nulla
 * di focalizzabile — ma il giorno in cui il nome diventasse un link il
 * comportamento sarebbe già corretto.
 */
.goyn-ingredients__tile-copy {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 14px 16px 16px;
	transition: transform var(--goyn-dur, 0.5s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.goyn-ingredients__tile:hover .goyn-ingredients__tile-copy,
.goyn-ingredients__tile:focus-within .goyn-ingredients__tile-copy {
	transform: translateY(-4px);
}

.goyn-ingredients__tile-name {
	margin: 0;
	font-size: 16px;
	line-height: 1.1;
	color: var(--goyn-ing-tile-name);
}

.goyn-ingredients__tile-text {
	margin: 5px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--goyn-ing-tile-text);
}

/* Avvisi mostrati solo nell'editor. */
.goyn-ingredients__notice {
	margin: 0 0 12px;
	padding: 12px 14px;
	border: 1px dashed currentColor;
	border-radius: 4px;
	font-size: 12px;
	opacity: 0.75;
}

/* ============================================================
   7. Entrate: le misure di questa sezione
   ------------------------------------------------------------
   Tutto viene da reveal.css: il testo con `data-goyn-rise`, le righe del titolo
   con `data-goyn-rise-line`, i riquadri con `data-goyn-rise-wipe` — la tendina
   che li scopre dal basso, che è l'effetto dell'originale
   (`clipPath: 'inset(0 0 100% 0)'` → `'inset(0 0 0% 0)'`).

   Qui restano solo i valori: durate, sfasamenti e la cascata dei riquadri.

   I ritardi: sovratitolo 0, righe del titolo 0 + 90 per riga, paragrafo 150,
   collegamento 250 (i tre nel template), riquadri l'indice per il passo scelto.
   ============================================================ */

.goyn-ingredients [data-goyn-rise] {
	--goyn-rise-shift: 34px;
	--goyn-rise-dur: 0.9s;
}

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

.goyn-ingredients__tile {
	--goyn-rise-dur: 1s;
	--goyn-delay: calc(var(--goyn-ing-index, 0) * var(--goyn-ing-stagger));
}

/* ============================================================
   8. Responsive
   ------------------------------------------------------------
   Distanza fra i riquadri e colonne della griglia sono controlli responsive:
   le scrive Elementor. Qui il riflusso che l'editor non può esprimere.
   ============================================================ */

@media (max-width: 1080px) {
	/* Una colonna sola: il mosaico ha bisogno di tutta la larghezza, e il testo
	   a 0.72fr diventerebbe una colonna di poche parole per riga. */
	.goyn-ingredients__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

@media (max-width: 860px) {
	/*
	 * Il mosaico si riordina su due colonne, con il primo e l'ultimo riquadro a
	 * tutta larghezza:
	 *
	 *     'a a'
	 *     'b c'
	 *     'd e'
	 *     'f f'
	 *
	 * L'altezza fissa sparisce — su un telefono comprimerebbe sei riquadri in
	 * mezzo schermo — e la dettano le proporzioni: 4/3 per i piccoli, 16/10 per
	 * i due larghi.
	 */
	.goyn-ingredients--mosaic .goyn-ingredients__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-template-areas:
			'a a'
			'b c'
			'd e'
			'f f';
		height: auto;
	}

	.goyn-ingredients--mosaic .goyn-ingredients__tile {
		aspect-ratio: 4 / 3;
	}

	.goyn-ingredients--mosaic .goyn-ingredients__tile--pos-1,
	.goyn-ingredients--mosaic .goyn-ingredients__tile--pos-6 {
		aspect-ratio: 16 / 10;
	}

	/*
	 * Velo più coprente. Sui riquadri stretti la didascalia occupa più di metà
	 * dell'altezza: con il gradiente del desktop, che è trasparente fino al 28%,
	 * il testo chiaro finisce su una foto chiara e diventa illeggibile.
	 *
	 * La specificità ripete la classe della sezione per battere
	 * `.goyn-veil--bottom` del tema.
	 */
	.goyn-ingredients .goyn-ingredients__tile-veil {
		background-image: linear-gradient(
			180deg,
			rgba(22, 62, 70, 0.28),
			rgba(22, 62, 70, 0.8) 42%,
			rgba(22, 62, 70, 0.96)
		);
	}
}

/* ============================================================
   9. prefers-reduced-motion
   ------------------------------------------------------------
   Le entrate — tendina compresa — le annulla reveal.css, e il child theme
   azzera le durate dentro `.goyn-widget`. Qui restano gli hover e il
   parallasse.

   ⚠️ L'ingrandimento si annulla sulla TRASFORMAZIONE e non azzerando
      `--goyn-zoom-scale`: quella variabile la scrive anche il controllo del
      pannello, ed Elementor la stampa con la specificità dell'id del documento,
      che batte qualunque classe.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.goyn-ingredients .goyn-ingredients__tile:hover .goyn-photo img,
	.goyn-ingredients .goyn-ingredients__tile:focus-within .goyn-photo img {
		transform: none;
	}

	.goyn-ingredients__tile:hover .goyn-ingredients__tile-copy,
	.goyn-ingredients__tile:focus-within .goyn-ingredients__tile-copy {
		transform: none;
	}

	.goyn-ingredients--parallax .goyn-ingredients__texture {
		transform: scale(var(--goyn-ing-texture-zoom));
	}
}