:root{
  /* Variabili di layout e colori */
  --rail-w: 280px;            /* larghezza colonne laterali (rails) */
  --gap: 28px;                /* spazio tra colonne */
  --gutter: clamp(90px,2vw,24px); /* margine bordo-schermo fluido */
  --card-bg: #121212;
  --card-bd: #222;
  --muted: #cfcfcf;
}

/* ====== LAYOUT A 4 COLONNE FULL-BLEED ====== */
/* Il main di questa pagina va a piena larghezza */
main.section { padding-inline: 0; } /* togli "narrow": vogliamo full width */
.sedi-page{
  /* Grid a 6 colonne: gutter sx, rail sx, lista, mappa, rail dx, gutter dx */
  display:grid;
  grid-template-columns:
    minmax(var(--gutter), 1fr)        /* bordo sinistro (gutter) */
    var(--rail-w)                      /* rail sinistro */
    minmax(320px, 440px)               /* colonna lista */
    minmax(560px, 1fr)                 /* colonna mappa */
    var(--rail-w)                      /* rail destro */
    minmax(var(--gutter), 1fr);        /* bordo destro (gutter) */
  gap: var(--gap);
  align-items: start;
  margin-top: 14px;
}
/* Posizionamento dei blocchi all'interno delle colonne centrali */
.rail-left  { grid-column: 2; }
.col-list   { grid-column: 3; }
.col-map    { grid-column: 4; }
.rail-right { grid-column: 5; }

/* Breakpoint: su schermi medi nascondiamo i rails e manteniamo lista + mappa */
@media (max-width: 1200px){
  .sedi-page{
    /* gutter | lista | mappa | gutter */
    grid-template-columns: var(--gutter) minmax(320px, 520px) minmax(420px,1fr) var(--gutter);
  }
  .col-list{ grid-column: 2; }
  .col-map { grid-column: 3; }
  .rail-left, .rail-right { display:none; } /* rails nascosti */
}
/* Breakpoint: su mobile impiliamo lista sopra la mappa */
@media (max-width: 820px){
  .sedi-page{
    grid-template-columns: var(--gutter) 1fr var(--gutter);
  }
  .col-list, .col-map{ grid-column: 2; }
  .col-map{ margin-top: 12px; }
}

