/*
 * Certificazioni — dall'originale index.html r.446–456.
 *
 * In questo file: tutto l'aspetto.
 * Markup in templates/certs.php, controlli in includes/widgets/class-certs.php.
 * Nessun .js: entrata dal meccanismo condiviso, hover come transition,
 * decorazione di fondo dal componente condiviso .adea-deco del tema.
 *
 * È la sezione più semplice della home: un occhiello, un titolo e un riquadro
 * bianco con l'immagine dei loghi. Un solo gradino responsive (≤620), più il
 * margine laterale di `.sect` a ≤960.
 *
 * Cascata MISURATA sull'originale (1440/1200/1024/900/700/560/375):
 *
 *                >960            ≤960          ≤620
 *  sezione       40/0/84         40/0/84       24/0/58
 *  shell pad     0               0 20px        0 20px
 *  titolo        32px mb34       32px mb34     26px mb26
 *  riquadro      pad 40/48 r20   idem          pad 22/18 r16
 *  occhiello     12px .12em      idem          idem (non cambia)
 *
 * Indice: sezione e shell · occhiello · titolo · riquadro · immagine ·
 *         breakpoint · reduced-motion
 */

/* ---------- sezione e shell ---------- */
.adea-certs-section{
	background:var(--adea-certs-bg,#fff);
	padding:var(--adea-certs-pad-t,40px) 0 var(--adea-certs-pad-b,84px);
	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 */
}
.adea-certs-shell{position:relative;z-index:1;max-width:var(--adea-certs-maxw,1240px);margin:0 auto;text-align:center}

/* ---------- occhiello ----------
   NON è `.adea-c-kicker`: qui non c'è pillola né bordo — è una semplice riga
   di testo grigia in maiuscoletto spaziato. */
.adea-certs-kicker{
	display:inline-flex;align-items:center;gap:8px;
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);
	font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
	color:#8a99a6;margin:0 0 14px;
}

/* ---------- titolo ---------- */
.adea-certs-title{
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);
	font-size:var(--adea-certs-title-size,32px);line-height:1.12;letter-spacing:-.03em;
	color:#15171b;margin:0 0 var(--adea-certs-title-mb,34px);font-weight:400;
}

/* ---------- riquadro ---------- */
.adea-certs-board{
	background:#fff;border:1px solid #e8e3dc;
	border-radius:var(--adea-certs-board-radius,20px);
	padding:var(--adea-certs-board-pad,40px 48px);
	box-shadow:0 26px 50px -34px rgba(10,37,64,.22);
	max-width:var(--adea-certs-board-maxw,1080px);margin:0 auto;
	transition:transform .4s var(--adea-ease-spring),box-shadow .4s ease;
}
.adea-certs-board:hover{transform:translateY(-4px);box-shadow:0 34px 60px -34px rgba(10,37,64,.32)}

/* ---------- immagine ----------
   ⚠️ selettore discendente con due classi: `.elementor img{height:auto;
   max-width:100%}` è (0,1,1) e pareggerebbe `.adea-certs-board img` (§13).
   ⚠️ `display:block` NON è decorativo: l'originale lo dichiara una volta per
   tutte con la regola globale `img{display:block}` (styles.css r.6), che qui
   non esiste perché i widget non usano selettori globali. Da inline
   l'immagine sta su una riga di testo e si porta dietro lo spazio del
   discendente: il riquadro veniva 6px più alto a OGNI larghezza (misurato). */
.adea-certs-board .adea-certs-img{
	display:block;
	width:100%;height:auto;max-width:var(--adea-certs-img-maxw,980px);margin:0 auto;
}

/* ---------- breakpoint originali (misurati) ---------- */
@media(max-width:960px){
	/* `.sect` dell'originale: sotto 960 il margine laterale è 20px */
	.adea-certs-shell{padding-left:20px;padding-right:20px}
}
@media(max-width:620px){
	/* ⚠️ proprietà, non variabile: Elementor stampa --adea-certs-pad-* su
	   QUESTO stesso elemento con specificità più alta e vincerebbe. */
	.adea-certs-section{
		padding-top:var(--adea-certs-pad-t-620,24px);
		padding-bottom:var(--adea-certs-pad-b-620,58px);
	}
	.adea-certs-title{--adea-certs-title-size:var(--adea-certs-title-size-620,26px);--adea-certs-title-mb:26px}
	.adea-certs-board{--adea-certs-board-pad:22px 18px;--adea-certs-board-radius:16px}
}

/* ---------- reduced-motion ----------
   Come l'originale (r.746): il riquadro non si solleva più. */
@media(prefers-reduced-motion:reduce){
	.adea-certs-board:hover{transform:none!important}
}