@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;1,9..144,400&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:#f2f5fb;
  --muted:#b9c8e6;
  --accent:#8fd3ff;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Inter', sans-serif;
  color:var(--ink);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  background:#0b2f6b;
  display:flex;
  flex-direction:column;
}

.bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background-image:url('assets/bg.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.bg::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(6,20,50,.15), rgba(6,20,50,.55));
}

/* NAV */
nav.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  row-gap:10px;
  padding:24px 32px;
}
.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1 1 auto;
  min-width:0;
  gap:16px 44px;
  flex-wrap:wrap;
}
nav.topbar a{
  text-decoration:none;
  color:var(--muted);
  font-size:.8rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding-bottom:8px;
  border-bottom:1px solid transparent;
  transition:.2s;
}
nav.topbar a:hover, nav.topbar a.active{
  color:#fff;
  border-bottom-color:var(--accent);
}
.brand{
  grid-column:1;
  justify-self:start;
  display:flex;
  align-items:center;
  gap:9px;
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:1.3rem;
  letter-spacing:.04em;
  text-decoration:none;
  color:var(--ink);
  padding-bottom:8px;
  border-bottom:1px solid transparent;
  transition:.2s;
}
.brand img{
  width:26px;
  height:26px;
  display:block;
}
.brand.active{
  border-bottom-color:var(--accent);
}

/* HERO — badge RISE + responsabile (solo home) */
.home-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  max-width:1400px;
  width:100%;
  min-width:0;
  margin:0 auto;
  padding:0 24px;
}
.diagram{ order:1; }
.home-intro{
  order:2;
  flex:0 0 320px;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:400;
  font-size:1.08rem;
  line-height:1.75;
  letter-spacing:.005em;
  color:#dce6f7;
  text-align:left;
}
.home-intro::before{
  content:'';
  display:block;
  width:44px;
  height:2px;
  background:var(--accent);
  margin-bottom:20px;
}

.badge-wrap{
  position:absolute;
  left:50%;
  top:44.7%;
  transform:translate(-50%,-50%);
  width:400px;
  height:400px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.badge-wrap::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px dashed rgba(143,211,255,.35);
  animation:spin 40s linear infinite;
  pointer-events:none;
}
.badge-wrap::after{
  content:'';
  position:absolute;
  inset:22px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  animation:spin 60s linear infinite reverse;
  pointer-events:none;
}
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.hero-badge{
  position:relative;
  width:300px;
  height:300px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:12px;
  padding:20px;
  text-align:center;
  color:#fff;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
  background:rgba(11,47,107,.75);
  border:3px solid #8fd3ff;
  backdrop-filter:blur(14px);
  box-shadow:
    0 25px 60px -18px rgba(0,0,0,.5),
    0 0 50px -10px rgba(143,211,255,.45);
}
.hero-badge:hover{
  transform:translateY(-3px);
  box-shadow:
    0 30px 70px -18px rgba(0,0,0,.55),
    0 0 80px -8px rgba(143,211,255,.5);
}
.badge-title{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:2.6rem;
  letter-spacing:.08em;
}
.badge-responsabile{
  font-size:.9rem;
  color:#dce6f7;
  line-height:1.45;
}
.badge-responsabile .label{
  display:block;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#9fb6dd;
  margin-bottom:5px;
}
.badge-responsabile a{
  color:#fff;
  font-weight:700;
  text-decoration:none;
  padding-bottom:1px;
  border-bottom:1px solid rgba(143,211,255,.6);
  transition:.2s;
}
.badge-responsabile a:hover{
  color:var(--accent);
  border-bottom-color:var(--accent);
}
.hero-badge::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(143,211,255,.45);
  animation:pulse 3.5s ease-out infinite;
  pointer-events:none;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(143,211,255,.35); }
  70%{ box-shadow:0 0 0 22px rgba(143,211,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(143,211,255,0); }
}


/* DIAGRAMMA — nodo RISE + 5 sezioni (solo home) */
.diagram{
  position:relative;
  width:min(1050px, 72vw, 66vh);
  aspect-ratio:820/900;
  height:auto;
  margin:18px auto 0;
}
.connector-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:1; }
.connector-path{
  fill:none;
  stroke:rgba(143,211,255,.55);
  stroke-width:1.4;
  filter:drop-shadow(0 0 4px rgba(143,211,255,.35));
}
.connector-dot{
  fill:#8fd3ff;
  filter:drop-shadow(0 0 4px rgba(143,211,255,.6));
}
.connector-flow{
  fill:#ffffff;
  filter:drop-shadow(0 0 6px rgba(143,211,255,.9));
}

