/*
 * Fascia fotografica "La nostra sede" con la CTA dentro (pagina Azienda) —
 * dall'originale index.html r.1062–1085
 * (CSS: styles.css r.899–919 per la fascia, r.999–1007 per la CTA,
 *  r.872–874 per occhiello/titolo/testo, r.200–201 e r.441–442 per il bottone).
 *
 * Markup in templates/imgband.php, controlli in includes/widgets/class-imgband.php.
 * Nessun .js. Il bottone è il componente condiviso `.adea-c-cta`.
 *
 * Cascata MISURATA sull'originale (1440/1024/820/700/560/375):
 *
 *                     >820             561–820          ≤560
 *  altezza minima     400              400              320
 *  imbottitura        64 / 40 / 66     64 / 40 / 66     48 / 20 / 66
 *  titolo             42px             42px             27px
 *  blocco CTA         in riga          in colonna       in colonna
 *                     mt 52 · pt 44    mt 38 · pt 32    mt 38 · pt 32
 *                     gap 32           gap 22           gap 22
 *  titolo della CTA   30px             25px             25px
 *  bottone            17px · icona 48  idem             16px · icona 44
 *
 * ⚠️ Due gradini diversi: **820** (il blocco CTA) e **560** (fascia e bottone).
 *
 * ⚠️ Lo spazio in fondo dipende da CHE COSA c'è dentro: 58px normalmente, 66px
 * se la fascia ospita l'invito al contatto (`:has()`, originale r.902), 42px
 * sotto 560 — ma solo SENZA invito, perché la regola con `:has()` vale (0,3,0)
 * e batte la media query. Non è un valore da mettere a mano: se ne occupa il
 * foglio, come nell'originale.
 *
 * ⚠️ Il titolo scende a **27px** (`--t-h2-sm`) sotto 560, non a 33 come nella
 * fascia "Mission". Due fasce blu, due scale diverse: misurato.
 *
 * ⚠️ Il titolo pesa **400** e spazia **-.03em** (regola per le pagine interne);
 * quello della CTA pesa **400** per conto suo, con `!important` (r.1003).
 *
 * Indice: fascia · fotografia e velo · contenuto · etichette · blocco CTA ·
 *         bottone · breakpoint · reduced-motion
 */

/* ---------- fascia ---------- */
.adea-imgband{
	position:relative;min-height:var(--adea-imgband-minh,400px);
	display:flex;align-items:flex-end;overflow:hidden;background:#0a1618;
	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 */
}

/* ---------- fotografia e velo ---------- */
.adea-imgband-img{
	position:absolute;inset:0;background-size:cover;background-position:center;
	transform:scale(1.04);transition:transform 1.4s var(--adea-ease);
}
.adea-imgband:hover .adea-imgband-img{transform:scale(1.09)}
.adea-imgband-veil{
	position:absolute;inset:0;
	background:
		linear-gradient(94deg,rgba(4,17,34,.86) 0%,rgba(4,17,34,.5) 48%,rgba(4,17,34,.12) 100%),
		linear-gradient(0deg,rgba(4,17,34,.9) 0%,rgba(4,17,34,.62) 36%,rgba(4,17,34,.24) 66%,rgba(4,17,34,.04) 100%);
}

/* ---------- contenuto ---------- */
.adea-imgband-inner{
	position:relative;z-index:2;max-width:var(--adea-imgband-maxw,1240px);
	margin:0 auto;width:100%;
	padding:var(--adea-imgband-pt,64px) var(--adea-imgband-pad-x,40px) var(--adea-imgband-pb,58px);
}
/* ⚠️ CORRETTO il 2026-08-04 portando la stessa fascia su Miscelazione, dove
   NON c'è l'invito al contatto: lì l'originale scende a 42px sotto 560, mentre
   con l'invito resta 66 a ogni larghezza. La differenza la fa `:has()`
   (originale r.902): quella regola vale (0,3,0) e batte la media query, quindi
   con l'invito i 66 non si abbassano mai. Riprodotta com'è invece di lasciare
   il valore a un controllo, come avevo fatto la prima volta. */
