/* ==========================================================================
   S.S. MONOPOLI 1966 — KIT CSS PER ELEMENTOR PRO
   Sito ufficiale monopolicalcio.it/1966 — restyling editoriale sportivo
   --------------------------------------------------------------------------
   COME SI INSTALLA
   1. Elementor > Impostazioni sito > Custom CSS  →  incolla tutto questo file.
      (in alternativa: Aspetto > Personalizza > CSS aggiuntivo, oppure un
       child theme in style.css — l'importante è che sia caricato ovunque)
   2. Elementor > Impostazioni sito > Colori globali: imposta i 6 colori
      indicati nel blocco TOKENS con lo stesso ordine.
   3. Elementor > Impostazioni sito > Font globali: Primario = Barlow
      Condensed, Secondario/Testo = Inter.
   4. Applica le classi (colonna "CSS Classes" di ogni container/widget)
      seguendo il file MAPPA-CLASSI.md.

   REGOLA D'ORO: nessun border-radius, nessuna ombra pesante, mai
   letter-spacing negativo sui titoli.
   Prefisso di tutte le classi: .mc-  (Monopoli Calcio)
   ========================================================================== */


/* ==========================================================================
   1. TOKENS — colori, tipografia, spazi, movimento
   ========================================================================== */

:root {

  /* --- Colori globali (stessi valori da impostare in Elementor) --------- */
  --mc-verde-notte:        #061713;  /* Global Color 1 — header, hero, footer */
  --mc-verde-istituzionale:#00864B;  /* Global Color 2 — categorie, sport     */
  --mc-verde-profondo:     #004C2C;  /* Global Color 3 — blocchi secondari    */
  --mc-lime:               #B4FF2E;  /* Global Color 4 — CTA, dati, hover     */
  --mc-avorio:             #F4F0E5;  /* Global Color 5 — sfondi chiari        */
  --mc-bianco-caldo:       #FFFDF8;  /* Global Color 6 — testi e card         */

  /* --- Derivati (solo per overlay, bordi, stati: non sono nuovi colori) - */
  --mc-notte-90:  rgba(6, 23, 19, .90);
  --mc-notte-72:  rgba(6, 23, 19, .72);
  --mc-notte-40:  rgba(6, 23, 19, .40);
  --mc-notte-12:  rgba(6, 23, 19, .12);
  --mc-lime-24:   rgba(180, 255, 46, .24);
  --mc-lime-12:   rgba(180, 255, 46, .12);
  --mc-bianco-72: rgba(255, 253, 248, .72);
  --mc-bianco-16: rgba(255, 253, 248, .16);

  /* --- Font --------------------------------------------------------------
     Caricare da Elementor > Font globali (Google Fonts) oppure in locale.
     Barlow Condensed: 700, 800, 900 — Inter: 400, 500, 600            */
  --mc-font-titolo: "Barlow Condensed", "Oswald", Impact, sans-serif;
  --mc-font-testo:  "Inter", "Helvetica Neue", Arial, sans-serif;

  /* --- Scala tipografica dei titoli --------------------------------------
     I valori minimi rispettano la regola mobile: 48–76 px.             */
  --mc-fs-t1: clamp(3rem,   12vw, 8.5rem);   /*  48 → 136 px  hero, display   */
  --mc-fs-t2: clamp(2.75rem, 8vw, 5.5rem);   /*  44 →  88 px  titoli sezione  */
  --mc-fs-t3: clamp(2rem,    5vw, 3.5rem);   /*  32 →  56 px  titoli card XL  */
  --mc-fs-t4: clamp(1.5rem,  3vw, 2.25rem);  /*  24 →  36 px  titoli card     */
  --mc-fs-t5: clamp(1.25rem, 2vw, 1.5rem);   /*  20 →  24 px  titoli minori   */

  /* Varianti per titoli lunghi: aggiungere .mc-t--lungo (vedi §2)        */
  --mc-fs-t1-lungo: clamp(2.75rem, 8.5vw, 6rem);
  --mc-fs-t2-lungo: clamp(2.25rem, 6vw,   4rem);

  /* --- Scala tipografica dei testi ------------------------------------- */
  --mc-fs-lead:  clamp(1.0625rem, 1.2vw, 1.25rem); /* 17 → 20 px */
  --mc-fs-body:  1rem;                             /* 16 px minimo assoluto */
  --mc-fs-small: .875rem;
  --mc-fs-eyebrow: .8125rem;

  /* --- Interlinea: titoli 0.88–0.95, testi 1.55–1.70 -------------------- */
  --mc-lh-titolo:  .90;
  --mc-lh-titolo-compatto: .88;
  --mc-lh-testo:   1.62;
  --mc-lh-lead:    1.55;

  /* --- Letter-spacing: mai negativo sui titoli ------------------------- */
  --mc-ls-titolo:  .005em;
  --mc-ls-eyebrow: .14em;
  --mc-ls-btn:     .08em;

  /* --- Spazi ----------------------------------------------------------- */
  --mc-sp-2:  .5rem;
  --mc-sp-3:  .75rem;
  --mc-sp-4:  1rem;
  --mc-sp-5:  1.5rem;
  --mc-sp-6:  2rem;
  --mc-sp-7:  3rem;
  --mc-sp-8:  4rem;
  --mc-sp-9:  6rem;
  --mc-sp-10: 8rem;

  /* Padding verticale delle sezioni (fluido) */
  --mc-sezione-y: clamp(3.5rem, 7vw, 7.5rem);
  /* Margini laterali: 20–24 px su mobile, poi si aprono */
  --mc-gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* --- Misure ---------------------------------------------------------- */
  --mc-w-max:  1440px;  /* larghezza massima del contenuto              */
  --mc-w-wide: 1680px;  /* per fasce full-bleed con contenuto largo     */
  --mc-w-read:  820px;  /* corpo articolo: 760–850 px                   */
  --mc-header-h: 88px;

  /* --- Bordi (angoli sempre netti) ------------------------------------- */
  --mc-radius: 0;
  --mc-bordo-scuro:  1px solid var(--mc-bianco-16);
  --mc-bordo-chiaro: 1px solid var(--mc-notte-12);
  --mc-bordo-lime:   2px solid var(--mc-lime);

  /* --- Movimento (leggero e funzionale) -------------------------------- */
  --mc-ease: cubic-bezier(.22, .61, .36, 1);
  --mc-dur:  .28s;
  --mc-dur-lenta: .5s;

  /* --- Z-index --------------------------------------------------------- */
  --mc-z-header: 999;
  --mc-z-top:    1000;
  /* il menu mobile sta SOPRA l'header: altrimenti il pulsante di chiusura
     finisce sotto la barra e il menu non si chiude più */
  --mc-z-menu:   1010;
}


/* ==========================================================================
   2. BASE + OVERRIDE ELEMENTOR
   Elementor annida i widget in .elementor-widget-container: alcune regole
   devono scavalcare quei wrapper.
   ========================================================================== */

body {
  font-family: var(--mc-font-testo);
  font-size: var(--mc-fs-body);
  line-height: var(--mc-lh-testo);
  color: var(--mc-verde-notte);
  background: var(--mc-bianco-caldo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Angoli netti ovunque: neutralizza gli arrotondamenti di default */
.mc-scope *,
.mc-sezione *,
.mc-card,
.mc-btn,
.mc-card img,
.elementor-widget-image img,
.elementor-button {
  border-radius: var(--mc-radius) !important;
}

/* Nessuna ombra pesante */
.mc-card,
.mc-btn,
.elementor-widget-button .elementor-button {
  box-shadow: none;
}

/* Le immagini dentro le card non devono mai debordare */
.mc-card img,
.mc-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Container Elementor: azzera i padding interni quando usiamo le nostre griglie */
.mc-sezione > .e-con-inner,
.mc-sezione > .elementor-container { max-width: 100%; }


/* ==========================================================================
   3. TIPOGRAFIA
   ========================================================================== */

/* --- Titoli --------------------------------------------------------------
   Applicare .mc-t1 … .mc-t5 al widget Titolo (campo CSS Classes).
   font-kerning e font-feature-settings evitano le lettere che si toccano. */

.mc-t1, .mc-t2, .mc-t3, .mc-t4, .mc-t5,
.mc-sezione h1, .mc-sezione h2, .mc-sezione h3 {
  font-family: var(--mc-font-titolo);
  font-weight: 900;
  text-transform: uppercase;
  line-height: var(--mc-lh-titolo);
  letter-spacing: var(--mc-ls-titolo);
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  text-wrap: balance;
  margin: 0 0 var(--mc-sp-5);
  /* impedisce sovrapposizioni su parole lunghissime */
  overflow-wrap: break-word;
  hyphens: manual;
}

.mc-t1 { font-size: var(--mc-fs-t1); line-height: var(--mc-lh-titolo-compatto); }
.mc-t2 { font-size: var(--mc-fs-t2); }
.mc-t3 { font-size: var(--mc-fs-t3); font-weight: 800; }
.mc-t4 { font-size: var(--mc-fs-t4); font-weight: 800; line-height: .95; }
.mc-t5 { font-size: var(--mc-fs-t5); font-weight: 800; line-height: .95; }

/* Titolo lungo: riduce la dimensione senza toccare il layout */
.mc-t1.mc-t--lungo { font-size: var(--mc-fs-t1-lungo); line-height: .92; }
.mc-t2.mc-t--lungo { font-size: var(--mc-fs-t2-lungo); line-height: .92; }
.mc-t3.mc-t--lungo { font-size: clamp(1.75rem, 4vw, 2.75rem); }

/* Titolo su due righe volute (usare <br> in Elementor):
   "DAL MONDO / BIANCOVERDE." */
.mc-t--due-righe { max-width: 14ch; }

/* Parola evidenziata in lime dentro un titolo: <span class="mc-hi">…</span> */
.mc-hi { color: var(--mc-lime); }
.mc-hi--verde { color: var(--mc-verde-istituzionale); }

/* Numero usato come elemento grafico (risultati, capienza, annate) */
.mc-numero {
  font-family: var(--mc-font-titolo);
  font-weight: 900;
  font-size: clamp(3rem, 10vw, 9rem);
  line-height: .82;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--mc-lime);
  display: block;
}
.mc-numero--outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--mc-lime);
  text-stroke: 2px var(--mc-lime);
}

