/* =========================================================
   MADMEDIA — page-madsuite.css
   Stili per la pagina "MadSuite" (page-madsuite.php), collegata alla
   pagina WP /madsuite/. Caricato SOLO su quella pagina (vedi
   inc/enqueue.php, is_page('madsuite')).

   Figma: Mockup, node 2080:5094 "MadSuite". Footer non ancora
   implementato (su richiesta esplicita, verra' affrontato in un
   secondo momento). L'hero (.madsuite-hero) e' statica, senza
   animazione/pin allo scroll — su richiesta esplicita, al posto del
   meccanismo animato riusato da home/agenzia.
   ========================================================= */

/* ---------- MadReport / MadCheck (stessa struttura, ordine invertito
   nel markup per MadCheck — vedi page-madsuite.php) ---------- */

/* NOTA: NON mettiamo overflow-x:hidden su .mm-page-madsuite/<main> —
   con la hera dentro <main> (vedi page-madsuite.php), impostare
   overflow-x senza impostare anche overflow-y fa si' che il browser
   calcoli comunque overflow-y:auto (stesso gotcha di homepage.css/Contesto:
   un asse hidden e l'altro non esplicito -> quello non esplicito diventa
   auto), trasformando <main> in un container di scroll a se' stante e
   rompendo sia lo scroll della pagina sia il position:sticky della hera
   (verificato dal vivo: window.scrollY restava bloccato a 0).

   Per togliere comunque la scrollbar orizzontale SOLO su questa pagina,
   lo mettiamo su <body> invece che su <main>: questo file CSS e'
   caricato solo su /madsuite/ (vedi sopra), quindi la regola qui sotto
   non tocca nessun'altra pagina. <body> e' un caso speciale nella spec
   CSS ("overflow propagation"): se <html> non imposta overflow, il
   valore impostato su <body> viene propagato all'elemento radice invece
   di trasformare <body> in un container di scroll annidato — quindi non
   ricrea lo stesso problema che aveva <main>. Verificato dal vivo dopo
   il deploy: scroll/sticky della hera continuano a funzionare, niente
   piu' scrollbar orizzontale. */
body {
	overflow-x: hidden;
}

.mm-madsuite-product--reverse .google-rating__label {
  text-align: right;
}
.mm-madsuite-product__inner {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-40, 40px);
	padding-block: var(--spacing-160, 160px);
}

.mm-madsuite-product__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--spacing-80, 80px);
}

/* MadCheck (titolo a sinistra, rating a destra): il rating deve
   allinearsi a destra come nel Figma (items-end sull'intero blocco). */
.mm-madsuite-product--reverse .mm-madsuite-product__rating {
	align-items: flex-end;
}

.mm-madsuite-product__title {
	width: 80%;
}

.mm-madsuite-product__rating {
width: 20%;
}

