/*
 * Design system Visit Nizza Monferrato — token e componenti riutilizzabili.
 * Fonte: wireframe alta fedeltà (Claude Design, progetto "Visit Nizza Monferrato").
 * Caricare in Elementor come CSS globale (Personalizza > CSS aggiuntivo del kit,
 * o enqueue da functions.php) — vedi hello-elementor-child-mnf/functions.php.
 *
 * Palette motivata (non i default crema+terracotta né nero+acido): fondo
 * grigio-marna freddo (terre bianche), Barbera solo come inchiostro su numerali
 * e link (2% della superficie, mai campitura piena), Ottone riservato allo sponsor
 * e a nessun altro contesto — è l'unico indizio di colore che il lettore impara.
 */

:root {
  /* Colore */
  --mnf-marna: #E9EAE5;      /* fondo di tutto il sito */
  --mnf-carta: #F4F4F0;      /* superficie blocchi dati, card sponsor */
  --mnf-inchiostro: #23282C; /* testo, filetti, header, blocchi scuri */
  --mnf-barbera: #6B2130;    /* numerali classifica, link — mai blocco pieno */
  --mnf-verderame: #7E8F6B;  /* occhielli, tassonomie attive */
  --mnf-ottone: #C08A2E;     /* riservato allo sponsor */

  --mnf-bordo: #C6C8C0;
  --mnf-testo-secondario: #4A535C;
  --mnf-testo-muto: #5C6570;
  --mnf-sponsor-testo: #8A6420;

  /* Su fondo inchiostro (blocchi scuri: denominazione, UNESCO, date evento) */
  --mnf-chiaro: #E9EAE5;
  --mnf-chiaro-secondario: #C6C8C0;
  --mnf-chiaro-muto: #8C97A0;
  --mnf-inchiostro-bordo: #4A535C;
  --mnf-inchiostro-placeholder-a: #3A4046;
  --mnf-inchiostro-placeholder-b: #31373C;

  --mnf-placeholder-a: #DCDED6;
  --mnf-placeholder-b: #D3D6CD;

  /* Tipografia — tre registri, mai un quarto */
  --mnf-font-display: 'Archivo Narrow', sans-serif; /* H1–H3, numerali, occhielli card */
  --mnf-font-corpo: 'Source Serif 4', serif;         /* paragrafi, estratti, citazioni magazine */
  --mnf-font-ui: 'Archivo', sans-serif;               /* nav, body base */
  --mnf-font-dati: 'IBM Plex Mono', monospace;        /* riga di campo, meta, bottoni, occhielli uppercase */

  /* Griglia */
  --mnf-container-max: 1280px;
  --mnf-gutter: 24px;

  /* Spaziatura */
  --mnf-space-xs: 6px;
  --mnf-space-sm: 12px;
  --mnf-space-md: 24px;
  --mnf-space-lg: 44px;
  --mnf-space-xl: 72px;
}

/* ==========================================================================
   Fondamenta
   ========================================================================== */

body {
  background: var(--mnf-marna);
  color: var(--mnf-inchiostro);
  font-family: var(--mnf-font-ui);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mnf-barbera); text-decoration: none; }
a:hover { color: var(--mnf-inchiostro); text-decoration: underline; text-underline-offset: 3px; }

.mnf-container {
  max-width: var(--mnf-container-max);
  margin-inline: auto;
  padding-inline: 28px;
  box-sizing: border-box;
}

/*
 * Default per gli heading/testo nativi Elementor (.elementor-heading-title,
 * .elementor-widget-text-editor). Senza questo, ogni widget eredita i Global
 * Color/Font del Kit Elementor (Roboto + blu accento di default) invece della
 * tipografia del design system — il Kit va comunque allineato da Impostazioni
 * sito per editor/anteprima coerenti, ma questo garantisce il risultato
 * corretto anche prima di quel passaggio manuale.
 */
/*
 * !important giustificato: Elementor genera CSS per-widget con specificità
 * dedicata (.elementor-{post} .elementor-element.elementor-{id} ...) caricato
 * dopo questo file — senza forzare qui, ogni heading/paragrafo torna al
 * Global Color/Font del Kit (blu/Roboto di default) invece del design system.
 * Il fix corretto in editor resta comunque allineare i Global Color/Font del
 * Kit (vedi hello-elementor-child-mnf/readme.md): questo è il paracadute che
 * garantisce il risultato giusto anche prima di quel passaggio manuale.
 */
