/*
 * GOYN — Routine
 *
 * Fonte: src/components/Routine.jsx e la classe `.grid-routine` di
 * src/styles.css del progetto React. Nell'originale quasi tutto è `style={{}}`
 * inline; qui ogni valore che un controllo può cambiare è una variabile.
 *
 * ISOLAMENTO: nessun selettore globale. Tutto discende da `.goyn-routine`.
 *
 * DAL TEMA, NON RISCRITTI: `.goyn-texture--petrol` (con l'immagine inclusa),
 * `.goyn-photo` (ritaglio), `.goyn-btn` + `--ghost`, `.goyn-line`,
 * `.goyn-eyebrow`, `.goyn-display`, `.goyn-label`, `.goyn-accent`, `.goyn-word`.
 *
 * DA reveal.css: `data-goyn-rise`, `data-goyn-rise-line`, `data-goyn-rise-wipe`.
 * DA words.css:  l'opacità della singola parola.
 * DA parallax.js: `--goyn-parallax-p`.
 *
 * INDICE
 *   1. Radice e costanti locali
 *   2. Fondo: texture e velo
 *   3. Le due colonne
 *   4. La fotografia: tendina, scorrimento, velo
 *   5. Il racconto
 *   6. Le pastiglie
 *   7. I bottoni
 *   8. Entrate: le misure di questa sezione
 *   9. Responsive
 *  10. Editor di Elementor
 *  11. prefers-reduced-motion
 */

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