/* --- Eyebrow / categoria / microtitolo ---------------------------------- */
.mc-eyebrow {
  font-family: var(--mc-font-titolo);
  font-weight: 700;
  font-size: var(--mc-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--mc-ls-eyebrow);
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: var(--mc-sp-3);
  color: var(--mc-verde-istituzionale);
  margin: 0 0 var(--mc-sp-4);
  align-self: flex-start;
  width: fit-content;
}
/* la breve linea orizzontale che precede l'eyebrow */
.mc-eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  flex: 0 0 auto;
}
.mc-eyebrow--nolinea::before { display: none; }

/* Su fondo scuro l'eyebrow diventa lime */
.mc-su-scuro .mc-eyebrow,
.mc-sezione--scura .mc-eyebrow,
.mc-sezione--profonda .mc-eyebrow,
.mc-sezione--notte .mc-eyebrow { color: var(--mc-lime); }

/* --- Correzioni di contrasto (WCAG AA) ---------------------------------
   Due eccezioni deliberate alla regola "lime su scuro / istituzionale su
   chiaro" del brief, perché a 13 px quelle due combinazioni non arrivano
   al 4.5:1 richiesto:
   · lime su verde istituzionale = 3.83:1  → si usa bianco caldo (4.58:1)
   · verde istituzionale su avorio = 4.09:1 → si usa verde profondo (8.91:1)
   La differenza percettiva è minima, la conformità cambia.              */
.mc-sezione--verde .mc-eyebrow { color: var(--mc-bianco-caldo); }
.mc-sezione--avorio .mc-eyebrow { color: var(--mc-verde-profondo); }

/* Categoria come etichetta piena (usata sulle card e sull'hero) */
.mc-cat {
  font-family: var(--mc-font-titolo);
  font-weight: 700;
  font-size: var(--mc-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--mc-ls-eyebrow);
  line-height: 1;
  display: inline-block;
  padding: .45em .7em .35em;
  background: var(--mc-verde-istituzionale);
  color: var(--mc-bianco-caldo);
  /* dentro un container flex in colonna un inline-block verrebbe stirato
     a tutta larghezza: l'etichetta deve restare della misura del testo */
  align-self: flex-start;
  width: fit-content;
}
.mc-cat--lime { background: var(--mc-lime); color: var(--mc-verde-notte); }
.mc-cat--notte { background: var(--mc-verde-notte); color: var(--mc-lime); }

/* --- Testi --------------------------------------------------------------- */
.mc-testo, .mc-sezione p {
  font-family: var(--mc-font-testo);
  font-weight: 400;
  font-size: var(--mc-fs-body);
  line-height: var(--mc-lh-testo);
  max-width: 68ch;
}
.mc-lead {
  font-size: var(--mc-fs-lead);
  font-weight: 500;
  line-height: var(--mc-lh-lead);
  max-width: 56ch;
}
.mc-estratto {
  font-size: var(--mc-fs-body);
  line-height: var(--mc-lh-testo);
  color: var(--mc-notte-72);
  max-width: 60ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mc-su-scuro .mc-estratto,
.mc-sezione--scura .mc-estratto { color: var(--mc-bianco-72); }

/* Data / meta */
.mc-meta {
  font-family: var(--mc-font-testo);
  font-size: var(--mc-fs-small);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--mc-notte-72);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mc-sp-3);
}
.mc-meta > * + *::before { content: "·"; margin-right: var(--mc-sp-3); }
.mc-su-scuro .mc-meta,
.mc-sezione--scura .mc-meta { color: var(--mc-bianco-72); }

/* Mai testo centrato per default: si centra solo dove serve davvero */
.mc-sezione { text-align: left; }
.mc-center { text-align: center; }


/* ==========================================================================
   4. SEZIONI, GRIGLIE, LAYOUT
   ========================================================================== */

.mc-sezione {
  padding-block: var(--mc-sezione-y);
  padding-inline: var(--mc-gutter);
  position: relative;
}
.mc-sezione__inner {
  max-width: var(--mc-w-max);
  margin-inline: auto;
  width: 100%;
}
.mc-sezione--larga .mc-sezione__inner { max-width: var(--mc-w-wide); }
.mc-sezione--stretta .mc-sezione__inner { max-width: var(--mc-w-read); }
.mc-sezione--nopad { padding-block: 0; }

/* --- Alternanza scuro / chiaro ------------------------------------------ */
.mc-sezione--notte    { background: var(--mc-verde-notte);  color: var(--mc-bianco-caldo); }
.mc-sezione--profonda { background: var(--mc-verde-profondo); color: var(--mc-bianco-caldo); }
.mc-sezione--verde    { background: var(--mc-verde-istituzionale); color: var(--mc-bianco-caldo); }
.mc-sezione--avorio   { background: var(--mc-avorio);       color: var(--mc-verde-notte); }
.mc-sezione--bianca   { background: var(--mc-bianco-caldo); color: var(--mc-verde-notte); }

.mc-sezione--notte,
.mc-sezione--profonda,
.mc-sezione--verde { --mc-bordo: var(--mc-bordo-scuro); }
.mc-sezione--avorio,
.mc-sezione--bianca { --mc-bordo: var(--mc-bordo-chiaro); }

/* Su fondo scuro i titoli restano bianco caldo, gli accenti lime */
.mc-sezione--notte h1, .mc-sezione--notte h2, .mc-sezione--notte h3,
.mc-sezione--profonda h1, .mc-sezione--profonda h2, .mc-sezione--profonda h3,
.mc-sezione--verde h1, .mc-sezione--verde h2, .mc-sezione--verde h3 {
  color: var(--mc-bianco-caldo);
}

/* --- Griglie editoriali -------------------------------------------------- */
.mc-grid { display: grid; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
.mc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Asimmetrie: sono la firma del progetto */
.mc-grid--60-40 { grid-template-columns: 6fr 4fr; }
.mc-grid--40-60 { grid-template-columns: 4fr 6fr; }
.mc-grid--70-30 { grid-template-columns: 7fr 3fr; }
.mc-grid--sfalsata > *:nth-child(even) { transform: translateY(clamp(1.5rem, 4vw, 4rem)); }

/* Intestazione di sezione: titolo a sinistra, link "tutte" a destra */
.mc-sezione__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mc-sp-6);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  flex-wrap: wrap;
}
.mc-sezione__head .mc-t2 { margin-bottom: 0; }

/* Linea divisoria sottile */
.mc-rule { height: 1px; background: var(--mc-bordo, var(--mc-notte-12)); border: 0; margin-block: var(--mc-sp-6); }
.mc-sezione--notte .mc-rule { background: var(--mc-bianco-16); }


/* ==========================================================================
   5. TEXTURE DIAGONALI E TRATTAMENTO FOTOGRAFICO
   ========================================================================== */

/* Texture diagonale lime — su qualunque container: .mc-texture */
.mc-texture { position: relative; isolation: isolate; }
.mc-texture::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--mc-lime-24) 0 2px,
    transparent 2px 12px
  );
  mix-blend-mode: normal;
}
.mc-texture--leggera::after { background-image: repeating-linear-gradient(-45deg, var(--mc-lime-12) 0 1px, transparent 1px 14px); }

/* La texture non passa mai sopra il contenuto di una sezione: resta sul
   fondo. Sopra le fotografie invece sì (è l'effetto richiesto dal brief),
   perché lì il testo sta a z-index 3. */
.mc-sezione.mc-texture > .mc-sezione__inner,
.mc-sezione.mc-texture > * { position: relative; z-index: 3; }
/* texture solo su una porzione (angolo basso a sinistra dell'hero) */
.mc-texture--angolo::after {
  inset: auto auto 0 0;
  width: clamp(120px, 22vw, 320px);
  height: clamp(120px, 22vw, 320px);
  -webkit-mask-image: linear-gradient(to top right, #000 30%, transparent 72%);
  mask-image: linear-gradient(to top right, #000 30%, transparent 72%);
}

/* Barra diagonale decorativa (separatore fra sezioni) */
.mc-diagonale {
  height: clamp(28px, 4vw, 56px);
  background: repeating-linear-gradient(-45deg, var(--mc-lime) 0 10px, var(--mc-verde-notte) 10px 20px);
}

/* --- Media: overlay verde notte + contrasto + desaturazione ------------- */
.mc-media { position: relative; overflow: hidden; display: block; isolation: isolate; }
.mc-media img {
  filter: contrast(1.08) saturate(.82);
  transition: transform var(--mc-dur-lenta) var(--mc-ease), filter var(--mc-dur) var(--mc-ease);
}
.mc-media--overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, var(--mc-notte-90) 0%, var(--mc-notte-40) 45%, transparent 85%);
}
.mc-media--overlay-pieno::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: var(--mc-notte-72);
}
/* contenuto sopra l'overlay */
.mc-media__contenuto { position: relative; z-index: 3; }