.mm-madsuite-product__image {
	width: 100%;
	height: 100vh;
	border-radius: var(--spacing-16, 16px);
	background-color: var(--colori-pieni-grigio-100, #EDEAE6);
	border: 1px solid var(--colori-pieni-grigio-200, #E2DED9);
	overflow: hidden;
}

.mm-madsuite-product__image img,
.mm-madsuite-product__image video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Box con video (MadReport e MadCheck): video a tutta larghezza, altezza sempre 16:9.
   Specificita' maggiore delle altezze fisse dei media query piu' sotto. */
.mm-madsuite-product .mm-madsuite-product__image--video {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

.mm-madsuite-product__foot {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--spacing-80, 80px);
	flex-wrap: wrap;
}

.mm-madsuite-product__desc {
	flex: 1 1 480px;
	color: var(--colori-pieni-blu-300, #616B7D);
}

.mm-madsuite-product__buttons {
	display: flex;
	align-items: center;
	gap: var(--spacing-8, 8px);
	flex: 0 0 auto;
	flex-wrap: wrap;
}

/* ---------- Ecosistema (Figma 2109:6026) ---------- */

.mm-madsuite-ecosistema__card {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-160, 160px);
	border-radius: var(--spacing-24, 24px);
	position: relative;
	isolation: isolate;
	background-image: var(--sfondo-hero);
}

/* Grana/rumore — stessa tecnica di .btn--gradiente::before /
   .mm-tag--gradiente::before (vedi assets/css/components.css). */
.mm-madsuite-ecosistema__card::before {
	content:        '';
	position:       absolute;
	inset:          0;
	z-index:        0;
	border-radius:  inherit;
	pointer-events: none;
	opacity:        0.1;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAnIGhlaWdodD0nMTAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nbWF0cml4JyB2YWx1ZXM9JzAgMCAwIDAgMC45NDEyICAwIDAgMCAwIDAuOTMzMyAgMCAwIDAgMCAwLjkxNzYgIDAgMCAwIDEgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
	background-repeat: repeat;
	background-size:   120px 120px;
}

.mm-madsuite-ecosistema__text {
	margin: 0;
	position: relative;
	z-index: 1;
	color: var(--colori-pieni-bianco-default, #F0EEEA);
}



@media (min-width:2560px){
	.mm-madsuite-product__rating{
		padding-bottom: var(--spacing-40, 40px);
	}
	.mm-madsuite-product__inner{
		padding-block: var(--spacing-320, 320px);
	}
	.mm-madsuite-ecosistema__card{
		padding: var(--spacing-320, 320px);
	}
}

@media (min-width:1820px) and (max-width: 2559px){
	.mm-madsuite-product__rating{
		padding-bottom: var(--spacing-32, 32px);
	}
}

@media (min-width:1081px) and (max-width: 1819px){
	.mm-madsuite-product__rating{
		padding-bottom: var(--spacing-24, 24px);
	}
}

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
	/* Su tablet/mobile, solo qui su /madsuite/: niente animazione
	   "facepile" per gli avatar del rating (richiesta esplicita) — devono
	   essere gia' visibili, nessuna comparsa. Il componente (vedi
	   mmAnimate.facepile() in assets/js/mm-animations.js, condiviso e
	   NON toccato) nasconde gli avatar via stile inline (opacity/transform)
	   e li anima al trigger dello scroll; una regola CSS con !important
	   vince comunque sullo stile inline impostato da GSAP, quindi qui li
	   forziamo sempre nello stato finale visibile, di fatto neutralizzando
	   l'animazione senza toccare il file condiviso. Su desktop (>1080px)
	   il comportamento resta quello di default (animato). */
	.mm-page-madsuite .google-rating__avatar {
		opacity: 1 !important;
		transform: none !important;
	}
	.mm-madsuite-product--reverse .google-rating__label{
		text-align: left;
	}

	.mm-madsuite-product__inner {
		padding-block: var(--spacing-160, 160px);
	}

	.mm-madsuite-ecosistema__card {
		padding: var(--spacing-80, 80px);
	}
	.mm-madsuite-product__head{
		display: flex;
		flex-direction: column;
		        align-items: flex-start;
				gap: var(--spacing-40, 40px);
	}
	.mm-madsuite-product__title{
		width: 100%;
	}
	.mm-madsuite-product__image{
		height: 420px;
	}
	.mm-madsuite-product__desc{
		flex: auto;
	}
	.mm-madsuite-product__foot{
		gap: var(--spacing-40, 40px);
	}
	.mm-madsuite-product--reverse .mm-madsuite-product__rating{
		align-items: flex-start;
		/* Solo per MadCheck (--reverse): da tablet in giu' l'avatar/rating
		   deve stare SOPRA il titolo (richiesta esplicita, diverso da
		   MadReport). Nel markup il titolo viene prima del rating (vedi
		   page-madsuite.php), quindi qui lo anticipiamo visivamente con
		   order:-1 — resta cosi' anche sotto i 767px perche' il blocco
		   Mobile qui sotto non definisce un order diverso per --reverse,
		   quindi eredita questo. */
		order: -1;
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.mm-madsuite-product__inner {
		padding-block: var(--spacing-80, 80px);
		gap: var(--spacing-24, 24px);
	}

	.mm-madsuite-product__head,
	.mm-madsuite-product--reverse .mm-madsuite-product__head {
		flex-direction: column-reverse;
		align-items: center;
		gap: var(--spacing-16, 16px);
	}

	/* Su mobile SOLO MadReport va "invertito" (recensioni/rating sopra il
	   titolo, richiesta esplicita) — nel markup MadReport ha gia' il rating
	   prima del titolo (vedi page-madsuite.php), quindi qui non serve alcun
	   order: l'ordine naturale del DOM da solo mette il rating sopra.
	   MadCheck invece ha il titolo prima nel DOM, e a differenza di
	   MadReport NON va invertito su mobile: resta title-poi-rating (nessuna
	   regola qui sotto per --reverse, quindi eredita l'ordine naturale del
	   DOM = titolo sopra — a tablet invece MadCheck mostra il rating sopra,
	   vedi order:-1 su .mm-madsuite-product--reverse .mm-madsuite-product__rating
	   nel blocco Tablet qui sopra, che pero' qui in Mobile non si applica
	   perche' lo sovrascriviamo esplicitamente sotto). */
	.mm-madsuite-product--reverse .mm-madsuite-product__rating {
		order: 0;
		align-items: center;
	}
	.mm-madsuite-product__image{
		height: 240px;
	}

	.mm-madsuite-product__title,
	.mm-madsuite-product__desc {
		max-width: none;
		flex-basis: 100%;
		text-align: center;
	}

	.mm-madsuite-product__foot {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-24, 24px);
	}

	.mm-madsuite-product__buttons {
		width: 100%;
		justify-content: center;
		/* .btn e' display:inline-flex (shrink-to-fit, vedi components.css),
		   quindi width:100% qui sul contenitore da solo non basta a far
		   allargare i singoli bottoni — li impiliamo in colonna e diamo a
		   ciascuno width:100% sotto, scoped a .mm-madsuite-product__buttons
		   .btn cosi' non tocchiamo .btn ovunque altro sul sito. */
		flex-direction: column;
	}
	.mm-madsuite-ecosistema__text{
		text-align: center;
	}

	.mm-madsuite-product__buttons .btn {
		width: 100%;
	}

	.mm-madsuite-ecosistema__card {
		padding: var(--spacing-40, 40px) var(--spacing-24, 24px);
	}
}

/* ---------- Hero (gradiente sfocato statico che si scioglie nel
   bianco — SENZA animazione/pin allo scroll, su richiesta esplicita al
   posto del meccanismo animato di home/agenzia). ---------- */

/* Hero alta almeno 100vh (min-height: cresce se il contenuto e' piu'
   alto). Gradiente (--sfondo-hero) con l'ellisse dimensionata in
   PERCENTUALE (non svh) rispetto al box, cosi' si adatta sempre
   all'altezza reale della sezione qualunque essa sia — su richiesta
   esplicita, stesso principio gia' usato per il footer di /casi-studio/
   (vedi archive-case_study.css). Il blur "sporca" ancora di rosa circa
   2 raggi sopra il bordo: questo margine garantisce che il fondo sia
   esattamente #F0EEEA. */
.madsuite-hero {
	position: relative;
	min-height: 100vh;
	overflow: hidden;             /* taglia il blur che esce dai bordi */
	isolation: isolate;
	--blur: min(125px, 8svh);          /* 125px su schermi alti, piu' piccolo su schermi bassi */
	--ext: calc(var(--blur) * 2.4);    /* quanto lo strato esce dall'hero (alto e lati) */
	/* Gradiente radiale blu -> rosso -> bianco, riutilizzato in
	   .madsuite-hero::before qui sotto: variabile cosi' resta modificabile
	   in un solo punto (es. per riusarlo altrove su questa pagina). */
	--sfondo-hero: radial-gradient(
		220% 220% at 100% var(--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);
}

/* Strato gradiente + blur, dietro al contenuto.
   Esce dall'hero di --ext su alto e lati: senza, il blur farebbe diventare
   trasparenti (quindi piu' chiari) i bordi.
   Ellisse larga 145% rispetto all'altezza: appiattisce la curvatura ai lati,
   cosi' il blu resta pieno su tutta la larghezza piu' a lungo. */
.madsuite-hero::before {
	content: "";
	position: absolute;
	inset: calc(var(--ext) * -1) calc(var(--ext) * -1) 0 calc(var(--ext) * -1);
	z-index: -2;
	background: var(--sfondo-hero);
	-webkit-filter: blur(var(--blur));
	filter: blur(var(--blur));
	transform: translateZ(0);   /* aiuta Safari con blur grandi */
}

/* Grana (.mm-bg-grain, stile base condiviso in _utilities.css): qui in piu'
   la maschera la fa sparire prima del bianco finale, cosi' non resta
   texture sul fondo (la sezione sotto non ce l'ha e si vedrebbe lo stacco). */
.madsuite-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%);
}

/* Primo schermo: il contenuto (il titolo, con la STESSA identica
   struttura/padding di .mm-hero-home__inner/__title/__row/__line gia'
   usata da home/agenzia — vedi homepage.css, non toccata) sta in fondo
   ai primi 100svh: stesso schema del vecchio .mm-hero-home__stage
   (colonna + justify-content:flex-end), qui pero' senza position:sticky
   (l'hero non e' piu' pinnata). */
.madsuite-hero__primo-schermo {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* La sezione successiva (MadReport, .mm-risultati condivisa con Home)
   normalmente parte con margin-top:-100vh (vedi homepage.css) per
   compensare l'hero animata a schermo intero/overlay: qui la hero e'
   statica e nel flusso normale, quindi va azzerato — SOLO su questa
   pagina (scoped a .mm-page-madsuite, questo file CSS e' comunque
   caricato solo su /madsuite/). */
.mm-page-madsuite .mm-risultati {
	margin-top: 0;
}

/* ---------- Footer animato (MadCheck -> #mmReviewsSection/Footer) ---------- */
/* .mm-reviews__inner e' condivisa con home/archivio Case Study (vedi
   homepage.css, non toccata) e ha padding-block:80px + padding-inline
   (ereditato da .mm-container) — qui su MadSuite MadCheck ha gia' il
   proprio padding (.mm-madsuite-product__inner: padding-block:160px +
   .mm-container), quindi il padding di .mm-reviews__inner si sommava
   creando troppo spazio ai lati/sopra/sotto. Azzerato SOLO qui (scoped
   a .mm-page-madsuite, cioe' <main> su questa pagina — la Hero e'
   dentro <main> quindi il selettore fa match, vedi nota sopra) — su
   home/archivio Case Study .mm-reviews__inner resta invariata. */
.mm-page-madsuite .mm-reviews__window .mm-reviews__inner {
	padding: 0;
}

/* Letter-spacing +5% sui paragrafi della pagina MadSuite (richiesta
   esplicita, SOLO i paragrafi, non titoli/bottoni), limitato ai <p> di
   testo effettivi — esclude deliberatamente il footer condiviso
   incluso in coda alla pagina (stesso componente di tutto il sito, non
   va toccato qui) E il testo dentro la card Ecosistema a sfondo
   gradiente (.mm-madsuite-ecosistema__text), escluso su richiesta
   esplicita. */
.mm-page-madsuite .mm-madsuite-product__desc {
	letter-spacing: 0.05em;
}

.nascosto{
	display: none;
}

.desc-madsuite{
	color: var(--Colori-pieni-blu-50, #BEC2CA);
	    display: flex;
    flex-direction: column;
    justify-content: flex-end;
	width: 35%;
	gap: 40px;
}

/* ── Hero ── */
.cs-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);
    --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);
    color: var(--colori-pieni-bianco-default);
}

