/* Presenza nazionale, nello stesso linguaggio visivo Mediatel. */
.nationalPresence {
  width:min(92vw,1320px);
  margin:6px auto 8px;
  padding:16px;
  display:grid;
  grid-template-columns:minmax(380px,.82fr) minmax(0,1.18fr);
  gap:12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(13,90,137,.94),rgba(5,37,67,.96));
  box-shadow:0 20px 48px rgba(0,0,0,.2);
}

.italyMapPanel,.regionsPanel {
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.italyMapPanel {
  position:relative;
  min-height:570px;
  padding:18px;
  overflow:hidden;
}

.mapHeading { position:relative; z-index:3; max-width:360px; }
.mapHeading small,.contactsHeading small { color:#f5b335; font-size:10px; font-weight:800; letter-spacing:.14em; }
.mapHeading h2 { margin:7px 0 6px; font-size:clamp(30px,3vw,44px); line-height:1; }
.mapHeading p { margin:0; color:#d7e6ef; font-size:14px; line-height:1.45; }

.italyMap {
  position:absolute;
  inset:130px 30px 32px 30px;
  margin:auto;
  width:min(310px,72%);
}
.italyMap img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.88;
  filter:brightness(0) invert(1) sepia(.15) saturate(.5) opacity(.85);
}
.mapDot {
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:9px;
  height:9px;
  transform:translate(-50%,-50%);
  border:2px solid #fff;
  border-radius:50%;
  background:#f5b335;
  box-shadow:0 0 0 4px rgba(245,179,53,.2),0 0 16px rgba(245,179,53,.7);
  z-index:2;
}
.mapDot::after {
  content:attr(data-city);
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  padding:5px 7px;
  border-radius:7px;
  background:#031b32;
  color:#fff;
  font-size:10px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.mapDot:hover::after { opacity:1; }
.mapCredit { position:absolute; left:26px; bottom:14px; color:#a8c4d5; font-size:9px; }

.regionsPanel {
  padding:8px 8px 8px 20px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  border-left:1px solid rgba(255,255,255,.12);
}
.regionItem {
  min-width:0;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:15px;
  background:rgba(255,255,255,.055);
}
.regionItem h3 { margin:0 0 5px; color:#f5b335; font-size:15px; line-height:1.15; }
.regionItem p { margin:0; color:#e3edf3; font-size:12px; line-height:1.4; }

.contactsHeading {
  width:min(92vw,1320px);
  margin:0 auto;
  padding:2px 0 0;
}
.contactsHeading h2 { margin:5px 0 0; font-size:clamp(25px,2.5vw,36px); line-height:1.05; }

@media (max-width:1000px) {
  .nationalPresence { grid-template-columns:1fr; }
  .italyMapPanel { min-height:560px; }
  .regionsPanel { border-left:0; border-top:1px solid rgba(255,255,255,.12); padding:14px 0 0; }
  .regionsPanel { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:699px) {
  .nationalPresence { width:90vw; margin-top:5px; padding:12px; }
  .italyMapPanel { min-height:540px; padding:20px; }
  .italyMap { inset:125px 20px 28px; width:min(280px,78%); }
  .mapCredit { left:20px; }
  .regionsPanel { grid-template-columns:1fr; padding:12px; }
  .regionItem { padding:12px 14px; }
  .contactsHeading { width:90vw; }
}