/* Componenti della sezione MNEMOS.
   Caricato dalle sedici pagine del progetto (quattro pagine per quattro
   lingue) e da nessun'altra: memory.css invece serve anche a research.html,
   quindi qui dentro non si tocca nulla che stia li'.
   Niente style inline: la CSP del sito ha style-src 'self'. */

/* ── Navigazione della sezione ──────────────────────────────────────────
   Le quattro pagine del progetto, ripetute su ognuna: da qualunque punto
   si vede la struttura intera. Sta subito sotto l'occhiello, sul fondo
   scuro, e va a capo da sola sugli schermi stretti. */
/* position e flex-direction sono dichiarati apposta: sotto i 760px il sito
   applica a QUALUNQUE <nav> le regole del menu di testata
   (nav{display:none;position:absolute;top:65px;padding:25px;flex-direction:column}),
   e senza queste tre righe la striscia finiva sopra l'occhiello, fuori flusso. */
.mnemos-nav{display:flex;position:static;flex-direction:row;flex-wrap:wrap;gap:0 36px;padding:0 max(24px,calc((100vw - var(--max))/2));border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.mnemos-nav a{padding:19px 0;font:400 11px DM Mono,monospace;letter-spacing:.1em;text-transform:uppercase;color:#8fb0d2;text-decoration:none;border-bottom:1px solid transparent;margin-bottom:-1px}
.mnemos-nav a:hover{color:#fff}
.mnemos-nav a[aria-current="page"]{color:var(--cyan);border-bottom-color:var(--cyan)}

/* ── Griglia a tre schede ───────────────────────────────────────────────
   .grid del sito e' a due colonne: con tre schede l'ultima andava a capo
   da sola e la riga restava mezza vuota. Sotto i 1000px si impila. */
.grid-3{grid-template-columns:repeat(3,1fr)}

/* ── Il ciclo, quattro operazioni ───────────────────────────────────────
   Costruito con testo vero e non come immagine: resta leggibile a
   qualunque larghezza, si traduce e lo legge anche un lettore di schermo. */
.ciclo{list-style:none;margin:60px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.ciclo li{position:relative;padding:32px 30px 0 0;border-top:1px solid #cbd8e5}
.ciclo li:last-child{padding-right:0}
.ciclo li:before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;background:#0b6e93;border:1px solid #0b6e93;box-sizing:border-box}
.ciclo li{border-top-color:#0b6e93}
.ciclo li>b{font:500 10px DM Mono,monospace;letter-spacing:.12em;color:#0b6e93}
.ciclo li h3{font-family:"Inter Tight",Inter,'Inter Fallback',Arial,sans-serif;font-size:23px;font-weight:500;letter-spacing:-.02em;line-height:1.2;margin:15px 0 13px}
.ciclo li p{margin:0;font-size:14px;line-height:1.7;color:#52677d}
.ciclo-ritorno{display:flex;align-items:center;gap:14px;margin:34px 0 0;font:400 11px DM Mono,monospace;letter-spacing:.1em;text-transform:uppercase;color:#0b6e93}
.ciclo-ritorno:before{content:"";flex:0 0 auto;width:26px;height:26px;border:1px solid #0b6e93;border-radius:50%;background:no-repeat center/13px url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%230b6e93%27 stroke-width=%272%27%3E%3Cpath d=%27M20 11a8 8 0 1 0-2.3 5.7%27/%3E%3Cpath d=%27M20 4v7h-7%27/%3E%3C/svg%3E")}
.ciclo-nota{margin:26px 0 0;max-width:860px;font-size:14px;line-height:1.8;color:#52677d}

/* ── Traccia delle fasi ─────────────────────────────────────────────────
   Su schermo largo e' un binario orizzontale con quattro nodi; sotto i
   900px diventa un binario verticale a sinistra, che e' l'unico modo per
   cui quattro colonne di testo restino leggibili su un telefono. */
.fasi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.fasi li{position:relative;padding:32px 30px 0 0;border-top:1px solid #cbd8e5}
.fasi li:last-child{padding-right:0}
.fasi li:before{content:"";position:absolute;top:-6px;left:0;width:11px;height:11px;border-radius:50%;background:#f3f7fb;border:1px solid #9fb6cc;box-sizing:border-box}
.fasi li.is-corso{border-top-color:#0b6e93}
.fasi li.is-corso:before{background:#0b6e93;border-color:#0b6e93;box-shadow:0 0 0 5px rgba(11,110,147,.15)}
/* Etichetta e stato sulla stessa riga: i titoli delle fasi vanno a capo un
   numero diverso di volte nelle quattro lingue, e con la pastiglia sotto al
   titolo le quattro colonne non erano piu' allineate. */
.fase-testa{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fase-testa b{font:500 10px DM Mono,monospace;letter-spacing:.12em;color:#0b6e93}
.fasi li h3{font-family:"Inter Tight",Inter,'Inter Fallback',Arial,sans-serif;font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.2;margin:17px 0 15px}
.fasi li p{margin:0;font-size:14px;line-height:1.7;color:#52677d}
.fase-stato{display:inline-block;padding:4px 10px;border-radius:99px;border:1px solid #c4d4e5;font:400 10px DM Mono,monospace;letter-spacing:.1em;text-transform:uppercase;color:#47637e;white-space:nowrap}
.is-corso .fase-stato{border-color:rgba(11,110,147,.45);background:rgba(11,110,147,.09);color:#0b6e93}
.fasi-nota{margin:52px 0 0;max-width:820px;font-size:14px;line-height:1.8;color:#52677d}
.fasi-nota a{color:#0b6e93;text-underline-offset:2px}
.fasi-nota a:hover{color:#081a31}

/* ── Registro degli aggiornamenti ───────────────────────────────────── */
.registro{list-style:none;margin:0;padding:0}
.registro li{display:grid;grid-template-columns:210px 1fr;gap:34px;padding:28px 0;border-top:1px solid #cbd8e5}
.registro li:last-child{border-bottom:1px solid #cbd8e5}
.registro time{font:400 11px DM Mono,monospace;letter-spacing:.08em;color:#0b6e93;padding-top:5px}
.registro b{display:block;font-family:"Inter Tight",Inter,'Inter Fallback',Arial,sans-serif;font-size:19px;font-weight:500;letter-spacing:-.02em;color:#081a31;margin-bottom:9px}
.registro p{margin:0;font-size:14px;line-height:1.75;color:#52677d}

@media(max-width:900px){
  .fasi{grid-template-columns:1fr}
  .fasi li{border-top:0;border-left:1px solid #cbd8e5;padding:0 0 40px 26px}
  .fasi li:last-child{padding-right:0;padding-bottom:0;border-left-color:transparent}
  .fasi li:last-child:after{content:"";position:absolute;left:-1px;top:0;width:1px;height:14px;background:#cbd8e5}
  .fasi li:before{top:1px;left:-6px}
  .fasi li.is-corso{border-left-color:#0b6e93}
  .fasi li h3{margin:14px 0 13px}
  .fasi-nota{margin-top:38px}
  .registro li{grid-template-columns:1fr;gap:10px;padding:24px 0}
  .registro time{padding-top:0}
}

@media(max-width:1000px){
  .grid-3{grid-template-columns:1fr}
}
@media(max-width:900px){
  .ciclo{grid-template-columns:1fr}
  .ciclo li{border-top:0;border-left:1px solid #0b6e93;padding:0 0 34px 26px}
  .ciclo li:last-child{padding-right:0;padding-bottom:0;border-left-color:transparent}
  .ciclo li:last-child:after{content:"";position:absolute;left:-1px;top:0;width:1px;height:14px;background:#0b6e93}
  .ciclo li:before{top:1px;left:-6px}
  .ciclo li h3{margin:13px 0 12px}
}
@media(max-width:760px){
  .mnemos-nav{position:static;flex-direction:row;gap:0 18px;padding:0 24px;background:rgba(255,255,255,.02)}
  .mnemos-nav a{padding:12px 0;font-size:10px}
}