/* =====================================================
   FOOTER — Madmedia
   Riferimento: Figma "Sito-DS" nodo 796:1740
   Tutti i valori sono collegati alle variabili di
   style.css (colori, spacing) e alla scala tipografica.
   ===================================================== */

.mm-footer {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	--mm-footer-blur: min(125px, 8svh);
	--mm-footer-ext:  calc(var(--mm-footer-blur) * 2.4);
	/* Stesso gradiente delle hero del sito (vedi homepage.css/blog.css/
	   page-agenzia.css/page-madsuite.css/archive-case_study.css: rosso
	   -10% -> blu 50% -> blu 100%, ellisse 220%x220% sfocata), ribaltato
	   su entrambi gli assi (vedi transform su ::before sotto) cosi'
	   l'ancora rossa finisce in basso a sinistra invece che in alto a
	   destra — su richiesta esplicita, sostituisce sia il blu pieno
	   desktop sia il diverso gradiente rosso/bianco mobile di prima: ora
	   un solo trattamento coerente su tutte le pagine/breakpoint. Raggio
	   in PERCENTUALE (non svh) perche' l'altezza del footer dipende dal
	   contenuto, non dal viewport (stesso principio gia' usato per il
	   footer di Casi Studio). */
	--sfondo-footer: radial-gradient(
		220% 220% at 100% var(--mm-footer-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);
}

.mm-footer::before {
	content: "";
	position: absolute;
	inset: calc(var(--mm-footer-ext) * -1) calc(var(--mm-footer-ext) * -1) 0 calc(var(--mm-footer-ext) * -1);
	z-index: -2;
	background: var(--sfondo-footer);
	filter: blur(var(--mm-footer-blur));
	transform: scale(-1, -1) translateZ(0);
}

/* Stessa grana (.mm-bg-grain, _utilities.css) usata sopra il gradiente
   sfocato delle hero: sopra al layer sfocato (-2) ma sotto al contenuto
   (z-index di default), stesso identico ordine li' usato. */
.mm-footer > .mm-bg-grain {
	z-index: -1;
}

/* #mmFooterInner porta il vero layout (era su .mm-footer): quando il
   footer intero e' overlay dentro #mmReviewsStage (vedi homepage.css/js),
   #mmFooter fa da "finestra" fissa a 100vh con overflow:hidden (niente
   scrollbar nativa: NO overflow-y:auto, causava la doppia barra laterale
   e non era comunque interagibile mentre pointer-events e' none) e
   #mmFooterInner trasla verticalmente al suo interno con lo stesso
   sub-scroll di Casi Studio/Recensioni, se il footer e' piu' alto di
   100vh. Su tutte le altre pagine (footer non overlay) #mmFooterInner si
   comporta semplicemente come contenuto normale, nessuna differenza
   visiva. */
.mm-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-80);
	padding: var(--spacing-80) var(--spacing-40) var(--spacing-40);
	will-change: transform;
	padding-bottom: var(--spacing-0, 0px);
	background: transparent;
}

/* #mmFooterCopy (hero+CTA di apertura) ora vive fisicamente dentro
   #mmReviewsStage (vedi homepage.php/js), come overlay assoluto sovrapposto
   al gradiente di Recensioni nello stesso stage pinnato — stesso
   procedimento di Casi Studio -> MadSuite. La regola .mm-footer__top qui
   sotto resta solo per lo STILE del blocco (grid/tipografia): il
   posizionamento overlay (position/inset/z-index/allineamento verticale)
   e' in homepage.css, scoped a .mm-reviews__stage #mmFooterCopy. */

.mm-footer__top,
.mm-footer__bottom,
.mm-footer__copyright,
.mm-footer__wordmark {
	position: relative;
	z-index: 3;
}

/* ---------- TOP: headline + CTA banner ---------- */

.mm-footer__top {
	display: grid;
    grid-template-columns: 1fr 1fr;
	align-items: flex-start;
	gap: var(--spacing-40);
}

.mm-footer__hero {
	flex: 1 1 50%;
	min-width: 280px;
}

.mm-footer__hero h2 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--weight-regular);
	font-size: var(--h3-size);
	line-height: var(--h3-line);
	color: var(--colori-pieni-bianco-default);
}

.mm-footer__cta-card {
	flex: 1 1 50%;
	min-width: 280px;
	max-width: 100%;
	background: var(--colori-opacizzati-bianco-10);
	border-radius: var(--spacing-24);
	padding: var(--spacing-40);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-40);
}

.mm-footer__cta-card p {
	margin: 0;
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: var(--body-sm-size);
	line-height: var(--body-sm-line);
	color: var(--colori-pieni-blu-50);
}

.mm-footer__cta-card p + p {
	color: var(--colori-opacizzati-bianco-50);
}

