/*
 * Fascia blu piatta con l'invito al contatto — dall'originale
 * index.html r.1269–1275 (miscelazione).
 *
 * ⚠️ Lo stesso blocco torna su **cinque** pagine: prodotti, miscelazione,
 * pronto, bio, apicoltura. È per questo che è un widget.
 *
 * Nell'originale è tutto in stili INLINE su una `<section>` con dentro un
 * `<div class="sect band-flex">`; dal foglio arrivano solo `.band-flex`
 * (a ≤620 manda in colonna, con `!important`) e `.sect` (a ≤960 porta i
 * margini laterali a 20px, sempre con `!important`).
 *
 * Markup in templates/ctablue.php, controlli in includes/widgets/class-ctablue.php.
 * Nessun .js. Il bottone è il componente condiviso `.adea-c-cta`.
 *
 * Cascata MISURATA sull'originale (1440/960/620/375):
 *
 *                  >960          621–960        ≤620
 *  imbottitura     60 / 40       60 / 20        60 / 20
 *  disposizione    in riga       in riga        in colonna
 *  titolo          30px · 400    idem           idem
 *  bottone         17px · ico 48 idem           16px · ico 44
 *
 * ⚠️ Due gradini diversi, **960** e **620**, e nessuno dei due è un punto di
 * rottura del Kit.
 *
 * ⚠️ Il titolo è scritto `font-weight:700` INLINE nell'originale ma vale
 * **400**: `.page:not([data-page="home"]) h2{font-weight:400!important}` batte
 * anche l'inline. La stessa regola porta la spaziatura a -.03em. Misurato:
 * 400 e -0.9px su 30px. I 700 sono codice morto.
 *
 * Indice: fascia · contenuto · testi · bottone · breakpoint
 */

/* ---------- fascia ----------
   ⚠️ Il fondo pieno vale SOLO fuori dalla variante in gradiente: senza il
   `:not()` questa riga cancellava il gradiente di `.adea-c-blueband`, che ha
   la stessa specificità ma sta in un foglio caricato prima. */
.adea-ctablue:not(.adea-ctablue--gradiente){background:var(--adea-ctablue-bg,#004F9E)}
.adea-ctablue{
	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 */
}

/* ---------- contenuto ---------- */
.adea-ctablue-inner{
	max-width:var(--adea-ctablue-maxw,1240px);margin:0 auto;
	padding:var(--adea-ctablue-pt,60px) var(--adea-ctablue-pad-x,40px);
	display:flex;align-items:center;justify-content:space-between;
	gap:var(--adea-ctablue-gap,32px);
}

/* ---------- variante "fascia in gradiente" ----------
   Sulla Linea Pronto la stessa riga (titolo, testo, bottone) vive dentro la
   fascia blu in GRADIENTE invece che sul blu piatto. Cambiano tre cose:
   il fondo e l'imbottitura (78/40/84) arrivano dal componente condiviso
   `.adea-c-blueband`, il titolo è 28px invece di 30 e il testo è bianco
   trasparente invece dell'azzurrino.

   ⚠️ In questa variante il contenitore NON porta `.adea-ctablue-inner`: usa
   solo `.adea-c-blueband__inner`. Al primo tentativo le avevo messe entrambe e
   poi "azzeravo" la mia — ma la mia regola vinceva e spegneva imbottitura e
   larghezza del componente. Meno classi, non più regole. */
.adea-ctablue-riga{
	display:flex;align-items:center;justify-content:space-between;
	gap:var(--adea-ctablue-gap,32px);
}

/* ---------- testi ---------- */
.adea-ctablue h2{
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);
	font-weight:400; /* 400 / -.03em: vedi la nota in testa */
	font-size:var(--adea-ctablue-title,30px);line-height:1.2;letter-spacing:-.03em;
	color:#fff;margin:0 0 8px;
}
.adea-ctablue p{font-size:16.5px;color:#cfe0f2;margin:0}
/* ⚠️ Le due righe della variante stanno QUI, dopo quelle di base: hanno la
   stessa specificità (0,1,1) e a pari merito vince l'ultima. Scritte più in
   alto non avrebbero avuto alcun effetto. */
.adea-ctablue--gradiente h2{font-size:var(--adea-ctablue-title-grad,28px)}
.adea-ctablue--gradiente p{color:rgba(255,255,255,.8)}

/* ---------- bottone ----------
   Il resto è `.adea-c-cta` del tema: qui solo ciò che l'originale aggiunge
   sul `.adea-company-cta` (r.200 e r.441–442). */
.adea-ctablue .adea-c-cta{margin-top:18px;flex:none}

/* ---------- breakpoint originali (misurati) ---------- */
@media(max-width:960px){
	/* ⚠️ Proprietà, non variabili di base: i controlli scrivono le variabili su
	   un selettore a due classi e vincerebbero qui. */
	.adea-ctablue-inner{
		padding-left:var(--adea-ctablue-pad-x-960,20px);
		padding-right:var(--adea-ctablue-pad-x-960,20px);
	}
}
@media(max-width:620px){
	.adea-ctablue-inner,.adea-ctablue-riga{flex-direction:column;align-items:flex-start}
	.adea-ctablue .adea-c-cta{font-size:16px;padding-left:22px}
	.adea-ctablue .adea-c-cta__icon{width:44px;height:44px}
}

/* ---------- reduced-motion ----------
   Niente da spegnere: la fascia è ferma. Il bottone porta le proprie
   precauzioni dal componente condiviso `.adea-c-cta`. */

/* ---------- icona a sinistra (aggiunta il 2026-08-05) ----------
   Nel disegno nuovo la fascia ha un tondo con un'icona prima del testo. */
.adea-ctablue-testa{display:flex;align-items:center;gap:22px}
.adea-ctablue-ico{
	flex:none;width:58px;height:58px;border-radius:50%;
	background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.26);
	color:#fff;display:flex;align-items:center;justify-content:center;
}
@media(max-width:620px){
	.adea-ctablue-testa{gap:16px}
	.adea-ctablue-ico{width:48px;height:48px}
}