/*
 * GOYN — Filosofia
 *
 * Fonte: src/components/Philosophy.jsx e le classi .grid-intro / .grid-pillars
 * di src/styles.css del progetto React.
 *
 * ISOLAMENTO: nessun selettore globale. Tutto discende da `.goyn-philosophy`,
 * che sta dentro `.goyn-widget`. La regola è dichiarata in testa a
 * assets/css/base.css del child theme.
 *
 * ⚠️ Nessuna regola di base parte da `opacity: 0` o da una trasformazione. Gli
 *    stati iniziali delle entrate stanno in reveal.css e valgono solo a scena
 *    armata: se lo script non c'è, non viene eseguito o va in errore, la
 *    sezione è completa e leggibile.
 *
 * INDICE
 *   1. Radice e costanti locali
 *   2. Fondo in parallasse
 *   3. Intestazione: griglia, sovratitolo, titolo
 *   4. Il paragrafo
 *   5. L'accensione parola per parola
 *   6. Entrate: le misure di questa sezione
 *   7. Il reticolo dei pilastri
 *   8. Il pilastro e il suo hover
 *   9. Responsive
 *  10. Editor di Elementor
 *  11. prefers-reduced-motion
 */

/* ============================================================
   1. Radice e costanti locali
   ------------------------------------------------------------
   Ogni valore che un controllo dell'editor può cambiare è una variabile con
   il suo ripiego: il widget scrive solo ciò che il cliente ha toccato, e il
   resto deve funzionare comunque.

   I ripieghi puntano ai token del child theme e, se manca anche quello, al
   colore letterale dell'originale: il plugin resta usabile con un altro tema.
   ============================================================ */