.cs-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);
}

.cs-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%);
}

.cs-hero__inner {
    position: relative;
    z-index: 1;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--spacing-120, 120px);
    padding-top: calc(var(--mm-header-actual-h, 108px) + var(--spacing-40));
    padding-bottom: var(--spacing-40);
}

.cs-hero__top {
    display: flex;
    justify-content: flex-end;
    flex-direction: row-reverse;
    width: 100%;
    gap: 160px;
}

.cs-hero__intro {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24, 24px);
    width: 35%;
    justify-content: flex-end;
    padding-bottom: 25px;
}

.cs-hero__desc {
    margin: 0;
    color: var(--colori-pieni-blu-50);
}

.cs-hero__buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-8, 8px);
    flex-wrap: wrap;
}

.cs-hero__buttons > .btn {
    flex: 1 1 260px;
    justify-content: center;
    white-space: nowrap;
}

/* ── Mobile ── */
@media (max-width: 767px) {
    .cs-hero__inner {
        gap: var(--spacing-40, 40px);
    }
    .cs-hero__top {
        justify-content: flex-start;
    }
    .cs-hero__intro {
        max-width: none;
        padding-bottom: 0;
    }
    .cs-hero__buttons {
        flex-direction: column;
        align-self: stretch;
        width: 100%;
    }
    .cs-hero__buttons .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .cs-hero__inner {
        padding-bottom: var(--spacing-80, 80px);
    }
    .cs-hero__buttons > .btn {
        flex: none !important;
    }
}