/* Formati */
.mc-ratio-16-9 { aspect-ratio: 16 / 9; }
.mc-ratio-4-3  { aspect-ratio: 4 / 3; }
.mc-ratio-3-4  { aspect-ratio: 3 / 4; }
.mc-ratio-1-1  { aspect-ratio: 1 / 1; }
.mc-ratio-hero { aspect-ratio: 16 / 10; }


/* ==========================================================================
   6. BOTTONI E LINK
   ========================================================================== */

.mc-btn,
.mc-sezione .elementor-button {
  --mc-btn-bg: var(--mc-lime);
  --mc-btn-fg: var(--mc-verde-notte);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--mc-font-titolo);
  font-weight: 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: var(--mc-ls-btn);
  line-height: 1;
  padding: 1.05em 1.5em .95em;
  background: var(--mc-btn-bg);
  color: var(--mc-btn-fg);
  border: 0;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--mc-dur) var(--mc-ease),
              background-color var(--mc-dur) var(--mc-ease),
              color var(--mc-dur) var(--mc-ease);
}
/* freccia diagonale */
.mc-btn::after,
.mc-sezione .elementor-button::after {
  content: "\2197";               /* ↗ */
  font-family: var(--mc-font-testo);
  font-weight: 600;
  font-size: .95em;
  line-height: 1;
  transition: transform var(--mc-dur) var(--mc-ease);
}
.mc-btn:hover,
.mc-btn:focus-visible,
.mc-sezione .elementor-button:hover {
  transform: translateY(-3px);     /* leggero movimento verticale */
}
.mc-btn:hover::after { transform: translate(2px, -2px); }
.mc-btn:active { transform: translateY(-1px); }
.mc-btn--noarrow::after { content: none; }

/* Varianti */
.mc-btn--scuro  { --mc-btn-bg: var(--mc-verde-notte); --mc-btn-fg: var(--mc-lime); }
.mc-btn--verde  { --mc-btn-bg: var(--mc-verde-istituzionale); --mc-btn-fg: var(--mc-bianco-caldo); }
.mc-btn--ghost  {
  --mc-btn-bg: transparent;
  --mc-btn-fg: var(--mc-verde-notte);
  box-shadow: inset 0 0 0 2px currentColor;
}
/* Il ghost si schiarisce su qualunque fondo scuro, anche quando il blocco
   scuro sta dentro una sezione chiara (match center, hero, stadio, 404) */
.mc-su-scuro .mc-btn--ghost,
.mc-sezione--notte .mc-btn--ghost,
.mc-sezione--profonda .mc-btn--ghost,
.mc-sezione--verde .mc-btn--ghost,
.mc-match .mc-btn--ghost,
.mc-hero .mc-btn--ghost,
.mc-stadio .mc-btn--ghost,
.mc-404 .mc-btn--ghost,
.mc-giocatore .mc-btn--ghost { --mc-btn-fg: var(--mc-bianco-caldo); }

.mc-su-scuro .mc-btn--ghost:hover,
.mc-sezione--notte .mc-btn--ghost:hover,
.mc-sezione--profonda .mc-btn--ghost:hover,
.mc-match .mc-btn--ghost:hover,
.mc-hero .mc-btn--ghost:hover,
.mc-stadio .mc-btn--ghost:hover,
.mc-404 .mc-btn--ghost:hover { --mc-btn-bg: var(--mc-lime); --mc-btn-fg: var(--mc-verde-notte); box-shadow: none; }
.mc-btn--grande { font-size: 1.125rem; padding: 1.2em 1.9em 1.1em; }
.mc-btn--full   { width: 100%; justify-content: space-between; }

/* --- Link secondario: bordo inferiore + freccia -------------------------- */
.mc-link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--mc-font-titolo);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: var(--mc-ls-btn);
  line-height: 1.2;
  color: var(--mc-verde-notte);
  text-decoration: none;
  padding-bottom: .35em;
  border-bottom: 2px solid currentColor;
  transition: color var(--mc-dur) var(--mc-ease), gap var(--mc-dur) var(--mc-ease);
}
.mc-link::after { content: "\2197"; font-family: var(--mc-font-testo); font-weight: 600; }
.mc-link:hover { gap: .8em; color: var(--mc-verde-istituzionale); }
.mc-su-scuro .mc-link,
.mc-sezione--notte .mc-link,
.mc-sezione--profonda .mc-link,
.mc-sezione--verde .mc-link { color: var(--mc-lime); }
.mc-su-scuro .mc-link:hover,
.mc-sezione--notte .mc-link:hover { color: var(--mc-bianco-caldo); }

/* Link inline nel corpo del testo */
.mc-prose a {
  color: var(--mc-verde-istituzionale);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 2px;
}
.mc-prose a:hover { background: var(--mc-lime); color: var(--mc-verde-notte); text-decoration: none; }


/* ==========================================================================
   7. HEADER — trasparente in cima, verde notte dopo lo scroll
   Elementor Pro sticky aggiunge .elementor-sticky--effects al container.
   ========================================================================== */

.mc-header {
  --mc-header-bg: transparent;
  position: relative;
  z-index: var(--mc-z-header);
  background: var(--mc-header-bg) !important;
  padding-block: var(--mc-sp-4);
  padding-inline: var(--mc-gutter);
  transition: background-color var(--mc-dur) var(--mc-ease),
              padding var(--mc-dur) var(--mc-ease),
              box-shadow var(--mc-dur) var(--mc-ease);
  color: var(--mc-bianco-caldo);
}
/* stato "attaccato" — sia con la classe di Elementor sia con una custom */
.mc-header.elementor-sticky--effects,
.mc-header.is-stuck {
  --mc-header-bg: var(--mc-verde-notte);
  padding-block: var(--mc-sp-3);
  box-shadow: 0 1px 0 var(--mc-bianco-16);
}
/* La home ha l'header sovrapposto alla hero, ma parte SOTTO la fascia
   ultim'ora: --mc-ultimora-h va impostata all'altezza reale della fascia
   (0 se la fascia non c'è). Una volta "attaccato" l'header diventa fisso
   in cima — in WordPress questo lo fa lo Sticky di Elementor. */
.mc-header--overlay { position: absolute; top: var(--mc-ultimora-h, 0); left: 0; right: 0; }
.mc-header--overlay.is-stuck,
.mc-header--overlay.elementor-sticky--effects { position: fixed; top: 0; }

/* Su pagine interne senza hero fotografica l'header parte già scuro */
.mc-header--solido { --mc-header-bg: var(--mc-verde-notte); position: relative; }

.mc-header__inner {
  max-width: var(--mc-w-wide);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mc-sp-6);
}
.mc-header__logo img { height: clamp(44px, 5vw, 64px); width: auto; transition: height var(--mc-dur) var(--mc-ease); }
.mc-header.elementor-sticky--effects .mc-header__logo img { height: clamp(38px, 4vw, 52px); }
.mc-header__azioni { display: flex; align-items: center; gap: var(--mc-sp-4); }

/* Voci di menu */
.mc-nav { display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; }
.mc-nav > ul { display: flex; align-items: center; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; }

.mc-nav .elementor-item,
.mc-nav a {
  white-space: nowrap;
  font-family: var(--mc-font-titolo);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mc-bianco-caldo);
  text-decoration: none;
  padding: .6em .75em;
  position: relative;
}
.mc-nav .elementor-item:hover,
.mc-nav a:hover,
.mc-nav .elementor-item-active { color: var(--mc-lime); }
/* sottolineatura lime che cresce */
.mc-nav a::after,
.mc-nav .elementor-item::after {
  content: "";
  position: absolute;
  left: .75em; right: .75em; bottom: .25em;
  height: 2px;
  background: var(--mc-lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--mc-dur) var(--mc-ease);
}
.mc-nav a:hover::after,
.mc-nav .elementor-item:hover::after,
.mc-nav .elementor-item-active::after { transform: scaleX(1); }

/* Mega menu (Elementor Pro Mega Menu o Dropdown) */
.mc-megamenu,
.mc-nav .elementor-nav-menu--dropdown {
  background: var(--mc-verde-notte) !important;
  border-top: 2px solid var(--mc-lime);
  padding: var(--mc-sp-6) var(--mc-gutter) var(--mc-sp-7);
}
.mc-megamenu__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--mc-sp-6); max-width: var(--mc-w-max); margin-inline: auto; }
.mc-megamenu__titolo {
  font-family: var(--mc-font-titolo); font-weight: 800; text-transform: uppercase;
  letter-spacing: var(--mc-ls-eyebrow); font-size: var(--mc-fs-eyebrow);
  color: var(--mc-lime); margin-bottom: var(--mc-sp-4);
}
.mc-megamenu a { display: block; padding: .45em 0; color: var(--mc-bianco-caldo); text-decoration: none; font-size: .9375rem; }
.mc-megamenu a:hover { color: var(--mc-lime); }