h1, h2, h3,
.elementor-heading-title {
  font-family: var(--mnf-font-display) !important;
  color: var(--mnf-inchiostro) !important;
  font-weight: 600 !important;
}

h4, h5, h6 {
  font-family: var(--mnf-font-ui) !important;
  color: var(--mnf-inchiostro) !important;
}

p, .elementor-widget-text-editor {
  font-family: var(--mnf-font-corpo) !important;
  color: var(--mnf-testo-secondario) !important;
}

.mnf-blocco-scuro h1, .mnf-blocco-scuro h2, .mnf-blocco-scuro h3,
.mnf-blocco-scuro .elementor-heading-title {
  color: var(--mnf-chiaro) !important;
}

/* Placeholder immagine (segnaposto in fase di sviluppo, non in produzione) */
.mnf-placeholder {
  background: repeating-linear-gradient(135deg, var(--mnf-placeholder-a) 0 7px, var(--mnf-placeholder-b) 7px 14px);
}
.mnf-placeholder--scuro {
  background: repeating-linear-gradient(135deg, var(--mnf-inchiostro-placeholder-a) 0 7px, var(--mnf-inchiostro-placeholder-b) 7px 14px);
}

/* ==========================================================================
   Elemento signature: la riga di campo
   Fascia di 2–4 dati monospaziati, filettata sopra/sotto. Sostituisce la
   didascalia decorativa: "questo è un territorio che lavora".
   ========================================================================== */

.mnf-riga-campo {
  display: flex;
  border-top: 1px solid var(--mnf-inchiostro);
  border-bottom: 1px solid var(--mnf-inchiostro);
}
.mnf-riga-campo--chiara { border-color: var(--mnf-bordo); }
.mnf-riga-campo--scura {
  border-top-color: var(--mnf-inchiostro-bordo);
  border-bottom-color: var(--mnf-inchiostro-bordo);
}

.mnf-riga-campo__cella {
  flex: 1;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mnf-riga-campo__cella:not(:last-child) {
  border-right: 1px solid var(--mnf-bordo);
  padding-right: 12px;
}
.mnf-riga-campo__cella:not(:first-child) { padding-left: 12px; }
.mnf-riga-campo--scura .mnf-riga-campo__cella:not(:last-child) {
  border-right-color: var(--mnf-inchiostro-bordo);
}

.mnf-riga-campo__etichetta {
  font: 400 9.5px/1 var(--mnf-font-dati);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mnf-testo-muto);
}
.mnf-riga-campo--scura .mnf-riga-campo__etichetta { color: var(--mnf-chiaro-muto); }

.mnf-riga-campo__valore {
  font: 500 12px/1 var(--mnf-font-dati);
  color: var(--mnf-inchiostro);
}
.mnf-riga-campo--scura .mnf-riga-campo__valore { color: var(--mnf-chiaro); }

/* ==========================================================================
   Bottoni, link, chip
   ========================================================================== */

.mnf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* target tocco mobile */
  padding: 13px 20px;
  font: 500 12px/1 var(--mnf-font-dati);
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
}
.mnf-btn--primario { background: var(--mnf-inchiostro); color: var(--mnf-chiaro); }
.mnf-btn--primario:hover { background: var(--mnf-barbera); color: var(--mnf-carta); text-decoration: none; }
.mnf-btn--secondario { border-color: var(--mnf-inchiostro); color: var(--mnf-inchiostro); background: transparent; }
.mnf-btn--secondario:hover { background: var(--mnf-carta); text-decoration: none; }
.mnf-btn--disabilitato { border-color: var(--mnf-bordo); color: var(--mnf-chiaro-muto); background: transparent; cursor: not-allowed; }

.mnf-link-testuale {
  font: 500 12px/1 var(--mnf-font-dati);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mnf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--mnf-bordo);
  color: var(--mnf-testo-secondario);
  font: 500 10.5px/1 var(--mnf-font-dati);
  letter-spacing: .1em;
  text-transform: uppercase;
  background: transparent;
}
.mnf-chip--attivo {
  background: var(--mnf-verderame);
  border-color: var(--mnf-verderame);
  color: var(--mnf-carta);
}

