/* ===========================================
   NEW MAP - MARKERS
   ----------------------------------------------------------------
   Visuals for single-article and cluster markers placed by
   static/js/new_map_markers.js. All scoped under #new-map-section
   so they cannot leak into the existing map's markers.
   Sizes (width / height / box-shadow color) are set inline by JS
   because they depend on container width and active topic filter;
   everything else stays here.
   =========================================== */

/* The marker element JS creates and hands to mapboxgl.Marker */
#new-map-section .nm-marker {
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

#new-map-section .nm-marker:hover {
  transform: scale(1.2);
}

#new-map-section .nm-marker > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  pointer-events: none;
}

/* Cluster: cycles through images with a fade. The opacity
   transition matches CLUSTER_FADE_MS in new_map_markers.js. */
#new-map-section .nm-marker--cluster > img {
  transition: opacity 0.5s ease;
}

/* The .mapboxgl-marker wrapper that Mapbox itself injects gets a
   global hover rule from map_section.css (red glow + scale).
   That rule has no real effect on the new map (Mapbox sets the
   wrapper's transform inline for positioning, which beats the
   stylesheet's hover transform), but the box-shadow does land.
   Cancel it inside the new section so only our nm-marker:hover
   effect shows. */
#new-map-section .mapboxgl-marker {
  transition: none;
}
#new-map-section .mapboxgl-marker:hover {
  box-shadow: none;
}