.goyn-routine {
	--goyn-rt-bg: var(--goyn-petrol, #1f535d);
	--goyn-rt-eyebrow: var(--goyn-peach, #e8c39f);
	--goyn-rt-title: var(--goyn-cream, #e9e5d9);
	--goyn-rt-text: rgba(233, 229, 217, 0.86);
	--goyn-rt-trait: var(--goyn-cream, #e9e5d9);
	--goyn-rt-trait-border: rgba(232, 195, 159, 0.4);
	--goyn-rt-veil: var(--goyn-petrol-deep, #163e46);

	--goyn-rt-col-photo: 1fr;
	--goyn-rt-col-text: 1.25fr;
	--goyn-rt-photo-min: 520px;
	--goyn-rt-text-max: 620px;
	--goyn-rt-pad-block: 86px;
	--goyn-rt-pad-inline: 66px;

	--goyn-rt-texture-opacity: 0.5;
	--goyn-rt-parallax-run: 8%;

	/*
	 * Il progresso scritto da parallax.js. Il valore qui è quello del caso
	 * "nessuno scrive": fotografia a metà corsa, cioè ferma al centro. Non è un
	 * valore di partenza dell'animazione — è il comportamento senza JavaScript.
	 */
	--goyn-parallax-p: 0.5;

	position: relative;
	/*
	 * Serve: la fotografia è più alta del proprio riquadro della corsa del
	 * parallasse, e senza questo sporgerebbe sopra e sotto la fascia.
	 */
	overflow: hidden;
	background-color: var(--goyn-rt-bg);
}

/* ============================================================
   2. Fondo: texture e velo
   ------------------------------------------------------------
   L'originale ha la texture al 50% e sopra un velo verticale che va da 0,70 a
   0,88: il primo dà il materiale, il secondo garantisce il contrasto del testo
   qualunque sia l'immagine sotto.
   ============================================================ */

/* `.goyn-texture--petrol` del tema porta 0,3: qui la taratura è un'altra. */
.goyn-routine .goyn-routine__texture {
	opacity: var(--goyn-rt-texture-opacity);
}

/*
 * ⚠️ Ogni `color-mix()` è preceduto dal valore in `rgba()`. Le gradazioni si
 *    ricavano da un solo colore, così il cliente ne cambia uno e restano
 *    coerenti — ma su un browser che non supporta `color-mix` la dichiarazione
 *    viene scartata e il testo resterebbe sulla fotografia nuda. Il ripiego
 *    perde solo la personalizzazione del colore.
 */
.goyn-routine__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(180deg, rgba(22, 62, 70, 0.7), rgba(22, 62, 70, 0.88));
	background-image: linear-gradient(
		180deg,
		color-mix(in srgb, var(--goyn-rt-veil) 70%, transparent),
		color-mix(in srgb, var(--goyn-rt-veil) 88%, transparent)
	);
}

/* ============================================================
   3. Le due colonne
   ------------------------------------------------------------
   `align-items: stretch` (il predefinito) è ciò che rende la fotografia alta
   quanto il testo: nell'originale la colonna cresce col racconto.
   ============================================================ */

.goyn-routine__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, var(--goyn-rt-col-photo)) minmax(0, var(--goyn-rt-col-text));
	color: var(--goyn-rt-title);
}

.goyn-routine--no-photo .goyn-routine__grid {
	grid-template-columns: minmax(0, 1fr);
}

/* ============================================================
   4. La fotografia: tendina, scorrimento, velo
   ============================================================ */

.goyn-routine__photo {
	position: relative;
	min-height: clamp(320px, 42vw, var(--goyn-rt-photo-min));
	overflow: hidden;
}

/*
 * Il livello che scorre. È più alto del riquadro della corsa del parallasse, in
 * alto e in basso: così spostandosi non scopre i bordi.
 *
 * ⚠️ La trasformazione sta QUI e non sul genitore, che ha l'entrata a tendina:
 *    un'animazione con `fill: both` lascia scritta la propria `transform` e
 *    batte qualunque dichiarazione normale. Vedi reveal.css.
 */
.goyn-routine__shift {
	position: absolute;
	inset: calc(var(--goyn-rt-parallax-run) * -1) 0;
	/*
	 * 0,5 − progresso porta il valore da +0,5 a −0,5: moltiplicato per il doppio
	 * della corsa dà l'andata e ritorno dell'originale (da +8% a −8%).
	 */
	transform: translateY(calc((0.5 - var(--goyn-parallax-p)) * var(--goyn-rt-parallax-run) * 2));
}

.goyn-routine__shift .goyn-photo,
.goyn-routine .goyn-routine__img {
	width: 100%;
	height: 100%;
}

/*
 * ⚠️ Regola discendente per l'immagine: `.goyn-widget img { height: auto }` del
 *    tema e `.elementor img` sono (0,1,1) e batterebbero una classe sola.
 *    L'immagine verrebbe dimensionata dalle proprie proporzioni invece che dal
 *    riquadro, lasciando una striscia di fondo scoperta — errore già pagato
 *    nell'hero.
 */
.goyn-routine .goyn-routine__img {
	display: block;
	object-fit: cover;
}

.goyn-routine__photo-veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(90deg, rgba(22, 62, 70, 0.24), rgba(22, 62, 70, 0.58));
	background-image: linear-gradient(
		90deg,
		color-mix(in srgb, var(--goyn-rt-veil) 24%, transparent),
		color-mix(in srgb, var(--goyn-rt-veil) 58%, transparent)
	);
}

/* ============================================================
   5. Il racconto
   ------------------------------------------------------------
   Il padding non è simmetrico: a sinistra è lo spazio dalla fotografia
   (`--goyn-rt-pad-inline`), a destra il margine di pagina del tema. La griglia
   non ha spaziature proprio perché la fotografia deve arrivare al bordo.
   ============================================================ */

.goyn-routine__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(46px, 5vw, var(--goyn-rt-pad-block)) var(--goyn-pad, clamp(22px, 5vw, 80px))
		clamp(50px, 5vw, var(--goyn-rt-pad-block)) clamp(28px, 4vw, var(--goyn-rt-pad-inline));
}

.goyn-routine__eyebrow {
	margin: 0;
	color: var(--goyn-rt-eyebrow);
}

