/* =========================================================
   PAGINA MANIFESTO (/manifesto/)
   Figma: Mockup, node 2071:17672.
   ========================================================= */

/* Su questa pagina TUTTO il contenuto (non solo il Banner finale, a
   differenza di /madsuite/) sta dentro lo stage pinnato #mmReviewsStage
   (full-bleed, vedi piu' sotto) — <main> quindi non ha piu' un suo
   padding: lo spazio verticale prima del contenuto (che prima era qui)
   e' ora sul primo elemento dentro lo stage (.mm-manifesto-page__intro
   sotto), cosi' scorre insieme al resto invece di restare un'area
   morta sopra la sezione pinnata. */

/* Contenuto pagina limitato al 50% e centrato orizzontalmente. Su
   tablet/mobile 50% sarebbe troppo stretto per essere leggibile,
   quindi si allarga progressivamente fino al 100% sotto i 1080px. */
.mm-manifesto-page__wrap {
	width: 55%;
	margin-inline: auto;
}



@media (max-width: 1080px) {
	.mm-manifesto-page__wrap {
		width: 70%;
	}

	/* Su mobile il breadcrumb puo' essere piu' largo dello schermo:
	   invece di andare a capo o sfondare il layout, diventa scorrevole
	   in orizzontale su una riga sola. */
	.mm-manifesto-page__breadcrumb {
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.mm-manifesto-page__breadcrumb::-webkit-scrollbar {
		display: none;
	}
	.mm-manifesto-page__breadcrumb-current {
		flex-shrink: 0;
	}
}

.mm-manifesto-page__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-40, 40px);
	padding-top: var(--spacing-160, 160px);
}

.mm-manifesto-page__breadcrumb {
	display: flex;
	align-items: center;
	font-size: var(--body-sm-size);
	line-height: var(--body-sm-line);
	flex-wrap: nowrap;
	gap: var(--spacing-8, 8px);
	color: var(--colori-pieni-blu-300, #616B7D);
}

/* Sottolineatura animata al hover, stesso meccanismo del breadcrumb
   negli articoli (vedi .mm-post__breadcrumb a in single-post.css):
   background-image invece di text-decoration, cosi' si puo' animare
   la larghezza con una transition invece di uno scatto secco. */
.mm-manifesto-page__breadcrumb a {
	color: inherit;
	text-decoration: none;
	display: inline;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1.5px;
	font-size: var(--body-sm-size);
	line-height: var(--body-sm-line);
	transition: background-size 0.6s var(--mm-ease), color 0.2s ease;
}

.mm-manifesto-page__breadcrumb a:hover {
	color: var(--colori-pieni-blu-default, #162640);
	background-size: 100% 1.5px;
}

.mm-manifesto-page__title {
	margin: 0;
	color: var(--colori-pieni-blu-default, #162640);
	padding-top: var(--spacing-40, 40px);
}

.mm-manifesto-page__image {
	width: 100%;
	height: 500px;
	border-radius: var(--mm-radius-xl, 12px);
	background-color: #E2DED9;
}

.mm-manifesto-page__body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-40, 40px);
	padding-bottom: var(--spacing-40, 40px);
	padding-top: 60px;
}

.mm-manifesto-page__block {
	display: flex;
	flex-direction: column;
}

.mm-manifesto-page__block p {
	margin: 0;
	color: var(--colori-pieni-blu-300, #616B7D);
}

/* ---------- BANNER -> FOOTER (stage pinnato #mmReviewsStage) ---------- */

/* .mm-reviews__inner (homepage.css) ha di suo padding-block:80px e
   sfondo bianco pieno, pensati per le card Recensioni — qui il
   contenuto (intro + Banner) gestisce la propria spaziatura verticale
   per conto suo, quindi lo azzeriamo per evitare doppio spazio (stessa
   tecnica di .mm-page-madsuite, vedi page-madsuite.css). Lo sfondo
   bianco invece resta: e' quello che si vede scrollando prima che il
   footer sfumi sopra. */
.mm-page-manifesto .mm-reviews__window .mm-reviews__inner {
	padding: 0;
}

.mm-manifesto-page__banner {
	padding-bottom: var(--spacing-120, 120px);
}

.mm-manifesto-page__banner-grid {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16, 16px);
	width: 100%;
}

/* La variante 'full' del banner (mm-banner-card--full) e' un
   placeholder senza stile in components.css: qui la implementiamo
   scoped a questa pagina, senza toccare il CSS condiviso. A
   differenza di 'standard' (2 card affiancate al 50%), 'full' occupa
   tutta la larghezza del container ed e' impilata sopra l'altra. */
.mm-manifesto-page__banner-grid .mm-banner-card--full {
	width: 100%;
}

@media(min-width:2560px){
	.mm-manifesto-page__image{
		height: 800px !important;
	}
	.mm-manifesto-page__body{
		padding-top: 100px;
	}
}
@media (max-width: 1080px) {
	.mm-manifesto-page__intro {
		padding-top: var(--spacing-120, 120px);
	}
	.mm-manifesto-page__banner {
		padding-bottom: var(--spacing-120, 120px);
	}
}

@media (max-width: 767px) {
	.mm-manifesto-page__intro {
		padding-top: var(--spacing-160, 160px);
	}
	.mm-manifesto-page__wrap {
		width: 100%;
		padding-left: var(--spacing-20, 20px);
		padding-right: var(--spacing-20, 20px);
	}
	.mm-manifesto-page__banner {
		padding-bottom: var(--spacing-80, 80px);
	}
}


/* Letter-spacing +5% su tutto il testo del Manifesto tranne il titolo
   (richiesta esplicita), incluso il testo delle due card in fondo —
   scoped ai blocchi di contenuto specifici (non al footer condiviso,
   incluso in coda alla pagina, ne' al titolo h1/breadcrumb). */
.mm-manifesto-page__body p,
.mm-manifesto-page__banner p {
	letter-spacing: 0.05em;
}

.mm-manifesto-page__image {
	overflow: hidden; /* ritaglia la foto sui bordi arrotondati */
}
.mm-manifesto-page__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover; /* riempie il box senza deformarsi */
}