:root{
  --as-blue:#06539C;
  --as-dark:#012B54;
  --as-cyan:#4FC3F7;
  --as-light:#EAF6FD;
  --as-line:#DCEAF4;
}

.as-map-wrap{width:100%}
.as-map{
  width:100%;
  min-height:430px;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(135deg,#0b5b9e 0%,#0d72b5 100%);
}
.as-map .leaflet-control-attribution{font-size:9px}
.as-map .leaflet-popup-content-wrapper{
  border-radius:14px;
  box-shadow:0 12px 30px rgba(1,43,84,.18);
}
.as-popup h3{margin:0 0 6px;font:700 18px/1.2 Inter,sans-serif;color:var(--as-dark)}
.as-popup .as-popup-count{font:700 15px/1.2 Inter,sans-serif;color:var(--as-blue);margin:0 0 8px}
.as-popup p{margin:0;font:400 15px/1.35 "Titillium Web",sans-serif;color:#2c3b47}
.as-popup a{display:inline-block;margin-top:9px;font-weight:700;color:var(--as-blue)}

.as-marker{
  width:28px;height:28px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:#fff;border:3px solid var(--as-cyan);
  box-shadow:0 6px 14px rgba(1,43,84,.25);
}
.as-marker:after{
  content:"";position:absolute;width:8px;height:8px;border-radius:50%;
  background:var(--as-blue);top:7px;left:7px;
}
.as-marker.is-active{border-color:#fff;background:var(--as-cyan)}

.as-side-card{
  background:#fff;border-radius:18px;padding:24px;
  box-shadow:0 12px 30px rgba(1,43,84,.10);
}
.as-side-card h3{margin:0 0 15px;font:700 25px/1.2 Inter,sans-serif;color:var(--as-dark)}
.as-side-card ul{list-style:none;margin:0;padding:0}
.as-side-card li{
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--as-line);
  cursor:pointer;
}
.as-side-card li:last-child{border-bottom:0}
.as-side-card li:hover,.as-side-card li.is-active{background:var(--as-light)}
.as-town-name{font:700 15px/1.25 Inter,sans-serif;color:var(--as-dark)}
.as-town-count{font:600 14px/1.25 Inter,sans-serif;color:#4b5964;white-space:nowrap}
.as-pin-dot{color:#168FE5;margin-right:8px}

.as-town-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.as-town-card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(1,43,84,.08)}
.as-town-card img{width:100%;height:180px;object-fit:cover;display:block}
.as-town-card-body{padding:18px}
.as-town-card h3{margin:0 0 6px;color:var(--as-dark);font:700 20px/1.2 Inter,sans-serif}
.as-town-card p{margin:0;color:#4b5964}

@media(max-width:1024px){
  .as-map{min-height:390px}
  .as-town-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
  .as-map{min-height:350px}
  .as-town-grid{grid-template-columns:1fr}
}


/* =========================================================
   v0.1.1 - Sezione 4: I Comuni della rete
   ========================================================= */

.as-town-grid-wrap{width:100%}

.as-town-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}

.as-town-card{
  background:#FFFFFF;
  border:1px solid #CFE8F6;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(1,43,84,.06);
  min-width:0;
  transition:transform .18s ease, box-shadow .18s ease;
}

.as-town-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(1,43,84,.10);
}

.as-town-card-image-wrap{
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#EAF6FD;
}

.as-town-card-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.as-town-card-body{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:16px 16px 17px;
}

.as-town-card-pin{
  flex:0 0 auto;
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:1px;
}

.as-town-card-pin svg{
  display:block;
  width:25px;
  height:25px;
  fill:#168FE5;
}

.as-town-card-copy{min-width:0}

.as-town-card h3{
  margin:0 0 6px;
  color:#012B54;
  font-family:Inter,sans-serif;
  font-size:18px;
  font-weight:700;
  line-height:1.2;
}

.as-town-card-count{
  display:flex;
  align-items:baseline;
  gap:5px;
  margin:0;
  color:#06539C;
  font-family:Inter,sans-serif;
  line-height:1;
}

.as-town-card-count strong{
  font-size:28px;
  font-weight:700;
}

.as-town-card-count span{
  font-size:16px;
  font-weight:500;
}

.as-town-grid-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:18px;
  padding:12px 18px;
  background:#EAF6FD;
  border-radius:12px;
  color:#06539C;
  font-family:Inter,sans-serif;
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  text-align:center;
}

.as-town-grid-note-icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#168FE5;
  color:#FFFFFF;
  font-size:15px;
  font-weight:700;
  font-family:Inter,sans-serif;
}

@media(max-width:1024px){
  .as-town-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:767px){
  .as-town-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .as-town-card{
    display:grid;
    grid-template-columns:120px 1fr;
  }

  .as-town-card-image-wrap{
    aspect-ratio:auto;
    min-height:110px;
  }

  .as-town-card-body{
    align-items:center;
    padding:14px;
  }

  .as-town-card-count strong{font-size:24px}

  .as-town-grid-note{
    align-items:flex-start;
    text-align:left;
  }
}