/* Ricerca */
.mc-cerca-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; border: 2px solid var(--mc-bianco-16);
  color: var(--mc-bianco-caldo); cursor: pointer;
  transition: border-color var(--mc-dur) var(--mc-ease), color var(--mc-dur) var(--mc-ease);
}
.mc-cerca-btn:hover { border-color: var(--mc-lime); color: var(--mc-lime); }

/* CTA Biglietti nell'header */
.mc-header .mc-btn--biglietti {
  --mc-btn-bg: var(--mc-lime);
  --mc-btn-fg: var(--mc-verde-notte);
  padding: .85em 1.25em .75em;
  font-size: .9375rem;
}

/* Menu mobile a tutta larghezza */
.mc-menu-mobile {
  position: fixed; inset: 0;
  background: var(--mc-verde-notte);
  z-index: var(--mc-z-menu);
  padding: calc(var(--mc-header-h) + var(--mc-sp-6)) var(--mc-gutter) var(--mc-sp-8);
  overflow-y: auto;
}
.mc-menu-mobile a {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mc-font-titolo); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.5rem, 6vw, 2.25rem); line-height: 1;
  color: var(--mc-bianco-caldo); text-decoration: none;
  padding: .55em 0; border-bottom: 1px solid var(--mc-bianco-16);
}
.mc-menu-mobile a:hover, .mc-menu-mobile .elementor-item-active { color: var(--mc-lime); }
/* voce espandibile */
.mc-menu-mobile details > summary { list-style: none; cursor: pointer; }
.mc-menu-mobile details > summary::-webkit-details-marker { display: none; }
.mc-menu-mobile details[open] > summary { color: var(--mc-lime); }
.mc-menu-mobile details ul { padding-left: var(--mc-sp-4); }
.mc-menu-mobile details ul a { font-size: 1.0625rem; font-family: var(--mc-font-testo); font-weight: 600; letter-spacing: .02em; }
/* la CTA resta sempre visibile in fondo */
.mc-menu-mobile__cta { position: sticky; bottom: 0; padding-top: var(--mc-sp-5); background: linear-gradient(to top, var(--mc-verde-notte) 70%, transparent); }
.mc-menu-mobile__cta .mc-btn { width: 100%; justify-content: space-between; }

/* Elementi da NON mostrare mai nel frontend */
.mc-header .login, .mc-header .signin, .mc-header .register,
.mc-hide-auth, .mc-footer .login, .widget_meta, .lostpassword-link { display: none !important; }


/* ==========================================================================
   8. ULTIM'ORA — fascia breaking news
   ========================================================================== */

.mc-ultimora {
  background: var(--mc-lime);
  color: var(--mc-verde-notte);
  display: flex;
  align-items: stretch;
  min-height: 48px;
  overflow: hidden;
  position: relative;
  z-index: calc(var(--mc-z-header) - 1);
}
.mc-ultimora__label {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--mc-verde-notte); color: var(--mc-lime);
  font-family: var(--mc-font-titolo); font-weight: 800; text-transform: uppercase;
  letter-spacing: var(--mc-ls-eyebrow); font-size: var(--mc-fs-eyebrow);
  padding: 0 1.1em;
}
.mc-ultimora__label::before {
  content: ""; width: 8px; height: 8px; background: var(--mc-lime);
  animation: mc-pulse 2.4s var(--mc-ease) infinite;
}
@keyframes mc-pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

.mc-ultimora__lista {
  display: flex; align-items: center; gap: var(--mc-sp-6);
  padding-inline: var(--mc-sp-5);
  overflow: hidden;
  white-space: nowrap;
}
.mc-ultimora__lista a {
  font-family: var(--mc-font-testo); font-weight: 600; font-size: .9375rem;
  color: var(--mc-verde-notte); text-decoration: none;
}
.mc-ultimora__lista a:hover { text-decoration: underline; text-underline-offset: .2em; }
/* scorrimento lento e non aggressivo — 40s per ciclo */
.mc-ultimora__track { display: inline-flex; gap: var(--mc-sp-6); animation: mc-ticker 44s linear infinite; }
.mc-ultimora:hover .mc-ultimora__track,
.mc-ultimora:focus-within .mc-ultimora__track { animation-play-state: paused; }
@keyframes mc-ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } }


/* ==========================================================================
   9. HERO EDITORIALE — 60 / 40
   ========================================================================== */

.mc-hero {
  background: var(--mc-verde-notte);
  color: var(--mc-bianco-caldo);
  padding-block: calc(var(--mc-header-h) + var(--mc-sp-7)) var(--mc-sezione-y);
  padding-inline: var(--mc-gutter);
}
.mc-hero__inner {
  max-width: var(--mc-w-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: stretch;
}

/* Notizia principale */
.mc-hero__main { position: relative; display: flex; min-height: clamp(420px, 62vh, 720px); }
.mc-hero__main .mc-media { position: absolute; inset: 0; }
.mc-hero__main .mc-media img { width: 100%; height: 100%; object-fit: cover; }
.mc-hero__testo {
  position: relative; z-index: 3;
  margin-top: auto;
  padding: clamp(1.5rem, 3vw, 3rem);
  /* larghezza in px, non in ch: il container eredita il font del testo,
     quindi un valore in ch qui produrrebbe una colonna strettissima e
     spezzerebbe il titolo lettera per lettera */
  max-width: min(100%, 46rem);
}
/* Il titolo della hero è più contenuto del display massimo: a 136 px anche
   un titolo breve manda a capo l'ultima parola (o il punto finale) da sola. */
.mc-hero__testo .mc-t1 {
  font-size: clamp(2.75rem, 7.5vw, 6.5rem);
  margin-bottom: var(--mc-sp-4);
  color: var(--mc-bianco-caldo);
}
.mc-hero__testo .mc-t1.mc-t--lungo { font-size: clamp(2.5rem, 6vw, 5rem); }
.mc-hero__testo .mc-estratto { color: var(--mc-bianco-72); margin-bottom: var(--mc-sp-5); max-width: 46ch; }

/* Notizie secondarie (2 o 3) */
.mc-hero__side { display: grid; grid-auto-rows: 1fr; gap: clamp(1rem, 1.5vw, 1.5rem); }
.mc-hero__item {
  position: relative;
  display: flex;
  min-height: 160px;
  overflow: hidden;
  text-decoration: none;
  color: var(--mc-bianco-caldo);
}
.mc-hero__item .mc-media { position: absolute; inset: 0; }
.mc-hero__item .mc-hero__item-testo { position: relative; z-index: 3; margin-top: auto; padding: var(--mc-sp-5); }
.mc-hero__item .mc-t4 { color: var(--mc-bianco-caldo); margin-bottom: var(--mc-sp-2); }
.mc-hero__item:hover img { transform: scale(1.04); }


/* ==========================================================================
   10. MATCH CENTER
   ========================================================================== */

.mc-match {
  background: var(--mc-verde-profondo);
  color: var(--mc-bianco-caldo);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;                       /* la riga di separazione è il fondo sotto */
  position: relative;
  isolation: isolate;
}
.mc-match::before {              /* texture diagonale di fondo */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(-45deg, var(--mc-lime-12) 0 1px, transparent 1px 16px);
}
.mc-match__box {
  position: relative; z-index: 1;
  background: var(--mc-verde-profondo);
  padding: clamp(1.75rem, 3.5vw, 3.25rem);
  display: flex; flex-direction: column; gap: var(--mc-sp-4);
}
.mc-match__box--prossima { background: var(--mc-verde-notte); }

.mc-match__competizione {
  font-family: var(--mc-font-titolo); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--mc-ls-eyebrow); font-size: var(--mc-fs-eyebrow); color: var(--mc-lime);
}
.mc-match__squadre {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--mc-sp-4);
}
.mc-match__squadra { display: flex; flex-direction: column; align-items: center; gap: var(--mc-sp-3); text-align: center; }
.mc-match__squadra img { width: clamp(48px, 7vw, 84px); height: auto; object-fit: contain; }
.mc-match__squadra span {
  font-family: var(--mc-font-titolo); font-weight: 800; text-transform: uppercase;
  font-size: clamp(.9375rem, 1.4vw, 1.125rem); line-height: 1; letter-spacing: .02em;
}
.mc-match__risultato {
  font-family: var(--mc-font-titolo); font-weight: 900;
  font-size: clamp(2.75rem, 6vw, 4.5rem); line-height: .85;
  letter-spacing: .02em; color: var(--mc-lime);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.mc-match__orario {
  font-family: var(--mc-font-titolo); font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem); line-height: .9; color: var(--mc-lime);
  font-variant-numeric: tabular-nums;
}
.mc-match__info {
  display: flex; flex-wrap: wrap; gap: var(--mc-sp-4);
  font-size: var(--mc-fs-small); color: var(--mc-bianco-72);
  border-top: var(--mc-bordo-scuro); padding-top: var(--mc-sp-4);
}
.mc-match__azioni { display: flex; flex-wrap: wrap; gap: var(--mc-sp-3); margin-top: auto; }


/* ==========================================================================
   11. CARD NEWS + LOOP GRID
   Applicare .mc-card al container del Loop Item in Elementor.
   ========================================================================== */