.goyn-philosophy {
	--goyn-ph-bg: var(--goyn-cream, #e9e5d9);
	--goyn-ph-eyebrow: var(--goyn-rust, #c0603c);
	--goyn-ph-title: var(--goyn-petrol, #1f535d);
	--goyn-ph-lead: var(--goyn-petrol-deep, #163e46);

	--goyn-ph-pillar-bg: var(--goyn-cream, #e9e5d9);
	--goyn-ph-pillar-bg-hover: var(--goyn-cream-2, #efebe0);
	--goyn-ph-grid: var(--goyn-petrol-16, rgba(31, 83, 93, 0.16));
	--goyn-ph-num: var(--goyn-peach, #e8c39f);
	--goyn-ph-num-stroke: var(--goyn-petrol, #1f535d);
	--goyn-ph-num-stroke-w: 1px;
	--goyn-ph-pillar-title: var(--goyn-petrol, #1f535d);
	--goyn-ph-pillar-text: var(--goyn-muted, #5e6e6e);

	--goyn-ph-pad-top: 110px;
	--goyn-ph-pad-bottom: 120px;
	--goyn-ph-intro-gap: 56px;
	--goyn-ph-intro-space: 60px;
	--goyn-ph-lead-max: 560px;

	--goyn-ph-cols: 4;
	--goyn-ph-stagger: 90ms;

	--goyn-ph-texture-opacity: 0.1;
	--goyn-ph-texture-shift: 16%;

	/*
	 * Il progresso scritto da parallax.js. Il valore qui è quello del caso
	 * "nessuno scrive": texture a metà corsa, cioè ferma al centro. Non è un
	 * valore di partenza dell'animazione — è il comportamento senza JavaScript.
	 *
	 * L'accensione del paragrafo ha il suo (`--goyn-words-p`), dichiarato in
	 * words.css assieme al resto del meccanismo condiviso.
	 */
	--goyn-parallax-p: 0.5;

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

/* ============================================================
   2. Fondo in parallasse
   ------------------------------------------------------------
   L'originale: `inset: -10% 0` e un `y` che va da -8% a +8%.

   Il margine verticale non è un numero fisso ma è ricavato dalla corsa: se il
   cliente porta il parallasse da 16% a 30%, un margine del 10% lascerebbe
   scoperto il fondo in cima o in coda. Metà corsa è il minimo che serve, più
   due punti di margine per gli arrotondamenti.

   Il movimento è UNA trasformazione con `calc()` sul progresso, non cinque
   valori ricalcolati in JavaScript: lo stesso schema del parallasse dell'hero.
   ============================================================ */

/*
 * Posizione, ritaglio e `pointer-events` arrivano da `.goyn-texture` del child
 * theme (shared.css), e l'immagine predefinita da `.goyn-texture--cream` —
 * texture-cream.webp è inclusa nel tema, quindi la sezione ha il suo fondo
 * anche senza che nessuno carichi niente in libreria. Il controllo immagine del
 * widget scrive `--goyn-texture`, che quella classe già usa come sorgente.
 *
 * Qui resta ciò che è specifico: l'opacità (0.14 del tema contro 0.10
 * dell'originale) e lo sconfinamento verticale che serve al parallasse.
 */
.goyn-philosophy__texture {
	/* `inset: 0` del tema va sovrascritto solo sull'asse verticale. */
	top: calc(var(--goyn-ph-texture-shift) / -2 - 2%);
	bottom: calc(var(--goyn-ph-texture-shift) / -2 - 2%);
	opacity: var(--goyn-ph-texture-opacity);
}

/* `--goyn-parallax-p` la scrive parallax.js e va da 0 a 1 mentre la sezione
   attraversa lo schermo: il -0.5 la centra, così a metà attraversamento la
   texture è nella sua posizione naturale e si sposta di mezza corsa per lato. */
.goyn-philosophy--parallax .goyn-philosophy__texture {
	transform: translate3d(0, calc((var(--goyn-parallax-p) - 0.5) * var(--goyn-ph-texture-shift)), 0);
	will-change: transform;
}

/* ============================================================
   3. Intestazione
   ------------------------------------------------------------
   Le due colonne dell'originale (.grid-intro): 0.9fr per il titolo, 1.1fr per
   il paragrafo, allineate in basso — il paragrafo finisce alla stessa altezza
   dell'ultima riga del titolo, che è ciò che tiene insieme la composizione.
   ============================================================ */

.goyn-philosophy__inner {
	position: relative;
}

.goyn-philosophy__intro {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: var(--goyn-ph-intro-gap);
	align-items: end;
	margin-bottom: var(--goyn-ph-intro-space);
}

.goyn-philosophy__eyebrow {
	margin: 0;
	color: var(--goyn-ph-eyebrow);
}

.goyn-philosophy__title {
	/* clamp e non un valore responsive: il titolo scala su ogni larghezza
	   intermedia, non a scatti sui tre breakpoint. Un controllo di tipografia
	   che imposti font-size lo sostituisce. */
	margin: 14px 0 0;
	font-size: clamp(40px, 5.2vw, 76px);
	line-height: 0.9;
	color: var(--goyn-ph-title);
}

/* ============================================================
   4. Il paragrafo
   ============================================================ */

.goyn-philosophy__lead {
	max-width: var(--goyn-ph-lead-max);
	margin: 0;
	font-size: clamp(19px, 1.95vw, 27px);
	line-height: 1.42;
	color: var(--goyn-ph-lead);
}

/* ============================================================
   5. L'accensione parola per parola
   ------------------------------------------------------------
   Il meccanismo è condiviso: words.css + words.js, con il contratto
   (`data-goyn-words` sul paragrafo, `--goyn-words-n`, `--goyn-word-i`,
   `--goyn-word-dim`) documentato in testa a words.js. Era nato qui; è uscito da
   questo foglio quando la routine della pagina prodotti ha chiesto lo stesso
   effetto.

   Qui non resta nulla: l'unica misura di questa sezione — quanto è spenta una
   parola non ancora raggiunta — è un controllo del pannello, che scrive
   `--goyn-word-dim` sulla radice.
   ============================================================ */

/* ============================================================
   6. Entrate al passaggio in vista
   ------------------------------------------------------------
   Il meccanismo è condiviso: reveal.css + reveal.js, con il contratto
   (`data-goyn-scene`, `data-goyn-rise`, `data-goyn-rise-line`, `--goyn-delay`)
   documentato in testa a reveal.css. Qui restano solo le misure di QUESTA
   sezione: quanto sale, quanto dura, e la cascata dei ritardi.

   I ritardi: il sovratitolo apre, le righe del titolo lo seguono a 90ms l'una
   dall'altra, i pilastri arrivano dopo — 120ms fissi (il tempo che il titolo
   impiega a salire) più l'indice per il passo scelto nel pannello. Senza quel
   valore fisso i pilastri partirebbero insieme al sovratitolo.
   ============================================================ */

/* L'originale parte 40px più in basso, non 24 come il valore condiviso. */
.goyn-philosophy [data-goyn-rise] {
	--goyn-rise-shift: 40px;
}

.goyn-philosophy__eyebrow {
	--goyn-rise-dur: 0.9s;
}

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

.goyn-philosophy__pillar {
	--goyn-rise-dur: 0.85s;
	--goyn-delay: calc(120ms + var(--goyn-ph-index, 0) * var(--goyn-ph-stagger));
}

/* ============================================================
   7. Il reticolo dei pilastri
   ------------------------------------------------------------
   Il filetto fra i riquadri è il FONDO della griglia che si vede attraverso un
   gap di 1px, più un bordo sul contenitore: un solo colore da cambiare e
   nessun bordo doppio fra due riquadri adiacenti. È la tecnica dell'originale.

   ⚠️ Il pilastro deve quindi avere un fondo opaco. Un pilastro trasparente
      farebbe comparire il colore del reticolo su tutta la sua area.
   ============================================================ */

.goyn-philosophy__pillars {
	display: grid;
	grid-template-columns: repeat(var(--goyn-ph-cols), minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--goyn-ph-grid);
	border: 1px solid var(--goyn-ph-grid);
}

/* ============================================================
   8. Il pilastro e il suo hover
   ------------------------------------------------------------
   Il fondo dell'hover SALE da sotto (da 101% a 0), non è una dissolvenza: il
   101 e non il 100 è dell'originale e serve a non lasciare una riga di un
   pixel visibile per l'arrotondamento del subpixel.

   `transition` e non un'animazione: deve tornare indietro quando il mouse
   esce, e un'animazione tornerebbe di scatto.
   ============================================================ */

.goyn-philosophy__pillar {
	position: relative;
	overflow: hidden;
	/* Il padding lo scrive il controllo Dimensioni; questo è il ripiego
	   dell'originale se il controllo non ha valore. */
	padding: 38px 30px 42px;
	background-color: var(--goyn-ph-pillar-bg);
}

.goyn-philosophy__fill {
	position: absolute;
	inset: 0;
	background-color: var(--goyn-ph-pillar-bg-hover);
	transform: translateY(101%);
	transition: transform 0.6s var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
	pointer-events: none;
}

/*
 * `:focus-within` accanto a `:hover`: se un giorno il pilastro conterrà un
 * link, chi naviga da tastiera vedrà lo stesso stato di chi ci passa il mouse.
 * Oggi non c'è nulla di focalizzabile e la regola non costa niente.
 */
.goyn-philosophy__pillar:hover .goyn-philosophy__fill,
.goyn-philosophy__pillar:focus-within .goyn-philosophy__fill {
	transform: translateY(0);
}

.goyn-philosophy__pillar-in {
	position: relative;
}

.goyn-philosophy__num {
	display: block;
	font-size: 46px;
	line-height: 1;
	color: var(--goyn-ph-num);
	/* Il contorno non ha equivalente standard, ma il riempimento resta
	   impostato: se non è supportato si vede il numero pieno, non un buco. */
	-webkit-text-stroke: var(--goyn-ph-num-stroke-w) var(--goyn-ph-num-stroke);
	/* `transform-origin` a sinistra: l'originale scala e sposta di 4px a
	   destra, e con l'origine al centro il numero uscirebbe dal padding. */
	transform-origin: left center;
	transition: transform 0.5s var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.goyn-philosophy__pillar:hover .goyn-philosophy__num,
.goyn-philosophy__pillar:focus-within .goyn-philosophy__num {
	transform: scale(1.1) translateX(4px);
}

.goyn-philosophy__pillar-title {
	margin: 16px 0 10px;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 3px;
	color: var(--goyn-ph-pillar-title);
}

.goyn-philosophy__pillar-text {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--goyn-ph-pillar-text);
}

/* Avviso mostrato solo nell'editor quando la sezione è vuota. */
.goyn-philosophy__notice {
	margin: 0;
	padding: 12px 14px;
	border: 1px dashed currentColor;
	border-radius: 4px;
	font-size: 12px;
	opacity: 0.75;
}

/* ============================================================
   9. Responsive
   ------------------------------------------------------------
   Breakpoint del progetto: 1080 / 860 / 560. Il numero di colonne dei pilastri
   NON è qui: è un controllo responsive (`--goyn-ph-cols`), quindi lo scrive
   Elementor nelle sue media query. Qui restano solo le regole che l'editor non
   può esprimere.
   ============================================================ */

@media (max-width: 860px) {
	/* Una colonna: allineare in basso non ha più senso — il paragrafo sta sotto
	   il titolo, non accanto. */
	.goyn-philosophy__intro {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	/* Su una colonna il limite di larghezza tarato sulla seconda colonna
	   stringerebbe il paragrafo a metà schermo. */
	.goyn-philosophy__lead {
		max-width: none;
	}
}

/* ============================================================
   10. Editor di Elementor
   ------------------------------------------------------------
   Le entrate se le spegne reveal.css da sé (sezione 4 di quel file), e il
   paragrafo words.css (che nell'editor non parte nemmeno). Qui resta la texture,
   che senza progresso di scroll va tenuta a metà corsa.
   ============================================================ */

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

/* ============================================================
   11. prefers-reduced-motion
   ------------------------------------------------------------
   Gli stati iniziali delle entrate li annulla reveal.css (sezione 5), il
   paragrafo words.css, e il child theme azzera le durate dentro `.goyn-widget`.
   Qui resta la sola animazione propria di questa sezione: la texture, che va
   ferma.

   parallax.js legge la stessa preferenza e non si iscrive allo scroll: questa
   regola serve al caso in cui la preferenza cambi a pagina già aperta, con la
   variabile dell'ultimo frame ancora scritta inline.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.goyn-philosophy--parallax .goyn-philosophy__texture {
		transform: none;
	}
}