.sections{ position:static; }
.sections .node{
  position:absolute;
  z-index:2;
  text-decoration:none; color:var(--ink); width:150px; height:150px; border-radius:50%;
  border:2.5px solid var(--node-color, rgba(255,255,255,.25));
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px;
  text-align:center; padding:14px;
  background:rgba(11,47,107,.55);
  backdrop-filter:blur(8px);
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease; font-size:.85rem; font-weight:600;
  animation:nodeIn .7s ease both;
  box-shadow:0 0 22px -8px var(--node-color, transparent);
}
/* posizioni a raggiera — stessi angoli del logo RISE */
.node-pos-1{ left:50%;    top:6.4%;  transform:translate(-50%,-50%); }   /* pink — in alto */
.node-pos-2{ left:19.5%;  top:25.0%; transform:translate(-50%,-50%); }   /* blue — alto-sinistra */
.node-pos-3{ left:20.2%;  top:65.6%; transform:translate(-50%,-50%); }   /* purple — basso-sinistra */
.node-pos-4{ left:50%;    top:83.0%; transform:translate(-50%,-50%); }   /* teal — in basso */
.node-pos-5{ left:79.8%;  top:65.6%; transform:translate(-50%,-50%); }   /* orange — basso-destra */

@keyframes nodeIn{
  from{ opacity:0; transform:translate(-50%,-50%) scale(.85); }
  to{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
.sections .node:nth-child(1){ animation-delay:.15s; }
.sections .node:nth-child(2){ animation-delay:.3s; }
.sections .node:nth-child(3){ animation-delay:.45s; }
.sections .node:nth-child(4){ animation-delay:.6s; }
.sections .node:nth-child(5){ animation-delay:.75s; }
.node-title{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:.9rem;
  line-height:1.25;
}
.node-referente{
  font-size:.62rem;
  font-weight:400;
  color:var(--muted);
  line-height:1.35;
}
.node-referente .label{
  display:block;
  font-size:.55rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(185,200,230,.65);
  margin-bottom:2px;
}
.referente-link{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid rgba(143,211,255,.4);
  transition:.2s;
}
.referente-link:hover{
  color:var(--accent);
  border-bottom-color:var(--accent);
}
.sections .node:hover{
  color:#fff;
  transform:translate(-50%,-50%) translateY(-4px);
  border-color:#fff;
  background:rgba(11,47,107,.8);
  box-shadow:
    0 20px 45px -16px rgba(0,0,0,.5),
    0 0 45px -6px var(--node-color, #8fd3ff);
}
.sections .node:hover .node-referente,
.sections .node:hover .node-referente .label{ color:#dce6f7; }

/* PAGINA DI CONTENUTO — descrizione, mappa, ecc. */
.page-content{
  flex:1;
  max-width:680px;
  margin:56px auto;
  padding:36px 40px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  backdrop-filter:blur(14px);
  width:calc(100% - 48px);
}
.page-content h2{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:1.7rem;
  color:#fff;
  margin-bottom:8px;
}
.page-content p{
  font-size:.95rem;
  line-height:1.65;
  color:var(--muted);
  margin-top:14px;
  text-align:justify;
}
.project-list{
  margin-top:16px;
  padding-left:20px;
}
.project-list li{
  font-size:.9rem;
  line-height:1.6;
  color:var(--muted);
  text-align:justify;
  margin-bottom:12px;
}
.project-list li::marker{
  color:var(--accent);
}
.project-list a{
  color:#fff;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid rgba(143,211,255,.5);
  transition:.2s;
}
.project-list a:hover{
  color:var(--accent);
  border-bottom-color:var(--accent);
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:28px;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--muted);
  text-decoration:none;
}
.back-link:hover{
  color:var(--accent);
}

/* PULSANTI BASEMAP */
.basemap-btn{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  padding:9px 18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);
  color:var(--ink);
  cursor:pointer;
  transition:.15s;
}
.basemap-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
}
.basemap-btn.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#06142f;
}

/* RICERCA DIPARTIMENTI — mappa */
.map-search{
  position:relative;
  margin:0 0 16px;
  max-width:420px;
}
.map-search input{
  width:100%;
  box-sizing:border-box;
  padding:10px 14px;
  font-size:.85rem;
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;
  outline:none;
  transition:.15s;
}
.map-search input::placeholder{ color:var(--muted); }
.map-search input:focus{ border-color:var(--accent); }
.map-search-results{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  background:#0c1f4a;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  max-height:260px;
  overflow-y:auto;
  z-index:1200;
  display:none;
}
.map-search-results.open{ display:block; }
.map-search-result{
  padding:10px 14px;
  font-size:.8rem;
  color:var(--ink);
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  gap:10px;
}
.map-search-result:last-child{ border-bottom:none; }
.map-search-result:hover{ background:rgba(255,255,255,.08); }
.map-search-result .dot{
  width:10px; height:10px;
  border-radius:50%;
  flex-shrink:0;
}
.map-search-result .polo-name{
  color:var(--muted);
  font-size:.68rem;
  display:block;
  margin-top:2px;
}
.map-search-empty{
  padding:12px 14px;
  font-size:.78rem;
  color:var(--muted);
  font-style:italic;
}