.mc-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  height: 100%;
  transition: transform var(--mc-dur) var(--mc-ease);
}
.mc-card .mc-media { overflow: hidden; }
.mc-card:hover .mc-media img { transform: scale(1.045); }
.mc-card__corpo { padding-top: var(--mc-sp-5); display: flex; flex-direction: column; gap: var(--mc-sp-3); flex: 1; }
.mc-card__corpo .mc-t4 { margin: 0; }
.mc-card__corpo .mc-meta { margin-top: auto; padding-top: var(--mc-sp-3); }
.mc-card a { text-decoration: none; color: inherit; }
.mc-card a:hover .mc-t4 { color: var(--mc-verde-istituzionale); }
.mc-sezione--notte .mc-card a:hover .mc-t4 { color: var(--mc-lime); }

/* Card con corpo su fondo pieno */
.mc-card--pieno .mc-card__corpo { background: var(--mc-avorio); padding: var(--mc-sp-5); }
.mc-sezione--notte .mc-card--pieno .mc-card__corpo { background: var(--mc-verde-profondo); }

/* Card principale più grande dentro la griglia */
.mc-card--principale .mc-t4 { font-size: var(--mc-fs-t3); }
.mc-card--principale .mc-estratto { -webkit-line-clamp: 4; }

/* Griglia notizie: 1 grande + 4/6 secondarie */
.mc-news-grid { display: grid; gap: clamp(1.25rem, 2.2vw, 2.25rem); grid-template-columns: repeat(3, minmax(0,1fr)); }
.mc-news-grid > .mc-card--principale { grid-column: span 2; grid-row: span 2; }

/* Filtri categoria */
.mc-filtri { display: flex; flex-wrap: wrap; gap: var(--mc-sp-3); margin-bottom: var(--mc-sp-6); }
.mc-filtro {
  font-family: var(--mc-font-titolo); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: .875rem; line-height: 1;
  padding: .7em 1em .6em;
  background: transparent; color: inherit;
  box-shadow: inset 0 0 0 2px var(--mc-bordo-colore, currentColor);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--mc-dur) var(--mc-ease), color var(--mc-dur) var(--mc-ease);
}
.mc-filtro:hover,
.mc-filtro[aria-current="true"],
.mc-filtro.is-attivo { background: var(--mc-lime); color: var(--mc-verde-notte); box-shadow: none; }


/* ==========================================================================
   12. PRIMA SQUADRA / CARD GIOCATORE / ROSA
   ========================================================================== */

.mc-rosa__gruppo { margin-bottom: var(--mc-sp-8); }
.mc-rosa__gruppo > .mc-eyebrow { margin-bottom: var(--mc-sp-5); }
.mc-rosa-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1rem, 2vw, 2rem); }

.mc-giocatore {
  position: relative;
  background: var(--mc-verde-profondo);
  color: var(--mc-bianco-caldo);
  overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none;
}
.mc-giocatore .mc-media { aspect-ratio: 3 / 4; }
.mc-giocatore .mc-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, var(--mc-verde-notte) 4%, transparent 58%);
}
/* numero di maglia come elemento grafico */
.mc-giocatore__numero {
  position: absolute; top: var(--mc-sp-4); right: var(--mc-sp-4); z-index: 3;
  font-family: var(--mc-font-titolo); font-weight: 900;
  font-size: clamp(2.5rem, 5vw, 4rem); line-height: .8;
  color: transparent; -webkit-text-stroke: 2px var(--mc-lime);
  font-variant-numeric: tabular-nums lining-nums;
}
.mc-giocatore__testo { position: relative; z-index: 3; margin-top: -3.5rem; padding: var(--mc-sp-5); }
.mc-giocatore__nome {
  font-family: var(--mc-font-testo); font-weight: 500; font-size: .9375rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--mc-lime); display: block;
}
.mc-giocatore__cognome {
  font-family: var(--mc-font-titolo); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: .92; letter-spacing: .01em;
  margin: .15em 0 .4em;
}
.mc-giocatore__dati {
  display: flex; flex-wrap: wrap; gap: var(--mc-sp-3);
  font-size: .8125rem; color: var(--mc-bianco-72);
  border-top: var(--mc-bordo-scuro); padding-top: var(--mc-sp-3);
}
.mc-giocatore:hover img { transform: scale(1.05); }
.mc-giocatore:hover .mc-giocatore__numero { -webkit-text-stroke-color: var(--mc-bianco-caldo); }

/* Staff tecnico: stessa card, foto 1:1 e niente numero */
.mc-staff .mc-media { aspect-ratio: 1 / 1; }
.mc-staff .mc-giocatore__numero { display: none; }


/* ==========================================================================
   13. VIDEO E HIGHLIGHTS
   ========================================================================== */

.mc-video-layout { display: grid; grid-template-columns: 7fr 3fr; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
.mc-video-lista { display: grid; gap: var(--mc-sp-4); align-content: start; }

.mc-video { position: relative; display: block; text-decoration: none; color: inherit; overflow: hidden; }
.mc-video .mc-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, var(--mc-notte-90) 0%, transparent 62%);
}
/* icona play personalizzata: triangolo netto, nessuna icona stock */
.mc-video__play {
  position: absolute; z-index: 4; left: var(--mc-sp-5); bottom: var(--mc-sp-5);
  width: clamp(48px, 5vw, 68px); height: clamp(48px, 5vw, 68px);
  background: var(--mc-lime);
  display: grid; place-items: center;
  transition: transform var(--mc-dur) var(--mc-ease);
}
.mc-video__play::before {
  content: ""; display: block;
  width: 0; height: 0;
  border-left: 18px solid var(--mc-verde-notte);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  margin-left: 4px;
}
.mc-video:hover .mc-video__play { transform: scale(1.08) translateY(-2px); }
.mc-video__testo { position: absolute; z-index: 3; inset: auto 0 0 auto; padding: var(--mc-sp-5) var(--mc-sp-5) var(--mc-sp-5) calc(clamp(48px, 5vw, 68px) + var(--mc-sp-7)); color: var(--mc-bianco-caldo); }

/* elementi secondari della lista: miniatura + testo affiancati */
.mc-video--riga { display: grid; grid-template-columns: 140px 1fr; gap: var(--mc-sp-4); align-items: center; }
.mc-video--riga .mc-video__play { position: static; width: 34px; height: 34px; }
.mc-video--riga .mc-video__play::before { border-left-width: 12px; border-top-width: 7px; border-bottom-width: 7px; }
.mc-video--riga .mc-video__testo { position: static; padding: 0; }


/* ==========================================================================
   14. STADIO, BIGLIETTERIA, DATI IN EVIDENZA
   ========================================================================== */

.mc-stadio { position: relative; min-height: clamp(420px, 70vh, 760px); display: flex; align-items: flex-end; }
.mc-stadio .mc-media { position: absolute; inset: 0; }
.mc-stadio__contenuto { position: relative; z-index: 3; padding: clamp(2rem, 5vw, 5rem); max-width: 720px; color: var(--mc-bianco-caldo); }

/* Striscia di dati (capienza, settori, anno) */
.mc-dati { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--mc-bianco-16); }
.mc-dati__voce { background: var(--mc-verde-notte); padding: var(--mc-sp-5); color: var(--mc-bianco-caldo); }
.mc-sezione--avorio .mc-dati { background: var(--mc-notte-12); }
.mc-sezione--avorio .mc-dati__voce { background: var(--mc-avorio); color: var(--mc-verde-notte); }
.mc-dati__valore {
  font-family: var(--mc-font-titolo); font-weight: 900;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: .85;
  color: var(--mc-lime); font-variant-numeric: tabular-nums lining-nums;
  display: block; margin-bottom: var(--mc-sp-3);
}
.mc-sezione--avorio .mc-dati__valore { color: var(--mc-verde-istituzionale); }
.mc-dati__etichetta {
  font-family: var(--mc-font-titolo); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--mc-ls-eyebrow); font-size: var(--mc-fs-eyebrow);
}

/* Blocco biglietteria: la CTA deve dominare */
.mc-biglietteria {
  background: var(--mc-lime);
  color: var(--mc-verde-notte);
  padding: clamp(2rem, 4vw, 3.5rem);
  display: grid; grid-template-columns: 1fr auto; gap: var(--mc-sp-6); align-items: center;
}
.mc-biglietteria .mc-t2 { color: var(--mc-verde-notte); margin-bottom: var(--mc-sp-3); }
.mc-biglietteria .mc-btn { --mc-btn-bg: var(--mc-verde-notte); --mc-btn-fg: var(--mc-lime); }
.mc-biglietteria .mc-eyebrow { color: var(--mc-verde-notte); }

/* Punti vendita / informazioni settori */
.mc-info-box {
  border-left: 4px solid var(--mc-lime);
  background: var(--mc-avorio);
  padding: var(--mc-sp-5);
}
.mc-sezione--notte .mc-info-box { background: var(--mc-verde-profondo); }
.mc-info-box strong { font-weight: 600; }

/* Avviso / scadenza evidente (accrediti) */
.mc-avviso {
  display: flex; gap: var(--mc-sp-4); align-items: flex-start;
  background: var(--mc-verde-notte); color: var(--mc-bianco-caldo);
  padding: var(--mc-sp-5); border-left: 4px solid var(--mc-lime);
}
.mc-avviso__data {
  font-family: var(--mc-font-titolo); font-weight: 900; color: var(--mc-lime);
  font-size: 1.5rem; line-height: 1; white-space: nowrap;
}


/* ==========================================================================
   15. SPONSOR — gerarchia per livelli
   ========================================================================== */

