/**
 * Single Post (Articolo blog)
 */

/* ── Layout a griglia: sidebar Casi Studio + articolo (Figma node 1054:1260) ──
   Riga 1: solo "Intro" (breadcrumb/titolo/info/immagine), colonna destra.
   Riga 2: sidebar (sinistra) e corpo articolo (destra) sulla STESSA riga —
   così la sidebar parte esattamente al livello del primo titolo del corpo,
   senza bisogno di calcoli in JS. ── */

body.single-post {
	background: var(--colori-pieni-bianco-default);
}

/* ── Banner "Parlane con noi" (Figma node 1054:1821) — fine articolo ────────── */

.mm-post__cta-banner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-40);
	padding: var(--spacing-40);
	border-radius: var(--spacing-12, 12px);
	/* Stessa forma/angolazione del gradiente di bottoni, etichetta,
	   cursore e filtri (radiale, centrato in basso). */
	background-image: var(--sfondo-hero);
	margin-top: var(--spacing-48);
}

.mm-post__cta-banner > * {
	position: relative;
	z-index: 1;
}

/* La regola sopra (per portare testo/bottone sopra la texture di
   rumore) si applica anche a .mm-bg-grain in quanto figlio diretto,
   sovrascrivendone il position:absolute — lo rimette percio' nel
   flusso normale del flex-column, creando spazio indesiderato. Va
   ripristinato absolute qui (specificita' maggiore, vince). */
.mm-post__cta-banner > .mm-bg-grain {
	position: absolute;
	z-index: 0;
}

/* Stessa texture "noise" degli altri componenti --gradiente. */
.mm-post__cta-banner::before {
	content:        '';
	position:       absolute;
	inset:          0;
	z-index:        0;
	pointer-events: none;
	opacity:        0.1;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAnIGhlaWdodD0nMTAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nbWF0cml4JyB2YWx1ZXM9JzAgMCAwIDAgMC45NDEyICAwIDAgMCAwIDAuOTMzMyAgMCAwIDAgMCAwLjkxNzYgIDAgMCAwIDEgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
	background-repeat: repeat;
	background-size:   120px 120px;
}

@media (min-width: 1081px) {
	.mm-post__cta-banner {
		grid-column: 2;
		grid-row: 3;
		padding: var(--spacing-80) var(--spacing-40);
		border-radius: var(--mm-radius-xl, 24px);
	}
}

.mm-post__cta-text {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	color: var(--colori-pieni-bianco-default);
}

.mm-post__cta-text .h4 {
	color: var(--colori-pieni-bianco-default);
	margin: 0;
}

.mm-post__cta-text p {
	margin: 0;
}

.mm-post__cta-link {
	color: var(--colori-pieni-bianco-default);
	text-decoration: underline;
}

/* ── FAQ (Figma node 832:128, Sito-DS) ───────────────────────────────────────── */

.mm-post__faq {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-16);
	margin-top: var(--spacing-48);
}

@media (min-width: 1081px) {
	.mm-post__faq {
		grid-column: 2;
		grid-row: 4;
	}
}

.mm-faq-item {
	position: relative;
	background: var(--colori-pieni-bianco-600, #EAE7E3);
	border-radius: var(--mm-radius-xl, 24px);
	padding: var(--spacing-20, 20px);
	overflow: hidden;
	isolation: isolate;
}

@media (min-width: 1081px) {
	.mm-faq-item {
		padding: var(--spacing-40);
	}
}

/* Il gradiente sta su un layer separato che entra/esce in dissolvenza:
   il browser non anima in modo fluido un cambio diretto di background-image,
   quindi lo scatto si evitava solo con un crossfade di opacità. */
.mm-faq-item::before {
	content: '';
	position: absolute;
	inset: 0;
	/* Stessa forma/angolazione del gradiente di bottoni, etichetta,
	   cursore, filtri e banner (radiale, centrato in basso). */
	background-image: var(--sfondo-hero);
	opacity: 0;
	transition: opacity 0.5s ease;
	z-index: 0;
}

.mm-faq-item:hover::before,
.mm-faq-item[open]::before {
	opacity: 1;
}

/* Stessa texture "noise" degli altri componenti --gradiente, con lo
   stesso crossfade in hover/apertura del gradiente su ::before. */
.mm-faq-item::after {
	content:        '';
	position:       absolute;
	inset:          0;
	z-index:        0;
	pointer-events: none;
	opacity:        0;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAnIGhlaWdodD0nMTAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nbWF0cml4JyB2YWx1ZXM9JzAgMCAwIDAgMC45NDEyICAwIDAgMCAwIDAuOTMzMyAgMCAwIDAgMCAwLjkxNzYgIDAgMCAwIDEgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
	background-repeat: repeat;
	background-size:   120px 120px;
	transition:     opacity 0.5s ease;
}

.mm-faq-item:hover::after,
.mm-faq-item[open]::after {
	opacity: 0.1;
}

.mm-faq-item__question {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-16);
	cursor: pointer;
	list-style: none;
}

.mm-faq-item__question::-webkit-details-marker {
	display: none;
}

