/* Mappa del sito per le persone: templates/sito/mappa.html.twig (ServizioController::mappa).
   Usa le variabili di app.css; la «i» di Oesis (asta con il punto rosso) fa da binario a ogni ramo del menu. */

/* ---------- Testata: cifre e ricerca ---------- */
.mp-cifre { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.mp-cifre li { display: inline-flex; align-items: baseline; gap: .4rem; padding: .55rem 1rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--bianco);
  font-size: .92rem; color: var(--grigio); box-shadow: var(--ombra-s); animation: entra .9s var(--morbido) both; }
.mp-cifre li:nth-child(2) { animation-delay: .08s; } .mp-cifre li:nth-child(3) { animation-delay: .16s; } .mp-cifre li:nth-child(4) { animation-delay: .24s; }
.mp-cifre b { font-family: var(--f-titoli); font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; color: var(--inchiostro); }
.mp-cifre li:first-child b { color: var(--rosso); }
.mp-cerca { position: relative; max-width: 560px; }
.mp-cerca .ic { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--grigio-2); }
.mp-cerca input { width: 100%; padding: .95rem 1.2rem .95rem 3rem; border: 1px solid var(--linea-forte); border-radius: 999px; background: var(--bianco); font: inherit; color: var(--inchiostro);
  box-shadow: var(--ombra-s); transition: border-color .2s, box-shadow .2s; }
.mp-cerca input:focus { outline: none; border-color: var(--rosso); box-shadow: 0 0 0 4px rgba(227, 6, 19, .12); }