/* TABELLA STRUMENTI */
.tools-search{
  max-width:420px;
  margin:0 0 16px;
}
.tools-search input{
  width:100%;
  box-sizing:border-box;
  padding:10px 14px;
  font-size:.85rem;
  font-family:'Inter', sans-serif;
  color:var(--ink);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;
  outline:none;
  transition:.15s;
}
.tools-search input::placeholder{ color:var(--muted); }
.tools-search input:focus{ border-color:var(--accent); }
.tools-table tr.hidden-row{ display:none; }

.tools-table-wrap{
  margin-top:22px;
  overflow-x:auto;
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
}
.tools-table{
  width:100%;
  border-collapse:collapse;
  font-size:.85rem;
}
.tools-table thead th{
  text-align:left;
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
  padding:12px 16px;
  background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.15);
}
.tools-table tbody td{
  padding:13px 16px;
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--ink);
}
.tools-table tbody tr:last-child td{ border-bottom:none; }
.tools-table tbody tr:hover{ background:rgba(255,255,255,.04); }

.polo-tag{
  display:inline-block;
  font-size:.68rem;
  font-weight:600;
  padding:4px 10px;
  border-radius:20px;
  color:#fff;
  background:color-mix(in srgb, var(--tag-color) 55%, rgba(6,20,50,.9));
  border:1px solid color-mix(in srgb, var(--tag-color) 60%, transparent);
}

.status-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.72rem;
  font-weight:500;
  color:var(--muted);
}
.status-badge::before{
  content:'';
  width:7px; height:7px;
  border-radius:50%;
}
.pdf-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  font-weight:600;
  color:var(--accent);
  text-decoration:none;
  padding:5px 10px;
  border:1px solid rgba(143,211,255,.35);
  border-radius:8px;
  transition:.15s;
}
.pdf-link::before{
  content:'';
  width:12px; height:14px;
  background:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6" fill="none" stroke="black" stroke-width="0"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg>') center/contain no-repeat;
}
.pdf-link:hover{
  background:rgba(143,211,255,.12);
  border-color:var(--accent);
}

.status-badge.available::before{ background:#3ddc84; }
.status-badge.busy::before{ background:#ffb84d; }
.status-badge.maintenance::before{ background:#ff6b6b; }
/* LOGHI PROGETTI — fondo home */
.partners{
  padding:10px 24px 50px;
  text-align:center;
}
.partners-label{
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
  margin-bottom:20px;
}
.partners-grid{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.partner-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:150px;
  height:64px;
  padding:0 22px;
  font-family:'Inter', sans-serif;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--muted);
  text-decoration:none;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.25);
  border-radius:10px;
  transition:.2s ease;
}
.partner-logo img{
  max-height:32px;
  max-width:100%;
  width:auto;
  object-fit:contain;
  display:block;
}
.partner-logo:hover{
  border-color:var(--accent);
  background:#fff;
  transform:translateY(-2px);
}

/* POLI DI INNOVAZIONE — griglia schede */
.poli-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
  margin-top:24px;
}
.polo-card{
  padding:20px 22px;
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--polo-color) 45%, rgba(255,255,255,.15));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--polo-color) 18%, rgba(255,255,255,.04)), rgba(255,255,255,.02));
  transition:.2s ease;
}
.polo-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px -16px color-mix(in srgb, var(--polo-color) 55%, transparent);
  border-color:var(--polo-color);
}
.polo-card h3{
  font-family:'Fraunces', serif;
  font-weight:600;
  font-size:1.15rem;
  color:#fff;
  margin-bottom:8px;
}
.polo-card p{
  font-size:.85rem;
  line-height:1.55;
  color:var(--muted);
  margin-top:8px;
}
.dept-list{
  margin-top:12px;
  padding-left:18px;
}
.dept-list li{
  font-size:.8rem;
  line-height:1.6;
  color:var(--muted);
}
.dept-list li::marker{
  color:var(--polo-color);
}
.dept-list a{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:.15s ease;
}
.dept-list a:hover{
  color:#fff;
  border-bottom-color:var(--polo-color);
}
.polo-referente{
  font-size:.75rem;
  margin-top:2px !important;
}
.polo-referente .label{
  display:block;
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(185,200,230,.6);
  margin-bottom:3px;
}

footer{
  padding:18px 24px;
  font-size:.68rem;
  letter-spacing:.03em;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,.1);
  text-align:center;
}
.site-credit{
  text-align:center;
  padding:6px 24px 0;
  font-size:.68rem;
  letter-spacing:.03em;
  color:var(--muted);
}