.mm-faq-item__question-text {
	color: var(--colori-pieni-blu-default);
	font-family: var(--font-heading);
	font-size: var(--h6-size);
	line-height: var(--h6-line);
	transition: color var(--mm-duration) var(--mm-ease);
}

.mm-faq-item:hover .mm-faq-item__question-text,
.mm-faq-item[open] .mm-faq-item__question-text {
	color: var(--colori-pieni-bianco-default);
}

.mm-faq-item__icon {
	flex-shrink: 0;
	color: var(--colori-pieni-blu-default);
	transition: transform var(--mm-duration) var(--mm-ease), color var(--mm-duration) var(--mm-ease);
}

.mm-faq-item:hover .mm-faq-item__icon,
.mm-faq-item[open] .mm-faq-item__icon {
	color: var(--colori-pieni-bianco-default);
}

.mm-faq-item[open] .mm-faq-item__icon {
	transform: rotate(180deg);
}
.mm-faq-item.is-closing .mm-faq-item__icon {
	transform: rotate(0deg);
}

.mm-faq-item__answer {
	position: relative;
	z-index: 1;
	color: var(--colori-pieni-blu-50);
	font-family: var(--font-body);
	font-size: var(--body-md-size);
	line-height: var(--body-md-line);
	margin: var(--spacing-16) 0 0;
}

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

.mm-post__intro,
.mm-post__content {
	width: 100%;
}

.mm-post__sidebar {
	width: 100%;
	/* Sotto i 1080px il layout è impilato in colonna: la sidebar "lavori
	   correlati/servizi" va sempre per ultima, sotto banner e FAQ. */
	order: 10;
}

@media (min-width: 1081px) {
	/* Tre colonne — sidebar sinistra 25%, contenuto centrale 50%, colonna
	   destra 25% riservata alla futura sidebar (per ora vuota, nessun
	   elemento nel markup): proporzioni fisse in fr (1:2:1), cosi' si
	   riducono tutte insieme mantenendo il rapporto quando lo spazio
	   manca, senza bisogno di un padding-right elastico separato come
	   prima (quello spazio ora e' una colonna vera della grid). */
	.mm-post__layout {
		display: grid;
		grid-template-columns: 1fr 2fr 1fr;
		column-gap: var(--spacing-80, 80px);
		row-gap: 0;
		padding-bottom: var(--spacing-240, 240px);
	}

	.mm-post__layout.mm-container {
		padding-top: var(--spacing-160, 160px);
	}

	.mm-post__sidebar {
		order: initial;
	}

	.mm-post__intro {
		grid-column: 2;
		grid-row: 1;
	}

	.mm-post__sidebar {
		grid-column: 1;
		grid-row: 2 / 5;
		/* Le track "1fr" della grid hanno di default un minimo implicito
		   pari al min-content del loro contenuto (minmax(auto,1fr), non
		   minmax(0,1fr)): senza questo, il contenuto della sidebar (es.
		   le card "lavori correlati") puo' imporre una larghezza minima
		   maggiore della proporzione 1:2:1, rendendo la colonna piu'
		   larga della colonna 3 (stessa "1fr" ma senza quel contenuto). */
		min-width: 0;
	}

	.mm-post__content {
		grid-column: 2;
		grid-row: 2;
	}

	/* Colonna 3, per ora vuota: nessun elemento nel markup — riservata
	   per la futura sidebar destra. */
}

/* ── Display (2560px+, Figma node 1198:11542/12481) ──────────────────────────── */


.mm-post__sidebar-label {
	color: var(--colori-pieni-blu-default);
	font-family: var(--font-body);
	font-size: var(--body-sm-size);
	line-height: var(--body-sm-line);
}

.mm-post__cs-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--spacing-8, 8px);
	padding: var(--spacing-16);
	background: var(--colori-pieni-bianco-600, #EAE7E3);
	border-radius: var(--spacing-12, 12px);
	text-align: left;
	text-decoration: none;
	transition: background var(--mm-duration) var(--mm-ease);
}

.mm-post__cs-card:hover {
	background: var(--colori-pieni-bianco-700, #E3DFDA);
}

.mm-post__cs-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: var(--spacing-16, 16px);
}

.mm-post__cs-card-numero {
	color: var(--colori-pieni-rosso-default, #D24A5D);
	font-family: var(--font-mono);
	font-weight: var(--weight-regular);
	font-size: var(--num-xs-size);
	line-height: normal;
	text-box: trim-both cap alphabetic;
}

/* Il pulsante icona qui non e' piu' un elemento custom: e' lo stesso
   "bottone con l'icona normale" gia' usato altrove nel tema
   (render_icon_button() in assets/components.php, classi .btn-icon /
   .btn-icon--gradiente), inserito direttamente nel markup PHP
   (single.php) — niente piu' CSS locale per .mm-post__cs-card-icon. */

.mm-post__cs-card-desc {
	color: var(--colori-pieni-blu-default);
	font-family: var(--font-body);
	font-size: var(--body-sm-size);
	line-height: var(--body-sm-line);
}

/* ── Card "Servizi correlati" (profilo marketer) — pillola scura ────────────── */

.mm-post__service-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-8);
	padding: var(--spacing-16);
	background: var(--colori-pieni-blu-default);
	border-radius: var(--spacing-12, 12px);
	text-decoration: none;
	transition: background var(--mm-duration) var(--mm-ease);
}