.adea-imgband:has(.adea-imgband-cta) .adea-imgband-inner{
	padding-bottom:var(--adea-imgband-pb-cta,66px);
}
.adea-imgband-kicker{
	display:inline-flex;align-items:center;gap:9px;
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:600;
	font-size:var(--adea-t-kicker,12px);letter-spacing:var(--adea-t-kicker-ls,.16em);
	text-transform:uppercase;color:var(--adea-verde-chiaro,#8fd6a1);margin:0 0 16px;
}
.adea-imgband-title{
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);
	font-weight:400; /* 400 / -.03em: regola delle pagine interne */
	font-size:var(--adea-imgband-title-size,var(--adea-t-h2,42px));
	line-height:var(--adea-t-h2-lh,1.1);letter-spacing:-.03em;
	color:#fff;margin:0 0 16px;max-width:var(--adea-imgband-title-maxw,720px);
}
.adea-imgband-copy{
	font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.8);margin:0;
	max-width:var(--adea-imgband-copy-maxw,640px);
}

/* ---------- etichette in vetro ---------- */
.adea-imgband-stats{
	display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--adea-imgband-stats-mt,26px);
}
.adea-imgband-stats span{
	display:inline-flex;align-items:center;gap:8px;padding:9px 17px;border-radius:999px;
	background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);
	backdrop-filter:blur(10px);
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:500;
	font-size:13.5px;color:#fff;
}

/* ---------- blocco CTA dentro la stessa fascia ---------- */
.adea-imgband-cta{
	display:flex;align-items:center;justify-content:space-between;
	gap:var(--adea-imgband-cta-gap,32px);
	margin-top:var(--adea-imgband-cta-mt,52px);
	padding-top:var(--adea-imgband-cta-pt,44px);
	border-top:1px solid rgba(255,255,255,.18);
}
.adea-imgband-cta h2{
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:400;
	font-size:var(--adea-imgband-cta-title,30px);line-height:1.18;letter-spacing:-.03em;
	color:#fff;margin:0 0 10px;
}
.adea-imgband-cta p{
	font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.8);margin:0;max-width:660px;
}

/* ---------- bottone ----------
   Il resto è `.adea-c-cta` del tema: qui solo ciò che l'originale aggiunge sul
   `.adea-company-cta` e che il componente condiviso non ha. */
.adea-imgband-cta .adea-c-cta{margin-top:18px;flex:none}

/* ---------- breakpoint originali (misurati) ---------- */
@media(max-width:820px){
	/* ⚠️ Proprietà, non variabili di base: i controlli scrivono le variabili su
	   un selettore a due classi e vincerebbero. Ogni gradino legge una
	   variabile PROPRIA, così resta regolabile. */
	.adea-imgband-cta{
		flex-direction:column;align-items:flex-start;
		gap:var(--adea-imgband-cta-gap-820,22px);
		margin-top:var(--adea-imgband-cta-mt-820,38px);
		padding-top:var(--adea-imgband-cta-pt-820,32px);
	}
	.adea-imgband-cta h2{font-size:var(--adea-imgband-cta-title-820,25px)}
}
@media(max-width:560px){
	.adea-imgband{min-height:var(--adea-imgband-minh-560,320px)}
	.adea-imgband-inner{
		padding-top:var(--adea-imgband-pt-560,48px);
		padding-left:var(--adea-imgband-pad-x-560,20px);
		padding-right:var(--adea-imgband-pad-x-560,20px);
		padding-bottom:var(--adea-imgband-pb-560,42px);
	}
	.adea-imgband-title{font-size:var(--adea-imgband-title-size-560,var(--adea-t-h2-sm,27px))}
	/* il bottone rimpicciolisce: originale r.441–442 */
	.adea-imgband-cta .adea-c-cta{font-size:16px;padding-left:22px}
	.adea-imgband-cta .adea-c-cta__icon{width:44px;height:44px}
}

/* ---------- reduced-motion ----------
   ⚠️ L'originale (r.1010–1013) scrive `transform:none!important` sulla foto in
   hover. Non "ferma allo 1.04": la riporta a 1, quindi al passaggio del
   puntatore la foto si RIMPICCIOLISCE di scatto. È discutibile, ma è quello che
   fa l'originale e lo riproduciamo tale e quale. Se un giorno si decidesse di
   correggerlo, basta mettere `scale(1.04)` al posto di `none`. */
@media(prefers-reduced-motion:reduce){
	.adea-imgband:hover .adea-imgband-img{transform:none!important}
}