/*
 * Fascia blu "Come lavoriamo" — testata centrata, i passi numerati e l'invito
 * al contatto, tutto dentro la stessa fascia.
 * Dall'originale index.html r.1140–1180 (miscelazione)
 * (CSS: styles.css r.866–874 e r.893–894 per fascia e testata,
 *  r.1035–1049 per i passi, r.999–1007 per l'invito).
 *
 * Markup in templates/steps.php, controlli in includes/widgets/class-steps.php.
 * Nessun .js. Fondo e impaginato dal componente condiviso `.adea-c-blueband`;
 * il bottone è `.adea-c-cta`.
 *
 * ⚠️ La testata centrata è la STESSA di `adea-mission` e l'invito al contatto è
 * lo STESSO di `adea-imgband`: valori identici, misurati di nuovo qui e trovati
 * uguali. Sono riscritti invece che condivisi perché è così che è costruito
 * tutto il plugin — anche `lineband`, `mission` e `imgband` ridichiarano
 * ciascuno il proprio occhiello. Se un giorno questi due pezzi comparissero in
 * un quarto widget, converrebbe promuoverli a componenti del tema.
 *
 * Cascata MISURATA sull'originale (1440/980/820/700/560/375):
 *
 *                    >980            821–980         561–820        ≤560
 *  imbottitura       78/40/84        78/40/84        78/40/84       56/20/60
 *  titolo            42px            42px            42px           33px
 *  passi             4 colonne       2 colonne       2 colonne      1 colonna
 *                    gap 20          gap 20          gap 20         gap 14
 *                    mt 46           mt 46           mt 46          mt 32
 *  invito            in riga         in riga         in colonna     in colonna
 *                    mt 52 · pt 44   idem            mt 38 · pt 32  idem
 *  titolo invito     30px            30px            25px           25px
 *
 * ⚠️ QUATTRO gradini diversi: 980 (i passi), 820 (l'invito), 560 (fascia,
 * titoli e passi a una colonna). Nessuno è un punto di rottura del Kit.
 *
 * Indice: sezione · testata · passi · invito · bottone · breakpoint ·
 *         reduced-motion
 */

/* ---------- sezione ---------- */
.adea-steps-section{
	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 */
}

/* ---------- testata centrata (gemella di adea-mission) ---------- */
.adea-steps-head{text-align:center;max-width:var(--adea-steps-head-maxw,680px);margin:0 auto}
.adea-steps-kicker{
	display:inline-flex;align-items:center;justify-content: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-steps-title{
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);
	font-weight:400; /* regola delle pagine interne: 400 e -.03em */
	font-size:var(--adea-steps-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;
}
.adea-steps-copy{font-size:16.5px;line-height:1.65;color:rgba(255,255,255,.8);margin:0}

/* ---------- i passi ---------- */
/* ⚠️ È una `<ol>`: un processo in quattro passi È un elenco numerato, e così
   un lettore di schermo annuncia "elenco di 4 elementi". Deviazione DICHIARATA
   (l'originale usa dei `div`), a costo zero sull'aspetto — purché si azzerino
   i valori predefiniti del browser, che altrimenti aggiungerebbero un margine
   verticale di 16px e i pallini dell'elenco. */
.adea-steps{
	list-style:none;padding:0;
	display:grid;grid-template-columns:repeat(var(--adea-steps-n,4),1fr);
	gap:var(--adea-steps-gap,20px);
	margin:var(--adea-steps-mt,46px) 0 0;
}
.adea-step{list-style:none;display:block} /* `list-item` non serve: il segno è già tolto */
.adea-step{
	position:relative;padding:28px 26px 30px;border-radius:20px;
	background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
	backdrop-filter:blur(10px);
	transition:background .3s var(--adea-ease),transform .38s var(--adea-ease-spring);
}
/* `:focus-within` in più rispetto all'originale: stessa reazione da tastiera */
.adea-step:hover,.adea-step:focus-within{
	background:rgba(255,255,255,.15);transform:translateY(-6px);
}
.adea-step-n{
	display:inline-flex;align-items:center;justify-content:center;
	width:38px;height:38px;border-radius:11px;
	background:var(--adea-verde,#42AD59);color:#fff;
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:600;
	font-size:15px;margin-bottom:18px;line-height:normal;
}
.adea-step h3{
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:500;
	font-size:17.5px;letter-spacing:-.01em;color:#fff;margin:0 0 9px;
	line-height:normal; /* il Kit dà 1.2 alle intestazioni; qui vale normal */
}
.adea-step p{font-size:14.5px;line-height:1.58;color:rgba(255,255,255,.76);margin:0}

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

/* ---------- breakpoint originali (misurati) ---------- */
@media(max-width:980px){
	/* ⚠️ Proprietà, non variabili di base: i controlli scrivono le variabili su
	   un selettore a due classi e vincerebbero qui. */
	.adea-steps{grid-template-columns:repeat(var(--adea-steps-n-980,2),1fr)}
}
@media(max-width:820px){
	.adea-steps-cta{
		flex-direction:column;align-items:flex-start;
		gap:var(--adea-steps-cta-gap-820,22px);
		margin-top:var(--adea-steps-cta-mt-820,38px);
		padding-top:var(--adea-steps-cta-pt-820,32px);
	}
	.adea-steps-cta h2{font-size:var(--adea-steps-cta-title-820,25px)}
}
@media(max-width:560px){
	.adea-steps{
		grid-template-columns:1fr;
		gap:var(--adea-steps-gap-560,14px);
		margin-top:var(--adea-steps-mt-560,32px);
	}
	.adea-steps-title{font-size:var(--adea-steps-title-size-560,var(--adea-t-h2-md,33px))}
	/* il bottone rimpicciolisce: originale r.441–442 */
	.adea-steps-cta .adea-c-cta{font-size:16px;padding-left:22px}
	.adea-steps-cta .adea-c-cta__icon{width:44px;height:44px}
}

/* ---------- reduced-motion ----------
   ⚠️ Niente da spegnere, ed è VOLUTO: il blocco `prefers-reduced-motion`
   dell'originale (r.1010–1013) non elenca `.adea-step`. Il sollevamento al
   passaggio del puntatore resta anche lì. Verificato riga per riga. */