.mc-sponsor__livello { margin-bottom: var(--mc-sp-8); }
.mc-sponsor__livello > .mc-eyebrow { margin-bottom: var(--mc-sp-5); }

.mc-sponsor-grid { display: grid; gap: 1px; background: var(--mc-notte-12); }
.mc-sezione--notte .mc-sponsor-grid { background: var(--mc-bianco-16); }

.mc-sponsor {
  background: var(--mc-bianco-caldo);
  display: grid; place-items: center;
  padding: var(--mc-sp-5);
  min-height: 120px;
  transition: background-color var(--mc-dur) var(--mc-ease);
}
.mc-sponsor img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;          /* proporzioni originali, mai deformate */
  object-fit: contain;
  filter: grayscale(1);
  opacity: .78;
  transition: filter var(--mc-dur) var(--mc-ease), opacity var(--mc-dur) var(--mc-ease);
}
.mc-sponsor:hover img { filter: grayscale(0); opacity: 1; }

/* Spazio proporzionato al livello */
.mc-sponsor-grid--main     { grid-template-columns: repeat(2, minmax(0,1fr)); }
.mc-sponsor-grid--main .mc-sponsor { min-height: 220px; padding: var(--mc-sp-7); }
.mc-sponsor-grid--main .mc-sponsor img { max-height: 110px; }

.mc-sponsor-grid--top      { grid-template-columns: repeat(3, minmax(0,1fr)); }
.mc-sponsor-grid--top .mc-sponsor { min-height: 170px; }
.mc-sponsor-grid--top .mc-sponsor img { max-height: 80px; }

.mc-sponsor-grid--supplier { grid-template-columns: repeat(5, minmax(0,1fr)); }
.mc-sponsor-grid--supplier .mc-sponsor { min-height: 120px; }
.mc-sponsor-grid--supplier .mc-sponsor img { max-height: 56px; }

.mc-sponsor-grid--partner  { grid-template-columns: repeat(6, minmax(0,1fr)); }
.mc-sponsor-grid--partner .mc-sponsor { min-height: 100px; }
.mc-sponsor-grid--partner .mc-sponsor img { max-height: 44px; }


/* ==========================================================================
   16. COMMUNITY E SOCIAL (senza widget pesanti)
   ========================================================================== */

.mc-social-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.mc-social {
  position: relative; display: block; text-decoration: none;
  background: var(--mc-verde-profondo); color: var(--mc-bianco-caldo);
  aspect-ratio: 1 / 1; overflow: hidden;
}
.mc-social__etichetta {
  position: absolute; z-index: 3; left: 0; bottom: 0;
  background: var(--mc-verde-notte); color: var(--mc-lime);
  font-family: var(--mc-font-titolo); font-weight: 800; text-transform: uppercase;
  letter-spacing: var(--mc-ls-eyebrow); font-size: var(--mc-fs-eyebrow);
  padding: .6em 1em .5em;
}
.mc-social:hover img { transform: scale(1.05); }

.mc-canali { display: flex; flex-wrap: wrap; gap: var(--mc-sp-3); }
.mc-canale {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--mc-font-titolo); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: .9375rem;
  padding: .8em 1.1em .7em;
  box-shadow: inset 0 0 0 2px currentColor;
  color: var(--mc-lime); text-decoration: none;
  transition: background-color var(--mc-dur) var(--mc-ease), color var(--mc-dur) var(--mc-ease);
}
.mc-canale:hover { background: var(--mc-lime); color: var(--mc-verde-notte); box-shadow: none; }


/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.mc-footer {
  background: var(--mc-verde-notte);
  color: var(--mc-bianco-caldo);
  padding-block: var(--mc-sp-8) var(--mc-sp-6);
  padding-inline: var(--mc-gutter);
}
.mc-footer__inner { max-width: var(--mc-w-wide); margin-inline: auto; }
.mc-footer__top { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: var(--mc-sp-6); padding-bottom: var(--mc-sp-7); border-bottom: var(--mc-bordo-scuro); }
.mc-footer__logo img { height: clamp(64px, 7vw, 96px); width: auto; }
.mc-footer__colonna h4 {
  font-family: var(--mc-font-titolo); font-weight: 800; text-transform: uppercase;
  letter-spacing: var(--mc-ls-eyebrow); font-size: var(--mc-fs-eyebrow);
  color: var(--mc-lime); margin: 0 0 var(--mc-sp-4);
}
.mc-footer__colonna a { display: block; padding: .35em 0; color: var(--mc-bianco-72); text-decoration: none; font-size: .9375rem; }
.mc-footer__colonna a:hover { color: var(--mc-lime); }

.mc-footer__dati { padding-block: var(--mc-sp-6); font-size: .875rem; color: var(--mc-bianco-72); line-height: 1.7; }
.mc-footer__dati strong { color: var(--mc-bianco-caldo); font-weight: 600; }
.mc-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--mc-sp-4);
  align-items: center; justify-content: space-between;
  padding-top: var(--mc-sp-5); border-top: var(--mc-bordo-scuro);
  font-size: .8125rem; color: var(--mc-bianco-72);
}
.mc-footer__legal { display: flex; flex-wrap: wrap; gap: var(--mc-sp-4); }
.mc-footer__legal a { color: var(--mc-bianco-72); text-decoration: none; }
.mc-footer__legal a:hover { color: var(--mc-lime); text-decoration: underline; }

/* Torna in alto */
.mc-top {
  position: fixed; right: var(--mc-sp-5); bottom: var(--mc-sp-5); z-index: var(--mc-z-top);
  width: 48px; height: 48px;
  background: var(--mc-lime); color: var(--mc-verde-notte);
  display: grid; place-items: center; text-decoration: none;
  opacity: 0; visibility: hidden;
  transition: opacity var(--mc-dur) var(--mc-ease), transform var(--mc-dur) var(--mc-ease), visibility var(--mc-dur);
}
.mc-top.is-visibile { opacity: 1; visibility: visible; }
.mc-top:hover { transform: translateY(-3px); }
.mc-top::before { content: ""; width: 0; height: 0; border-bottom: 12px solid currentColor; border-left: 8px solid transparent; border-right: 8px solid transparent; }


/* ==========================================================================
   18. TEMPLATE ARTICOLO (Single Post)
   ========================================================================== */

.mc-articolo__head {
  background: var(--mc-verde-notte); color: var(--mc-bianco-caldo);
  padding: calc(var(--mc-header-h) + var(--mc-sp-7)) var(--mc-gutter) var(--mc-sp-7);
}
.mc-articolo__head-inner { max-width: var(--mc-w-read); margin-inline: auto; }
.mc-articolo__head .mc-t1 { color: var(--mc-bianco-caldo); margin-block: var(--mc-sp-4); }
.mc-articolo__autore { display: flex; align-items: center; gap: var(--mc-sp-3); font-size: var(--mc-fs-small); color: var(--mc-bianco-72); }

.mc-articolo__cover { max-width: var(--mc-w-wide); margin: 0 auto; }
.mc-articolo__cover figcaption { max-width: var(--mc-w-read); margin: var(--mc-sp-3) auto 0; font-size: .8125rem; color: var(--mc-notte-72); }

/* Corpo leggibile 760–850 px */
.mc-prose {
  max-width: var(--mc-w-read);
  margin-inline: auto;
  font-size: 1.0625rem;
  line-height: 1.68;
}
.mc-prose > * + * { margin-top: 1.4em; }
.mc-prose h2 {
  font-family: var(--mc-font-titolo); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: .95; letter-spacing: var(--mc-ls-titolo);
  margin-top: 2em;
}
.mc-prose h3 {
  font-family: var(--mc-font-titolo); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1; letter-spacing: var(--mc-ls-titolo);
  margin-top: 1.8em;
}
.mc-prose ul, .mc-prose ol { padding-left: 1.3em; }
.mc-prose li + li { margin-top: .5em; }
.mc-prose blockquote {
  border-left: 4px solid var(--mc-lime);
  padding-left: var(--mc-sp-5);
  font-family: var(--mc-font-titolo); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.05; letter-spacing: .01em;
}
.mc-prose img, .mc-prose figure { max-width: 100%; }
.mc-prose figure { margin-block: 2em; }
.mc-prose figcaption { font-size: .8125rem; color: var(--mc-notte-72); margin-top: var(--mc-sp-3); }

/* Condivisione social */
.mc-share { display: flex; align-items: center; gap: var(--mc-sp-3); flex-wrap: wrap; max-width: var(--mc-w-read); margin: var(--mc-sp-7) auto 0; padding-top: var(--mc-sp-5); border-top: var(--mc-bordo-chiaro); }
.mc-share a {
  width: 44px; height: 44px; display: grid; place-items: center;
  box-shadow: inset 0 0 0 2px var(--mc-notte-12); color: var(--mc-verde-notte); text-decoration: none;
  transition: background-color var(--mc-dur) var(--mc-ease), color var(--mc-dur) var(--mc-ease);
}
.mc-share a:hover { background: var(--mc-lime); box-shadow: none; }

/* Precedente / successiva */
.mc-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--mc-notte-12); margin-top: var(--mc-sp-8); }
.mc-prevnext a { background: var(--mc-avorio); padding: var(--mc-sp-6); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: var(--mc-sp-3); }
.mc-prevnext a:last-child { text-align: right; align-items: flex-end; }
.mc-prevnext a:hover { background: var(--mc-lime); }

