/*
 * GOYN — banda di chiusura fotografica (condivisa)
 *
 * Fonte: `FiloCta` in src/components/PhilosophySections.jsx. La stessa fascia
 * chiude anche la pagina Contatti (`CtCta`, classe `.ct-cta` dell'originale) e
 * per questo il widget NON si chiama `goyn_filo_cta` e il foglio non sta dentro
 * `philosophy-page.css`: una fotografia a tutta fascia, un velo laterale, il
 * titolo su più righe e uno o due bottoni.
 *
 * Cosa cambia fra le due pagine, e che qui è quindi un controllo: l'altezza
 * minima (25vw contro 58vw), il padding, il sovratitolo — che Contatti non ha —
 * il numero di bottoni e la taratura del velo.
 *
 * ISOLAMENTO: nessun selettore globale. Prefisso `goyn-cta-band`.
 *
 * DAL TEMA: `.goyn-photo`, `.goyn-btn`, `.goyn-line`, `.goyn-display`,
 * `.goyn-eyebrow`, `.goyn-wrap`, `.goyn-veil` e le sue varianti.
 *
 * DA reveal.css: `data-goyn-rise`, `data-goyn-rise-line`.
 * DA parallax.js: `--goyn-parallax-p`, quando il movimento è acceso.
 *
 * ⚠️ Il velo si sceglie fra le varianti di `shared.css` del tema e NON si
 *    ricostruisce qui da sei variabili: quattro opacità e due posizioni
 *    diventerebbero sei cursori nel pannello per un gradiente. Una taratura
 *    nuova va aggiunta come `.goyn-veil--<nome>` nel tema, dove sta già il
 *    vocabolario dei veli, e compare da sé nella tendina del widget.
 */

.goyn-cta-band {
	--goyn-cb-bg: var(--goyn-petrol-abyss, #0c2429);
	--goyn-cb-title: var(--goyn-cream, #e9e5d9);
	--goyn-cb-eyebrow: var(--goyn-peach, #e8c39f);

	/*
	 * Altezza minima e padding restano fluidi come nell'originale: il pannello
	 * regola la QUOTA FLUIDA e il TETTO, che sono i due valori che decidono la
	 * fascia su uno schermo normale e su uno grande.
	 *
	 * Il pavimento del clamp non è un controllo e resta scritto qui: con questi
	 * numeri comincia a valere sotto i ~1120px di larghezza, dove il blocco
	 * ≤860 ha già azzerato l'altezza minima. Un cursore che non cambia niente è
	 * peggio di un valore fisso documentato.
	 */
	--goyn-cb-min-fluid: 25vw;
	--goyn-cb-min: 400px;
	--goyn-cb-pad-fluid: 5vw;
	--goyn-cb-pad: 84px;

	/*
	 * La scala del titolo è il valore che cambia di più fra le due pagine che
	 * usano questa fascia: `clamp(28, 3.3vw, 52)` nella Filosofia,
	 * `clamp(40, 5.6vw, 96)` nella chiusura dei Contatti. Tre variabili e non un
	 * moltiplicatore, perché i tre rapporti non sono lo stesso numero.
	 */
	--goyn-cb-title-min: 28px;
	--goyn-cb-title-fluid: 3.3vw;
	--goyn-cb-title-max: 52px;
	--goyn-cb-title-lh: 0.98;

	--goyn-cb-btn-min: auto;
	--goyn-cb-btn-pad: 32px;

	--goyn-cb-veil-opacity: 1;
	--goyn-cb-actions-gap: 12px;
	--goyn-cb-actions-top: 30px;

	/* Fotografia ferma se il movimento è spento o se JavaScript non arriva. */
	--goyn-parallax-p: 0;

	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: clamp(280px, var(--goyn-cb-min-fluid), var(--goyn-cb-min));
	padding: clamp(50px, var(--goyn-cb-pad-fluid), var(--goyn-cb-pad)) var(--goyn-pad);
	background-color: var(--goyn-cb-bg);
	color: var(--goyn-cb-title);
}

.goyn-cta-band__shot {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/*
 * ⚠️ 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 riempimento del riquadro lo fa già il tema.
 */
.goyn-cta-band .goyn-photo img {
	object-position: var(--goyn-cb-focus, right center);
}

/*
 * Con il movimento acceso la fotografia scende E si ingrandisce: l'ingrandimento
 * non è estetico, è ciò che le dà il margine per spostarsi senza scoprire il
 * fondo. Stessa scelta della testata di pagina.
 */
.goyn-cta-band--parallax .goyn-cta-band__shot {
	transform:
		translate3d(0, calc(var(--goyn-parallax-p) * var(--goyn-cb-run, 0%)), 0)
		scale(calc(1 + (var(--goyn-cb-zoom, 1) - 1) * var(--goyn-parallax-p)));
	will-change: transform;
}

/* La classe della sezione si ripete per battere l'opacità che le varianti di
   `.goyn-veil--*` impostano nel tema. */
.goyn-cta-band .goyn-cta-band__veil {
	opacity: var(--goyn-cb-veil-opacity);
}

/* Senza `width` il contenitore si stringe al contenuto e i margini automatici lo
   centrano invece di allinearlo a sinistra: è la nota che nell'originale sta su
   `.filo-cta > .wrap`. */
.goyn-cta-band__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* Le righe del titolo: 90ms fra una e l'altra, lo `stagger` predefinito di
   `SplitLines` dell'originale. */
.goyn-cta-band__title .goyn-line {
	--goyn-delay: calc(var(--goyn-cb-line, 0) * 90ms);
}

/*
 * ⚠️ `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-cta-band__eyebrow {
	margin: 0;
	font-size: 11px;
	letter-spacing: 4px;
	color: var(--goyn-cb-eyebrow);
}

.goyn-cta-band__title {
	margin: 16px 0 0;
	font-size: clamp(var(--goyn-cb-title-min), var(--goyn-cb-title-fluid), var(--goyn-cb-title-max));
	line-height: var(--goyn-cb-title-lh);
	color: var(--goyn-cb-title);
}

/* Senza sovratitolo il titolo non deve portarsi dietro lo spazio che serviva a
   staccarlo da quello. */
.goyn-cta-band__title:first-child {
	margin-top: 0;
}

/*
 * Bottone largo: nella chiusura dei Contatti ce n'è uno solo e va tenuto in
 * mezzo alla propria larghezza minima — `min-width: 260px` con padding 62 —
 * altrimenti "Scrivici" da solo sembra un ripensamento.
 */
.goyn-cta-band__btn--wide {
	justify-content: center;
	min-width: var(--goyn-cb-btn-min);
	padding-inline: var(--goyn-cb-btn-pad);
}

.goyn-cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--goyn-cb-actions-gap);
	margin-top: var(--goyn-cb-actions-top);
}

/* ============================================================
   Responsive
   ------------------------------------------------------------
   ⚠️ Dal più largo al più stretto: fra due media query di pari specificità
      decide l'ordine nel file.
   ============================================================ */

@media (max-width: 860px) {
	.goyn-cta-band {
		min-height: 0;
		padding: 44px var(--goyn-pad) 54px;
	}
}

/* ============================================================
   prefers-reduced-motion
   ------------------------------------------------------------
   ⚠️ Si annulla la proprietà finale e non la variabile del controllo: Elementor
      stampa le variabili su un selettore con l'id del documento, che batte
      qualunque classe.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.goyn-cta-band--parallax .goyn-cta-band__shot {
		transform: none;
	}
}