/* Postal districts overview map styles */
.postal-districts-map {
  width: 100%;
  height: 350px;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

@media (min-width: 640px) {
  .postal-districts-map {
    height: 420px;
  }
}

@media (min-width: 1024px) {
  .postal-districts-map {
    height: 100%;
    min-height: 420px;
  }
}

/* ── Newspaper Grid ──────────────────────── */
.districts-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Tablet: 2-col cards, map spans full width on top */
@media (min-width: 640px) {
  .districts-layout {
    grid-template-columns: 1fr 1fr;
  }
  .districts-map-wrap {
    grid-column: 1 / -1;
  }
}

/* Desktop: newspaper layout — 3 columns, map spans right 2 columns */
@media (min-width: 1024px) {
  .districts-layout {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .districts-map-wrap {
    grid-column: 2 / -1;
    grid-row: 1 / span 8;
  }
}

/* ── Bidirectional hover highlight ────────── */
.district-card-highlight {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #d4a843 !important;
}

/* Popup styling */
.postal-districts-popup .maplibregl-popup-content {
  max-width: 220px;
}

.postal-districts-popup .maplibregl-popup-content strong {
  display: block;
  margin-bottom: 2px;
  color: #008080;
}

.postal-districts-popup .maplibregl-popup-content .popup-stats {
  color: #6b7280;
  font-size: 0.75rem;
}

.postal-districts-popup .maplibregl-popup-content .coming-soon {
  color: #d4a843;
  font-style: italic;
}