/* Allegati scaricabili dentro l'articolo → usa .mc-doc (§20) */


/* ==========================================================================
   19. ARCHIVI, RICERCA, PAGINAZIONE
   ========================================================================== */

.mc-archivio__head {
  background: var(--mc-verde-notte); color: var(--mc-bianco-caldo);
  padding: calc(var(--mc-header-h) + var(--mc-sp-6)) var(--mc-gutter) var(--mc-sp-7);
}
.mc-archivio__head-inner { max-width: var(--mc-w-max); margin-inline: auto; }
.mc-archivio__head .mc-t1 { color: var(--mc-bianco-caldo); margin-bottom: var(--mc-sp-4); }
.mc-archivio__descrizione { color: var(--mc-bianco-72); max-width: 62ch; }

/* Campo di ricerca */
.mc-search { display: flex; gap: 0; max-width: 560px; }
.mc-search input[type="search"], .mc-search input[type="text"] {
  flex: 1; min-width: 0;
  font-family: var(--mc-font-testo); font-size: 1rem;
  padding: .95em 1em;
  background: transparent; color: inherit;
  border: 2px solid var(--mc-bianco-16); border-right: 0; border-radius: 0;
}
.mc-search input::placeholder { color: var(--mc-bianco-72); }
.mc-search input:focus { outline: none; border-color: var(--mc-lime); }
.mc-search button { border: 0; }
.mc-sezione--avorio .mc-search input { border-color: var(--mc-notte-12); }

/* Paginazione */
.mc-paginazione { display: flex; flex-wrap: wrap; gap: var(--mc-sp-2); justify-content: center; margin-top: var(--mc-sp-8); }
.mc-paginazione a, .mc-paginazione span,
.elementor-pagination .page-numbers {
  min-width: 48px; height: 48px;
  display: inline-grid; place-items: center;
  font-family: var(--mc-font-titolo); font-weight: 800; font-size: 1rem;
  text-decoration: none; color: var(--mc-verde-notte);
  box-shadow: inset 0 0 0 2px var(--mc-notte-12);
  border-radius: 0 !important;
  transition: background-color var(--mc-dur) var(--mc-ease), color var(--mc-dur) var(--mc-ease);
}
.mc-paginazione .current,
.elementor-pagination .page-numbers.current { background: var(--mc-lime); box-shadow: none; }
.mc-paginazione a:hover { background: var(--mc-verde-notte); color: var(--mc-lime); box-shadow: none; }

/* Breadcrumb */
.mc-breadcrumb { font-size: .8125rem; color: var(--mc-bianco-72); display: flex; flex-wrap: wrap; gap: .5em; margin-bottom: var(--mc-sp-4); }
.mc-breadcrumb a { color: inherit; text-decoration: none; }
.mc-breadcrumb a:hover { color: var(--mc-lime); text-decoration: underline; }
.mc-breadcrumb > * + *::before { content: "/"; margin-right: .5em; opacity: .6; }


/* ==========================================================================
   20. ORGANIGRAMMA, DOCUMENTI, ACCREDITI
   ========================================================================== */

/* Righe organigramma — niente elenco testuale piatto */
.mc-organigramma__area { margin-bottom: var(--mc-sp-7); }
.mc-persone { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--mc-notte-12); }
.mc-persona {
  background: var(--mc-bianco-caldo);
  padding: var(--mc-sp-5);
  display: flex; flex-direction: column; gap: var(--mc-sp-2);
}
.mc-persona__ruolo {
  font-family: var(--mc-font-titolo); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--mc-ls-eyebrow); font-size: var(--mc-fs-eyebrow);
  color: var(--mc-verde-istituzionale);
}
.mc-persona__nome {
  font-family: var(--mc-font-titolo); font-weight: 900; text-transform: uppercase;
  font-size: 1.375rem; line-height: 1; letter-spacing: .01em;
}
.mc-persona__area { font-size: .8125rem; color: var(--mc-notte-72); }
.mc-sezione--notte .mc-persone { background: var(--mc-bianco-16); }
.mc-sezione--notte .mc-persona { background: var(--mc-verde-notte); }

/* Card documento PDF */
.mc-doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--mc-sp-4); }
.mc-doc {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--mc-sp-4);
  background: var(--mc-avorio);
  padding: var(--mc-sp-5);
  border-left: 4px solid var(--mc-verde-istituzionale);
  text-decoration: none; color: inherit;
  transition: background-color var(--mc-dur) var(--mc-ease), border-color var(--mc-dur) var(--mc-ease);
}
.mc-doc:hover { background: var(--mc-lime); border-left-color: var(--mc-verde-notte); }
.mc-doc__tipo {
  font-family: var(--mc-font-titolo); font-weight: 900; font-size: .875rem;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--mc-verde-notte); color: var(--mc-lime);
  padding: .5em .6em .4em;
}
.mc-doc__titolo { font-family: var(--mc-font-titolo); font-weight: 800; text-transform: uppercase; font-size: 1.125rem; line-height: 1.05; letter-spacing: .01em; }
.mc-doc__peso { font-size: .8125rem; color: var(--mc-notte-72); }
.mc-doc__scarica {
  font-family: var(--mc-font-titolo); font-weight: 800; text-transform: uppercase;
  letter-spacing: var(--mc-ls-btn); font-size: .875rem; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .5em;
}
.mc-doc__scarica::after { content: "\2193"; }

/* Sezioni numerate (regolamenti, accrediti) */
.mc-numerata { counter-reset: mc-passo; max-width: var(--mc-w-read); }
.mc-numerata__voce { counter-increment: mc-passo; display: grid; grid-template-columns: auto 1fr; gap: var(--mc-sp-5); padding-block: var(--mc-sp-5); border-bottom: var(--mc-bordo-chiaro); }
.mc-numerata__voce::before {
  content: counter(mc-passo, decimal-leading-zero);
  font-family: var(--mc-font-titolo); font-weight: 900; font-size: 2rem; line-height: .9;
  color: var(--mc-lime); -webkit-text-stroke: 1px var(--mc-verde-notte);
}


/* ==========================================================================
   21. CONTATTI E FORM ELEMENTOR PRO
   ========================================================================== */

