/**
 * Blog / Articoli — archivio con filtri
 */

/* ── Hero (Figma Sito-DS, node 868:2741) ────────────────────────────────── */

/* Animazioni disattivate del tutto (vedi homepage.js, blocco Blog): hero
   e griglia sono ora sezioni normali, sempre visibili, che scorrono col
   flusso naturale della pagina — niente piu' pin/scroll-jacking, ne' su
   desktop ne' su mobile. Hero statica a schermo intero (gradiente
   sfocato fisso, --sfondo-hero — stessa tecnica/variabile di /agenzia/,
   /madsuite/, hero home e archivio Casi Studio, su richiesta esplicita).
   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 — fondendosi comunque con la griglia
   sotto senza stacco (vedi margin-top su .mm-blog__grid piu' in basso in
   questo file). */
.mm-blog__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);
	text-align: left;
}

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

.mm-blog__hero-glow-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.mm-blog__hero-glow-pos {
	position: absolute;
	left: 50%;
	top: 92.59vw;
	transform: translate(-50%, -50%);
}

.mm-blog__hero-glow {
	display: block;
	max-width: none;
}

.mm-blog__hero-glow--red {
	width: 232.28vw;
	height: 166.14vw;
}

.mm-blog__hero-glow--white {
	width: 92.59vw;
	height: 92.59vw;
}

.mm-blog__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-blog__hero-inner {
	position: relative;
	z-index: 1;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--spacing-12);
	padding-top: var(--spacing-120, 120px);
	padding-bottom: var(--spacing-120, 120px);
}

@media (min-width: 2560px) {
	.mm-blog__hero-inner {
		padding-top: var(--spacing-80);
		padding-bottom: var(--spacing-80);
	}
}

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

/* ── Filtri ──────────────────────────────────────────────────────────────── */

.mm-blog__filters {
	padding-top: var(--spacing-24);
}

/* Unica istanza dei filtri, sempre fissa in basso a sinistra (position:
   fixed, "sopra tutto") fin dal caricamento — visibile e interattiva da
   subito, anche sopra la hero (su richiesta esplicita: prima c'erano due
   istanze separate, una in-flow dentro la hero e una fissa che compariva
   solo dopo, ora ce n'e' una sola che semplicemente cambia stile). */
.mm-blog__filters--fixed-panel {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 20;
	padding: var(--spacing-24, 24px) var(--spacing-40, 40px);
	transition: color 0.3s ease;
}

/* Cambio graduale (non netto) tra lo stile trasparente/hero e quello
   chiaro/scrollato: la classe .is-scrolled cambia background/border/
   box-shadow su .mm-blog__filters-pill e background su
   .mm-blog__filters-group, quindi la transizione va dichiarata li',
   sulle proprieta' che davvero cambiano (non solo su color, che copriva
   gia' etichetta/bottoni ma non pillola/gruppo). */
.mm-blog__filters--fixed-panel .mm-blog__filters-pill {
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.mm-blog__filters--fixed-panel .mm-blog__filters-group {
	transition: background-color 0.3s ease;
}

.mm-blog__filters--fixed-panel .mm-blog__filters-label,
.mm-blog__filters--fixed-panel .mm-blog__filter {
	transition: color 0.3s ease;
}

/* Stile di default (sopra la hero): eredita la variante trasparente/
   bordo chiaro di .mm-blog__filters-pill (vedi la regola generale piu'
   sotto in questo file) — nessuna regola specifica qui, e' il "tono"
   originale pensato per stare sopra il gradiente della hero. */

/* Figma "Animazioni", node 25:730 "Filtro" — variante chiara (pensata per
   stare su sfondo chiaro): applicata SOLO una volta usciti dalla hero,
   via la classe .is-scrolled (aggiunta da blog-filters.js quando la
   sezione dopo la hero entra in viewport) — prima mostrava/nascondeva
   l'intero pannello (opacity), ora cambia solo il "tono" restando sempre
   nella stessa posizione fissa. */
.mm-blog__filters--fixed-panel.is-scrolled .mm-blog__filters-pill {
	border-color: var(--colori-pieni-bianco-600, #eae7e3);
	background: var(--colori-pieni-bianco-default);
	box-shadow: 0 8px 24px rgba(22, 38, 64, 0.25);
}

.mm-blog__filters--fixed-panel.is-scrolled .mm-blog__filters-label,
.mm-blog__filters--fixed-panel.is-scrolled .mm-blog__filter {
	color: var(--colori-pieni-blu-default);
}

/* Figma node 1:964 — l'indicatore (gradiente) segue il mouse tra i bottoni
   (vedi blog-filters.js): il testo resta bianco solo sul bottone che ha
   ORA la pillola sotto (classe .is-covered, aggiornata da JS insieme alla
   posizione dell'indicatore), non su :hover diretto — altrimenti testo e
   pillola si disallineano appena il mouse esce dal bottone ma resta nel
   padding vuoto del gruppo (dove la pillola non si e' ancora spostata). */
.mm-blog__filters--fixed-panel.is-scrolled .mm-blog__filter.is-covered {
	color: var(--colori-pieni-bianco-default);
}

.mm-blog__filters--fixed-panel.is-scrolled .mm-blog__filters-group {
	background: var(--colori-pieni-bianco-600, #eae7e3);
}

/* Vicino al footer: il pannello si nasconde comunque (stesso principio
   dell'header sitewide), classe separata dallo stile — non tocca
   .is-scrolled, cosi' il tono resta quello giusto quando ricompare. */
.mm-blog__filters--fixed-panel.is-hidden-footer {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}


.mm-blog__filters-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-16);
	border: 1px solid var(--colori-opacizzati-bianco-20, rgba(240, 238, 234, 0.2));
	border-radius: var(--spacing-40, 40px);
	padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) var(--spacing-24);
}