/* ---------- Titoli di sezione ---------- */
.mp-titolo { margin: 0 0 clamp(2rem, 4vw, 3rem); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.1; color: var(--grigio-2); }
.mp-titolo span { color: var(--inchiostro); }
.mp-titolo--chiaro { color: rgba(255, 255, 255, .55); }
.mp-titolo--chiaro span { color: #fff; }

/* ---------- Il sito voce per voce: rami a scaglioni ---------- */
.mp-sito { padding-top: clamp(3rem, 6vw, 5rem); }
/* a colonne (come una bacheca): i rami lunghi, es. Software, non lasciano buchi; la seconda colonna parte più in basso */
.mp-rami { columns: 3; column-gap: clamp(1.2rem, 2.4vw, 2rem); }
.mp-rami > * { break-inside: avoid; margin-bottom: clamp(1.2rem, 2.4vw, 2rem); }
.mp-ramo { position: relative; padding: 1.6rem 1.5rem 1.4rem 2.1rem; border: 1px solid var(--linea); border-radius: var(--r-l); background: var(--bianco); box-shadow: var(--ombra-m);
  transition: transform .5s var(--molla), box-shadow .5s; }
.mp-ramo:hover { transform: translateY(-4px); box-shadow: var(--ombra-l); }
/* l'asta della «i»: binario a sinistra con il punto rosso che salta al passaggio */
.mp-ramo::before { content: ""; position: absolute; left: .95rem; top: 3.3rem; bottom: 1.6rem; width: 4px; border-radius: 4px; background: linear-gradient(var(--linea-forte), transparent); }
.mp-ramo::after { content: ""; position: absolute; left: calc(.95rem - 3px); top: 2.15rem; width: 10px; height: 10px; border-radius: 50%; background: var(--rosso); box-shadow: 0 6px 16px -4px rgba(227, 6, 19, .6); }
.mp-ramo:hover::after { animation: punto-salta .9s var(--morbido); }
.mp-ramo__n { position: absolute; right: 1.3rem; top: .9rem; font-family: var(--f-titoli); font-size: 2.6rem; font-weight: 800; letter-spacing: -.06em; line-height: 1; color: var(--nebbia); pointer-events: none; }
.mp-ramo__testa { position: relative; display: flex; padding-right: 2.8rem; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.mp-ramo__ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; background: var(--rosso-tenue); color: var(--rosso); }
.mp-ramo__titolo { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.025em; }
.mp-ramo__titolo a { color: inherit; text-decoration: none; }
.mp-ramo__titolo a:hover { color: var(--rosso); }
.mp-ramo__sommario { margin: 0 0 1rem; font-size: .93rem; line-height: 1.55; color: var(--grigio); }
.mp-foglie { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.mp-foglia { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; margin-inline: -.6rem; border-radius: var(--r-s); color: var(--inchiostro); text-decoration: none; transition: background .2s; }
.mp-foglia:hover { background: var(--nebbia); }
.mp-foglia__ic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 9px; border: 1px solid var(--linea); color: var(--grigio); transition: color .2s, border-color .2s; }
.mp-foglia:hover .mp-foglia__ic { color: var(--rosso); border-color: rgba(227, 6, 19, .3); }
.mp-foglia__testo { display: grid; gap: .05rem; min-width: 0; flex: 1; }
.mp-foglia__testo b { font-family: var(--f-titoli); font-size: .97rem; font-weight: 700; }
.mp-foglia__testo small { font-size: .8rem; line-height: 1.4; color: var(--grigio); }
.mp-foglia__va { color: var(--grigio-2); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .25s var(--molla); }
.mp-foglia:hover .mp-foglia__va { opacity: 1; transform: none; color: var(--rosso); }
.mp-nipoti { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .4rem 2.4rem; padding: 0; list-style: none; }
.mp-nipoti a { display: inline-block; padding: .2rem .65rem; border-radius: 999px; background: var(--nebbia); font-size: .8rem; color: var(--inchiostro-2); text-decoration: none; transition: background .2s, color .2s; }
.mp-nipoti a:hover { background: var(--rosso-tenue); color: var(--rosso); }

/* ---------- Da leggere: tessere scure con i numeri ---------- */
.mp-leggere { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(40rem 26rem at 90% 0%, rgba(227, 6, 19, .28), transparent 70%), var(--inchiostro); color: #fff; }
.mp-leggere::before { content: ""; position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: radial-gradient(50rem 30rem at 20% 100%, #000, transparent 75%); }
.mp-tessere { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); align-items: start; }
.mp-tessere > :nth-child(2) { margin-top: 1.6rem; }
.mp-tessere--1, .mp-tessere--2 { grid-template-columns: repeat(var(--colonne, 2), minmax(0, 1fr)); }
.mp-tessere--1 { --colonne: 1; }
.mp-tessere--1 .mp-tessera { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(1.6rem, 3vw, 2.4rem); }
.mp-tessere--1 .mp-tessera > :not(.mp-ultimi) { grid-column: 1; }
.mp-tessere--1 .mp-ultimi { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
.mp-tessere--1 .mp-tessera__tutti { margin-top: 0; align-self: end; }
.mp-tessera { display: flex; flex-direction: column; padding: 1.6rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-l); background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(6px); transition: background .3s, border-color .3s; }
.mp-tessera:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
.mp-tessera__testa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.mp-tessera__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--rosso); color: #fff; box-shadow: var(--ombra-rossa); }
.mp-tessera__n { font-family: var(--f-titoli); font-size: clamp(2.4rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.mp-tessera__titolo { margin: 0 0 .35rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.mp-tessera__titolo a { color: #fff; text-decoration: none; }
.mp-tessera__testo { margin: 0 0 1.1rem; font-size: .92rem; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.mp-ultimi { display: grid; gap: 0; margin: 0 0 1.2rem; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .1); }
.mp-ultimi a { display: grid; gap: .15rem; padding: .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.mp-ultimi a span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .9rem; line-height: 1.4; transition: color .2s; }
.mp-ultimi a:hover span { color: #ff8a80; }
.mp-ultimi time { font-size: .76rem; color: rgba(255, 255, 255, .5); }
.mp-tessera__tutti { margin-top: auto; color: #ff6b61; }
.mp-categorie { margin-top: clamp(3rem, 5vw, 4rem); }
.mp-categorie__t { margin: 0 0 .8rem; font-family: var(--f-titoli); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.mp-categorie ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mp-categorie a { --tono: var(--rosso-2); display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px;
  color: #fff; text-decoration: none; font-size: .9rem; transition: background .2s, border-color .2s; }
.mp-categorie a:hover { background: rgba(255, 255, 255, .08); border-color: var(--tono); }
.mp-categorie a i { width: 9px; height: 9px; border-radius: 50%; background: var(--tono); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tono) 25%, transparent); }

/* ---------- Servizi e altre pagine ---------- */
.mp-pillole { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.mp-pillole a { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.15rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--bianco);
  font-family: var(--f-titoli); font-weight: 650; font-size: .93rem; color: var(--inchiostro); text-decoration: none; box-shadow: var(--ombra-s); transition: transform .3s var(--molla), color .2s, border-color .2s; }
.mp-pillole a .ic { color: var(--rosso); }
.mp-pillole a:hover { transform: translateY(-2px); color: var(--rosso); border-color: rgba(227, 6, 19, .3); }

/* ---------- Schermi stretti ---------- */
@media (max-width: 1024px) {
  .mp-rami { columns: 2; }
  .mp-tessere, .mp-tessere--1, .mp-tessere--2 { grid-template-columns: minmax(0, 1fr); }
  .mp-tessere--1 .mp-tessera { display: flex; }
  .mp-tessere--1 .mp-ultimi { margin: 0 0 1.2rem; }
  .mp-tessere > :nth-child(2) { margin-top: 0; }
}
@media (max-width: 680px) {
  .mp-rami { columns: 1; }
  .mp-ramo { padding: 1.3rem 1.1rem 1.1rem 1.8rem; }
  .mp-ramo::before { left: .75rem; } .mp-ramo::after { left: calc(.75rem - 3px); }
  .mp-cifre li { padding: .45rem .8rem; font-size: .85rem; }
  .mp-cifre b { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .mp-cifre li, .mp-ramo:hover::after { animation: none; } }