.mm-post__service-card:hover {
	background: var(--colori-pieni-blu-700, #0F1A2C);
}

.mm-post__service-card-name {
	color: var(--colori-pieni-bianco-default, #F0EEEA);
	font-family: var(--font-body);
	font-size: var(--body-sm-size);
	line-height: var(--body-sm-line);
}

/* Stesso discorso: "bottone con l'icona normale" (render_icon_button(),
   variante --outline-bianco) inserito via PHP in single.php, niente
   piu' CSS locale per .mm-post__service-card-icon. */

/* ── Breadcrumb ─────────────────────────────────────────────────────────────── */

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

.mm-post__breadcrumb a,
.mm-post__breadcrumb > span[aria-hidden] {
	flex-shrink: 0;
}

.mm-post__breadcrumb-current {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

@media (min-width: 1081px) {
	/* Su desktop tronca a ~40 caratteri (unità "ch", approssimata alla
	   larghezza del carattere "0" del font corrente) invece che riempire
	   tutto lo spazio disponibile come su mobile/tablet. */
	.mm-post__breadcrumb-current {
		max-width: 40ch;
	}
}

.mm-post__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;
	transition: background-size 0.6s var(--mm-ease), color 0.2s ease;
}

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

/* ── Blocco titolo ──────────────────────────────────────────────────────────── */

.mm-post__titleblock {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-16);
	padding-bottom: var(--spacing-24);
}

.mm-post__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-8);
}

.mm-post_titolo {
	/* font-size/line-height/font-family arrivano dalla classe .h3 */
	color: var(--colori-pieni-blu-default);
	margin: 0;
	text-align: left;
}

.mm-post__info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--colori-pieni-blu-default);
	font-family: var(--font-body);
	font-size: var(--body-md-size);
	line-height: var(--body-md-line);
	margin-bottom: var(--spacing-80);
	border-top: 1px solid var(--colori-opacizzati-blu-10, rgba(22, 38, 64, 0.1));
    padding-top: var(--spacing-24);
}

.mm-post__author {
	display: flex;
	align-items: center;
	gap: var(--spacing-12);
}

.mm-post__author-photo {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}

.mm-post__author-name {
	color: var(--colori-pieni-blu-default);
}

.mm-post__reading-time {
	color: var(--colori-pieni-blu-default);
}

.mm-post__featured-wrap {
	margin-bottom: var(--spacing-40);
}

.mm-post__featured {
	width: 100%;
	height: 500px;
	object-fit: cover;
	border-radius: var(--spacing-12, 12px);
}

.mm-post__description {
	color: var(--colori-pieni-blu-default);
}

.mm-post__description p {
	margin: 0;
}

/* Un'immagine inserita nell'articolo PRIMA del primo H2 finisce dentro
   l'intro (.mm-post__description), non nel corpo vero e proprio
   (.mm-post__content) — mm_split_article_content() in single.php divide
   il contenuto proprio in base al primo H2. L'intro non aveva nessuna
   regola per le immagini, quindi restavano alla dimensione nativa di
   WordPress (es. 300x200px, la miniatura "medium"), invece di adattarsi
   come nel resto dell'articolo. Stessa regola di .mm-post__content
   img/figure qui sotto, cosi' un'immagine si comporta allo stesso modo
   ovunque venga inserita nell'articolo. */
.mm-post__description img {
	display:       block;
	width:         100%;
	height:        500px;
	object-fit:    cover;
	border-radius: var(--spacing-12, 12px);
	margin:        var(--spacing-32) 0;
	border:        0;
	max-width:     100%;
}

.mm-post__description figure {
	margin: 0;
}

.mm-post__content {
	color: var(--colori-pieni-blu-default);
}

/* Font-size/line-height/font-family arrivano dalle classi .h4/.h5/.h6/.body-medium
   applicate ai tag da mm_style_article_content() — qui solo spacing/colore */
.mm-post__content h2 {
	color: var(--colori-pieni-blu-default);
	margin-top: var(--spacing-64, 64px);
	margin-bottom: var(--spacing-8, 8px);
	scroll-margin-top: var(--spacing-40);
}

.mm-post__content h3 {
	color: var(--colori-pieni-blu-default);
	margin-top: var(--spacing-40);
	margin-bottom: var(--spacing-16);
}

.mm-post__content h4 {
	color: var(--colori-pieni-blu-default);
	margin-top: var(--spacing-32);
	margin-bottom: var(--spacing-12);
}

.mm-post__content p {
	margin-bottom: var(--spacing-24);
}

.mm-post__content a {
	color: currentColor;
	text-decoration: underline;
}

.mm-post__content a:hover {
	color: currentColor;
	text-decoration: underline;
}

.mm-post__content strong,
.mm-post__content b {
	font-weight: 600 !important;
}

p strong{
	font-weight: 600 !important;
}

