/* =========================================================
   UTILITIES — classi helper minime
   Non un framework. Solo le utility ricorrenti.
   ========================================================= */

/* -------------------------------------------------------------
   GRANA — overlay di rumore riutilizzabile (usato da footer + hero blog)
   Va messo come figlio assoluto di un contenitore position:relative,
   con inset:0 sul wrapper padre per contenerlo.
   ------------------------------------------------------------- */
/* mix-blend-mode:overlay darebbe un'intensita' percepita diversa a seconda
   del colore/luminosita' sotto (es. molto piu' tenue sul blu scuro pieno
   della hero che sul gradiente piu' chiaro del footer) — con blend "normal"
   la grana ha lo stesso aspetto ovunque sia usata, indipendentemente dallo
   sfondo. */
.mm-bg-grain {
	position: absolute;
	inset: 0;
	opacity: 0.15;
	pointer-events: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Display */
.mm-hide       { display: none !important; }
.mm-block      { display: block; }
.mm-inline     { display: inline; }
.mm-inline-block { display: inline-block; }

/* Responsive hide */
@media (max-width: 1080px) { .mm-hide-lg { display: none !important; } }
@media (max-width: 767px)  { .mm-hide-md { display: none !important; } }
@media (min-width: 1081px) { .mm-hide-desktop { display: none !important; } }

/* Text align */
.mm-text-left   { text-align: left; }
.mm-text-center { text-align: center; }
.mm-text-right  { text-align: right; }

/* Spacing (padding/margin ricorrenti — non esaustivo per scelta) */
.mm-pt-0 { padding-top: 0; }
.mm-pb-0 { padding-bottom: 0; }

.mm-py-sm { padding-block: var(--spacing-32); }
.mm-py-md { padding-block: var(--spacing-48); }
.mm-py-lg { padding-block: var(--spacing-80); }
.mm-py-xl { padding-block: var(--spacing-96); }

.mm-pt-md { padding-top: var(--spacing-48); }
.mm-pt-lg { padding-top: var(--spacing-80); }
.mm-pt-xl { padding-top: var(--spacing-96); }

.mm-pb-md { padding-bottom: var(--spacing-48); }
.mm-pb-lg { padding-bottom: var(--spacing-80); }
.mm-pb-xl { padding-bottom: var(--spacing-96); }

.mm-mt-0  { margin-top: 0; }
.mm-mt-4  { margin-top: var(--spacing-16); }
.mm-mt-8  { margin-top: var(--spacing-32); }
.mm-mt-12 { margin-top: var(--spacing-48); }

.mm-mb-0  { margin-bottom: 0; }
.mm-mb-4  { margin-bottom: var(--spacing-16); }
.mm-mb-8  { margin-bottom: var(--spacing-32); }
.mm-mb-12 { margin-bottom: var(--spacing-48); }

/* Max-width utilities (per contenitori testuali limitati) */
.mm-max-narrow { max-width: 600px; margin-inline: auto; }
.mm-max-prose  { max-width: 720px; margin-inline: auto; }

/* Border radius */
.mm-rounded-sm  { border-radius: var(--mm-radius-sm); }
.mm-rounded-md  { border-radius: var(--mm-radius-md); }
.mm-rounded-lg  { border-radius: var(--mm-radius-lg); }
.mm-rounded-full { border-radius: var(--mm-radius-full); }

/* Cursor */
.mm-cursor-pointer { cursor: pointer; }

/* Visually hidden (alias a screen-reader-text) */
.mm-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Aspect ratio */
.mm-aspect-video   { aspect-ratio: 16 / 9; }
.mm-aspect-square  { aspect-ratio: 1; }
.mm-aspect-portrait { aspect-ratio: 3 / 4; }

/* Overflow */
.mm-overflow-hidden { overflow: hidden; }

/* Position */
.mm-relative { position: relative; }
.mm-absolute { position: absolute; }
.mm-sticky   { position: sticky; }

/* Object-fit */
.mm-object-cover   { object-fit: cover; width: 100%; height: 100%; }
.mm-object-contain { object-fit: contain; width: 100%; height: 100%; }

/* -------------------------------------------------------------
   SPLIT TITLE (con maschera) — righe generate da GSAP SplitText per
   mmAnimate.splitTitle / data-mm-split-title in mm-animations.js. Ogni
   riga viene messa dentro un wrapper con overflow nascosto (la
   "maschera"): senza un minimo di respiro verticale quel wrapper taglia
   le lettere con ascendenti/discendenti (es. "g", "j", "y", "p") perche'
   e' alto esattamente quanto la riga di testo misurata, non quanto il
   reale ingombro dei glifi. Il padding qui sotto da' quel respiro; il
   margin negativo compensa cosi' l'altezza totale del titolo non
   cambia e il layout resta identico. (Nome classe verificato live nel
   DOM: SplitText genera "-mask-line-mask", non solo "-line-mask".)
   Non serve invece per mmAnimate.splitTitleFade / data-mm-split-title-fade,
   che non usa nessuna maschera.
   ------------------------------------------------------------- */
.mm-mask-split-mask-line-mask {
	padding-top: 0.12em;
	padding-bottom: 0.12em;
	margin-top: -0.12em;
	margin-bottom: -0.12em;
}

/* -------------------------------------------------------------
   SPLIT TITLE FADE WORDS — mmAnimate.splitTitleFadeWords /
   data-mm-split-title-fade-words in mm-animations.js. Il titolo resta
   invisibile finche' lo script non l'ha diviso in parole (SplitText)
   e reso di nuovo visibile subito prima di animarle: evita il "lampo"
   del testo intero prima dell'animazione. Lo script rende comunque
   visibile il titolo anche se SplitText non e' disponibile o c'e'
   prefers-reduced-motion (vedi showPlain() in quel metodo), quindi
   questa regola non lo nasconde mai in modo permanente.
   ------------------------------------------------------------- */
[data-mm-split-title-fade-words] {
	visibility: hidden;
}