/*
 * GOYN — Newsletter
 *
 * Fonte: src/components/Newsletter.jsx e le classi .grid-news / .news-* di
 * src/styles.css del progetto React.
 *
 * ISOLAMENTO: nessun selettore globale. Tutto discende da `.goyn-newsletter`.
 *
 * DAL TEMA, NON RISCRITTI: `.goyn-line` (maschera del titolo), `.goyn-eyebrow`,
 * `.goyn-display`, `.goyn-accent`, `.goyn-wrap`.
 *
 * DA reveal.css: `.is-armed` / `.is-in` e `data-goyn-rise`.
 *
 * DA newsletter.js: `--goyn-nl-rx` e `--goyn-nl-ry`, i due angoli
 * dell'inclinazione, più la classe `.is-tilting`.
 *
 * ⚠️ Nessuna regola di base parte da `opacity: 0`.
 *
 * INDICE
 *   1. Radice e costanti locali
 *   2. La griglia a tre colonne
 *   3. La scheda
 *   4. Lo spazio del modulo
 *   5. Le fotografie e l'inclinazione
 *   6. La tessera
 *   7. Entrate: le misure di questa sezione
 *   8. Responsive
 *   9. prefers-reduced-motion
 */

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

.goyn-newsletter {
	--goyn-nl-bg: var(--goyn-cream, #e9e5d9);
	--goyn-nl-card-bg: var(--goyn-cream-2, #efebe0);
	--goyn-nl-card-border: var(--goyn-petrol, #1f535d);
	--goyn-nl-eyebrow: var(--goyn-rust, #c0603c);
	--goyn-nl-title: var(--goyn-petrol, #1f535d);
	--goyn-nl-text: var(--goyn-muted, #5e6e6e);
	--goyn-nl-tile-bg: var(--goyn-petrol, #1f535d);
	--goyn-nl-tile: var(--goyn-peach, #e8c39f);
	--goyn-nl-shot-bg: var(--goyn-petrol-deep, #163e46);

	--goyn-nl-pad-top: 100px;
	--goyn-nl-pad-bottom: 110px;
	--goyn-nl-gap: 20px;
	--goyn-nl-block-min: 340px;
	--goyn-nl-text-max: 420px;
	--goyn-nl-form-max: 460px;
	--goyn-nl-shots-cols: 3;

	/* L'unità `fr` sta nel VALORE: `calc(1.25 * 1fr)` è invalido e farebbe
	   scartare l'intera grid-template-columns. Vedi la nota in manifesto.css. */
	--goyn-nl-col-card: 1.25fr;
	--goyn-nl-col-shots: 1.45fr;
	--goyn-nl-col-tile: 0.5fr;

	--goyn-nl-shot-stagger: 100ms;
	--goyn-nl-perspective: 900px;

	/* Gli angoli li scrive newsletter.js. A riposo, e senza JavaScript, zero. */
	--goyn-nl-rx: 0deg;
	--goyn-nl-ry: 0deg;

	padding: var(--goyn-nl-pad-top) var(--goyn-pad, clamp(22px, 5vw, 80px)) var(--goyn-nl-pad-bottom);
	background-color: var(--goyn-nl-bg);
}

/* ============================================================
   2. La griglia a tre colonne
   ------------------------------------------------------------
   Proporzioni dell'originale: 1.25 scheda / 1.45 fotografie / 0.5 tessera.

   `align-items: stretch` è quello che fa combaciare in altezza i tre blocchi:
   la scheda detta l'altezza, fotografie e tessera la riempiono.
   ============================================================ */

.goyn-newsletter__grid {
	display: grid;
	grid-template-columns:
		minmax(0, var(--goyn-nl-col-card))
		minmax(0, var(--goyn-nl-col-shots))
		minmax(0, var(--goyn-nl-col-tile));
	gap: var(--goyn-nl-gap);
	align-items: stretch;
}

/* ============================================================
   3. La scheda
   ============================================================ */

.goyn-newsletter__card {
	/* Ripiego se il controllo Dimensioni non ha valore. */
	padding: 48px 44px 52px;
	background-color: var(--goyn-nl-card-bg);
	/* 1.5px e non 1: è il bordo dell'originale, e su questo fondo un pixel
	   sparisce. */
	border: 1.5px solid var(--goyn-nl-card-border);
}

.goyn-newsletter__eyebrow {
	margin: 0;
	color: var(--goyn-nl-eyebrow);
}

.goyn-newsletter__title {
	margin: 14px 0 18px;
	font-size: clamp(32px, 3.9vw, 54px);
	line-height: 0.95;
	color: var(--goyn-nl-title);
}

.goyn-newsletter__text {
	max-width: var(--goyn-nl-text-max);
	margin: 0 0 28px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--goyn-nl-text);
}

/* ============================================================
   4. Lo spazio del modulo
   ------------------------------------------------------------
   Il modulo non lo scrive questo widget: arriva da un template Elementor o da
   uno shortcode (il perché è in testa a class-newsletter.php). Qui si veste
   ciò che arriva, perché somigli all'originale senza che nessuno debba
   impostare gli stili a mano dentro il Form.

   ⚠️ I selettori mirano ai TIPI di campo (`input[type="email"]`, `button`) e non
      alle classi di Elementor Pro: così funziona anche con lo shortcode di un
      servizio di newsletter, che ha un markup suo. È il motivo per cui qui, in
      via di eccezione, si stilano elementi e non classi — resta comunque tutto
      dentro `.goyn-newsletter__form`, quindi l'isolamento non è violato.
   ============================================================ */

.goyn-newsletter__form {
	width: 100%;
	max-width: var(--goyn-nl-form-max);
}

/*
 * La cornice dell'originale: campo e bottone dentro un unico bordo petrol, sulla
 * stessa riga, con il consenso al trattamento sotto — separato da un filetto,
 * come il piede della scheda.
 *
 * ⚠️ QUI, IN VIA DI ECCEZIONE, SI TOCCANO LE CLASSI DI ELEMENTOR PRO.
 *    Altrove il progetto non lo fa mai. Il motivo è che il Form di Pro impagina
 *    i campi con una sua griglia a colonne (`elementor-col-75` e simili) e
 *    stampa il bottone SEMPRE per ultimo: senza intervenire, un campo al 100% in
 *    mezzo — il consenso — spinge il bottone su una terza riga, e il pannello
 *    del Form non ha un'impostazione per rimediare.
 *
 *    Si tocca il minimo: l'ordine dei tre gruppi e l'aspetto del bottone. Le
 *    larghezze restano quelle impostate nel Form (75% e 25%), così chi le
 *    cambia dal pannello vede l'effetto.
 *
 *    Se un aggiornamento di Pro rinominasse queste classi, l'effetto è che il
 *    modulo torna impaginato come lo impagina Pro: brutto, non rotto.
 */
.goyn-newsletter__form--framed {
	background-color: var(--goyn-nl-bg);
	border: 1.5px solid var(--goyn-nl-card-border);
}

/*
 * L'ordine: campo e bottone in alto, consenso sotto. `order` funziona perché il
 * contenitore dei campi di Pro è un flex che va a capo — con una griglia non
 * basterebbe.
 */
.goyn-newsletter__form--framed .elementor-field-type-email {
	order: 1;
}

.goyn-newsletter__form--framed .elementor-field-type-submit {
	order: 2;
}

.goyn-newsletter__form--framed .elementor-field-type-acceptance {
	order: 3;
	/* Il filetto che stacca il consenso dalla riga sopra: il bordo della cornice
	   ripetuto al 40%, così si legge come una divisione interna e non come un
	   secondo riquadro. */
	padding: 12px 16px 14px;
	border-top: 1px solid color-mix(in srgb, var(--goyn-nl-card-border) 40%, transparent);
}

/* Il campo: nessun bordo proprio, è la cornice a farlo. */
.goyn-newsletter__form--framed input[type='email'],
.goyn-newsletter__form--framed input[type='text'] {
	width: 100%;
	padding: 15px 16px;
	font-family: var(--goyn-font-body, inherit);
	/* 15px sul desktop come nell'originale; sotto gli 860px sale a 16 — vedi
	   sezione 8, e non è una scelta estetica. */
	font-size: 15px;
	line-height: 1.4;
	color: var(--goyn-ink, #1a2c30);
	background-color: transparent;
	border: none;
	border-radius: 0;
	outline: none;
}

/*
 * Il bottone: qui SOLO forma e tipografia.
 *
 * ⚠️ I COLORI NON SONO QUI, E NON È UNA DIMENTICANZA. Sono impostati nel Form
 *    del template, con i Global del Kit (fondo Petrol, testo Crema; in hover
 *    Pesca con testo Petrol profondo, come `.goyn-btn--solid` del tema).
 *
 *    Il motivo è misurato: Elementor genera per il template la regola
 *    `.elementor-widget-form .elementor-button[type="submit"]`, che ha la stessa
 *    specificità di questo selettore ed è stampata DOPO — il fondo restava sul
 *    colore Accento del Kit, cioè ruggine. Invece di rincorrere la specificità,
 *    il colore sta dove il cliente lo cercherebbe: nel Form.
 *
 *    Forma e tipografia restano qui perché sono ciò che salda il bottone al
 *    campo, e nel pannello del Form non si esprimono in modo altrettanto
 *    diretto.
 */
.goyn-newsletter__form--framed button[type='submit'] {
	width: 100%;
	height: 100%;
	min-height: 100%;
	padding: 0 26px;
	font-family: var(--goyn-font-label, inherit);
	font-size: 12.5px;
	font-weight: 600;
	font-style: normal;
	letter-spacing: 2px;
	text-transform: uppercase;
	border: none;
}

/* Il consenso: testo piccolo e sommesso, non un secondo messaggio. */
.goyn-newsletter__form--framed .elementor-field-type-acceptance label {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--goyn-nl-text);
}

.goyn-newsletter__form--framed .elementor-field-type-acceptance input[type='checkbox'] {
	accent-color: var(--goyn-petrol, #1f535d);
}

/* I messaggi di esito del Form: dentro la scheda, non sopra la cornice. */
.goyn-newsletter__form .elementor-message {
	margin-top: 10px;
	font-size: 13px;
}

/* ============================================================
   5. Le fotografie e l'inclinazione
   ------------------------------------------------------------
   `min-height` sul contenitore e non un'altezza fissa: le tre fotografie si
   allungano fino all'altezza della scheda, che è il blocco più alto.
   ============================================================ */

.goyn-newsletter__shots {
	display: grid;
	grid-template-columns: repeat(var(--goyn-nl-shots-cols), minmax(0, 1fr));
	gap: var(--goyn-nl-gap);
	min-height: var(--goyn-nl-block-min);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Il riquadro è la cella della griglia e porta l'ENTRATA. Non ha né fondo né
 * ritaglio: sono del figlio, che è ciò che si inclina — un `overflow: hidden`
 * qui taglierebbe gli angoli della fotografia ruotata.
 */
.goyn-newsletter__shot {
	position: relative;
}

.goyn-newsletter__shot-tilt {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-color: var(--goyn-nl-shot-bg);
}

.goyn-newsletter__shot-media {
	position: absolute;
	inset: 0;
}

.goyn-newsletter .goyn-newsletter__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sfumatura diagonale a 200 gradi, come nell'originale: trasparente per più di
   metà, poi petrol al 40%. Stacca la foto dal fondo crema senza scurirla. */
.goyn-newsletter__shot-veil {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(200deg, rgba(22, 62, 70, 0) 55%, rgba(22, 62, 70, 0.4));
	pointer-events: none;
}

/*
 * L'inclinazione, sul FIGLIO e non sul riquadro che entra: l'animazione
 * d'entrata ha `fill: both` e la sua `transform` resta scritta, quindi
 * sovrascriverebbe questa. Vedi la nota nel template e in reveal.css.
 *
 * La classe la aggiunge newsletter.js soltanto quando il dispositivo ha un
 * puntatore: senza, nessuna trasformazione e nessun contesto 3D creato per
 * niente.
 *
 * `perspective()` dentro la `transform` e non la proprietà `perspective` sul
 * padre: così ogni fotografia ha il suo punto di fuga, centrato su di sé. Con
 * la prospettiva sul padre le tre foto condividerebbero un unico punto di fuga
 * e quelle laterali sembrerebbero deformate.
 *
 * La transizione è lo smorzamento: sostituisce la molla dell'originale. La
 * differenza dichiarata è in testa a newsletter.js.
 */
.goyn-newsletter__shot-tilt.is-tilting {
	transform:
		perspective(var(--goyn-nl-perspective))
		rotateX(var(--goyn-nl-rx))
		rotateY(var(--goyn-nl-ry));
	transition: transform 0.25s var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
	will-change: transform;
}

/* ============================================================
   6. La tessera
   ============================================================ */

.goyn-newsletter__tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--goyn-nl-block-min);
	padding: 24px;
	overflow: hidden;
	background-color: var(--goyn-nl-tile-bg);
}

.goyn-newsletter__tile-text {
	margin: 0;
	font-size: clamp(19px, 1.9vw, 26px);
	line-height: 1.35;
	color: var(--goyn-nl-tile);
	text-align: center;
}

/* Righe a blocco invece di `<br>`: si contano, si stilano e non lasciano spazi
   fantasma quando una riga è vuota. */
.goyn-newsletter__tile-line {
	display: block;
}

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

/* ============================================================
   7. Entrate: le misure di questa sezione
   ------------------------------------------------------------
   Valori dell'originale: tutto sale di 40px, la scheda e la tessera in 0.9s
   (`Rise` con `y: 34` per la scheda, ma sulle fotografie l'originale usa 40 —
   qui si tiene 40 per tutti, che è la misura visibile su un blocco grande).

   Le fotografie entrano a cascata, la tessera con il ritardo scritto nel
   template. Il titolo NON ha un'entrata sua: la scheda entra intera, come
   nell'originale.
   ============================================================ */

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

.goyn-newsletter__shot {
	--goyn-delay: calc(var(--goyn-nl-index, 0) * var(--goyn-nl-shot-stagger));
}

/* ============================================================
   8. Responsive
   ------------------------------------------------------------
   Colonne delle fotografie, distanze, interno della scheda e altezza minima
   sono controlli responsive: li scrive Elementor. Qui il resto.
   ============================================================ */

@media (max-width: 860px) {
	/* Una colonna: i tre blocchi si impilano nell'ordine del markup — scheda,
	   fotografie, tessera. */
	.goyn-newsletter__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Le fotografie diventano riquadri quadrati e l'altezza la dettano le
	 * proporzioni: l'altezza minima da desktop, in colonna, le stirerebbe in tre
	 * strisce verticali.
	 */
	.goyn-newsletter__shots {
		min-height: 0;
	}

	.goyn-newsletter__shot {
		aspect-ratio: 1 / 1;
	}

	/*
	 * ⚠️ 16px, e non è una scelta di gusto: iOS Safari ingrandisce la pagina
	 *    appena il fuoco entra in un campo con testo sotto i 16px, e non torna
	 *    più indietro da sé. La regola è la stessa del child theme, ripetuta qui
	 *    perché il campo può arrivare da un modulo che il tema non conosce.
	 */
	.goyn-newsletter__form--framed input[type='email'],
	.goyn-newsletter__form--framed input[type='text'] {
		font-size: 16px;
	}
}

@media (max-width: 560px) {
	/*
	 * Su due colonne la terza fotografia resterebbe sola in fondo: passa a tutta
	 * larghezza in formato panoramico. È il dettaglio dell'originale, e vale solo
	 * se le fotografie sono tre — con un numero diverso questa regola non trova
	 * il terzo elemento e non fa nulla.
	 */
	.goyn-newsletter__shot:nth-child(3):last-child {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 9;
	}
}

/* ============================================================
   9. prefers-reduced-motion
   ------------------------------------------------------------
   Le entrate le annulla reveal.css. L'inclinazione non parte affatto —
   newsletter.js legge la preferenza e non si aggancia — ma la regola copre il
   cambio di preferenza a pagina già aperta, con gli angoli dell'ultimo
   movimento ancora scritti inline.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.goyn-newsletter__shot-tilt.is-tilting {
		transform: none;
	}
}