.goyn-routine__title {
	margin: 14px 0 0;
	font-size: clamp(30px, 3.6vw, 58px);
	line-height: 0.94;
	color: var(--goyn-rt-title);
}

.goyn-routine__lead {
	max-width: var(--goyn-rt-text-max);
	margin: 20px 0 0;
	font-size: clamp(17px, 1.6vw, 23px);
	line-height: 1.45;
	color: var(--goyn-rt-text);
}

/* ============================================================
   6. Le pastiglie
   ============================================================ */

.goyn-routine__traits {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 8px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.goyn-routine__trait {
	padding: 8px 15px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1.5px;
	color: var(--goyn-rt-trait);
	border: 1px solid var(--goyn-rt-trait-border);
	border-radius: 100px;
}

/* ============================================================
   7. I bottoni
   ------------------------------------------------------------
   Forma e colori vengono da `.goyn-btn` del tema, che legge quattro variabili:
   il widget le scrive sul singolo bottone. Qui solo la disposizione.
   ============================================================ */

.goyn-routine__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

/* ============================================================
   8. Entrate: le misure di questa sezione
   ------------------------------------------------------------
   Il meccanismo è condiviso (reveal.css); qui restano i tempi dell'originale:
   sovratitolo subito, righe del titolo a 90ms l'una dall'altra, pastiglie a
   100ms più 70 per voce, bottoni a 150ms. La tendina della fotografia dura un
   secondo.
   ============================================================ */

.goyn-routine [data-goyn-rise] {
	--goyn-rise-shift: 34px;
}

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

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

.goyn-routine__photo[data-goyn-rise-wipe] {
	--goyn-rise-dur: 1s;
}

/* L'originale sposta le pastiglie di 12px, non 34, e in 0,55s. */
.goyn-routine .goyn-routine__trait {
	--goyn-rise-shift: 12px;
	--goyn-rise-dur: 0.55s;
	--goyn-delay: calc(100ms + var(--goyn-rt-index, 0) * 70ms);
}

.goyn-routine__actions {
	--goyn-delay: 150ms;
}

/* ============================================================
   9. Responsive
   ============================================================ */

@media (max-width: 860px) {
	/* Una colonna: la fotografia sopra, il racconto sotto. */
	.goyn-routine__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Il padding torna simmetrico, e qui si scosta dall'originale: là il padding
	 * sinistro resta quello ridotto della colonna (34px a 860), quindi in colonna
	 * singola il testo è a 34px da sinistra e a 20 da destra. Su due colonne non
	 * si vede — a sinistra c'è la fotografia — ma in colonna singola il blocco
	 * risulta disallineato da tutte le altre sezioni della pagina, che usano il
	 * margine del tema su entrambi i lati.
	 *
	 * L'altezza della fotografia invece NON si tocca: `clamp(320px, 42vw, …)` è la
	 * misura dell'originale anche in colonna singola.
	 */
	.goyn-routine__copy {
		padding-left: var(--goyn-pad, clamp(22px, 5vw, 80px));
	}

	/* Sopra un'immagine a tutta larghezza il velo verticale copre di più. */
	.goyn-routine__photo-veil {
		background-image: linear-gradient(180deg, rgba(22, 62, 70, 0.18), rgba(22, 62, 70, 0.52));
		background-image: linear-gradient(
			180deg,
			color-mix(in srgb, var(--goyn-rt-veil) 18%, transparent),
			color-mix(in srgb, var(--goyn-rt-veil) 52%, transparent)
		);
	}
}

/* ============================================================
   10. Editor di Elementor
   ------------------------------------------------------------
   Le entrate se le spegne reveal.css, il paragrafo words.css. Qui resta la
   fotografia, che senza progresso di scroll va tenuta a metà corsa.
   ============================================================ */

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

/* ============================================================
   11. prefers-reduced-motion
   ------------------------------------------------------------
   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-routine__shift {
		transform: none;
	}
}