/* =========================================================
   PAGINA "Agenzia" (/agenzia/)
   Figma: Mockup, node 2041:16693 "Madmedia"

   Sezioni Numeri e Manifesto sono RIUSATE da home (vedi
   template-parts/sections/numeri.php e manifesto.php, il cui CSS vive
   gia' in homepage.css, caricato sitewide) — qui ci sono solo gli stili
   specifici di questa pagina: intro, risultati (wrapper titolo+certs,
   identico a home ma qui non riusato 1:1 su richiesta), gallery, banner.
   ========================================================= */

/* ---------- HERO ---------- */
/* Sezione statica (niente scroll-jacking): un solo layer di sfondo
   (::before, non piu' due <div> separati) con gradiente radiale
   sfocato che si scioglie nel bianco, stesso principio dato dall'utente
   (hero-gradient.css di riferimento), adattato alle classi/variabili
   del tema. Hero alta almeno 100vh (min-height: cresce se il contenuto
   e' piu' alto), gradiente con ellisse in PERCENTUALE (non svh) cosi'
   si adatta sempre all'altezza reale della sezione — cosi' la fusione
   con la sezione .mm-agenzia-intro subito sotto (che sale a
   sovrapporsi di poco, vedi margin-top negativo li' sotto) non lascia
   mai uno stacco visibile. Il blur "sporca" ancora di colore un
   margine oltre i bordi: .mm-agenzia-hero__inner (::before) esce di
   --mm-hero-ext su alto e lati per compensarlo, overflow:hidden sulla
   hero lo taglia. */