/* Immagini E video/embed dell'articolo (blocco Immagine, Video o Embed di
   Gutenberg, es. incollando un link YouTube) condividono la STESSA
   altezza fissa: larghezza piena, altezza uguale per tutti cosi' che si
   allineino tra loro nel flusso dell'articolo, indipendentemente dalle
   proporzioni native del singolo file. object-fit:cover ritaglia
   l'immagine/il video per riempire il riquadro senza deformarlo (stesso
   trattamento usato altrove nel tema per i riquadri foto a altezza
   fissa). Il tema disattiva sitewide il CSS core di WordPress
   (wp-block-library, vedi inc/setup.php) che normalmente rende
   responsive gli embed, quindi senza queste regole un video/iframe
   userebbe le sue dimensioni native (spesso fisse, es. 560x315px)
   invece di adattarsi alla larghezza dell'articolo — "spaccando" il
   layout sotto. */
.mm-post__content img,
.mm-post__content video,
.mm-post__content iframe,
.mm-post__content .wp-block-embed__wrapper {
	display:       block;
	width:         100%;
	height:        500px;
	object-fit:    cover;
	border-radius: var(--spacing-12, 12px);
	margin:        var(--spacing-32) 0;
	border:        0;
	max-width:     100%;
}

/* MediaElement.js (player video di WordPress) scrive uno style inline
   width/height in px direttamente sul tag <video>, che altrimenti
   scavalcherebbe le regole qui sopra e allarga tutta la colonna
   dell'articolo. Forziamo con !important cosi' il video resta sempre
   alla larghezza della colonna, qualunque script lo manipoli.
   L'altezza e' quella naturale del video (mai piu' larga della colonna),
   con un tetto massimo pari all'altezza delle foto: se per rispettare la
   larghezza della colonna il video risulta piu' basso di 500px va bene
   cosi', non deve essere "stirato" per riempire i 500px. */
.mm-post__content video {
	width:        100% !important;
	max-width:    100% !important;
	height:       auto !important;
	max-height:   500px !important;
	object-fit:   contain !important;
	/* WordPress scrive gli attributi HTML width="1000" height="1100" sul
	   tag <video> (dimensioni del file originale caricato): il browser li
	   usa come "aspect-ratio" di default quando non gliene diamo una sua,
	   quindi il riquadro restava con le proporzioni sbagliate (verticale)
	   anche se il video vero e' orizzontale, tagliando il contenuto.
	   Ignoriamo quell'aspect-ratio "finta" e lasciamo che sia il video
	   stesso a decidere le proprie proporzioni reali. */
	aspect-ratio: auto !important;
}

/* MediaElement.js non si limita a mettere lo style inline sul <video>:
   lo avvolge anche in un contenitore extra (.mejs-container e affini),
   e mette LI' lo style inline width/height, calcolato sulle dimensioni
   native del file video (es. 1920px) — e' questo wrapper, non il video
   stesso, a sfondare la colonna dell'articolo. Vincoliamo anche lui. */
.mm-post__content .mejs-container,
.mm-post__content .mejs-mediaelement,
.mm-post__content .mejs-inner,
.mm-post__content .mejs-overlay,
.mm-post__content .mejs-layer {
	width:      100% !important;
	max-width:  100% !important;
	height:     auto !important;
	max-height: 500px !important;
}

/* La causa piu' a monte di tutte: e' WordPress stesso (wp_video_shortcode,
   PRIMA che entri in gioco MediaElement.js) a generare un
   <div class="wp-video" style="width: 1000px;"> con una larghezza FISSA
   in px, presa dalle dimensioni del file video originale caricato.
   Questo wrapper e' il genitore di tutta la catena (mejs-container,
   video, ecc.), quindi se resta fisso a 1000px sfonda la colonna a
   prescindere da cosa facciamo dentro. Lo forziamo ad essere sempre
   automatico e mai piu' largo della colonna. */
.mm-post__content .wp-video {
	width:      100% !important;
	max-width:  100% !important;
	height:     auto !important;
}

.mm-post__content figure {
	margin: 0;
}

/* L'iframe vive gia' dentro il wrapper qui sopra (blocco Embed): evitiamo
   di applicare due volte altezza/margine, gli basta riempire il
   wrapper. */
.mm-post__content .wp-block-embed__wrapper iframe {
	width:  100%;
	height: 100%;
	margin: 0;
	border-radius: var(--spacing-12, 12px);
}

.mm-post__inline-video {
	width: 100%;
	border-radius: var(--mm-radius-md);
	margin: var(--spacing-32) 0;
}

.mm-post__cta {
	display: inline-flex;
	align-items: center;
	padding: var(--spacing-16) var(--spacing-32);
	background: var(--colori-pieni-rosso-default);
	color: var(--colori-pieni-bianco-default);
	font-weight: 700;
	border-radius: var(--mm-radius-md);
	text-decoration: none;
	margin: var(--spacing-24) 0;
	transition: background .2s ease;
}

.mm-post__cta:hover {
	background: var(--colori-pieni-rosso-700);
}

/* ── Sommario: box rosso pieno ──────────────────────────────────────────────── */