/* Mobile: niente pillola col bordo, label sopra il gruppo voci,
   il gruppo voci occupa tutta la larghezza disponibile */
@media (max-width: 767px) {
	.mm-blog__filters-pill {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: var(--spacing-8);
		border: none;
		padding: 0;
		width: 100%;
	}

	.mm-blog__filters-group {
		width: 100%;
	}

	.mm-blog__filter {
		flex: 1 1 0;
	}
}

.mm-blog__filters-label {
	color: var(--colori-pieni-bianco-default, #F0EEEA);
	font-family: var(--font-body);
	font-size: var(--body-md-size);
	line-height: var(--body-md-line);
	white-space: nowrap;
}

/* grid + grid-auto-columns:1fr invece di flex: su un contenitore che si
   dimensiona sul proprio contenuto (nessuna larghezza esplicita), le
   colonne "1fr" vengono tutte allineate alla larghezza della piu' larga —
   i tre bottoni risultano automaticamente della stessa dimensione, senza
   un valore fisso in px da mantenere manualmente se cambia il testo. */
.mm-blog__filters-group {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	align-items: center;
	gap: var(--spacing-4);
	background: var(--colori-opacizzati-bianco-20, rgba(240, 238, 234, 0.2));
	border-radius: var(--spacing-40, 40px);
	padding: var(--spacing-4);
}

.mm-blog__filter-indicator {
	position: absolute;
	top: var(--spacing-4);
	left: 0;
	height: calc(100% - (var(--spacing-4) * 2));
	border-radius: var(--spacing-40, 40px);
	/* Stessa forma/angolazione del gradiente di bottoni, etichetta e
	   cursore (radiale, centrato in basso), non il lineare a 111deg di
	   --gradient-brand usato altrove. */
	background-image: var(--sfondo-piccolo);
	overflow: hidden;
	pointer-events: none;
	will-change: transform, width;
}

/* Stessa texture "noise" di bottoni/etichetta/cursore --gradiente. */
.mm-blog__filter-indicator::after {
	content:        '';
	position:       absolute;
	inset:          0;
	pointer-events: none;
	opacity:        0.1;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAnIGhlaWdodD0nMTAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nbWF0cml4JyB2YWx1ZXM9JzAgMCAwIDAgMC45NDEyICAwIDAgMCAwIDAuOTMzMyAgMCAwIDAgMCAwLjkxNzYgIDAgMCAwIDEgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScvPjwvc3ZnPg==");
	background-repeat: repeat;
	background-size:   120px 120px;
}

.mm-blog__filter {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-8) var(--spacing-16);
	border-radius: var(--spacing-40, 40px);
	border: none;
	background: transparent;
	color: var(--colori-pieni-bianco-default, #F0EEEA);
	font-family: var(--font-body);
	font-size: var(--body-md-size);
	line-height: var(--body-md-line);
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.3s ease;
}

/* ── Griglia card ────────────────────────────────────────────────────────── */

/* Griglia verticale (default) — usata dalla pagina Blog con filtri
   Misure da Figma (solo sezione articoli, mobile-first):
   ≤767: 1 col, gap-y 80        768-1079: 2 col, gap 40/80
   1080-2559: 2 col, gap 40/120  ≥2560: 4 col, gap 40/120 */
/* 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') — la griglia resta semplicemente in flusso normale subito
   dopo. */
.mm-blog__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--spacing-40);
	row-gap: var(--spacing-80);
}

@media (min-width: 768px) {
	.mm-blog__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1080px) {
	.mm-blog__grid {
		row-gap: var(--spacing-120, 120px);
	}
}

@media (min-width: 1820px) {
	.mm-blog__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Scroll orizzontale — usata da "Articoli Correlati" nelle pagine Soluzione */
.mm-blog__grid--scroll {
	display: flex;
	grid-template-columns: none;
	gap: var(--spacing-24);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: var(--spacing-8);
}

.mm-blog__grid--scroll::-webkit-scrollbar {
	display: none;
}

.mm-blog__grid--scroll .mm-blog__card {
	flex-shrink: 0;
	width: 340px;
}

.mm-blog__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);
	scroll-snap-align: start;
	text-decoration: none;
	color: inherit;
}

