/* ===========================================
   NEW MAP - POPUP + CLUSTER + OVERLAY
   ----------------------------------------------------------------
   Visuals for static/js/new_map_popup.js. All sizing uses
   clamp() + vmin so dimensions scale continuously with the
   viewport - no .device-phone / .device-tablet overrides.

   Layout model:
     The popup is a vertical flex column. Every visual row
     (media, location, title, action, tags, values, divider,
     readmore, social) is a direct child. A single `gap` on the
     column gives uniform vertical spacing between every visible
     row, regardless of which rows are present. Hidden rows
     (`[hidden]`) are removed from the layout entirely, so the
     gap stays consistent.

     Padding is the same on all four sides via `clamp()`.
   =========================================== */

/* ========== Shared overlay ==========
   Anchored to #new-map-section (which is position: relative), so
   it dims ONLY the new map section instead of the whole viewport.
   Page scrolling continues normally; the overlay scrolls with the
   section. Overlay click is wired up by NewMap.Flow. =========== */
.nm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
}
.nm-overlay[hidden] {
  display: none;
}

/* ========== Single-article popup ========== */
.nm-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  width: min(92vw, clamp(320px, 60vmin, 460px));
  /* No max-height / overflow: let the popup grow vertically to fit
     its content instead of introducing an inner scrollbar. */
  background: #fff;
  border-radius: 16px;
  /* Equal padding on all four sides. */
  padding: clamp(10px, 1.6vmin, 14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  font-family: 'Helvetica', 'Arial', sans-serif;
  color: #222;
  box-sizing: border-box;
  /* The single source of truth for vertical rhythm. */
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vmin, 9px);
}
.nm-popup[hidden] {
  display: none;
}

/* ========== Media (image XOR video) ========== */
.nm-popup-media {
  /* Hides the wrapper if both image + video are hidden so the
     column gap doesn't leave empty space at the top. */
  display: contents;
}

.nm-popup-image {
  display: block;
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  cursor: pointer;
  max-height: clamp(200px, 38vmin, 320px);
}
.nm-popup-image[hidden] {
  display: none;
}

.nm-popup-video {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.nm-popup-video[hidden] {
  display: none;
}
.nm-popup-video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
  display: block;
}

/* ========== Location caption (italic, centered, gray) ========== */
.nm-popup-location {
  text-align: center;
  font-style: italic;
  color: #666;
  font-size: clamp(0.85rem, 1.6vmin, 0.95rem);
  line-height: 1.2;
}
.nm-popup-location[hidden] {
  display: none;
}

/* ========== Title: "<strong>Title</strong> by Creator" ========== */
.nm-popup-title {
  margin: 0;
  /* Match the action line's font size for visual consistency. */
  font-size: clamp(0.9rem, 1.7vmin, 1rem);
  line-height: 1.25;
  color: #222;
  font-weight: 400;
}
.nm-popup-title strong {
  font-weight: 700;
}
.nm-popup-title[hidden] {
  display: none;
}

/* ========== Action: "<strong>Action:</strong> value" ========== */
.nm-popup-action {
  font-size: clamp(0.9rem, 1.7vmin, 1rem);
  line-height: 1.25;
  color: #222;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.nm-popup-action strong {
  font-weight: 700;
}
.nm-popup-action[hidden] {
  display: none;
}

/* ========== Tag / value pill rows ========== */
.nm-popup-tags,
.nm-popup-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.nm-popup-tags[hidden],
.nm-popup-values[hidden] {
  display: none;
}

.nm-popup-tag,
.nm-popup-value {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: clamp(0.65rem, 1.2vmin, 0.75rem);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* Topic tags - purple (matches the Post button's identity color) */
.nm-popup-tag {
  background: #8b00d1;
  color: #fff;
}

/* Borderless values - lighter yellow */
.nm-popup-value {
  background: #fde047;
  color: #1f1f1f;
}

/* ========== Divider ========== */
.nm-popup-divider {
  border: 0;
  border-top: 1px solid #e5e7eb;
  width: 100%;
  margin: 0;
}
.nm-popup-divider[hidden] {
  display: none;
}

/* ========== Read more (full-width blue button) ========== */
.nm-popup-readmore {
  display: block;
  width: 100%;
  text-align: center;
  background: #1565c0;
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: clamp(0.9rem, 1.7vmin, 1rem);
  line-height: 1.3;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.2s ease;
}
.nm-popup-readmore:hover {
  background: #0d47a1;
}
.nm-popup-readmore[hidden] {
  display: none;
}

/* ========== Social icons row ========== */
.nm-popup-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 2vmin, 18px);
  flex-wrap: wrap;
}
.nm-popup-social[hidden] {
  display: none;
}
.nm-popup-social a {
  width: clamp(26px, 4vmin, 32px);
  height: clamp(26px, 4vmin, 32px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nm-popup-social img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ========== Cluster popup (multi-article) ========== */
.nm-cluster {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  width: min(92vw, clamp(280px, 50vmin, 460px));
  max-height: min(80vh, clamp(280px, 60vmin, 520px));
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  padding: clamp(20px, 3vmin, 28px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  font-family: 'Helvetica', 'Arial', sans-serif;
  box-sizing: border-box;
}
.nm-cluster[hidden] {
  display: none;
}

/* Flex-wrap row: as many dots as fit, every row (including the last
   partial row) is horizontally centered. No max-per-row cap. */
.nm-cluster-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: clamp(8px, 1.6vmin, 16px);
}

.nm-cluster-dot {
  width: clamp(36px, 8vmin, 56px);
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  background: #eee;
  border: 2px solid #fff;
  box-shadow: 0 0 8px rgba(30, 144, 255, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nm-cluster-dot:hover {
  transform: scale(1.1);
  box-shadow: 0 0 16px 2px #1e90ff;
}
.nm-cluster-dot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}