/* ── Tablet / mobile ── */
@media (max-width: 1080px) {
    .cs-hero__inner {
        flex-direction: column-reverse;
        justify-content: flex-start;
        gap: 40px;
    }
    .cs-hero__buttons {
        align-self: stretch;
        width: 100%;
    }
    .cs-hero__intro {
        width: 100%;
        align-items: center;
        padding-bottom: 0;
        gap: 40px;
    }
    .cs-hero__desc {
        text-align: left;
    }
    .cs-hero__title {
        align-items: flex-start;
        flex-direction: column;
        width: 100% !important;
    }
    .cs-hero__title > br {
        display: none;
    }
    .cs-hero__top {
        display: flex;
        flex-direction: column-reverse;
        gap: 40px;
        justify-content: flex-start;
    }
}

/* ── Schermi grandi ── */
@media (min-width: 1820px) {
    .cs-hero__inner {
        padding-top: 180px;
    }
}

@media (min-width: 2560px) {
    .cs-hero__inner {
        padding-top: 280px;
        display: flex;
        justify-content: space-between;
    }
}

/* Dichiarata per ultima nel file originale: lasciala in fondo */
.cs-hero__title {
    color: var(--colori-pieni-bianco-default) !important;
    margin: 0;
    width: 80%;
}

.cs-hero__title {
  flex-shrink: 0;
}
.cs-hero__intro {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 1080px) {
  .cs-hero__top .cs-hero__title {
    display: block;
    width: 100%;
  }
  .cs-hero__top .cs-hero__title > br {
    display: inline;
  }
}

@media(min-width: 1081px) and (max-width: 1190px){
	.cs-hero__top{
		gap: 100px;
	}
}
@media (min-width: 1081px) {
  .cs-hero__top { align-items: flex-end; }
}

@media(max-width:767px){
	 .cs-hero__title {
        align-items: flex-start;
        flex-direction: column;
        width: 100% !important;
    }
}