@media (max-width:1100px){
  .home-row{
    flex-direction:column;
    gap:16px;
  }
  .home-intro{
    flex:0 0 auto;
    max-width:560px;
    text-align:center;
  }
  .home-intro::before{
    margin:0 auto 14px;
  }
  .diagram{
    width:min(600px, 76vw);
    aspect-ratio:820/900;
    height:auto;
  }
  body.home{
    height:auto;
    min-height:100vh;
    overflow:visible;
  }
  .home-content{
    min-height:100vh;
  }
}

@media (max-width:700px){
  .badge-wrap{ width:min(35vw, 170px); height:min(35vw, 170px); }
  .hero-badge{ width:min(24vw, 130px); height:min(24vw, 130px); padding:8px; gap:3px; }
  .badge-title{ font-size:min(5.5vw, 1.25rem); }
  .badge-responsabile{ font-size:min(2.2vw, .54rem); line-height:1.25; }
  .badge-responsabile .label{ font-size:min(1.7vw, .44rem); margin-bottom:1px; }
  .diagram{ width:94vw; aspect-ratio:820/900; height:auto; margin:6px auto 0; }
  .sections .node{
    width:min(23vw, 115px); height:min(23vw, 115px); padding:6px; gap:2px;
  }
  .node-title{ font-size:min(2.7vw, .68rem); line-height:1.1; }
  .node-referente{ font-size:min(1.9vw, .48rem); }
  .node-referente .label{ font-size:min(1.6vw, .4rem); margin-bottom:0; }
  body.home{
    height:auto;
    min-height:100vh;
    overflow:visible;
  }
  .home-content{
    min-height:100vh;
  }
}

/* HOME COMPATTA — tutto in un'unica schermata, senza scroll */
body.home{
  height:100vh;
  overflow:hidden;
}
.home-content{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
  min-height:0;
}
body.home nav.topbar{
  padding:20px 24px 12px;
}
body.home .home-eyebrow{
  margin:16px 0 4px 0;
}
body.home .badge-wrap{
  width:min(36vh, 420px);
  height:min(36vh, 420px);
}
body.home .hero-badge{
  width:min(24vh, 280px);
  height:min(24vh, 280px);
  padding:20px;
  gap:10px;
}
body.home .badge-title{ font-size:min(4.2vh, 2.4rem); }
body.home .badge-responsabile{ font-size:min(2.1vh, 1rem); line-height:1.4; }
body.home .badge-responsabile .label{ font-size:min(1.5vh, .74rem); margin-bottom:4px; }
body.home .diagram{
  height:auto;
}
body.home .sections .node{
  width:min(23vh, 220px);
  height:min(23vh, 220px);
  padding:16px;
  gap:8px;
}
body.home .node-title{ font-size:min(2.4vh, 1.15rem); }
body.home .node-referente{ font-size:min(1.7vh, .82rem); }
body.home .node-referente .label{ font-size:min(1.3vh, .68rem); margin-bottom:2px; }
body.home .partners{
  padding:0 24px;
}
body.home .partners-grid{ gap:14px; }
body.home .partner-logo{
  height:58px;
  min-width:160px;
  font-size:.78rem;
}
body.home footer{
  padding:10px 24px;
  font-size:.68rem;
}
body.home .site-credit{
  padding:4px 24px 0;
  font-size:.62rem;
}

/* Fix mobile: sul layout radiale (nato per desktop) l'altezza fissa del
   diagram va rimossa sotto i 700px, altrimenti i nodi in eccesso finiscono
   fuori dal box e il footer si sovrappone ai nodi ancora visibili. */
@media (max-width:700px){
  body.home .diagram{
    height:auto;
  }
  body.home .badge-wrap{
    width:min(35vw, 170px);
    height:min(35vw, 170px);
  }
  body.home .hero-badge{
    width:min(24vw, 130px);
    height:min(24vw, 130px);
    padding:8px;
    gap:3px;
  }
  body.home .badge-title{ font-size:min(5.5vw, 1.25rem); }
  body.home .badge-responsabile{ font-size:min(2.2vw, .54rem); line-height:1.25; }
  body.home .badge-responsabile .label{ font-size:min(1.7vw, .44rem); margin-bottom:1px; }
  body.home .sections .node{
    width:min(23vw, 115px);
    height:min(23vw, 115px);
    padding:6px;
    gap:2px;
  }
  body.home .node-title{ font-size:min(2.7vw, .68rem); line-height:1.1; }
  body.home .node-referente{ font-size:min(1.9vw, .48rem); }
  body.home .node-referente .label{ font-size:min(1.6vw, .4rem); margin-bottom:0; }
}

@media (max-width:1100px){
  body.home{
    height:auto;
    min-height:100vh;
    overflow-x:hidden;
    overflow-y:visible;
  }
}