/*
 * "La nostra realtà" (pagina Azienda) — testata e scheda con quattro voci a
 * sinistra, griglia di sei fotografie a destra. Dall'originale
 * index.html r.1012–1058 (CSS: styles.css r.1408–1465, animazioni r.1731–1734).
 *
 * Markup in templates/real.php, controlli in includes/widgets/class-real.php.
 * Nessun .js.
 *
 * Cascata MISURATA sull'originale (1440/1080/900/620/560/375):
 *
 *                  >1080            621–1080         ≤620
 *  sezione pad     104 / 0 / 72     78 / 0 / 64      idem
 *  contenitore     .9fr 1.1fr       1 colonna        1 colonna
 *                  gap 74 · pad 40  gap 40 · pad 24  gap 40 · pad 18
 *  titolo          42px             33px             27px
 *  testo           max 430          senza limite     senza limite
 *  scheda          mt 46            mt 30            mt 30
 *                  pad 40/42/32     pad 32/28/26     pad 32/28/26
 *  quattro voci    2 colonne        2 colonne        1 colonna, gap 30
 *  cerchio icona   58px             58px             50px
 *  foto            gap 22           gap 22           gap 12
 *
 * ⚠️ Due gradini: 1080 e **620** (non 560, come invece in Company Policy).
 *
 * ⚠️ Titolo peso **500**, sottotitoli peso **600** e spaziatura **0**: vincono
 * `.page .adea-real-head h2` e `.page .adea-real-item h3` (r.1422 e r.1435),
 * con `!important` sul peso. Non è la variante da pagina interna. Misurato.
 *
 * Indice: sezione · decorazioni · contenitore · testata · scheda · voci ·
 *         fotografie · breakpoint · vita delle decorazioni · reduced-motion
 */

/* ---------- sezione ---------- */
.adea-real{
	position:relative;background:#fff;overflow:hidden;
	padding:var(--adea-real-pt,104px) 0 var(--adea-real-pb,72px);
	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 */
}
/* due decorazioni sovrapposte: puntini a metà altezza, archi in basso */
.adea-real::before{
	content:"";position:absolute;left:-120px;top:24%;width:300px;height:300px;
	z-index:0;pointer-events:none;opacity:.3;
	background:url('../img/hero-dots.svg') left center / contain no-repeat;
}
.adea-real::after{
	content:"";position:absolute;left:-70px;bottom:-50px;width:400px;height:270px;
	z-index:0;pointer-events:none;opacity:.45;
	background:url('../img/arc-lines.svg') left bottom / contain no-repeat;
}

/* ---------- contenitore ---------- */
.adea-real-inner{
	position:relative;z-index:1;max-width:var(--adea-real-maxw,1240px);
	margin:0 auto;padding:0 var(--adea-real-pad-x,40px);
	display:grid;grid-template-columns:var(--adea-real-cols,.9fr 1.1fr);
	gap:var(--adea-real-gap,74px);align-items:start;
}

