/* ═══════════════════════════════════════════════
   Roma's Heritage — mappa.css
   Layout mappa Leaflet + sidebar + popup custom
   ═══════════════════════════════════════════════ */

/* ── LAYOUT ───────────────────────────────────── */
#s-mappa .section-rule { margin-bottom: 0; padding-bottom: 0.8rem; }

.mappa-wrap {
  display:               grid;
  grid-template-columns: 300px 1fr;
  height:                calc(100vh - 140px);
  min-height:            520px;
  border:                1px solid var(--dark-rule);
  overflow:              hidden;
}
@media (max-width: 760px) {
  .mappa-wrap { grid-template-columns: 1fr; grid-template-rows: 220px 1fr; }
}

/* ── SIDEBAR ──────────────────────────────────── */
.mappa-sidebar {
  background:    var(--paper);
  border-right:  2px solid var(--dark-rule);
  display:       flex;
  flex-direction: column;
  overflow:      hidden;
}
.mappa-sidebar-head {
  background:    var(--ink);
  color:         var(--paper);
  padding:       1rem 1.2rem 0.8rem;
  border-bottom: 2px solid var(--rust);
  flex-shrink:   0;
}
.mappa-sidebar-head .kicker {
  font-family:    var(--mono-font);
  font-size:      0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  0.2rem;
}
.mappa-sidebar-head h3 {
  font-family: var(--serif-font);
  font-size:   1.25rem;
  font-weight: 700;
  line-height: 1.1;
}
.mappa-list { overflow-y: auto; flex: 1; padding: 0; }
.mappa-list-item {
  padding:       0.85rem 1.2rem;
  border-bottom: 1px solid var(--light-rule);
  cursor:        pointer;
  transition:    background 0.15s;
  display:       flex;
  flex-direction: column;
  gap:           0.15rem;
}
.mappa-list-item:hover  { background: var(--cream); }
.mappa-list-item.active {
  background:   var(--cream);
  border-left:  3px solid var(--rust);
  padding-left: calc(1.2rem - 3px);
}
.mappa-list-item-name {
  font-family: var(--serif-font);
  font-size:   1rem;
  font-weight: 700;
  line-height: 1.2;
}
.mappa-list-item-addr {
  font-family:    var(--mono-font);
  font-size:      0.62rem;
  letter-spacing: 0.04em;
  color:          var(--warm-grey);
}
.mappa-list-item-tag {
  font-family:    var(--mono-font);
  font-size:      0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--rust);
  margin-top:     0.1rem;
}

/* ── MAPPA ────────────────────────────────────── */
#mappa-leaflet { width: 100%; height: 100%; z-index: 1; }

/* ── LEAFLET POPUP CUSTOM ─────────────────────── */
.leaflet-popup-content-wrapper {
  background:    var(--paper) !important;
  border:        1px solid var(--dark-rule) !important;
  border-radius: 0 !important;
  box-shadow:    4px 4px 0 rgba(61,63,82,0.15) !important;
  padding:       0 !important;
}
.leaflet-popup-content    { margin: 0 !important; min-width: 220px; }
.leaflet-popup-tip-container { display: none; }
.leaflet-popup-close-button {
  font-size: 1.1rem !important;
  color:     var(--ink) !important;
  top:       8px !important;
  right:     10px !important;
}
.map-popup-head {
  background:    var(--ink);
  color:         var(--paper);
  padding:       0.7rem 1rem;
  border-bottom: 2px solid var(--rust);
}
.map-popup-kicker {
  font-family:    var(--mono-font);
  font-size:      0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  0.2rem;
}
.map-popup-name {
  font-family: var(--serif-font);
  font-size:   1.05rem;
  font-weight: 700;
  line-height: 1.15;
}
.map-popup-body { padding: 0.7rem 1rem; }
.map-popup-row {
  font-family:    var(--mono-font);
  font-size:      0.63rem;
  letter-spacing: 0.04em;
  color:          var(--warm-grey);
  margin-bottom:  0.35rem;
  line-height:    1.4;
}
.map-popup-row span { color: var(--ink); }
.map-popup-btn {
  display:        inline-block;
  margin-top:     0.5rem;
  font-family:    var(--mono-font);
  font-size:      0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding:        0.35rem 0.75rem;
  border:         1px solid var(--ink);
  color:          var(--ink);
  background:     none;
  cursor:         pointer;
  text-decoration: none;
  transition:     all 0.15s;
}
.map-popup-btn:hover { background: var(--ink); color: var(--paper); }

/* ── MARKER CUSTOM ────────────────────────────── */
.map-marker-icon {
  width:       32px;
  height:      32px;
  background:  var(--rust);
  border:      2px solid var(--ink);
  display:     flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif-font);
  font-size:   0.75rem;
  font-weight: 900;
  color:       var(--paper);
  box-shadow:  2px 2px 0 rgba(0,0,0,0.3);
}
.map-marker-icon.active-m {
  background: var(--gold);
  color:      var(--ink);
  transform:  scale(1.2);
  z-index:    999;
}