/* ==========================================================================
   Badge classifica — mai adesivo/nastro: rettangolo filettato, anno esplicito
   ========================================================================== */

.mnf-badge-classifica {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--mnf-inchiostro);
  width: fit-content;
}
.mnf-badge-classifica__posizione {
  padding: 6px 9px;
  border-right: 1px solid var(--mnf-inchiostro);
  font: 600 15px/1 var(--mnf-font-display);
  color: var(--mnf-barbera);
  display: flex;
  align-items: center;
}
.mnf-badge-classifica__testo {
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: 500 10.5px/1.3 var(--mnf-font-dati);
}

/* Variante estesa (pagina scheda, non card) */
.mnf-badge-classifica--esteso {
  border: 1px solid var(--mnf-inchiostro);
  background: var(--mnf-marna);
}
.mnf-badge-classifica--esteso .mnf-badge-classifica__posizione {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
}
.mnf-badge-classifica--esteso .mnf-badge-classifica__posizione-numero {
  font: 600 40px/.95 var(--mnf-font-display);
  color: var(--mnf-barbera);
}
.mnf-badge-classifica--esteso .mnf-badge-classifica__testo {
  padding: 14px 16px;
  gap: 5px;
  justify-content: center;
}
.mnf-badge-classifica--esteso .mnf-badge-classifica__titolo {
  font: 600 17px/1.15 var(--mnf-font-display);
  color: var(--mnf-inchiostro);
}
.mnf-badge-classifica--esteso .mnf-badge-classifica__link {
  font: 500 10.5px/1 var(--mnf-font-dati);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ==========================================================================
   Etichetta sponsor — unico contesto in cui compare l'ottone
   ========================================================================== */

.mnf-etichetta-sponsor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 10px/1 var(--mnf-font-dati);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mnf-sponsor-testo);
}
.mnf-etichetta-sponsor::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--mnf-ottone);
  flex: none;
}

.mnf-etichetta-partnership {
  background: var(--mnf-marna);
  border-top: 3px solid var(--mnf-ottone);
  padding: 10px 12px;
  font: 500 10px/1 var(--mnf-font-dati);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mnf-sponsor-testo);
}

.mnf-slot-partner {
  border: 1px dashed var(--mnf-ottone);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mnf-slot-partner__etichetta {
  font: 500 10px/1 var(--mnf-font-dati);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mnf-sponsor-testo);
}

