/*
 * Griglia di riquadri con icona, titolo e testo — dall'originale
 * index.html r.1450–1497 (BIO) e r.1535–1564 (Apicoltura)
 * (CSS: styles.css r.964–978 per i riquadri, r.1029–1032 per la testata).
 *
 * ⚠️ Lo stesso blocco torna su DUE pagine, con e senza testata: è per questo
 * che la testata è facoltativa e non un widget a parte.
 *
 * Markup in templates/facts.php, controlli in includes/widgets/class-facts.php.
 * Nessun .js.
 *
 * Cascata MISURATA sull'originale (1440/1024/760/560/375):
 *
 *                  >960          761–960     561–760     ≤560
 *  margine lat.    40            20          20          20
 *  colonne         due           due         una         una
 *  riquadro pad    32/30/30        32/30/30       26/22/24
 *  cerchio icona   54              54             48
 *  spazio          22              22             22
 *
 * ⚠️ TRE gradini: **960** (i margini laterali, da `.sect`), **760** (le colonne)
 * e **560** (le misure interne). Nessuno è un punto di rottura del Kit.
 *
 * ⚠️ Il titolo della testata pesa **400** e spazia -.03em: `.adea-sechead h2`
 * vale (0,1,1) e perde contro `.page:not([data-page="home"]) h2` (0,2,1), che
 * ha pure `!important`. Il titolo dei riquadri invece pesa **600** con
 * spaziatura **0**, perché `.page .adea-fact h3` vale (0,2,1) e ha `!important`.
 * Due titoli nella stessa sezione, due esiti diversi.
 *
 * Indice: sezione · testata · griglia · riquadro · breakpoint · reduced-motion
 */

/* ---------- sezione ---------- */
.adea-facts{
	position:relative;overflow:hidden;
	max-width:var(--adea-facts-maxw,1240px);margin:0 auto;
	padding:var(--adea-facts-pt,20px) var(--adea-facts-pad-x,40px) var(--adea-facts-pb,70px);
	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 (facoltativa) ---------- */
.adea-facts-head{text-align:center;max-width:var(--adea-facts-head-maxw,700px);margin:0 auto 42px}
.adea-facts-kicker{
	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,#42AD59);margin-bottom:12px;
}
.adea-facts-head h2{
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);
	font-weight:400; /* 400 / -.03em: vedi la nota in testa */
	font-size:var(--adea-facts-title,var(--adea-t-h2,42px));
	line-height:var(--adea-t-h2-lh,1.1);letter-spacing:-.03em;
	color:var(--adea-blu,#004F9E);margin:0 0 14px;
}
.adea-facts-head p{font-size:16.5px;line-height:1.62;color:#5b6b78;margin:0}

/* ---------- griglia ---------- */
.adea-factgrid{
	display:grid;grid-template-columns:repeat(var(--adea-facts-n,2),1fr);
	gap:var(--adea-facts-gap,22px);
}

/* ---------- riquadro ---------- */
.adea-fact{
	background:#fff;border:1px solid #eef1f5;border-radius:20px;
	padding:var(--adea-fact-pad,32px 30px 30px);
	transition:transform .35s var(--adea-ease-spring),box-shadow .35s ease;
}
/* `:focus-within` in più rispetto all'originale: stessa reazione da tastiera */
.adea-fact:hover,.adea-fact:focus-within{
	transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(10,37,64,.3);
}
.adea-fact-ico{
	width:var(--adea-fact-ico,54px);height:var(--adea-fact-ico,54px);
	border-radius:50%;background:#eaf1f9;color:var(--adea-blu,#004F9E);
	display:flex;align-items:center;justify-content:center;
	margin-bottom:var(--adea-fact-ico-mb,20px);
}
.adea-fact h3{
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:600;
	font-size:var(--adea-t-h3,16px);letter-spacing:0;
	color:var(--adea-blu,#004F9E);margin:0 0 13px;
	line-height:normal; /* il Kit dà 1.2 alle intestazioni; qui vale normal */
}
.adea-fact .adea-fact-r{
	display:block;width:34px;height:2px;background:var(--adea-verde,#42AD59);
	border-radius:2px;margin-bottom:15px;
}
.adea-fact p{font-size:14px;line-height:1.7;color:#5b6b78;margin:0}

/* ---------- breakpoint originali (misurati) ---------- */
@media(max-width:960px){
	/* ⚠️ Gradino dimenticato al primo giro: la sezione dell'originale è una
	   `.sect`, e `.sect{padding-left:20px!important}` (r.338) scatta a **960**,
	   non a 760. Il confronto lo ha visto subito: 40px invece di 20. */
	.adea-facts{
		padding-left:var(--adea-facts-pad-x-960,20px);
		padding-right:var(--adea-facts-pad-x-960,20px);
	}
}
@media(max-width:760px){
	/* ⚠️ Proprietà, non variabili di base: i controlli scrivono le variabili su
	   un selettore a due classi e vincerebbero qui. */
	.adea-factgrid{grid-template-columns:1fr}
}
@media(max-width:560px){
	.adea-fact{padding:var(--adea-fact-pad-560,26px 22px 24px)}
	.adea-fact-ico{
		width:var(--adea-fact-ico-560,48px);height:var(--adea-fact-ico-560,48px);
		margin-bottom:16px;
	}
}

/* ---------- reduced-motion ----------
   Come l'originale (r.1011–1012): il riquadro non si alza più. */
@media(prefers-reduced-motion:reduce){
	.adea-fact:hover,.adea-fact:focus-within{transform:none!important}
}