.mm-blog__card-img-wrap {
	position: relative;
	height: 400px;
	padding: var(--spacing-16);
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	background: var(--colori-pieni-grigio-200, #E2DED9);
	border-radius: var(--spacing-12, 12px);
	overflow: hidden;
}

.mm-blog__card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--mm-duration) var(--mm-ease);
}

.mm-blog__card:hover .mm-blog__card-img {
	transform: scale(1.05);
}

.mm-blog__card-tags {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-8, 8px);
	justify-content: flex-end;
}
.mm-blog__card-body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
}

.mm-blog__card-title {
	margin: 0;
	color: var(--colori-pieni-blu-default);
}

.mm-blog__card-title-text {
	display: inline;
	background-image: linear-gradient(var(--colori-pieni-blu-default), var(--colori-pieni-blu-default));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1.5px;
	transition: background-size 0.6s var(--mm-ease);
}

.mm-blog__card:hover .mm-blog__card-title-text {
	background-size: 100% 1.5px;
}

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

.mm-blog__empty {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--colori-pieni-grigio-800);
	padding: var(--spacing-40) 0;
}

@media (max-width: 640px) {
	.mm-blog__grid--scroll .mm-blog__card {
		width: 260px;
	}
}

/* ── Filtro profilo (Titolare d'azienda / Tecnico e specialista marketing) ── */

.mm-blog__profile-filters {
	display: flex;
	align-items: stretch;
	border-top: 1px solid var(--colori-pieni-grigio-200);
	border-bottom: 1px solid var(--colori-pieni-grigio-200);
	margin-bottom: var(--spacing-24);
}

.mm-blog__profile-cell {
	flex: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-12);
	cursor: pointer;
	padding: var(--spacing-16) 0;
	font-family: var(--font-body), sans-serif;
}

.mm-blog__profile-cell--left {
	justify-content: flex-start;
	padding-right: var(--spacing-24);
	border-right: 1px solid var(--colori-pieni-grigio-200);
}

.mm-blog__profile-cell--right {
	justify-content: flex-end;
	padding-left: var(--spacing-24);
}

.mm-blog__profile-cell input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.mm-blog__profile-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--colori-pieni-grigio-400);
	transition: color var(--mm-duration) var(--mm-ease);
}

.mm-blog__profile-radio {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid var(--colori-pieni-grigio-200);
	position: relative;
	flex-shrink: 0;
	transition: border-color var(--mm-duration) var(--mm-ease);
}

.mm-blog__profile-radio::after {
	content: '';
	position: absolute;
	inset: var(--spacing-2, 2px);
	border-radius: 50%;
	background: var(--colori-pieni-nero-default, #0f0404);
	transform: scale(0);
	transition: transform var(--mm-duration) var(--mm-ease);
}

.mm-blog__profile-cell input[type="radio"]:checked ~ .mm-blog__profile-radio {
	border-color: var(--colori-pieni-nero-default, #0f0404);
}

.mm-blog__profile-cell input[type="radio"]:checked ~ .mm-blog__profile-radio::after {
	transform: scale(1);
}

.mm-blog__profile-cell input[type="radio"]:checked ~ .mm-blog__profile-label {
	color: var(--colori-pieni-nero-default, #0f0404);
}

@media (max-width: 640px) {
	.mm-blog__profile-filters {
		flex-direction: column;
	}
	.mm-blog__profile-cell--left {
		border-right: none;
		border-bottom: 1px solid var(--colori-pieni-grigio-200);
		padding-right: 0;
	}
	.mm-blog__profile-cell--right {
		padding-left: 0;
	}
}

.mm-blog__filters[hidden] {
	display: none;
}


@media (max-width: 767px) {
	.mm-blog__filters--fixed-panel {
		padding: var(--spacing-16, 16px);
	}
	.mm-blog__filters--fixed-panel .mm-blog__filters-label,
.mm-blog__filters--fixed-panel .mm-blog__filter {
align-items: center;
display: flex;}
.mm-blog__filters--fixed-panel .mm-blog__filters-pill{
	display: flex;
	flex-direction: row;
	padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) var(--spacing-4)
}

	/* A differenza dei filtri nella hero (che restano a width:100%, tutti
	   i bottoni della stessa larghezza, vedi la regola generale sopra),
	   qui nel pannello fisso la label resta comunque sopra (stesso layout
	   a colonna), ma il gruppo bottoni non viene piu' forzato a
	   width:100% — i bottoni restano affiancati in riga, larghi solo
	   quanto il proprio testo invece di essere tutti uguali/allargati. */
	.mm-blog__filters--fixed-panel .mm-blog__filters-group {
		width: 100%;
		display: inline-flex;
	}

	.mm-blog__filters--fixed-panel .mm-blog__filter {
		flex: 1 1 0;
	}

	.mm-blog__filters--fixed-panel .mm-blog__filters-label {
		display: none;
	}
}
.mm-blog__card-tags > .mm-tag--outline{
	background-color: var(--colori-pieni-bianco-default);
}