/*
 * Carosello della storia (pagina Azienda) — dall'originale index.html r.874–905
 * (CSS: styles.css r.750–780, più le regole per pagina interna r.43 e r.48).
 *
 * Markup in templates/hist.php, controlli in includes/widgets/class-hist.php,
 * comportamento in assets/js/hist.js.
 *
 * Cascata MISURATA sull'originale (1440/1024/960/760/700/560/375), con la
 * pagina attivata:
 *
 *                    >960          761–960        561–760        ≤560
 *  fascia laterale   0             20px           20px           20px
 *  .adea-hist pad    40px          40px           40px           20px
 *  slide             riga          riga           colonna        colonna
 *  altezza minima    460px         460px          —              —
 *  foto              flex 1.2      flex 1.2       alta 200px     alta 200px
 *  pannello pad      48/52         48/52          30/26/34       30/26/34
 *  titolo            34px          34px           26px           26px
 *  linguette         14.5px        14.5px         13px           13px
 *  filo della nav    12%           12%            8%             8%
 *
 * ⚠️ Tre gradini DIVERSI, tutti dall'originale: 960 (`.sect` con !important),
 * 760 (il blocco del carosello) e 560 (la fascia delle pagine interne).
 * Non sono i breakpoint del Kit: stanno qui, non nei controlli responsive.
 *
 * ⚠️ Il titolo pesa **500** e spazia **-.01em**, non i 600 / -.02em della regola
 * r.759: siamo in una pagina interna e `.page:not([data-page="home"]) h1,h2,h3`
 * imposta ENTRAMBE le proprietà. Misurato: 500 e -0.34px su 34px.
 *
 * ⚠️ `.adea-hist-year` (r.758) NON è portato: nessuna diapositiva
 * dell'originale lo usa. È codice morto.
 *
 * Indice: fascia · contenitore · palco · diapositive · frecce · linguette ·
 *         breakpoint · reduced-motion
 */

/* ---------- fascia esterna ----------
   L'originale è una `<section class="sect">` con stile inline
   `max-width:1240px;margin:0 auto;padding:36px 0 24px`; i 20px laterali sotto
   960 arrivano da `.sect{padding-left:20px!important}` (r.338). */
.adea-hist-section{
	max-width:var(--adea-hist-maxw,1240px);
	margin:0 auto;
	padding:var(--adea-hist-pt,36px) var(--adea-hist-pad-x,0px) var(--adea-hist-pb,24px);
	font-family:var(--adea-font-testo,'Source Sans 3',system-ui,sans-serif);
	line-height:normal; /* il Kit impone 1.5; l'originale eredita normal dal body */
}

/* ---------- contenitore ---------- */
.adea-hist{
	max-width:1240px;margin:0 auto;
	padding-left:var(--adea-hist-inset,40px);
	padding-right:var(--adea-hist-inset,40px);
}

/* ---------- palco ---------- */
.adea-hist-stage{position:relative}
.adea-hist-viewport{overflow:hidden}
.adea-hist-track{display:flex;transition:transform .6s cubic-bezier(.65,0,.2,1)}

/* ---------- diapositive ---------- */
.adea-hist-slide{
	flex:0 0 100%;display:flex;
	min-height:var(--adea-hist-minh,460px);
	background:linear-gradient(140deg,#004F9E 0%,#0a58a8 100%);
}
.adea-hist-media{position:relative;overflow:hidden;flex:1.2 1 0;min-width:0}
.adea-hist-media img{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	display:block;   /* il tema non lo dà a tutte le immagini: va dichiarato qui */
	max-width:none;  /* `.elementor img{max-width:100%}`: qui la foto riempie il riquadro */
}
.adea-hist-panel{
	flex:.8 1 0;min-width:0;padding:var(--adea-hist-panel-pad,48px 52px);
	display:flex;flex-direction:column;justify-content:center;color:#fff;
}
.adea-hist-title{
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);
	/* 500 / -.01em: vedi la nota in testa */
	font-weight:500;font-size:var(--adea-hist-title-size,34px);
	line-height:1.12;letter-spacing:-.01em;color:#fff;margin:0 0 16px;
}
.adea-hist-text{
	font-size:16px;line-height:1.62;color:rgba(255,255,255,.82);
	margin:0;max-width:430px;
}

/* ---------- frecce ---------- */
/* ⚠️ Due classi, non una: `hello-elementor/reset.css` dichiara
   `button:hover,button:focus{background-color:#c36;color:#fff}` con
   specificità (0,1,1) e batterebbe una classe sola. La rete di sicurezza in
   adea-tokens.css §9 toglie il rosa, ma il fondo e il colore di RIPOSO li deve
   riaffermare la sezione: altrimenti al clic (`:focus` senza `:focus-visible`)
   il bottone resterebbe senza fondo. Segnalato dall'utente il 2026-08-04. */