/* ---------- testata ---------- */
.adea-real-head .adea-real-k{
	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:22px;
}
/* 500 / -.035em: vedi la nota in testa */
.adea-real-head h2{
	font-family:var(--adea-font-titoli,'Poppins',sans-serif);font-weight:500;
	font-size:var(--adea-real-title-size,var(--adea-t-h2,42px));
	line-height:var(--adea-t-h2-lh,1.1);letter-spacing:var(--adea-t-h2-ls,-.035em);
	color:var(--adea-blu,#004F9E);margin:0;
}
.adea-real-rule{
	width:58px;height:3px;background:var(--adea-verde,#42AD59);
	border-radius:2px;margin:28px 0 26px;
}
.adea-real-head p{
	font-size:15.5px;line-height:1.8;color:#5b6b78;margin:0;
	max-width:var(--adea-real-copy-maxw,430px);
}

/* ---------- scheda con le quattro voci ---------- */
.adea-real-card{
	margin-top:var(--adea-real-card-mt,46px);background:#fff;
	border:1px solid #eef1f5;border-radius:26px;
	padding:var(--adea-real-card-pad,40px 42px 32px);
	box-shadow:0 30px 62px -42px rgba(10,37,64,.26);
}
.adea-real-grid4{
	display:grid;grid-template-columns:repeat(var(--adea-real-grid4-n,2),1fr);
	gap:var(--adea-real-grid4-gap,32px);
}
.adea-real-ico{
	width:var(--adea-real-ico,58px);height:var(--adea-real-ico,58px);
	border-radius:50%;background:#eaf1f9;color:var(--adea-blu,#004F9E);
	display:flex;align-items:center;justify-content:center;
	margin-bottom:var(--adea-real-ico-mb,22px);
}
.adea-real-item 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 14px;
	line-height:normal; /* il Kit dà 1.2 alle intestazioni; qui vale normal */
}
.adea-real-item .adea-real-r{
	display:block;width:34px;height:2px;background:var(--adea-verde,#42AD59);
	border-radius:2px;margin-bottom:15px;
}
.adea-real-item p{font-size:13.5px;line-height:1.72;color:#5b6b78;margin:0}

/* ---------- griglia delle fotografie ---------- */
.adea-real-photos{
	display:grid;grid-template-columns:repeat(2,1fr);
	gap:var(--adea-real-photos-gap,22px);
}
.adea-real-photo{
	margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:#eef2f6;
	box-shadow:0 20px 44px -28px rgba(10,37,64,.34);
	transition:transform .42s var(--adea-ease-spring),box-shadow .42s ease;
	min-height:0; /* senza, `aspect-ratio` cede all'altezza del contenuto */
}
.adea-real-photo img{
	width:100%;height:100%;object-fit:cover;display:block;
	max-width:none; /* il Kit dà `max-width:100%` a ogni immagine */
	transition:transform .7s var(--adea-ease);
}
/* `:focus-within` in più rispetto all'originale: la stessa reazione da tastiera */
.adea-real-photo:hover,.adea-real-photo:focus-within{
	transform:translateY(-5px);box-shadow:0 30px 56px -28px rgba(10,37,64,.44);
}
.adea-real-photo:hover img,.adea-real-photo:focus-within img{transform:scale(1.06)}

/* ---------- breakpoint originali (misurati) ---------- */
/* ---------- il vuoto sotto le fotografie ----------
   ⚠️ 2026-08-31 — RICHIESTA DEL CLIENTE: sotto l'ultima riga di foto restavano
   122px di bianco, perché le due colonne sono allineate in alto
   (`align-items:start`) e ognuna prende la propria altezza: la colonna di
   sinistra misura 813px, la griglia di foto 691 (3 righe da 216, cioè il 4:3).

   Rimedio: la griglia si allunga fino in fondo e le righe si spartiscono
   l'altezza in parti uguali. Le foto passano da 4:3 a circa 1,12 — restano
   `object-fit:cover`, quindi non si deformano: si vede semplicemente una
   porzione diversa dell'inquadratura.

   ⚠️ Solo da 1081px in su: sotto quella soglia l'impaginato va a UNA colonna e
   non c'è più nessun vuoto da riempire — lì il 4:3 va lasciato stare.
   `grid-auto-rows` e non `grid-template-rows`: il numero di foto lo decide il
   pannello, e con un elenco fisso di righe una settima foto finirebbe fuori
   dallo schema. */
@media(min-width:1081px){
	.adea-real-photos{align-self:stretch;grid-auto-rows:1fr}
	.adea-real-photo{aspect-ratio:auto}
}

@media(max-width:1080px){
	/* ⚠️ 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-real{
		padding-top:var(--adea-real-pt-1080,78px);
		padding-bottom:var(--adea-real-pb-1080,64px);
	}
	.adea-real-inner{
		grid-template-columns:1fr;gap:var(--adea-real-gap-1080,40px);
		padding-left:var(--adea-real-pad-x-1080,24px);
		padding-right:var(--adea-real-pad-x-1080,24px);
	}
	.adea-real-head h2{font-size:var(--adea-real-title-size-1080,var(--adea-t-h2-md,33px))}
	.adea-real-head p{max-width:none}
	.adea-real-card{
		margin-top:var(--adea-real-card-mt-1080,30px);
		padding:32px 28px 26px;
	}
}
@media(max-width:620px){
	.adea-real-inner{
		padding-left:var(--adea-real-pad-x-620,18px);
		padding-right:var(--adea-real-pad-x-620,18px);
	}
	.adea-real-head h2{font-size:var(--adea-real-title-size-620,var(--adea-t-h2-sm,27px))}
	.adea-real-grid4{grid-template-columns:1fr;gap:var(--adea-real-grid4-gap-620,30px)}
	.adea-real-photos{gap:var(--adea-real-photos-gap-620,12px)}
	.adea-real-ico{
		width:var(--adea-real-ico-620,50px);height:var(--adea-real-ico-620,50px);
		margin-bottom:18px;
	}
}

/* ---------- vita delle decorazioni ----------
   Originale r.1731–1734: i puntini oscillano, gli archi girano piano.
   Solo se chi guarda non ha chiesto meno animazioni. Fotogrammi in
   adea-tokens.css §7. */
@media(prefers-reduced-motion:no-preference){
	.adea-real::before{animation:adeaDecoDrift 19s ease-in-out infinite alternate}
	.adea-real::after{animation:adeaDecoSpin 150s linear infinite}
}
/* nell'editor stanno ferme, altrimenti l'anteprima "balla" mentre si lavora */
.elementor-editor-active .adea-real::before,
.elementor-editor-active .adea-real::after{animation:none!important}

/* ---------- reduced-motion ----------
   Come l'originale (r.1462–1464): la foto non si alza e non ingrandisce. */
@media(prefers-reduced-motion:reduce){
	.adea-real-photo:hover,.adea-real-photo:focus-within,
	.adea-real-photo:hover img,.adea-real-photo:focus-within img{transform:none!important}
}