.mm-post__toc {
	background: var(--colori-pieni-rosso-default);
	border-radius: var(--mm-radius-md);
	padding: var(--spacing-40);
	margin: var(--spacing-40) 0;
}

.mm-post__toc-title {
	font-family: var(--font-heading), sans-serif;
	font-weight: 800;
	font-size: var(--h5-size);
	color: var(--colori-pieni-bianco-default);
	margin-bottom: var(--spacing-16);
}

.mm-post__toc ul {
	margin: 0;
	padding-left: var(--spacing-24);
	list-style: disc;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

.mm-post__toc ul li::marker {
	color: var(--colori-pieni-bianco-default);
}
.mm-post__toc a {
	color: var(--colori-pieni-bianco-default);
	font-weight: 500;
}

.mm-post__toc a:hover {
	opacity: .8;
}

.mm-post__content ul,
.mm-post__content ol {
	margin: 0 0 var(--spacing-16, 16px) 0;
	padding-left: var(--spacing-24, 24px);
}

/* Stesso peso/stile del testo dei paragrafi (.mm-post__content p): prima
   qui c'era un font-weight:300 fisso che rendeva gli elenchi puntati
   visibilmente piu' "leggeri" del testo normale — rimosso su richiesta
   esplicita, ora eredita lo stesso peso di default del resto del
   contenuto (nessuna dichiarazione = eredita da .mm-post__content/body,
   come i paragrafi). */
.mm-post__content li {
	margin-bottom: var(--spacing-8, 8px);
}

.mm-post__content ul {
	list-style: disc;
}

.mm-post__content ol {
	list-style: decimal;
}

/* ── Banner ──────────────────────────────────────────────────────────────── */

.mm-post__banner {
	background: var(--colori-pieni-rosso-default);
	color: var(--colori-pieni-bianco-50, #fff);
	border-radius: var(--mm-radius-md);
	padding: var(--spacing-40);
	margin: var(--spacing-32) 0;
}

.mm-post__banner h2,
.mm-post__banner h3,
.mm-post__banner h4 {
	color: var(--colori-pieni-bianco-50, #fff);
}

.mm-post__banner p,
.mm-post__banner .mm-post__lead {
	color: var(--colori-pieni-bianco-50, #fff);
}

.mm-post__banner .mm-post__cta {
	background: var(--colori-pieni-bianco-50, #fff);
	color: var(--colori-pieni-rosso-default);
}

.mm-post__banner .mm-post__inline-img,
.mm-post__banner .mm-post__inline-video {
	border-radius: var(--mm-radius-md);
}

/* ── Modulo di contatto dentro il Banner ─────────────────────────────────── */

.mm-banner-form {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
}

.mm-banner-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--spacing-24);
}

.mm-banner-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

.mm-banner-form__field--full {
	grid-column: 1 / -1;
}

.mm-banner-form__field label {
	color: var(--colori-pieni-bianco-50, #fff);
	font-weight: 700;
}

.mm-banner-form__req {
	color: var(--colori-pieni-bianco-50, #fff);
}



.mm-banner-form__field input,
.mm-banner-form__field textarea {
	background: transparent;
	border: 1px solid var(--colori-pieni-bianco-50, #fff);
	border-radius: var(--mm-radius-md);
	padding: var(--spacing-12) var(--spacing-16);
	color: var(--colori-pieni-bianco-50, #fff);
	font-family: inherit;
	font-size: 15px;
}

.mm-banner-form__field input::placeholder,
.mm-banner-form__field textarea::placeholder {
	color: rgba(255,255,255,.7);
}

.mm-banner-form__field textarea {
	resize: vertical;
	min-height: 100px;
}

.mm-banner-form__checkbox {
	display: flex;
	align-items: flex-start;
	gap: var(--spacing-8);
	color: var(--colori-pieni-bianco-50, #fff);
	font-size: 14px;
}

.mm-banner-form__submit {
	background: var(--colori-pieni-bianco-50, #fff);
	color: var(--colori-pieni-rosso-default);
	border: none;
	border-radius: var(--mm-radius-full, 999px);
	padding: var(--spacing-16);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
}

.mm-banner-form__submit:hover {
	opacity: .9;
}

.mm-banner-form__submit:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.mm-banner-form__message {
	display: none;
	color: var(--colori-pieni-bianco-50, #fff);
	font-weight: 700;
}

.mm-banner-form__message--success,
.mm-banner-form__message--error {
	display: block;
}


/* ── Indice (TOC) — colonna destra ────────────────────────────────────────
   Figma Design System, node 807:550 (Stato=Default/Hover/Aperto). Generato
   via JS (vedi assets/js/post-toc.js) a partire dai soli H2 presenti in
   .mm-post__content: se non ce n'e' nessuno il componente si auto-rimuove.
   Solo da min-width:1081px (colonna 3 della grid a tre, vedi sopra) — sotto
   quella soglia resta nascosto, il markup e' comunque presente nel DOM. */
/* Sotto i 1080px non c'e' piu' una terza colonna della grid (il layout
   torna a singola colonna): l'indice diventa un elemento flottante,
   fisso rispetto al viewport, sopra il contenuto della pagina — non
   piu' nascosto come prima. Il posizionamento esatto (centrato in
   basso su mobile, in basso a destra da tablet) e' nei media query
   sotto; qui solo cio' che vale per entrambi. */
.mm-post__toc-col {
	display: block;
	position: fixed;
	bottom: var(--spacing-24, 24px);
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	max-width: calc(100vw - 32px);
	/* Sotto l'header (1000-1002, vedi mm-header.css) cosi' non copre il
	   menu quando e' aperto, ma sopra il resto del contenuto. */
	z-index: 500;
}

@media (min-width: 768px) and (max-width: 1080px) {
	.mm-post__toc-col {
		left: auto;
		right: var(--spacing-24, 24px);
		transform: none;
	}
}

.mm-post__toc-widget {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--spacing-16, 16px);
	/* Chiuso/hover: "content-stretch" in Figma, cioe' la pillola si
	   stringe al contenuto (larga solo quanto "Indice v 15%"), non
	   riempie la colonna — width piena solo da aperto, vedi sotto. */
	width: fit-content;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	/* Chiuso: la pillola e' larga solo quanto il contenuto (hug), ma va
	   allineata al bordo DESTRO della colonna, non a sinistra (il default
	   per un elemento block dentro un contenitore piu' largo di lui). */
	margin-left: auto;
	background: var(--colori-pieni-blu-default, #162640);
	border-radius: var(--spacing-24, 24px);
	padding: var(--spacing-8, 8px) var(--spacing-8, 8px) var(--spacing-8, 8px) var(--spacing-16, 16px);
}

.mm-post__toc-widget:not(.is-open):hover {
	background: var(--colori-pieni-blu-700, #0F1A2C);
}

.mm-post__toc-widget.is-open {
	align-items: stretch;
	/* Sotto i 1080px .mm-post__toc-col non e' piu' una colonna della
	   grid ma un elemento flottante shrink-to-fit (vedi sopra): un
	   100% qui equivarrebbe alla larghezza del contenuto stesso (nessun
	   effetto utile). Va quindi data una larghezza esplicita, sovra-
	   scritta da min-width:1081px (torna 100%, stavolta della vera
	   colonna della grid). */
	width: min(360px, calc(100vw - 64px));
	border-radius: var(--spacing-16, 16px);
	padding: var(--spacing-24, 24px) var(--spacing-24, 24px) var(--spacing-12, 12px);
}

.mm-post__toc-widget.is-open .mm-post__toc-list {
	display: flex;
}

/* Capitoli: altezza massima di ~6 righe con scroll interno e una sfumatura
   in coda (mask-image) al posto di nascondere/sbiadire manualmente le voci
   in eccesso — si adatta a qualunque numero di H2, non solo a quelli visti
   nel mock Figma. */
.mm-post__toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Non ci si affida all'attributo HTML hidden per nascondere la lista:
	   uno stile dell'autore (questo display) vince SEMPRE sullo stile di
	   default del browser per [hidden], a prescindere dall'ordine nel
	   foglio di stile — quindi va gestito esplicitamente qui, visibile
	   solo quando il widget e' aperto (vedi .is-open sotto). */
	display: none;
	flex-direction: column;
	gap: var(--spacing-8, 8px);
	width: 100%;
	max-height: calc( ( var(--body-sm-line, 20px) + var(--spacing-8, 8px) ) * 6 );
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-mask-image: linear-gradient( to bottom, #000 calc(100% - 32px), transparent 100% );
	mask-image: linear-gradient( to bottom, #000 calc(100% - 32px), transparent 100% );
	transition: -webkit-mask-image 0.2s ease, mask-image 0.2s ease;
	/* Scroll interno funzionante ma senza barra a vista (brutta su
	   alcuni OS/browser — qui lo scroll e' gia' segnalato dalla
	   sfumatura in coda, mask-image qui sopra). */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.mm-post__toc-list::-webkit-scrollbar {
	display: none;
}

/* Scrollata fino in fondo (vedi post-toc.js, updateListFade): niente
   piu' sfumatura, altrimenti l'ultima voce sembrerebbe "tagliata"
   anche se e' gia' del tutto visibile. */
.mm-post__toc-list.is-at-bottom {
	-webkit-mask-image: none;
	mask-image: none;
}

.mm-post__toc-item {
	min-width: 0;
}

.mm-post__toc-link {
	display: flex;
	align-items: baseline;
	gap: var(--spacing-4, 4px);
	width: 100%;
	min-width: 0;
	color: var(--colori-pieni-blu-50, #BEC2CA);
	font-family: var(--font-body);
	font-size: var(--body-sm-size, 16px);
	line-height: var(--body-sm-line, 20px);
	text-decoration: none;
}

.mm-post__toc-link:hover {
	color: var(--colori-pieni-bianco-default, #F0EEEA);
}

/* Scroll-spy: la voce della sezione attualmente visibile durante lo
   scroll (vedi post-toc.js, updateActiveSection) si evidenzia come
   l'hover, in modo permanente finche' resta quella corrente. */
.mm-post__toc-link.is-active {
	color: var(--colori-pieni-bianco-default, #F0EEEA);
}

.mm-post__toc-num {
	flex-shrink: 0;
	white-space: nowrap;
}

.mm-post__toc-label {
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mm-post__toc-label-inner {
	display: inline-block;
	white-space: nowrap;
	will-change: transform;
}

/* Hover su un titolo troncato: scorre in avanti fino in fondo, poi
   riparte da capo (vedi post-toc.js, che calcola --marquee-distance e
   --marquee-duration e aggiunge questa classe solo se il testo e'
   effettivamente piu' largo dello spazio disponibile). */
/* Durante il marquee il testo va oltre il bordo per effetto del
   translateX: se restasse attivo text-overflow:ellipsis il browser
   continuerebbe a "tagliare" con i puntini l'ultima parte visibile
   (l'overflow di layout non cambia, solo la posizione visiva), quindi
   va disattivato mentre l'animazione e' in corso. */
.mm-post__toc-label.is-marquee {
	text-overflow: clip;
}

.mm-post__toc-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-24, 24px);
	width: 100%;
	border: none;
	background: transparent;
	padding: 0;
	cursor: pointer;
	font: inherit;
}

.mm-post__toc-trigger-label {
	display: flex;
	align-items: center;
	gap: var(--spacing-4, 4px);
	color: var(--colori-pieni-bianco-default, #F0EEEA);
	font-family: var(--font-body);
	font-size: var(--body-sm-size, 16px);
	line-height: var(--body-sm-line, 20px);
	white-space: nowrap;
}

.mm-post__toc-chevron {
	flex-shrink: 0;
	transition: transform 0.2s ease;
	/* L'icona (freccia ">"), di base, punta a destra: ruotata di 90deg
	   punta in giu' (chiuso, "espandi"), coerente con la vecchia
	   chevron a V che usava lo stesso verso. */
	transform: rotate(90deg);
}

.mm-post__toc-widget.is-open .mm-post__toc-chevron {
	/* +90deg di base + altri 180deg = punta in su (aperto, "richiudi"). */
	transform: rotate(270deg);
}

.mm-post__toc-scroll {
	flex-shrink: 0;
	background: var(--colori-pieni-blu-300, #616B7D);
	color: var(--colori-pieni-bianco-default, #F0EEEA);
	border-radius: var(--spacing-40, 40px);
	padding: var(--spacing-4, 4px) var(--spacing-8, 8px) var(--spacing-4, 4px) var(--spacing-12, 12px);
	font-family: var(--font-body);
	font-size: var(--body-sm-size, 16px);
	line-height: var(--body-sm-line, 20px);
	white-space: nowrap;
	/* Larghezza fissa (calcolata sul caso piu' largo, "100%") in modo
	   che la pillola non cambi dimensione al variare del numero di
	   cifre della percentuale (es. "0%" vs "49%" vs "100%") — il testo
	   resta centrato nello spazio disponibile. */
	box-sizing: content-box;
	width: 4ch;
	text-align: center;
}

@media (min-width: 1081px) {
	.mm-post__toc-col {
		display: block;
		grid-column: 3;
		/* Stessa estensione verticale della colonna sinistra "lavori
		   correlati" (.mm-post__sidebar, grid-row 2/5): cosi' lo sticky
		   resta agganciato fino alla fine della pagina (prima del
		   footer), non solo finche' dura il testo con gli H2. */
		grid-row: 2 / 5;
		align-self: end;
		/* Dentro la colonna 3 della grid (non piu' position:fixed rispetto
		   al viewport, che la faceva uscire dalla colonna): position:sticky
		   ancorato in BASSO invece che in alto — resta vincolato ai confini
		   orizzontali della colonna, ma segue lo scroll restando "appeso"
		   in fondo (limitato verticalmente all'altezza della colonna
		   stessa, grid-row 1/3 qui sopra, quindi non esce mai oltre). */
		position: sticky;
		bottom: var(--spacing-40, 40px);
		/* Reset del posizionamento flottante usato sotto i 1080px
		   (vedi sopra: left:50%/transform/right per centrare o
		   ancorare a destra fuori dalla grid) — da qui in poi torna
		   dentro la colonna 3, senza offset orizzontali extra. */
		left: auto;
		right: auto;
		transform: none;
		max-width: none;
		/* Larghezza reale della colonna 3 della grid (non piu' il valore
		   statico 278px del mock Figma), cosi' da aperto il pannello
		   riempie davvero tutta la colonna, qualunque sia la sua
		   larghezza effettiva ai vari breakpoint. */
		width: 100%;
		/* Senza questo, il contenuto interno (es. l'elenco capitoli da
		   aperto) puo' imporre una larghezza minima maggiore della vera
		   1fr della grid, facendo espandere la colonna oltre la sua
		   proporzione (stesso bug gia' visto su .mm-post__sidebar). */
		min-width: 0;
		z-index: 20;
	}
	.mm-post__toc-widget.is-open {
		/* Da desktop il pannello aperto prende SEMPRE la larghezza reale
		   della colonna 3, qualunque essa sia — mai di piu' (il testo dei
		   capitoli va in ellissi se serve, vedi .mm-post__toc-label). */
		width: 100%;
	}
	.mm-post__cta-banner .btn.btn--bianco {
		width: 100%;
	}
}

@media(min-width: 1081px) and (max-width: 1155px){
.mm-post__layout{
	gap:var(--spacing-24, 24px);
}
}

@media (max-width: 1080px) {
    .mm-post__layout.mm-container.mm-container--narrow.mm-py-xl {
        padding-block: var(--spacing-160, 160px) !important;
		gap: 0px;
    }
	.mm-post__sidebar-cs{
		margin-top: var(--spacing-40, 40px);
	}
	/* Su mobile il breadcrumb puo' essere piu' largo dello schermo (nome
	   articolo lungo): invece di andare a capo o sfondare il layout,
	   diventa scorrevole in orizzontale su una riga sola. Il testo
	   corrente perde il troncamento con ellissi (che qui non avrebbe
	   senso, essendo comunque raggiungibile scorrendo) e i figli non si
	   restringono, cosi' lo scroll mostra tutto il breadcrumb per intero. */
	.mm-post__breadcrumb{
		margin-bottom: var(--spacing-40, 40px) !important;
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.mm-post__breadcrumb::-webkit-scrollbar{
		display: none;
	}
	.mm-post__breadcrumb-current{
		flex-shrink: 0;
		overflow: visible;
		text-overflow: clip;
		max-width: none;
	}
	.mm-post__info{
		margin-bottom: var(--spacing-40, 40px) !important;
	}
	.mm-post__content h2{
		margin-top: var(--spacing-64, 64px);
	}
	.mm-post__cta-banner{
		margin-top: var(--spacing-20, 20px);
		margin-bottom: var(--spacing-40, 40px);
	}
	.mm-post__cta-banner > * {
		width: 100%;
	}
	 .mm-footer__cta-card  > .google-rating{
		    align-items: center !important;
			display: flex !important;
	}

}

@media (max-width: 767px) {
	.mm-banner-form__row {
		grid-template-columns: 1fr;
	}
	.mm-post__layout.mm-container.mm-container--narrow.mm-py-xl {
		padding-block: var(--spacing-160, 160px) !important;
		gap: 0px;
	}
	.mm-post__titleblock{
		padding-bottom: var(--spacing-4, 4px);
		margin-bottom: var(--spacing-16, 16px);
	}
	.mm-post__content h2{
		margin-top: var(--spacing-40, 40px);
	}
	.mm-post__content img{
		margin: var(--spacing-40, 40px) 0;
	}
}

/* Letter-spacing +5% su tutti i paragrafi della pagina del singolo
   articolo (richiesta esplicita), scoped a .mm-article-single — esteso
   anche agli elenchi puntati/numerati (li) cosi' hanno esattamente lo
   stesso stile del testo normale, invece di un letter-spacing diverso. */
.mm-article-single p,
.mm-article-single li {
	letter-spacing: 0.05em;
}


@media (min-width: 2560px) {
	.mm-post__layout {
		grid-template-columns: 1fr 2fr 1fr;
		justify-content: space-between;
		column-gap: var(--spacing-40);
		padding-bottom: var(--spacing-240, 240px);
	}
.mm-post__toc-widget.is-open{
	    padding: var(--spacing-32, 32px) var(--spacing-32, 32px) var(--spacing-16, 16px);
}
.mm-post__toc-widget{
	padding: var(--spacing-16, 16px) var(--spacing-16, 16px) var(--spacing-16, 16px) var(--spacing-24, 24px);
	border-radius: var(--spacing-32, 32px);
}
.mm-post__toc-scroll{
	padding: var(--spacing-8, 8px) var(--spacing-16, 16px) var(--spacing-8, 8px) var(--spacing-16, 16px);
}
	.mm-post__intro,
	.mm-post__content {
		max-width: 1200px;
	}
}

.mm-post__sidebar-cs {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

@media (min-width: 1081px) {
	.mm-post__sidebar-cs {
		position: sticky;
		padding-top: var(--spacing-64, 64px);
		top: calc(40px + var(--spacing-24));
	}
}

.mm-post__featured-wrap {
  border-radius: var(--spacing-12, 12px);
  overflow: hidden;
}
.mm-post__featured-wrap .mm-post__featured {
  border-radius: 0;
}

.mm-post__content .mm-post__media,
.mm-post__description .mm-post__media {
  display: block;
  width: 100%;
  height: 500px;
  margin: var(--spacing-40, 40px) 0;
  border-radius: var(--spacing-12, 12px);
  overflow: hidden;
}
.mm-post__content .mm-post__media img,
.mm-post__description .mm-post__media img {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
}
/* Breadcrumb scorrevole: sfumatura sul lato dove c'e' altro da scorrere (classi da breadcrumb-fade.js) */
@media (max-width: 1080px) {
	.mm-post__breadcrumb.has-more-right {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
	}
	.mm-post__breadcrumb.has-more-left {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 56px);
		mask-image: linear-gradient(to right, transparent, #000 56px);
	}
	.mm-post__breadcrumb.has-more-left.has-more-right {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
		mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
	}
}