.mm-footer__cta-btn {
	/* stile del bottone (bg/colore/padding/radius/shadow) ora gestito da .btn.btn--bianco */
	align-self: flex-start;
}

/* ---------- BOTTOM: newsletter + colonne di navigazione ---------- */

.mm-footer__bottom {
	display: grid;
    grid-template-columns: 1fr 1fr;
	align-items: flex-start;
	gap: var(--spacing-40);
	width: 100%;
}

.mm-footer__bottom__col {
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
	align-items: flex-start;
	gap: var(--spacing-40);
	width: 100%;
}

/* Stile del componente .mm-newsletter (markup/CSS base) in components.css:
   qui restano solo il layout della colonna footer e gli override responsive. */
.footer_bottom_col_sinsitra{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: var(--spacing-8, 8px);
}

.mm-footer__certs {
	display: flex;
	align-items: center;
	gap: var(--spacing-8, 8px);
}

.mm-footer__certs__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: var(--spacing-16, 16px);
	border: 1px solid var(--colori-opacizzati-bianco-10);
	border-radius: 8px;
	box-sizing: border-box;
}

.mm-footer__certs__item img {
		display: block;
	height: 64px;
	width: auto;
	object-fit: contain;
}

.mm-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-12);
}

.mm-footer__col h4 {
	margin: 0;
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: var(--body-sm-size);
	line-height: var(--body-sm-line);
	color: var(--colori-pieni-bianco-default);
}

.mm-footer__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

.mm-footer__menu a {
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: var(--body-sm-size);
	line-height: var(--body-sm-line);
	color: var(--colori-pieni-blu-50);
	text-decoration: none;
	transition: color var(--mm-duration-fast, 150ms) ease, background-size 0.6s var(--mm-ease, cubic-bezier(0.22, 1, 0.36, 1));
	/* Sottolineatura "disegnata" all'hover — stessa tecnica delle card
	   del blog/header/breadcrumb: currentColor cosi' segue il colore del
	   testo (che qui passa da bianco 50% a bianco pieno all'hover). Vale
	   per Link Rapidi, Social e Legal, che condividono tutti questa
	   classe. */
	display: inline;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1.5px;
}

.mm-footer__menu a:hover {
	color: var(--colori-pieni-bianco-default);
	background-size: 100% 1.5px;
}

/* ---------- Copyright + wordmark ---------- */

