/* ── La mappa Europa-Asia ──────────────────────────────────────────────────

   1. LA MEZZALUNA. Dei quattro tracciati del percorso, .route-silk era
   l'unico senza una regola: valevano quindi i valori predefiniti dell'SVG,
   cioè riempimento nero e nessun tratto. Una curva nata per essere una linea
   veniva riempita, e il browser chiudeva l'arco sulla sua corda colorando
   tutto quello che c'era in mezzo — il 54% dell'area della mappa.

   Su schermo grande non si vedeva: nero su una mappa quasi nera. Su telefono
   la mappa è ritagliata su una zona più chiara, e la mezzaluna saltava fuori.

   «fill:none» e basta: il percorso resta disegnato dagli altri tre tracciati,
   esattamente com'è sempre apparso su schermo grande.
   ═══════════════════════════════════════════════════════════════════════════ */
.route-silk{fill:none;}

/* 2. L'INQUADRATURA. Il riquadro era verticale (0,61:1) mentre la mappa è
   orizzontale (1,94:1), e con «preserveAspectRatio: slice» si riempie il
   riquadro tagliando i lati: si vedeva il 32% della larghezza della mappa,
   e il corridoio ne occupa il 74%. Non ci poteva stare a nessun
   ingrandimento — infatti l'ingrandimento peggiorava le cose.

   Rendendo il riquadro orizzontale il corridoio entra. L'altezza esce da un
   conto: larghezza ÷ 1,6 ≈ mostra l'82% della mappa, cioè il corridoio con un
   po' di respiro ai lati. */
@media(max-width:760px){
  .meridian-map-wrap,
  .meridian-map-wrap.realistic-map{height:215px!important;min-height:215px!important;}
  .meridian-map-svg{transform:none!important;}

  /* 3. I TRE PULSANTI. Erano larghi 305px l'uno su uno schermo da 375: due
     restavano fuori, e la striscia scorreva di 540px senza che si capisse che
     fosse scorrevole — sembrava tagliata per errore. Sopra un riquadro alto
     215 coprivano un terzo della mappa.

     Ora ci stanno tutti e tre in fila. Sparisce la riga del ruolo
     («Riferimento europeo»), che a un terzo di schermo andrebbe a capo tre
     volte: restano il numero e il nome del paese, che sono l'informazione.
     La striscia non scorre più: non serve.

     Altezza 46px: sopra la soglia dei 44 indicata per il tocco, e un quinto
     della mappa invece di un terzo. */
  /* left/right espliciti invece del transform: quel transform non era lo
     scorrimento del carosello, come sembrava, ma il centraggio
     (translateX(-50%), cioè -195px su una striscia di 391). Toglierlo la
     spostava a destra di mezza larghezza. Posizionandola per i due bordi il
     centraggio non serve più. */
  /* 2rem = 1,25 di sbordo + 0,75 di margine visivo. Il riquadro della mappa
     ha un margine negativo di 1,25rem per lato, per arrivare ai bordi dello
     schermo: posizionando la striscia rispetto a lui, senza compensare,
     finiva fuori schermo di quei 20px. */
  .map-hub-strip{
    left:2rem!important;right:2rem!important;
    width:auto!important;
    transform:none!important;
    overflow:visible!important;
    display:grid!important;
    grid-template-columns:repeat(3,1fr);
    gap:.35rem;
  }
  .map-hub-button{
    width:auto!important;min-width:0;
    min-height:46px;
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    padding:.5rem .35rem;
    text-align:center;
  }
  .map-hub-role{display:none;}
  .map-hub-index{font-size:9px;opacity:.55;}
  .map-hub-name{font-size:13px;white-space:nowrap;}
}

/* ── Schermi stretti ───────────────────────────────────────────────────────
   Nel hero l'immagine del container sta dietro al testo (livello 3 contro 10,
   quindi il testo è già sopra). Il problema non era l'ordine ma il contrasto:
   su un giallo pieno la frase non si legge. Smorzandola resta l'atmosfera e
   torna la leggibilità.
   ═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  #hero-container-wrap{opacity:.28;}
}

/* ── Pagina insight in inglese: gli articoli sono in italiano ───────────────
   Queste due regole stanno qui e non in article.css perché servono alla
   pagina ELENCO, che non carica il foglio degli articoli.
   ═══════════════════════════════════════════════════════════════════════════ */
.nota-lingua{margin:1.6rem 0 0;padding:1rem 1.2rem;background:rgba(201,168,76,.07);
  border-left:3px solid var(--gold);font-size:14px;font-weight:300;line-height:1.7;
  color:var(--ink);max-width:46rem;}