.mc-contatti-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--mc-notte-12); margin-bottom: var(--mc-sp-8); }
.mc-contatto { background: var(--mc-bianco-caldo); padding: var(--mc-sp-6); display: flex; flex-direction: column; gap: var(--mc-sp-3); }
.mc-contatto a { color: var(--mc-verde-istituzionale); text-decoration: none; font-weight: 500; word-break: break-word; }
.mc-contatto a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* Form */
.mc-form .elementor-field-group > label,
.mc-form label {
  font-family: var(--mc-font-titolo); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--mc-ls-eyebrow); font-size: var(--mc-fs-eyebrow);
  color: var(--mc-verde-notte); margin-bottom: var(--mc-sp-2);
  display: block;
}
.mc-form input[type="text"],
.mc-form input[type="email"],
.mc-form input[type="tel"],
.mc-form select,
.mc-form textarea,
.mc-form .elementor-field-textual {
  font-family: var(--mc-font-testo); font-size: 1rem; line-height: 1.5;
  padding: .9em 1em;
  background: var(--mc-bianco-caldo);
  color: var(--mc-verde-notte);
  border: 2px solid var(--mc-notte-12);
  border-radius: 0 !important;
  width: 100%;
  transition: border-color var(--mc-dur) var(--mc-ease);
}
.mc-form .elementor-field-textual:focus,
.mc-form input:focus, .mc-form select:focus, .mc-form textarea:focus {
  border-color: var(--mc-verde-istituzionale);
  outline: 3px solid var(--mc-lime);
  outline-offset: 1px;
}
.mc-form .elementor-field-type-acceptance label,
.mc-form .mc-privacy { font-family: var(--mc-font-testo); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: .875rem; line-height: 1.6; color: var(--mc-notte-72); }
.mc-form .elementor-message-danger { color: #7A1600; font-weight: 600; }
.mc-form .elementor-message-success { color: var(--mc-verde-profondo); font-weight: 600; }


/* ==========================================================================
   22. PAGINA 404
   ========================================================================== */

.mc-404 {
  min-height: 70vh;
  background: var(--mc-verde-notte); color: var(--mc-bianco-caldo);
  display: grid; align-content: center;
  padding: var(--mc-sezione-y) var(--mc-gutter);
  position: relative; overflow: hidden;
}
.mc-404__numero {
  font-family: var(--mc-font-titolo); font-weight: 900;
  font-size: clamp(6rem, 26vw, 20rem); line-height: .78; letter-spacing: .01em;
  color: transparent; -webkit-text-stroke: 3px var(--mc-lime);
  margin-bottom: var(--mc-sp-5);
}
.mc-404__inner { max-width: var(--mc-w-max); margin-inline: auto; width: 100%; }
.mc-404 .mc-search { margin-top: var(--mc-sp-6); }


/* ==========================================================================
   23. UTILITY
   ========================================================================== */

.mc-su-scuro { color: var(--mc-bianco-caldo); }
.mc-su-chiaro { color: var(--mc-verde-notte); }
.mc-bg-notte    { background: var(--mc-verde-notte); }
.mc-bg-verde    { background: var(--mc-verde-istituzionale); }
.mc-bg-profondo { background: var(--mc-verde-profondo); }
.mc-bg-lime     { background: var(--mc-lime); color: var(--mc-verde-notte); }
.mc-bg-avorio   { background: var(--mc-avorio); }
.mc-bg-bianco   { background: var(--mc-bianco-caldo); }

.mc-mt-0 { margin-top: 0 !important; }
.mc-mb-0 { margin-bottom: 0 !important; }
.mc-mb-4 { margin-bottom: var(--mc-sp-4) !important; }
.mc-mb-6 { margin-bottom: var(--mc-sp-6) !important; }
.mc-mb-8 { margin-bottom: var(--mc-sp-8) !important; }

.mc-full { width: 100%; }

/* Anti-overflow: nessun figlio di griglia può forzare la larghezza del layout.
   Senza questo, su mobile match center, card documento e footer sfondano di
   qualche pixel e comparire la barra di scorrimento orizzontale. */
.mc-sezione__inner,
.mc-grid > *, .mc-news-grid > *, .mc-rosa-grid > *,
.mc-match, .mc-match > *, .mc-match__squadre > *,
.mc-doc > *, .mc-video-layout > *, .mc-video--riga > *,
.mc-hero__inner > *, .mc-footer__top > *,
.mc-persone > *, .mc-dati > *, .mc-contatti-grid > *,
.mc-sponsor-grid > *, .mc-social-grid > *,
.mc-ultimora__lista, .mc-biglietteria > * { min-width: 0; }

.mc-doc__titolo, .mc-persona__nome, .mc-giocatore__cognome,
.mc-card__corpo .mc-t4 { overflow-wrap: anywhere; }
.mc-sponsor img, .mc-match__squadra img { max-width: 100%; }
.mc-sticky-top { position: sticky; top: calc(var(--mc-header-h) + var(--mc-sp-4)); }
.mc-nowrap { white-space: nowrap; }

/* solo per screen reader */
.mc-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* skip link */
.mc-skip {
  position: absolute; left: var(--mc-sp-4); top: -100px; z-index: 10000;
  background: var(--mc-lime); color: var(--mc-verde-notte);
  padding: .8em 1.2em; font-family: var(--mc-font-titolo); font-weight: 800; text-transform: uppercase;
  transition: top var(--mc-dur) var(--mc-ease);
}
.mc-skip:focus { top: var(--mc-sp-4); }


/* ==========================================================================
   24. RESPONSIVE
   Breakpoint allineati a Elementor: 1366 / 1024 / 880 / 767
   ========================================================================== */

@media (max-width: 1366px) {
  .mc-sponsor-grid--partner  { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .mc-megamenu__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  /* il menu si stringe prima di andare a capo */
  .mc-nav a, .mc-nav .elementor-item { font-size: .9375rem; padding: .6em .45em; }
  .mc-nav a::after, .mc-nav .elementor-item::after { left: .45em; right: .45em; }
}

/* --- Tablet ------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --mc-header-h: 76px; }

  .mc-grid--3, .mc-grid--4,
  .mc-rosa-grid,
  .mc-social-grid,
  .mc-persone,
  .mc-contatti-grid,
  .mc-dati { grid-template-columns: repeat(2, minmax(0,1fr)); }

  .mc-news-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mc-news-grid > .mc-card--principale { grid-column: span 2; grid-row: auto; }

  .mc-hero__inner,
  .mc-video-layout,
  .mc-grid--60-40, .mc-grid--40-60, .mc-grid--70-30 { grid-template-columns: 1fr; }
  .mc-hero__side { grid-auto-flow: column; grid-auto-columns: 1fr; grid-auto-rows: auto; }
  .mc-grid--sfalsata > *:nth-child(even) { transform: none; }

  .mc-sponsor-grid--supplier,
  .mc-sponsor-grid--partner { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .mc-sponsor-grid--main { grid-template-columns: repeat(2, minmax(0,1fr)); }

  .mc-doc-grid { grid-template-columns: 1fr; }
  .mc-footer__top { grid-template-columns: repeat(3, 1fr); }
  .mc-footer__logo { grid-column: 1 / -1; }
}

/* --- Passaggio al menu mobile ------------------------------------------
   Avviene a 1200 px, non a 1024: con dieci voci di primo livello il menu
   orizzontale inizia ad accavallarsi sulla CTA ben prima del tablet.
   Se accorci le voci puoi abbassare questa soglia.                      */
@media (max-width: 1200px) {
  .mc-nav { display: none; }
  .mc-hamburger { display: inline-flex; }
}

/* --- Mobile ------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --mc-gutter: 22px;             /* margini laterali 20–24 px */
    --mc-header-h: 68px;
    /* titoli 48–76 px, interlinea minima 0.90, letter-spacing 0 */
    --mc-fs-t1: clamp(3rem, 13vw, 4.75rem);
    --mc-fs-t2: clamp(2.5rem, 10vw, 3.5rem);
    --mc-fs-t3: clamp(1.75rem, 7vw, 2.25rem);
    --mc-fs-t4: 1.375rem;
    --mc-ls-titolo: 0;
    --mc-lh-titolo: .92;
    --mc-lh-titolo-compatto: .90;
  }

  .mc-t1, .mc-t2, .mc-t3 { line-height: .92; letter-spacing: 0; }
  .mc-t1.mc-t--lungo { font-size: clamp(2.5rem, 10vw, 3.5rem); }

  /* una sola colonna ovunque */
  .mc-grid--2, .mc-grid--3, .mc-grid--4,
  .mc-news-grid, .mc-rosa-grid, .mc-video-layout,
  .mc-persone, .mc-contatti-grid, .mc-prevnext,
  .mc-doc-grid, .mc-biglietteria { grid-template-columns: 1fr; }

  .mc-news-grid > .mc-card--principale { grid-column: auto; }

  .mc-hero { padding-top: calc(var(--mc-header-h) + var(--mc-sp-5)); }
  .mc-hero__main { min-height: 78vw; }
  .mc-hero__side { grid-auto-flow: row; }
  .mc-hero__testo { max-width: none; padding: var(--mc-sp-5); }

  /* match center semplificato */
  .mc-match { grid-template-columns: 1fr; }
  .mc-match__squadre { grid-template-columns: 1fr auto 1fr; gap: var(--mc-sp-3); }
  .mc-match__squadra img { width: 44px; }
  .mc-match__risultato { font-size: 2.75rem; }
  .mc-match__azioni .mc-btn { width: 100%; justify-content: space-between; }

  /* card impilate: immagine sopra o sotto il testo */
  .mc-card { gap: 0; }
  .mc-card--immagine-sotto { flex-direction: column-reverse; }
  .mc-video--riga { grid-template-columns: 96px 1fr; }

  /* header compatto: la ricerca si sposta dentro il menu, la CTA si stringe */
  .mc-header__inner { gap: var(--mc-sp-3); }
  .mc-header__azioni { gap: var(--mc-sp-2); }
  .mc-header .mc-cerca-btn { display: none; }
  .mc-header .mc-btn--biglietti { padding: .8em .85em .7em; font-size: .8125rem; }
  .mc-header .mc-btn--biglietti::after { content: none; }

  /* pulsanti principali a tutta larghezza, e mai più larghi dello schermo */
  .mc-btn { max-width: 100%; flex-wrap: wrap; }
  .mc-btn--grande { font-size: 1rem; padding: 1.05em 1.25em .95em; }
  .mc-btn--primario-mobile,
  .mc-sezione .mc-btn--full,
  .mc-biglietteria .mc-btn { width: 100%; justify-content: space-between; }

  /* sponsor su due colonne */
  .mc-sponsor-grid--main,
  .mc-sponsor-grid--top,
  .mc-sponsor-grid--supplier,
  .mc-sponsor-grid--partner { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mc-sponsor-grid--main .mc-sponsor { min-height: 140px; padding: var(--mc-sp-5); }

  .mc-social-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mc-dati { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mc-footer__top { grid-template-columns: 1fr; }
  .mc-prevnext a:last-child { text-align: left; align-items: flex-start; }
  .mc-sezione__head { align-items: flex-start; }
  .mc-ultimora__label { padding: .9em 1em; }
  .mc-ultimora { flex-direction: column; align-items: stretch; }
}


/* ==========================================================================
   25. ACCESSIBILITÀ, MOVIMENTO, STAMPA
   ========================================================================== */

/* Focus sempre visibile e ad alto contrasto */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--mc-lime);
  outline-offset: 3px;
}
.mc-sezione--avorio :focus-visible,
.mc-sezione--bianca :focus-visible,
.mc-bg-lime :focus-visible {
  outline-color: var(--mc-verde-notte);
}

/* Aree cliccabili mai sotto i 44 px */
.mc-nav a, .mc-footer__colonna a, .mc-menu-mobile a, .mc-btn, .mc-link { min-height: 44px; }

/* Rispetta "riduci movimento" */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .mc-ultimora__track { animation: none; transform: none; }
  .mc-card:hover .mc-media img,
  .mc-giocatore:hover img,
  .mc-social:hover img { transform: none; }
}

/* Nessun video in autoplay con audio: promemoria in editor */
video[autoplay]:not([muted]) { outline: 4px dashed #C00; }

@media print {
  .mc-header, .mc-menu-mobile, .mc-ultimora, .mc-top, .mc-share, .mc-footer__top { display: none !important; }
  body { background: #fff; color: #000; }
  .mc-prose { max-width: none; }
}