/* us-projects-map.v4.8.1.css */
.us-map-layout {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
}

/* Sidebar */
#sidebar { flex: 0 0 320px; }
#sidebar h3 { 
  margin-top: 0; 
  margin-bottom: var(--space-m); 
}

/* Map container fills parent width; desktop ratio approximates contiguous US */
#us-map {
  width: 100%;
  aspect-ratio: 2.35 / 1;   /* ~2.35:1 works well for the lower 48 */
  min-height: 24rem;        /* prevent collapse on narrow screens */
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Transparent background (no gray tile) */
.leaflet-container { background: transparent !important; }

/* Clickable cursor only for data states */
.leaflet-interactive.clickable { cursor: pointer; }

/* Tooltips: inherit site base size */
.leaflet-tooltip { font-size: var(--text-s) !important; }

/* Counts row styling */
#sidebar .counts-row {
  font-size: var(--text-m);
  margin: 8px 0 14px;
  display: flex;
  flex-direction: column; /* stack items vertically */
  row-gap: var(--space-s); 
  align-items: flex-start; 
}

#sidebar .count-item {
  display: flex;
  align-items: center;
  white-space: nowrap;      /* no-wrap horizontal */
  gap: var(--space-xs);
}

#sidebar .dot {
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .us-map-layout { 
  flex-direction: column; 
}
  #sidebar { 
  width: 100%;
  margin-bottom: -150px; 
}
  #us-map { 
  aspect-ratio: 2.1 / 1; }
}
@media (max-width: 600px) {
  #us-map { 
  aspect-ratio: 1.8 / 1; min-height: 22rem; }
}
@media (max-width: 420px) {
  #us-map { aspect-ratio: 1.6 / 1; min-height: 18rem; }
}