/*
 * GOYN — Formati
 *
 * Fonte: src/components/Formats.jsx e la classe .grid-cards di src/styles.css
 * del progetto React.
 *
 * ISOLAMENTO: nessun selettore globale. Tutto discende da `.goyn-formats`, che
 * sta dentro `.goyn-widget`. La regola è in testa a base.css del child theme.
 *
 * DAL TEMA, NON RISCRITTI: `.goyn-photo` (ritaglio), `.goyn-zoom`
 * (ingrandimento in hover), `.goyn-link-sweep` e `.goyn-arrow` (il "Scopri →"),
 * `.goyn-line` (maschera del titolo), `.goyn-eyebrow`, `.goyn-display`,
 * `.goyn-label`, `.goyn-accent`, `.goyn-wrap`.
 *
 * DA reveal.css: stati iniziali e animazioni delle entrate. Qui solo le misure
 * di questa sezione — quanto sale, quanto dura, con che ritardo.
 *
 * ⚠️ Nessuna regola di base parte da `opacity: 0` o da una trasformazione.
 *
 * INDICE
 *   1. Radice e costanti locali
 *   2. Intestazione centrata
 *   3. Le pastiglie
 *   4. La griglia delle schede
 *   5. La scheda: bordo fermo, interno che si solleva
 *   6. Il riquadro della foto e l'etichetta
 *   7. I testi della scheda e il collegamento
 *   8. Entrate: le misure di questa sezione
 *   9. Responsive
 *  10. prefers-reduced-motion
 */

/* ============================================================
   1. Radice e costanti locali
   ------------------------------------------------------------
   Ogni valore che un controllo può cambiare è una variabile con il suo
   ripiego: i ripieghi puntano ai token del child theme e, in ultima istanza,
   al colore letterale dell'originale.
   ============================================================ */