.adea-hist .adea-hist-arrow{
	position:absolute;top:50%;transform:translateY(-50%);z-index:3;
	width:48px;height:48px;border-radius:50%;
	border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.14);
	color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
	padding:1px 6px; /* default del browser: l'originale non lo tocca */
	/* ⚠️ La misura segna 16px di corpo del testo contro i 13.3333px
	   dell'originale (là il bottone tiene il default del browser, qui eredita
	   dal Kit). Nessun effetto: il riquadro è fisso 48×48, dentro c'è solo un
	   svg con misure esplicite e non c'è testo. Lasciato ereditare. */
	line-height:normal; /* il Kit dà una riga ai bottoni; qui non serve */
	backdrop-filter:blur(6px);
	transition:background .2s ease,transform .2s ease;
}
.adea-hist-arrow:hover,.adea-hist-arrow:focus-visible{
	background:rgba(255,255,255,.28);transform:translateY(-50%) scale(1.06);
}
.adea-hist-prev{left:18px}
.adea-hist-next{right:18px}

/* ---------- linguette ---------- */
.adea-hist-nav{
	position:relative;display:grid;grid-template-columns:repeat(var(--adea-hist-n,3),1fr);margin-top:34px;
}
.adea-hist-nav::before{
	content:"";position:absolute;
	left:var(--adea-hist-rule,12%);right:var(--adea-hist-rule,12%);
	bottom:5px;height:2px;background:#e0e4e9;
}
/* ⚠️ Due classi, non una: `hello-elementor/reset.css` dichiara
   `button:hover,button:focus{background-color:#c36;color:#fff}` con
   specificità (0,1,1) e batterebbe una classe sola. La rete di sicurezza in
   adea-tokens.css §9 toglie il rosa, ma il fondo e il colore di RIPOSO li deve
   riaffermare la sezione: altrimenti al clic (`:focus` senza `:focus-visible`)
   il bottone resterebbe senza fondo. Segnalato dall'utente il 2026-08-04. */
.adea-hist .adea-hist-tab{
	position:relative;background:none;border:none;cursor:pointer;
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:600;
	font-size:var(--adea-hist-tab-size,14.5px);color:#9aa4ad;
	padding:0 0 24px;line-height:normal;
	border-radius:0; /* il Kit arrotonda i bottoni di 3px; l'originale no */
	transition:color .22s ease;
}
.adea-hist-tab::after{
	content:"";position:absolute;left:calc(50% - 6px);bottom:0;
	width:12px;height:12px;border-radius:50%;background:#e0e4e9;
	transition:background .22s ease,box-shadow .22s ease,transform .22s ease;
}
.adea-hist-tab:hover{color:#5b6b78}
.adea-hist-tab.is-active{color:var(--adea-blu,#004F9E)}
.adea-hist-tab.is-active::after{
	background:var(--adea-blu,#004F9E);
	box-shadow:0 0 0 4px rgba(0,79,158,.16);transform:scale(1.05);
}

/* ---------- breakpoint originali (misurati) ---------- */
@media(max-width:960px){
	.adea-hist-section{--adea-hist-pad-x:20px}
}
@media(max-width:760px){
	/* ⚠️ `min-height` e il margine laterale sono scritti come PROPRIETÀ, non
	   come variabili: i controlli dell'editor scrivono le variabili su un
	   selettore a due classi (`.elementor-element-… .adea-hist-slide`), che
	   vincerebbe su questa media query. Vedi la stessa trappola in CLAUDE.md. */
	.adea-hist-slide{flex-direction:column;min-height:0}
	.adea-hist-media{flex:none;height:200px}
	.adea-hist-panel{--adea-hist-panel-pad:30px 26px 34px}
	.adea-hist-title{--adea-hist-title-size:26px}
	.adea-hist-tab{--adea-hist-tab-size:13px}
	.adea-hist-nav{--adea-hist-rule:8%}
}
@media(max-width:560px){
	.adea-hist{padding-left:20px;padding-right:20px}
}

/* ---------- reduced-motion ----------
   Come l'originale (r.780): la pista non scorre più, cambia e basta.
   L'avanzamento automatico lo spegne hist.js. */
@media(prefers-reduced-motion:reduce){
	.adea-hist-track{transition:none!important}
	.adea-hist-arrow:hover,.adea-hist-arrow:focus-visible{transform:translateY(-50%)}
}