.mm-footer__copyright {
	margin: 0;
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: var(--body-sm-size);
	line-height: var(--body-sm-line);
	color: var(--colori-pieni-blu-50, #BEC2CA);
}

.mm-footer__wordmark {
	width: 100%;
	overflow: hidden;
	line-height: 0.8;
	text-align: center;
	font-family: var(--font-heading);
	font-weight: var(--weight-regular);
	font-size: 16vw;
	color: var(--colori-pieni-bianco-default);
	opacity: 0.5;
	user-select: none;
	pointer-events: none;
}

.mm-footer__wordmark-img {
	display: block;
	width: 100%;
	height: auto;
	opacity: 0.1;
}

/* =====================================================
   RESPONSIVE — Tablet + Mobile (≤1079px)
   Riferimento: Figma "Sito-DS" nodi 851:164 (tablet) / 851:547 (mobile)
   Layout impilato: Contatti → Navigazione (2x2) → Newsletter+copyright
   ===================================================== */
@media (max-width: 1080px) {
	.mm-footer {
		padding:var(--spacing-0, 0px);
	}

	.mm-footer__inner{
		padding: var(--spacing-80) var(--spacing-40) var(--spacing-40) !important; 
		min-height: 100vh;
	}

	/* --- Contatti: titolo sopra, banner sotto, tutto centrato --- */
	.mm-footer__top {
		grid-template-columns: 1fr;
		gap: var(--spacing-20, 20px);
	}


.mm-footer__certs__item img {
		display: block;
	height: 32px;
	width: auto;
	object-fit: contain;
}
	.mm-footer__hero {
		min-width: 0;
	}

	.mm-footer__hero h2 {
		text-align: center;
		overflow-wrap: break-word;
	}

	.mm-footer__cta-card {
		min-width: 0;
		align-items: center;
		text-align: center;
		padding: var(--spacing-20, 20px);
	}

	.mm-footer__cta-btn {
		width: 100%;
	}

	/* --- Navigazione: griglia 2x2 invece di 4 colonne --- */
	.mm-footer__bottom {
		grid-template-columns: 1fr;
		gap: var(--spacing-80, 80px);
	}

	.mm-footer__bottom__col {
		grid-template-columns: 1fr 1fr 1fr;
		order: 1;
	}

	.mm-footer__col {
		min-width: 0;
	}

	.mm-footer__menu a {
		overflow-wrap: break-word;
		white-space: normal;
	}

	/* --- Newsletter + copyright: sotto la navigazione, centrati --- */
	.mm-footer__certs {
		justify-content: center;
	}

	.footer_bottom_col_sinsitra {
		order: 2;
		height: auto;
		align-items: center;
		text-align: center;
		min-width: 0;
		gap: 20px;
	}

	.mm-newsletter {
		width: 100%;
		min-width: 0;
	}

	.mm-newsletter__text {
		text-align: center;
		overflow-wrap: break-word;
	}

	.mm-newsletter-form {
		width: 100%;
		min-width: 0;
		flex-wrap: wrap;
	}

	.mm-newsletter-form input {
		min-width: 120px;
	}

    .mm-footer__wordmark{
        display: none;
    }
}

/* =====================================================
   RESPONSIVE — Tablet (768-1079px)
   Figma Mockup, node 1909:8333 "Footer FallBack" — la riga dei
   collegamenti (Link Rapidi / Social / Legal) resta 3 colonne
   affiancate come su desktop, ma con allineamento diverso per
   colonna: Link Rapidi a sinistra (default), Social centrata,
   Legal a destra.
   ===================================================== */
@media (min-width: 768px) and (max-width: 1080px) {
	.mm-footer__bottom__col .mm-footer__col:nth-child(2) {
		align-items: center;
	}

	.mm-footer__bottom__col .mm-footer__col:nth-child(2) .mm-footer__menu {
		align-items: center;
	}

	.mm-footer__bottom__col .mm-footer__col:nth-child(3) {
		align-items: flex-end;
	}

	.mm-footer__bottom__col .mm-footer__col:nth-child(3) .mm-footer__menu {
		align-items: flex-end;
	}

	.mm-footer__bottom__col .mm-footer__col:nth-child(3) .mm-footer__menu a {
		text-align: right;
	}
	.google-rating.mm-footer-google-rating{
		align-items: center;
	}
}

/* =====================================================
   RESPONSIVE — Mobile (≤767px)
   ===================================================== */
@media (max-width: 767px) {
	.mm-footer {
		padding: var(--spacing-0, 0px);
	}
    .mm-footer__inner {
        padding: var(--spacing-80) var(--spacing-20) var(--spacing-20) var(--spacing-20) !important;
    }
	.mm-footer__top{
		gap: var(--spacing-20, 20px);
	}
	.mm-footer__cta-card{
		padding: var(--spacing-20, 20px)
	}
	.mm-footer__bottom__col{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.mm-footer__col{
		align-items: center;
		gap: var(--spacing-8, 8px);
	}
	.mm-footer__menu{
		align-items: center;
	}
	.mm-footer__bottom{
		gap: var(--spacing-80, 80px);
	}
}


/* =====================================================
   RESPONSIVE — Display (≥2560px)
   Riferimento: Figma "Sito-DS" nodo 851:384
   ===================================================== */
@media (min-width: 2560px) {
    .mm-newsletter-form{
        width: 660px;
    }
	.mm-footer {
		padding: var(--spacing-80) var(--spacing-80) 0;
	}
	.mm-footer__inner{
		padding: 0px;
	}

	.mm-footer__bottom__col {
		gap: var(--spacing-80);
	}
}

.sottomenu{
	color: var(--colori-pieni-bianco-default, #F0EEEA);
	/* Google Sans Flex/Small/Regular */
	font-family: var(--font-body, "Google Sans Flex");
	font-size: var(--body-sm-size, 16px);
	font-style: normal;
	font-weight: 400;
	line-height: var(--body-sm-line, 20px); /* 125% */
}
/* Rating Google nel footer (.mm-footer-google-rating, vedi
   footer-madmedia.php): solo la label "Unisciti agli altri 3k+
   clienti" e' bianca qui (sfondo scuro del footer), a differenza del
   colore blu di default del componente (vedi .google-rating__label
   in components.css). */
.mm-footer-google-rating .google-rating__label {
	color: var(--colori-pieni-bianco-default, #F0EEEA);
}

/* Wordmark animato lettera per lettera — solo desktop */
@media (min-width:1080px){
  .mm-footer__wordmark{display:flex;align-items:flex-end}
  .mm-wm-wrap{position:relative;display:block;overflow:hidden;line-height:0;width:100%;flex:1 1 100%}
  .mm-wm-wrap>.mm-footer__wordmark-img{display:block;visibility:hidden;width:100%;height:auto;max-width:none}
  .mm-l{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:translateY(100%);transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .45s;transition-delay:calc(var(--i)*65ms)}
  .mm-wm-wrap.go .mm-l{opacity:.1;transform:none}
  .mm-wm-wrap.go .mm-l:hover{transform:translateY(-12px);transition-delay:0s;transition-duration:.3s}
}
@media (min-width:1080px) and (prefers-reduced-motion:reduce){.mm-l{transition:none!important}}