.mm-agenzia-hero {
	position:   relative;
	min-height: 100vh;
	overflow:   hidden;
	isolation:  isolate;
	--mm-hero-blur: min(125px, 8svh);
	--mm-hero-ext:  calc(var(--mm-hero-blur) * 2.4);
	/* Stesso gradiente (variabile --sfondo-hero) gia' usato dalla hero di
	   MadSuite (vedi assets/css/page-madsuite.css), su richiesta esplicita
	   — sostituisce i fermi 50%/80%/100% del Design System qui sopra. */
	--sfondo-hero: radial-gradient(
		220% 220% at 100% var(--mm-hero-ext),
		var(--colori-pieni-rosso-default, #D24A5D) -10%,
		var(--colori-pieni-blu-default, #162640) 50%,
		var(--colori-pieni-blu-default, #162640) 100%
	);
	background-color: var(--colori-pieni-blu-default, #162640);
	display:        flex;
	flex-direction: column;
}

.mm-agenzia-hero::before {
	content:  "";
	position: absolute;
	inset: calc(var(--mm-hero-ext) * -1) calc(var(--mm-hero-ext) * -1) 0 calc(var(--mm-hero-ext) * -1);
	z-index:  -2;
	background: var(--sfondo-hero);
	filter: blur(var(--mm-hero-blur));
	transform: translateZ(0); /* aiuta Safari con blur grandi */
}

/* Grana: sparisce (maschera) prima del bianco finale, altrimenti
   resterebbe texture visibile sul fondo — la sezione sotto non ce
   l'ha e si vedrebbe lo stacco. */
.mm-agenzia-hero > .mm-bg-grain {
	z-index: -1;
	-webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 85%);
	        mask-image: linear-gradient(to bottom, #000 65%, transparent 85%);
}

.mm-agenzia-hero__inner {
	position: relative;
	z-index:  1;
	min-height:   100svh;
	display:  flex;
	align-items: flex-end;
	padding-top:    calc(var(--mm-header-actual-h, 108px) + var(--spacing-40));
	padding-bottom: var(--spacing-40);
}

/* ---------- INTRO ---------- */
/* La hero sopra e' ora alta almeno 100vh (min-height, gradiente che
   finisce in blu pieno, non piu' in bianco): niente piu' margin-top
   negativo per "pescare" nella coda bianca della hero (che non c'e'
   piu'). */
.mm-agenzia-intro {
	position: relative;
	background-color: var(--colori-pieni-bianco-default, #F0EEEA);
}
.mm-agenzia-intro__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-40, 40px);
	padding-top: var(--spacing-80, 80px);
}
.mm-agenzia-intro__text {
	width: 100%;
	margin: 0;
	color: var(--colori-pieni-blu-default, #162640);
}
.mm-agenzia-intro__image {
	width: 100%;
	height: 800px;
	border-radius: var(--mm-radius-lg, 16px);
	background-color: var(--colori-opacizzati-blu-10, rgba(22, 38, 64, 0.1));
	overflow: hidden;
}
.mm-agenzia-intro__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- RISULTATI (wrapper titolo+certificazioni) ----------
   Stessa identica struttura/classi di .mm-risultati in home (vedi
   homepage.css) tranne il gap verticale verso i Numeri, piu' ampio qui
   (160px da Figma contro quello di home) e senza sezione Casi
   Studio/MadSuite sotto. */

.mm-agenzia-risultati .mm-risultati__inner {
	display: flex;
	padding-bottom: 0px;
	padding-top: var(--spacing-160, 160px);
	flex-direction: column;
	gap: var(--spacing-160, 160px);
}

/* ---------- GALLERY ---------- */
.mm-agenzia-gallery {
	background-color: var(--colori-pieni-bianco-default, #F0EEEA);
	padding-top: var(--spacing-160, 160px);
}
.mm-agenzia-gallery__inner {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16, 16px);
}
.mm-agenzia-gallery__row {
	display: flex;
	align-items: center;
	gap: var(--spacing-16, 16px);
	width: 100%;
}
.mm-agenzia-gallery__img {
	flex: 1 1 0;
	min-width: 0;
	height: 640px;
	border-radius: var(--mm-radius-lg, 16px);
	background-color: var(--colori-opacizzati-blu-10, rgba(22, 38, 64, 0.1));
	overflow: hidden;
}
.mm-agenzia-gallery__img--full {
	flex: none;
	width: 100%;
	height: 800px;
}
.mm-agenzia-gallery__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- BANNER (card "Unisciti al team" / "La nostra evoluzione") ---------- */
.mm-agenzia-banner {
	background-color: var(--colori-pieni-bianco-default, #F0EEEA);
	padding-bottom: var(--spacing-160, 160px);
}
.mm-banner-grid {
	display: flex;
	align-items: stretch;
	gap: var(--spacing-16, 16px);
	width: 100%;
}
.mm-banner-grid .mm-banner-card {
	flex: 1 1 0;
	min-width: 0;
}
@media (max-width: 1080px) {
	.mm-agenzia-intro,
	.mm-agenzia-risultati,
	.mm-agenzia-gallery {
		padding-top: var(--spacing-80, 80px);
	}
	.mm-agenzia-banner { padding-block: var(--spacing-80, 80px); padding-top: 0px;}
	.mm-agenzia-risultati .mm-risultati__inner { gap: var(--spacing-40, 40px); padding-top: var(--spacing-80, 80px);}
	.mm-agenzia-intro__image { height: 480px; }
	.mm-agenzia-gallery__img { width: 100%; height: 320px; }
	.mm-agenzia-gallery__img--full { height: 480px; }
	.mm-banner-grid { flex-direction: column; }
}

/* ---------- PERSONE ---------- */
.mm-agenzia-persone {
	background-color: var(--colori-pieni-bianco-default, #F0EEEA);
	padding-block: var(--spacing-80, 80px);
}
.mm-agenzia-persone__title {
	margin: 0 0 var(--spacing-40, 40px);
	color: var(--colori-pieni-blu-default, #162640);
}
.mm-agenzia-persone__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-16, 16px);
}

@media (max-width: 1080px) {
	.mm-agenzia-persone { padding-block: var(--spacing-80, 80px); }
	.mm-agenzia-persone__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.mm-agenzia-persone__grid { grid-template-columns: 1fr; }
}

/* ---------- PERSONE — slider orizzontale (drag + auto-scroll) ----------
   Implementazione originale (assets/js/team-slider.js): card affiancate
   scorrevoli, quella successiva parzialmente visibile a bordo pagina.
   Nessuna freccia: lo scroll parte lento e automatico, con drag manuale
   possibile sopra. */
.mm-agenzia-persone__head {
	margin-bottom: var(--spacing-40, 40px);
}

.mm-team-slider {
	width: 100%;
}
.mm-team-slider__track {
position: relative; /* offsetParent stabile per le misure in team-slider.js */
overflow-x: auto;
scroll-snap-type: x proximity;
cursor: grab;
touch-action: pan-y;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-inline: var(--mm-container-pad);
}
.mm-team-slider__track::-webkit-scrollbar { display: none; }
.mm-team-slider__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.mm-team-slider__auto {
display: flex;
align-items: stretch;
gap: var(--spacing-16, 16px);
width: max-content;
}
@media (max-width: 1080px) {
	/* Solo mobile/tablet: consente lo swipe orizzontale nativo del browser
	   (oltre allo scroll verticale della pagina) invece di affidarsi solo
	   al drag via JS, che su alcuni browser touch (es. Safari iOS) e'
	   inaffidabile. Da desktop resta invariato (touch-action: pan-y sopra). */
	.mm-team-slider__track {
		touch-action: pan-x pan-y;
	}
	/* Tablet/mobile: niente auto-scroll, si scorre di una card alla volta
	   (come in Home, vedi team-slider.css). !important per battere lo
	   scroll-snap-type:none messo inline dal JS. */
	.mm-team-slider__track {
		scroll-snap-type: x mandatory !important;
		scroll-padding-inline: var(--mm-container-pad);
	}
	.mm-team-slider__card { scroll-snap-stop: always; }
}
.mm-team-slider__card {
	flex: 0 0 auto;
	width: 320px;
	scroll-snap-align: start;
	user-select: none;
}
.mm-team-slider__pad {
	flex: 0 0 0px;
}

@media (max-width: 767px) {
	.mm-team-slider__card { width: 80vw !important; height: auto !important;}
	.mm-agenzia-intro__image{
		height: 480px;
	}
	.mm-agenzia-intro__inner{
		padding-top: 0px;
	}
	.mm-agenzia-intro__inner.mm-container{
		gap: 80px;
	}
	.mm-agenzia-gallery__row{
		gap: var(--spacing-8, 8px);
	}

	.mm-agenzia-gallery__inner{
		gap: var(--spacing-8, 8px);
	}

	.mm-agenzia-risultati .mm-risultati__inner{
		padding-top: 0px;
	}
	.mm-agenzia-gallery__img{
		height: 160px;
	}
	.mm-agenzia-gallery__img--full{
		height: 240px;
	}
	.mm-team-slider__card{
		height: 480px;
		width: 366px;
	}
	.mm-agenzia-hero__inner{
		padding-bottom: 80px;
	}
}

/* ---------- PERSONE + BANNER + FOOTER ----------
   Animazione (stage pinnato con sub-scroll + reveal a ellisse) rimossa
   del tutto su richiesta esplicita: Persone, Banner e Footer sono ora
   sezioni normali in flusso, niente piu' pin/overlay/sub-scroll, su
   nessun dispositivo. Lo script dedicato (assets/js/page-agenzia-
   scroll-footer.js) non e' piu' caricato (vedi inc/enqueue.php), il
   file resta sul disco inutilizzato. I layer decorativi dell'animazione
   (#mmAgenziaFooterScrollBg/RevealBg/Grain, ancora nel markup) restano
   semplicemente nascosti qui sotto. */
.mm-agenzia-scroll__stage > .mm-bg-grain,
.mm-agenzia-scroll__stage .mm-scroll-bg,
.mm-agenzia-scroll__stage .mm-scroll-bg--reveal {
	display: none !important;
}
.mm-agenzia-scroll__stage #mmFooter {
	/* position:relative + isolation:isolate servono al layer sfocato
	   ::before di .mm-footer (footer.css) per il proprio gradiente —
	   NON position:static, altrimenti si romperebbe. Il colore di base
	   (background-color) e' gia' quello di riserva di .mm-footer stessa,
	   niente da impostare qui. */
	position: relative;
	isolation: isolate;
}

/* Manifesto: componente CONDIVISO con home (template-parts/sections/
   manifesto.php, .mm-manifesto__inner, homepage.css) — su richiesta
   esplicita SOLO qui, in agenzia, il padding cambia rispetto al
   default (padding-block: 80px). Questo file (page-agenzia.css) e'
   enqueued SOLO su /agenzia/ (vedi inc/enqueue.php, is_page('agenzia')),
   quindi la regola qui sotto non tocca in alcun modo il Manifesto di
   home o di altre pagine che lo riusano.
   Scoped a >=768px: sotto quella soglia homepage.css ha gia' un suo
   padding ridotto apposta per mobile (@media max-width:767px,
   padding-block 200px + padding-bottom 120px, niente laterale) — con
   160px di padding laterale su uno schermo da telefono sarebbe restato
   pochissimo spazio per il testo, quindi qui non lo tocchiamo. */
@media (min-width: 768px) and (max-width:1080px) {
	.mm-manifesto__inner {
		min-height:100vh;
		padding-top: var(--spacing-80, 80px);
		padding-bottom: var(--spacing-80, 80px);
		justify-content: space-evenly;
		display: flex;
	}
}

@media(min-width:1820px){
	.mm-team-slider__card{
		width: 480px;
	}
}

@media(min-width:2560px){
	.mm-agenzia-intro{
		padding-top: var(--spacing-320, 320px);
	}
	.mm-agenzia-intro__image{
		height: 1200px;
	}
	.mm-agenzia-risultati .mm-risultati__inner{
		padding-top: var(--spacing-320, 320px);
	}
	.mm-agenzia-gallery__img{
		height: 960px;
	}
	.mm-agenzia-gallery__img--full{
		height: 1200px;
	}
	.mm-agenzia-persone{
		padding-block: var(--spacing-160, 160px);
	}
	.mm-team-slider__card{
		width: 640px;
	}
	.mm-team-member-card{
		padding: var(--spacing-40, 40px);
	}
	.mm-agenzia-banner{
		padding-bottom: var(--spacing-320, 320px);
	}
}
/* Pulsanti della sezione Risultati (vedi page-agenzia.php): su tablet e
   mobile .mm-risultati__title diventa display:contents e i suoi figli
   (titolo/loghi partner) prendono order 1/3 come fratelli diretti di
   .mm-risultati__numbers (order 2) dentro .mm-risultati__inner (vedi
   homepage.css, blocchi @media max-width:767px e 768-1080px) — i
   pulsanti, senza un order esplicito, finivano PRIMA di tutto il resto
   (order:0 di default) invece che sotto i loghi partner. order:4 li
   mette dopo le certificazioni (order:3) in entrambi i breakpoint. */
@media (max-width: 1080px) {
	.mm-risultati__buttons {
		order: 4;
	}
}