.nota-lingua a{color:var(--ink);border-bottom:1px solid var(--gold);text-decoration:none;}
.nota-lingua a:hover{color:#8a6d1f;}
.nota-lingua strong{font-family:var(--mono);font-size:9px;font-weight:400;
  letter-spacing:.3em;text-transform:uppercase;color:#8a6d1f;display:block;
  margin-bottom:.45rem;}
.br-lingua{font-family:var(--mono);font-size:9px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-dim);
  padding:.2rem .5rem;margin-left:.6rem;white-space:nowrap;}

/* ═══════════════════════════════════════════════════════════════════════════
   CORREZIONI POST-TRADUZIONE
   L'italiano ha parole più lunghe dell'inglese; alcune regole originali
   davano per scontate parole corte. Qui si rendono indipendenti dalla lingua.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Griglia delle tre card: una colonna non può più allargarsi oltre la sua
   quota per colpa di una parola lunga ("POSIZIONAMENTO", "pubblichiamo").
   Prima l'italiano sfondava il contenitore di 66px.

   SOLO da 1025px in su. Questa riga era nata senza media query, e siccome
   fixes.css viene caricato dopo lo stile della pagina vinceva a qualunque
   larghezza: teneva tre colonne anche su un telefono, dove diventavano 72px
   l'una e il testo andava a meno di una parola per riga. Le media query della
   pagina (2 colonne sotto 1024, 1 sotto 768) erano morte da allora. */
@media(min-width:1025px){
  .overview-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.overview-card{min-width:0;}
.overview-card p{overflow-wrap:break-word;}
.overview-card .eyebrow{letter-spacing:0.22em;overflow-wrap:break-word;}
.overview-card-title{overflow-wrap:normal;word-break:keep-all;}

/* Pannello scuro: i due blocchi erano ancorati in alto e in basso, e tutto
   lo spazio avanzato finiva in mezzo (115px in italiano, 187px in inglese).
   Ora la distanza è fissa e il vuoto resta in fondo. */
.overview-side{justify-content:flex-start;}
.overview-side .display-md{margin-bottom:1.6rem;}
.overview-side .overview-stat-list{margin-top:3.5rem;}

/* ── Pannello Vigil ────────────────────────────────────────────────────────
   L'oro pieno #C9A84C su 720x573px risultava spento. Una sfumatura leggera
   gli restituisce profondità senza introdurre movimento. */
.cta-panel-gold{background:var(--gold);}

/* ── Vigil: segnale di stato ───────────────────────────────────────────────
   Una spia accesa dice "esiste, ci stiamo lavorando" meglio di qualsiasi
   aggettivo. Movimento minimo: un solo elemento, respiro lento. */
.vigil-status{
  display:flex;width:max-content;align-items:center;gap:.6rem;
  margin-bottom:1.5rem;padding:.42rem .85rem .42rem .7rem;
  border:1px solid rgba(28,26,23,.22);border-radius:999px;
  background:rgba(28,26,23,.055);
  font-family:var(--mono);font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(28,26,23,.66);
}
.vigil-status-dot{
  width:6px;height:6px;border-radius:50%;background:#0E3A22;
  position:relative;flex:0 0 auto;
}
.vigil-status-dot::after{
  content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(14,58,34,.55);
  animation:vigil-pulse 2.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes vigil-pulse{
  0%{transform:scale(.72);opacity:.9;}
  70%{transform:scale(1.55);opacity:0;}
  100%{transform:scale(1.55);opacity:0;}
}
@media(prefers-reduced-motion:reduce){
  .vigil-status-dot::after{animation:none;opacity:.5;}
}

/* Titolo sul pannello oro: tutto nel verde Silk Meridian, il corsivo si
   distingue per l'inclinazione. Il bianco era stato provato ma isolava troppo
   il nome; se un domani lo si volesse recuperare basta cambiare questa riga
   in  color:#FFFFFF;  (o #5A4415 per un bruno dorato, l'oro del fondo scurito). */
.cta-panel-gold .cta-headline em{color:var(--deep);}

/* I due pannelli erano ancorati in basso: il contenuto più corto lasciava
   150px di vuoto in alto contro i 52 dell'altro. Ora partono dallo stesso
   punto e il vuoto residuo resta sotto. */
#cta-split .cta-panel{justify-content:flex-start;}
#cta-split .cta-panel > *:not(.cta-tag){margin-top:5.5rem;}

/* Filo dorato di chiusura: senza, il pannello scuro e il footer hanno lo
   stesso colore esatto (#03120d) e si fondono. */
#cta-split{border-bottom:1px solid var(--gold);}

/* Titolo Vigil: il messaggio in primo piano, la data come riga di servizio. */
.vigil-when{
  display:block;margin-top:1.1rem;font-family:var(--mono);
  font-size:10px;letter-spacing:0.34em;text-transform:uppercase;
  color:rgba(28,26,23,0.55);font-style:normal;
}