/* ==========================================================================
   WT Exhibition – personalizzazioni del tema child
   Caricato da functions.php con versione basata su filemtime(): ogni modifica
   invalida da sola la cache di browser e CDN.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero – effetto Ken Burns sulla foto in cima alle pagine

   Le foto degli hero sono impostate in Elementor come "Background Overlay"
   del primo container della pagina, quindi il browser le disegna sullo
   pseudo-elemento ::before del container. Animando quello non serve toccare
   nessuna pagina in Elementor e le pagine nuove ereditano l'effetto da sole.

   L'animazione va avanti in loop con direction "alternate": la foto rientra
   lentamente, poi riparte al contrario invece di saltare al fotogramma
   iniziale. A questa velocità l'inversione non si percepisce.

   Da regolare solo queste variabili:
     --wt-hero-kb-from : scala di partenza (foto più ravvicinata)
     --wt-hero-kb-to   : scala di arrivo (foto più larga)
     --wt-hero-kb-pan  : spostamento laterale, in % del container
     --wt-hero-kb-time : durata di una passata

   Attenzione a --wt-hero-kb-to: deve restare sopra 1, altrimenti la foto
   combacia esatta col container e lo spostamento scoprirebbe i bordi. Il
   margine disponibile a ogni lato è (scala - 1) / 2, quindi con scala 1.06
   c'è il 3% di gioco e il pan, moltiplicato dalla scala, ne occupa 1.7%.
   Alzando --wt-hero-kb-pan va alzata di conseguenza --wt-hero-kb-to.
   -------------------------------------------------------------------------- */

.page-content > .elementor > .e-con.e-parent:first-child {
	--wt-hero-kb-from: 1.18;
	--wt-hero-kb-to: 1.06;
	--wt-hero-kb-pan: 1.6%;
	--wt-hero-kb-time: 13s;

	/* trattiene la foto ingrandita mentre si muove */
	overflow: hidden;
}

/* L'easing è una sinusoide invece della ease-in-out di default: quest'ultima
   è cubica e parcheggia la foto a lungo vicino ai due estremi, che è proprio
   ciò che fa sembrare l'effetto fermo. */
.page-content > .elementor > .e-con.e-parent:first-child::before {
	animation: wt-hero-ken-burns var(--wt-hero-kb-time) cubic-bezier(0.37, 0, 0.63, 1) infinite alternate;
}

@keyframes wt-hero-ken-burns {
	from {
		transform: scale(var(--wt-hero-kb-from))
			translate3d(var(--wt-hero-kb-pan), var(--wt-hero-kb-pan), 0);
	}
	to {
		transform: scale(var(--wt-hero-kb-to))
			translate3d(calc(var(--wt-hero-kb-pan) * -1), calc(var(--wt-hero-kb-pan) * -1), 0);
	}
}

/* Chi ha attivato "riduci animazioni" nel sistema vede la foto ferma */
@media (prefers-reduced-motion: reduce) {
	.page-content > .elementor > .e-con.e-parent:first-child::before {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Cartina interattiva dell'Italia (home) – taglio ai lati

   La cartina sta in un widget HTML dentro una colonna Elementor. Sopra i
   1366px la sezione diventa a due colonne e quella della cartina si riduce a
   metà viewport meno 160px di padding: a 1367px restano 524px utili, mentre
   la .stage ne chiede 644 (pannello 260 + gap 48 + cartina 336). Pannello e
   cartina avevano flex-shrink: 0, quindi non si adattavano: la .stage è in
   overflow: hidden con justify-content: center e tagliava 60px per lato.
   Sotto i 1367px le colonne si impilano e lo spazio torna abbondante, sopra
   i ~1608px la colonna è di nuovo abbastanza larga: il difetto si vedeva
   solo in quella fascia, che però copre parecchi portatili (1440, 1512...).

   Qui rendiamo la cartina ridimensionabile invece che tagliabile. È lo stesso
   approccio che l'autore del widget usa già sotto i 720px: larghezza esplicita
   e altezza derivata dall'aspect-ratio.

   Due vincoli da rispettare se si tocca questo blocco:

   1. la larghezza della .map-frame deve restare intrinseca (336px, non 100%).
      Il widget è un flex item in shrink-to-fit: con una larghezza in
      percentuale il suo contenuto non contribuisce più al calcolo della
      larghezza massima e l'intera cartina collassa a una cinquantina di px.

   2. la classe è ripetuta per alzare la specificità. Il CSS del widget sta in
      un blocco <style> inline nel body, quindi a parità di specificità vince
      lui perché viene dopo questo foglio.

   Limitato a min-width 721px per lasciare intatto il layout mobile del widget.
   -------------------------------------------------------------------------- */

@media (min-width: 721px) {
	/* il pannello cede spazio per primo, ma non sotto i 200px */
	.italia-regioni-app.italia-regioni-app .info-panel {
		flex-shrink: 3;
		min-width: 200px;
	}

	.italia-regioni-app.italia-regioni-app .map-wrap {
		flex: 0 1 auto;
		min-width: 0;
	}

	.italia-regioni-app.italia-regioni-app .map-frame {
		width: 336px; /* dimensione di progetto, vedi vincolo 1 */
		max-width: 100%;
		height: auto; /* la ricava l'aspect-ratio già impostato dal widget */
		aspect-ratio: 600 / 1067;
	}
}