.goyn-formats {
	--goyn-fm-bg-from: var(--goyn-cream-2, #efebe0);
	/* #e4dfd0 non è in palette: è la crema più calda con cui l'originale chiude
	   la sfumatura, e serve a staccare questa sezione dalla filosofia, che
	   finisce sullo stesso crema con cui questa comincia. */
	--goyn-fm-bg-to: #e4dfd0;

	--goyn-fm-eyebrow: var(--goyn-rust, #c0603c);
	--goyn-fm-title: var(--goyn-petrol, #1f535d);
	--goyn-fm-text: var(--goyn-muted, #5e6e6e);

	--goyn-fm-trait: var(--goyn-petrol, #1f535d);
	--goyn-fm-trait-bg: var(--goyn-cream, #e9e5d9);
	--goyn-fm-trait-border: var(--goyn-petrol-22, rgba(31, 83, 93, 0.2));

	--goyn-fm-card-bg: var(--goyn-cream, #e9e5d9);
	--goyn-fm-card-border: var(--goyn-petrol-14, rgba(31, 83, 93, 0.14));
	--goyn-fm-media-bg: var(--goyn-petrol-deep, #163e46);
	--goyn-fm-tag-bg: var(--goyn-peach, #e8c39f);
	--goyn-fm-tag: var(--goyn-petrol-deep, #163e46);
	--goyn-fm-name: var(--goyn-petrol, #1f535d);
	--goyn-fm-note: var(--goyn-rust, #c0603c);
	--goyn-fm-card-text: var(--goyn-muted, #5e6e6e);
	--goyn-fm-link: var(--goyn-petrol, #1f535d);

	--goyn-fm-pad-top: 104px;
	--goyn-fm-pad-bottom: 116px;
	--goyn-fm-head-max: 780px;
	--goyn-fm-text-max: 560px;
	--goyn-fm-cards-gap: 24px;
	--goyn-fm-media-min: 280px;
	--goyn-fm-media-max: 360px;

	--goyn-fm-cols: 3;
	--goyn-fm-trait-stagger: 60ms;
	--goyn-fm-card-stagger: 120ms;
	--goyn-fm-lift: 8px;

	/* Variabile di `.goyn-zoom` del child theme: 1.07 è il valore
	   dell'originale, contro l'1.06 predefinito. */
	--goyn-zoom-scale: 1.07;

	position: relative;
	padding: var(--goyn-fm-pad-top) var(--goyn-pad, clamp(22px, 5vw, 80px)) var(--goyn-fm-pad-bottom);
	background-image: linear-gradient(180deg, var(--goyn-fm-bg-from), var(--goyn-fm-bg-to));
}

.goyn-formats__inner {
	position: relative;
}

/* ============================================================
   2. Intestazione centrata
   ============================================================ */

.goyn-formats__head {
	max-width: var(--goyn-fm-head-max);
	margin-inline: auto;
	text-align: center;
}

.goyn-formats__eyebrow {
	margin: 0;
	color: var(--goyn-fm-eyebrow);
}

.goyn-formats__title {
	margin: 14px 0 0;
	font-size: clamp(34px, 4.6vw, 68px);
	line-height: 0.95;
	color: var(--goyn-fm-title);
}

.goyn-formats__text {
	max-width: var(--goyn-fm-text-max);
	margin: 16px auto 0;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--goyn-fm-text);
}

/* ============================================================
   3. Le pastiglie
   ------------------------------------------------------------
   Due distanze diverse, come nell'originale (`gap: '10px 8px'`): 10px fra le
   righe quando vanno a capo, 8px fra una pastiglia e l'altra. Sono voci corte
   e a poca distanza: più spazio orizzontale le farebbe leggere come elenco
   invece che come gruppo.
   ============================================================ */

.goyn-formats__traits {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 8px;
	margin: 26px auto 0;
	padding: 0;
	list-style: none;
}

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

/* ============================================================
   4. La griglia delle schede
   ------------------------------------------------------------
   Il margine superiore è fluido come nell'originale
   (`clamp(38px, 5vw, 64px)`): cresce con la finestra invece di cambiare a
   scatti sui breakpoint. Il numero di colonne è un controllo responsive, quindi
   lo scrive Elementor.
   ============================================================ */

.goyn-formats__cards {
	display: grid;
	grid-template-columns: repeat(var(--goyn-fm-cols), minmax(0, 1fr));
	gap: var(--goyn-fm-cards-gap);
	margin: clamp(38px, 5vw, 64px) 0 0;
	padding: 0;
	list-style: none;
}

/* ============================================================
   5. La scheda: bordo fermo, interno che si solleva
   ------------------------------------------------------------
   L'originale ha due elementi annidati e il motivo è visivo: si solleva
   l'interno, il bordo resta. Sollevando tutto, la griglia sembrerebbe muoversi
   e l'ombra non avrebbe nulla da cui staccarsi.

   L'ombra è quella dell'originale: `0 26px 50px -24px rgba(22,62,70,.5)` —
   sfocatura ampia e diffusione negativa, cioè un'ombra che sta sotto la scheda
   senza allargarsi ai lati.

   `transition` e non `animation`: deve tornare indietro quando il mouse esce.
   ============================================================ */

.goyn-formats__card {
	display: flex;
	background-color: var(--goyn-fm-card-bg);
	border: 1px solid var(--goyn-fm-card-border);
}

.goyn-formats__lift {
	display: flex;
	flex: 1;
	flex-direction: column;
	background-color: var(--goyn-fm-card-bg);
	transition:
		transform var(--goyn-dur, 0.5s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1)),
		box-shadow var(--goyn-dur, 0.5s) var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/*
 * `:focus-within` accanto a `:hover`: la scheda contiene un link, quindi chi
 * naviga da tastiera ci arriva davvero — e senza questa riga vedrebbe la
 * scheda ferma mentre il focus è dentro.
 */
.goyn-formats__card:hover .goyn-formats__lift,
.goyn-formats__card:focus-within .goyn-formats__lift {
	transform: translateY(calc(var(--goyn-fm-lift) * -1));
	box-shadow: 0 26px 50px -24px rgba(22, 62, 70, 0.5);
}

/* ============================================================
   6. Il riquadro della foto e l'etichetta
   ------------------------------------------------------------
   L'altezza è fluida fra un minimo e un massimo passando per il 26% della
   larghezza della finestra: è il `clamp(280px, 26vw, 360px)` dell'originale,
   con gli estremi portati a variabili perché sono due controlli.

   `position: relative` serve a `.goyn-photo` del tema, che è in posizione
   assoluta su tutti i lati: senza un genitore posizionato riempirebbe la
   scheda intera.
   ============================================================ */

.goyn-formats__media {
	position: relative;
	height: clamp(var(--goyn-fm-media-min), 26vw, var(--goyn-fm-media-max));
	overflow: hidden;
	background-color: var(--goyn-fm-media-bg);
}

/*
 * L'etichetta sta sopra la foto: serve un contesto di impilamento, e `z-index`
 * su un elemento non posizionato non farebbe nulla.
 */
.goyn-formats__tag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 5px 9px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.5px;
	color: var(--goyn-fm-tag);
	background-color: var(--goyn-fm-tag-bg);
}

/* ============================================================
   7. I testi della scheda e il collegamento
   ------------------------------------------------------------
   La colonna è flessibile e il collegamento ha `margin-top: auto`: con
   descrizioni di lunghezza diversa i tre "Scopri" restano allineati in fondo
   invece di seguire il testo. È la ragione del `flex: 1` sul corpo.
   ============================================================ */

.goyn-formats__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	/* Ripiego se il controllo Dimensioni non ha valore. */
	padding: 26px 26px 28px;
}

.goyn-formats__name {
	margin: 0;
	font-size: 26px;
	line-height: 1.05;
	color: var(--goyn-fm-name);
}

.goyn-formats__note {
	margin: 6px 0 14px;
	font-size: 16px;
	color: var(--goyn-fm-note);
}

.goyn-formats__card-text {
	margin: 0 0 22px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--goyn-fm-card-text);
}

.goyn-formats__link {
	align-self: flex-start;
	margin-top: auto;
	color: var(--goyn-fm-link);
	text-decoration: none;
}

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

/* ============================================================
   8. Entrate: le misure di questa sezione
   ------------------------------------------------------------
   Il meccanismo è reveal.css + reveal.js (contratto in testa a reveal.css).
   Qui solo i valori dell'originale:

     sovratitolo    0        pastiglie   100ms + 60 per voce
     righe titolo   0 + 90   schede      0 + 120 per scheda
     testo          120      (nel template, è un valore singolo)

   Le pastiglie partono da 100ms e non da zero: nell'originale hanno
   `delay: 0.1 + i * 0.06`, cioè arrivano dopo il titolo.
   ============================================================ */

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

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

.goyn-formats__trait {
	--goyn-rise-shift: 12px;
	--goyn-rise-dur: 0.55s;
	--goyn-delay: calc(100ms + var(--goyn-fm-index, 0) * var(--goyn-fm-trait-stagger));
}

.goyn-formats__card {
	--goyn-rise-shift: 46px;
	--goyn-rise-dur: 0.85s;
	--goyn-delay: calc(var(--goyn-fm-index, 0) * var(--goyn-fm-card-stagger));
}

/* ============================================================
   9. Responsive
   ------------------------------------------------------------
   Colonne e distanza fra le schede sono controlli responsive: le scrive
   Elementor nelle sue media query. Qui resta solo ciò che l'editor non può
   esprimere.
   ============================================================ */

@media (max-width: 860px) {
	/* A una colonna il riquadro della foto non deve seguire il 26% della
	   larghezza: la scheda è larga quanto lo schermo e la foto diventerebbe una
	   fascia bassa e stirata. */
	.goyn-formats__media {
		height: var(--goyn-fm-media-min);
	}
}

/* ============================================================
   10. prefers-reduced-motion
   ------------------------------------------------------------
   Gli stati iniziali delle entrate li annulla reveal.css, e il child theme
   azzera le durate dentro `.goyn-widget`. Restano i due hover, che con una
   durata a zero scatterebbero invece di scorrere: qui si annullano del tutto,
   perché un salto è più fastidioso di un'assenza.

   ⚠️ L'ingrandimento si annulla sulla TRASFORMAZIONE e non azzerando
      `--goyn-zoom-scale`. La variabile la scrive anche il controllo del
      pannello, e Elementor la stampa su un selettore con l'id del documento
      (`.elementor-15 .elementor-element-… .goyn-formats`), che ha specificità
      molto più alta di una classe: la dichiarazione qui verrebbe ignorata.
      Verificato in pagina — la variabile restava a 1.07.

      Il selettore ripete `.goyn-formats` per pareggiare la specificità di
      `.goyn-zoom:hover .goyn-photo img` del tema; a parità vince questo foglio,
      che è stampato dopo (vedi style_deps() in class-assets.php).
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.goyn-formats__card:hover .goyn-formats__lift,
	.goyn-formats__card:focus-within .goyn-formats__lift {
		transform: none;
		box-shadow: none;
	}

	.goyn-formats .goyn-formats__card:hover .goyn-photo img,
	.goyn-formats .goyn-formats__card:focus-within .goyn-photo img {
		transform: none;
	}
}