/* ====== RAILS (colonne laterali) ====== */
.rail{
  /* Rimangono “appiccicati” durante lo scroll */
  position: sticky; top: 88px;
  height: calc(100vh - 120px);
  display: grid; align-content: start; gap: 16px;
}
.rail-card{
  /* Card scure con bordo e ombra */
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Timeline (rail sinistro): piccoli eventi verticali */
.timeline{ display:grid; gap: 16px; }
.tl-item{ display:grid; gap:6px; position:relative; padding-left: 16px; }
.tl-item::before{
  /* Linea verticale */
  content:""; position:absolute; left:7px; top:6px; bottom:-6px; width:2px; background:#2a2a2a; border-radius:2px;
}
.tl-dot{ position:absolute; left:0; top:3px; width:10px; height:10px; border-radius:50%; background:#7C3AED; box-shadow:0 0 12px rgba(124,58,237,.55); }
.tl-year{ font-weight:700; color:#eee; letter-spacing:.2px }
.tl-text{ color: var(--muted); font-size:.94rem }

/* Recensioni (rail destro) */
.reviews{ display:grid; gap: 10px; }
.rv-head{ color:#eee; font-weight:700; }
.rv-tape{ display:grid; gap:10px; overflow:hidden; } /* contenitore della recensione corrente */
.rv-card{
  background:#0f0f10; border:1px solid #262626; border-radius:18px; padding:12px 14px;
  color:#eaeaea; box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transform: translateY(8px); opacity:0; animation: fadeUp .35s forwards; /* entrata morbida */
}
.rv-stars{ color:#ffd166; letter-spacing:1px; font-size:.95rem }
.rv-author{ color:#bdbdbd; font-size:.85rem; margin-top:.25rem }
.rv-pager{ display:flex; gap:6px; margin-top:6px } /* i dot per cambiare recensione */
.rv-dot{ width:8px; height:8px; border-radius:999px; background:#3a3a3a; }
.rv-dot.active{ background:#a78bfa; box-shadow:0 0 10px #a78bfa66 }

/* ====== LISTA + MAPPA (colonne centrali) ====== */
.sedi-list{
  /* Card contenente filtri e lista delle sedi */
  background:#121212; border:1px solid #222; border-radius:22px; padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35)
}
.sedi-header{ display:grid; gap:8px; margin: 4px 0 12px }
.sedi-header h3{ margin:0; color:#eee; font-size:1.15rem; letter-spacing:.2px }
.badges{ display:flex; gap:8px; flex-wrap:wrap } /* pill con info dinamiche */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  background:#0f0f10; color:#ddd; border:1px solid #262626;
  padding:6px 10px; border-radius:999px; font-size:.82rem; font-weight:600;
}
.badge .dot{width:8px;height:8px;border-radius:999px;background:#7C3AED;display:inline-block}
.badge.green .dot{background:#22c55e}
.badge.amber .dot{background:#f59e0b}
.sedi-actions{display:flex;gap:10px;margin:6px 0 12px} /* area bottoni azione */

/* Pulsante geolocalizzazione (stile animato) */
.btn {
  border:none; width:15em; height:5em; border-radius:3em; display:flex; justify-content:center; align-items:center; gap:12px;
  background:#1C1A1C; cursor:pointer; transition:all 450ms ease-in-out; user-select:none;
}
.sparkle{ fill:#AAAAAA; transition: all 800ms ease; }
.text{ font-weight:600; color:#AAAAAA; font-size:medium; }
.btn:hover{
  /* Hover con gradiente e glow */
  background: linear-gradient(0deg,#A47CF3,#683FEA);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.4), inset 0 -4px 0 0 rgba(0,0,0,.2),
              0 0 0 4px rgba(255,255,255,.2), 0 0 180px 0 #9917FF;
  transform: translateY(-2px);
}
.btn:hover .text{ color:#fff; }
.btn:hover .sparkle{ fill:#fff; transform: scale(1.2); }

/* Barra di ricerca sticky sopra la lista */
.sedi-search{position:sticky; top:0; z-index:2; background:#121212; padding-bottom:12px; margin-bottom:12px}
.sedi-search input{ width:100%; border-radius:14px; border:1px solid #222; background:#0f0f10; color:#eee; padding:14px 16px; }

/* Lista sedi */
.sedi-ul{display:flex;flex-direction:column;gap:12px;list-style:none;margin:0;padding:0; max-height:calc(70vh - 4rem);overflow:auto}
.sedi-item{
  border:1px solid #222; border-radius:16px; padding:14px 16px; background:#0e0e0f; cursor:pointer;
  transition:transform .15s, box-shadow .15s, background .2s, outline .15s;
  opacity:0; transform:translateY(10px); animation:fadeUp .35s forwards; /* animazione di entrata */
}
.sedi-item:hover, .sedi-item[aria-current="true"]{
  /* La sede attiva si evidenzia con leggero sollevamento e ombra */
  transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.35); background:#151515; outline:1px solid #2a2a2a;
}
.sedi-item h3{margin:.1rem 0 .25rem; font-size:1rem; color:#eee}
.sedi-item p{margin:0; color: var(--muted); font-size:.92rem}
.sedi-meta{display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem}
.sedi-meta a, .sedi-meta button{
  /* Pill per azioni contestuali */
  font-size:.85rem; font-weight:600; border:1px solid #2a2a2a; border-radius:999px; background:#141414;
  padding:.45rem .7rem; color:#eee; text-decoration:none; cursor:pointer
}
.sedi-meta a:hover, .sedi-meta button:hover{ background:#191919 }

/* Contenitore mappa con bordo e ombra */
.sedi-map-wrap{ position:relative; border-radius:22px; overflow:hidden; border:1px solid #222; background:#0e0e0f; box-shadow:0 10px 30px rgba(0,0,0,.35) }
.sedi-map{ width:100%; height:100%; min-height:68vh; border:0 } /* Altezza minima per visibilità */

/* Utility di accessibilità per testi "solo screen reader" */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; clip:rect(0 0 0 0); overflow:hidden; padding:0; border:0 }

/* ====== POPUP DETTAGLI SEDE ====== */
.sedi-popup{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; animation:fadeIn .25s ease }
.sedi-popup .popup-inner{ background:#111; border:1px solid #222; border-radius:20px; color:#eee; width:min(92vw,480px); padding:20px; position:relative; animation:slideUp .3s ease }
.popup-close{ position:absolute; top:.35rem; right:.45rem; background:none; border:none; font-size:2rem; line-height:1; color:#eee; cursor:pointer }
.rating{ display:flex; align-items:center; gap:.5rem; font-size:.95rem }
.stars{ --s:1rem; display:inline-grid; grid-auto-flow:column; gap:.15rem }
.star{ width:var(--s); height:var(--s);
  /* stella con clip-path per evitare immagini */
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  background:#555 }
.star.on{ background:#ffd166 }

/* Animazioni base riutilizzate in vari elementi */
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0) } }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
@keyframes slideUp{ from{ transform:translateY(20px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

/* ====== BANNER CALL TO ACTION (fine pagina) ====== */
.cta-banner {
  margin: 80px auto;
  padding: 60px 20px;
  background: linear-gradient(90deg, #7C3AED, #4C1D95);
  border-radius: 28px;
  text-align: center;
  max-width: 1200px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  animation: fadeIn 0.6s ease;
}
.cta-inner h3 {
  color: #fff;
  font-size: 1.9rem;
  margin-bottom: 20px;
}
.cta-btn {
  display: inline-block;
  padding: 14px 32px;
  background: #fff;
  color: #4C1D95;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  font-size: 1rem;
  transition: all 0.3s ease;
  animation: pulse 2s infinite; /* piccolo effetto pulsante */
}
.cta-btn:hover {
  background: #eaeaea;
  transform: translateY(-3px);
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
  70% { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* =========================================================
   📱 OVERRIDE MOBILE-FRIENDLY (solo rifiniture, niente HTML/JS)
   ========================================================= */

/* Tablet / mobile: compattiamo rails e sticky */
@media (max-width: 820px){
  .rail{ position:static; height:auto; }          /* niente sticky su mobile */
  .sedi-list{ border-radius:18px; padding:14px; }
  .sedi-map{ min-height:58vh; }                   /* mappa un po' più corta su telefoni */
}

/* Telefono: tap targets più grandi, input anti-zoom iOS, scorrimento lista più fluido */
@media (max-width: 600px){
  h2.reveal{ padding-inline: 16px !important; }

  .sedi-header h3{ font-size:1.05rem; }
  .badge{ font-size:.8rem; padding:6px 10px; }

  .sedi-actions{ flex-wrap:wrap; }
  .btn{ width:100%; height:3.4em; border-radius:18px; }  /* pulsante full width touch-friendly */

  .sedi-search{ position:sticky; top:0; }
  .sedi-search input{
    font-size:16px;                 /* evita zoom automatico su iOS */
    padding:12px 14px;
  }

  .sedi-ul{
    max-height:none;                /* lascia crescere la lista */
    -webkit-overflow-scrolling: touch; /* scorrimento fluido iOS */
  }

  .sedi-item{ padding:13px 14px; }
  .sedi-item h3{ font-size:.98rem; }
  .sedi-item p{ font-size:.9rem; }

  .sedi-map{ min-height:55vh; }     /* un filo più bassa per evitare scroll infinito */
  .cta-banner{ margin:48px 16px; padding:32px 16px; border-radius:22px; }
  .cta-inner h3{ font-size:1.4rem; }
  .cta-btn{ padding:12px 22px; font-size:.95rem; }
}

/* Telefono piccolo */
@media (max-width: 400px){
  .sedi-list{ padding:12px; border-radius:16px; }
  .sedi-item{ padding:12px 12px; }
  .sedi-map{ min-height:50vh; }
}
/* =======================================================
   📱 SEDI — MOBILE REFINEMENT (override finale)
   ======================================================= */
@media (max-width: 600px){

  /* niente scroll orizzontale */
  html, body { overflow-x: hidden; }

  /* colonna singola con padding “sicuro” (notch) */
  .sedi-page{
    display: block !important;
    margin: 0;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* rails via */
  .rail-left, .rail-right{ display: none !important; }

  /* LISTA: full-width “pulito”, no 100vw/translate */
  .sedi-list{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px 0 !important;
    border-radius: 18px !important;
    padding: 16px 14px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
  }

  /* header/badges/azioni più comodi */
  .sedi-header{ gap: 10px; margin: 2px 0 10px; }
  .badges{ gap: 10px; }
  .badge{ padding: 7px 12px; font-size: .85rem; }
  .sedi-actions{ gap: 10px; }
  .btn{ width: 100%; height: 3.4em; border-radius: 18px; }

  /* search sticky sotto notch */
  .sedi-search{ position: sticky; top: calc(env(safe-area-inset-top) + 0px); z-index: 2; background: inherit; padding-bottom: 8px; }
  .sedi-search input{ width: 100%; font-size: 16px; padding: 12px 14px; }

  /* lista sedi più ariosa */
  .sedi-ul{ max-height: none; gap: 12px; -webkit-overflow-scrolling: touch; }
  .sedi-item{
    padding: 14px;
    border-radius: 14px;
    line-height: 1.45;
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
  }

  /* MAPPA: full-width “pulito”, no 100vw/translate */
  .sedi-map-wrap{
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
  }
  .sedi-map{ min-height: 62vh; }

  /* CTA finale full-width coerente con il resto */
  .cta-banner{
    width: 100% !important;
    max-width: 100% !important;
    margin: 48px 0 0 0 !important;
    border-radius: 18px !important;
    padding: 28px 16px !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
  }
  .cta-inner h3{ font-size: 1.45rem; }
  .cta-btn{ padding: 12px 22px; font-size: .98rem; }
}
/* Nasconde la barra di ricerca quando è aperto un popup */
.popup-open .sedi-search { display: none !important; }