/* Banner in-grid sponsor: cella 4+8 come una card, filetto ottone */
.mnf-banner-sponsor {
  background: var(--mnf-carta);
  border-top: 3px solid var(--mnf-ottone);
  display: grid;
  grid-template-columns: 4fr 8fr;
}
.mnf-banner-sponsor__intestazione {
  padding: 22px 24px;
  border-right: 1px solid var(--mnf-bordo);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mnf-banner-sponsor__corpo {
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ==========================================================================
   Sistema di card — 5 tipi, mai un sesto
   ========================================================================== */

/* 01 · Tessera 600×600 — comuni, blocchi territorio */
.mnf-card-tessera {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mnf-card-tessera__immagine { aspect-ratio: 1 / 1; min-width: 0; }
.mnf-card-tessera__occhiello {
  font: 500 10.5px/1 var(--mnf-font-dati);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mnf-verderame);
}
.mnf-card-tessera__titolo {
  font: 600 24px/1.08 var(--mnf-font-display);
  min-height: 2.16em; /* garantisce 2 righe in IT lungo / EN corto */
}

/* 02 · Scheda 600×360 — card di default di tutti gli archivi operatore */
.mnf-card-scheda {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mnf-card-scheda__immagine { aspect-ratio: 600 / 360; min-width: 0; }
.mnf-card-scheda__occhiello {
  font: 500 10.5px/1 var(--mnf-font-dati);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mnf-verderame);
}
.mnf-card-scheda__titolo {
  font: 600 22px/1.1 var(--mnf-font-display);
  min-height: 2.2em;
}
.mnf-card-scheda__estratto {
  font: 400 14px/1.5 var(--mnf-font-corpo);
  color: var(--mnf-testo-secondario);
}

/* 02b · Variante sponsorizzata: stessa griglia, cambia solo la superficie */
.mnf-card-scheda--sponsor {
  background: var(--mnf-carta);
  padding: 14px;
  box-shadow: inset 0 -3px 0 var(--mnf-ottone);
}

/* 03 · Riga — thumb 160×104, classifiche/tappe/correlati */
.mnf-card-riga {
  display: grid;
  grid-template-columns: 56px 160px 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-bottom: 1px solid var(--mnf-bordo);
}
.mnf-card-riga:last-child { border-bottom: none; }
.mnf-card-riga__posizione {
  font: 600 44px/.85 var(--mnf-font-display);
  color: var(--mnf-barbera);
  letter-spacing: -.03em;
}
.mnf-card-riga__thumb { aspect-ratio: 160 / 104; min-width: 0; }
.mnf-card-riga__corpo { display: flex; flex-direction: column; gap: 5px; }
.mnf-card-riga__titolo { font: 600 18px/1.12 var(--mnf-font-display); }
.mnf-card-riga__motivazione { font: 400 13px/1.45 var(--mnf-font-corpo); color: var(--mnf-testo-secondario); }
.mnf-card-riga__meta {
  font: 500 10.5px/1 var(--mnf-font-dati);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mnf-testo-muto);
}

/* 04 · Data 600×360 — eventi: il blocco data resta leggibile senza immagine */
.mnf-card-data { display: flex; flex-direction: column; gap: 12px; }
.mnf-card-data__riga { display: flex; align-items: stretch; }
.mnf-card-data__blocco {
  flex: none;
  width: 96px;
  background: var(--mnf-inchiostro);
  color: var(--mnf-chiaro);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 150px;
}
.mnf-card-data__mese {
  font: 500 10px/1 var(--mnf-font-dati);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mnf-ottone);
}
.mnf-card-data__giorno { font: 600 40px/.9 var(--mnf-font-display); }
.mnf-card-data__fine { font: 500 10px/1 var(--mnf-font-dati); letter-spacing: .1em; text-transform: uppercase; }
.mnf-card-data__immagine { flex: 1; min-height: 150px; }
.mnf-card-data__occhiello {
  font: 500 10.5px/1 var(--mnf-font-dati);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mnf-verderame);
}
.mnf-card-data__titolo { font: 600 22px/1.1 var(--mnf-font-display); min-height: 2.2em; }

/* 05 · Lettura 600×360 — magazine, unico posto con serif corsivo nei titoli */
.mnf-card-lettura { display: flex; flex-direction: column; gap: 12px; }
.mnf-card-lettura__immagine { aspect-ratio: 600 / 360; min-width: 0; }
.mnf-card-lettura__rubrica {
  font: 500 10.5px/1 var(--mnf-font-dati);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mnf-verderame);
}
.mnf-card-lettura__titolo {
  font: 400 22px/1.25 var(--mnf-font-corpo);
  font-style: italic;
  min-height: 2.5em;
}
.mnf-card-lettura__firma {
  font: 500 10.5px/1 var(--mnf-font-dati);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mnf-testo-muto);
}

/* ==========================================================================
   Blocco scuro (denominazione, UNESCO, callout)
   ========================================================================== */

.mnf-blocco-scuro {
  background: var(--mnf-inchiostro);
  color: var(--mnf-chiaro);
  padding: 40px 28px;
}
.mnf-blocco-scuro .mnf-eyebrow { color: var(--mnf-ottone); }
.mnf-blocco-scuro p { color: var(--mnf-chiaro-secondario); }

.mnf-eyebrow {
  font: 500 11px/1 var(--mnf-font-dati);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mnf-verderame);
}

/* ==========================================================================
   Responsive — 1024 / 768 / 480, come da vincolo tecnico del brief
   ========================================================================== */

@media (max-width: 1024px) {
  .mnf-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .mnf-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .mnf-split-7-5, .mnf-split-8-4, .mnf-split-6-6 { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  .mnf-grid-3, .mnf-grid-4 { grid-template-columns: 1fr !important; }
  .mnf-card-riga { grid-template-columns: 40px 96px 1fr; gap: 12px; }
}

@media (max-width: 480px) {
  .mnf-card-data__blocco { width: 76px; }
  .mnf-badge-classifica--esteso .mnf-badge-classifica__posizione-numero { font-size: 32px; }
}