/* ============================================================================
   What's Nearby pill + modal — scoped to .hg-np-* / .hg-mp-* classes
   Mirrors the visual vocabulary of the surf/volcano/map pills so readers
   see one consistent system across every location page.
   Uses px font sizes per site convention (see CLAUDE.md).
   ============================================================================ */

/* ---- Pill (hero action bar) ---- */
.hg-np-wrap { display:inline-block; vertical-align:middle; margin:0 6px; }
.hg-np-btn {
  display:inline-flex; align-items:center; gap:8px;
  border:none; cursor:pointer;
  padding:8px 14px; border-radius:999px;
  font-family:inherit;
  font-size:13px; font-weight:700;
  color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  line-height:1.2;
  text-transform:uppercase; letter-spacing:.3px;
  -webkit-appearance:none; appearance:none;
}
.hg-np-btn:hover { opacity:.92; }
.hg-np-btn:focus { outline:2px solid #fff; outline-offset:-2px; }
.hg-np-btn-icon { font-size:14px; line-height:1; }

@media (max-width:600px) {
  .hg-np-wrap { display:inline-block; margin:4px 3px; }
  .hg-np-btn  { font-size:11px; padding:6px 10px; letter-spacing:.1px; gap:6px; }
  .hg-np-btn-icon { font-size:13px; }
}
@media (max-width:380px) {
  .hg-np-btn { font-size:10px; padding:5px 8px; }
  .hg-np-btn-icon { font-size:12px; }
}

/* ---- Modal shell ----
   z-index: 2147483647 (max signed 32-bit int) — same value other full-
   screen modals in this codebase use specifically to beat Raptive /
   AdThrive sticky elements (floating video player, sticky sidebar, sticky
   footer ad). 999999 wasn't high enough and the ad was painting on top
   of the map when open. */
.hg-np-modal {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  z-index:2147483647; align-items:center; justify-content:center; padding:15px;
}
.hg-np-modal.is-open { display:flex; }
.hg-np-modal-bg {
  position:absolute; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.hg-np-modal-card {
  position:relative; background:#fff; border-radius:12px;
  width:100%; max-width:760px;
  /* Forced height (not max-height) so flex:1 on .hg-np-side-col actually
     distributes vertical space — absolute-positioned panes inside it would
     otherwise collapse the column to zero on mobile. */
  height:92vh; max-height:92vh;
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  z-index:1;
  animation:hgNpIn .25s ease-out;
}
@keyframes hgNpIn {
  from { opacity:0; transform:scale(.96) translateY(8px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

.hg-np-modal-head {
  display:flex; flex-direction:column; gap:4px;
  padding:12px 18px 14px; border-bottom:1px solid #e8e8e8;
}
.hg-np-modal-head-top {
  display:flex; align-items:center; justify-content:space-between;
}
.hg-np-brand {
  display:inline-flex; align-items:center;
  text-decoration:none;
  opacity:.88; transition:opacity .15s;
}
.hg-np-brand:hover { opacity:1; }
.hg-np-brand img {
  height:26px; width:auto; display:block;
}
.hg-np-modal-head h3 { margin:0; font-size:20px; font-weight:700; color:#222; line-height:1.3; }
.hg-np-modal-close {
  background:none; border:none; font-size:28px; color:#999;
  cursor:pointer; padding:0 6px; line-height:1;
  align-self:flex-start;
}
.hg-np-modal-close:hover { color:#333; }

/* ---- Layout: stacked on mobile, split on desktop ---- */
.hg-np-layout {
  display:flex; flex-direction:column;
  flex:1; min-height:0;
}
.hg-np-map-col {
  flex:0 0 auto;
  display:flex; flex-direction:column;
}
#hg-np-map {
  width:100%; height:340px; background:#e8eee8;
}

/* Side column holds two stacked panes (list + detail). Relative positioning
   so the detail pane can absolute-fill it and slide over the list. */
.hg-np-side-col {
  flex:1; min-height:0;
  position:relative; overflow:hidden;
  background:#fafafa;
}
.hg-np-list-pane,
.hg-np-detail-pane {
  position:absolute; top:0; left:0; right:0; bottom:0;
  overflow-y:auto;
  background:#fafafa;
}
.hg-np-list-pane {
  padding:14px 16px 4px;
  transition:opacity .2s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
/* Detail pane is off-screen by default (right on desktop, bottom on mobile).
   is-open removes visibility from the hidden state so focus traps work. */
.hg-np-detail-pane {
  background:#fff;
  transform:translateY(100%);
  visibility:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), visibility 0s linear .28s;
  box-shadow:0 -8px 24px rgba(0,0,0,.08);
}
.hg-np-side-col.detail-open .hg-np-detail-pane {
  transform:translateY(0);
  visibility:visible;
  transition:transform .28s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0s;
}
.hg-np-side-col.detail-open .hg-np-list-pane {
  /* Subtle "pushed back" feel behind the detail. Not hidden outright in case
     the animation is interrupted — panel can still scroll back cleanly. */
  opacity:.5;
  pointer-events:none;
}

.hg-np-legend {
  display:flex; flex-wrap:wrap; gap:10px 14px;
  padding:8px 16px;
  font-size:12px; color:#555;
  background:#fff;
  border-top:1px solid #f0f0f0;
}
.hg-np-legend-item { display:inline-flex; align-items:center; gap:5px; }

/* Interactive legend chip — tap to hide/show that category on the map +
   in the side list. Category chips are buttons; the "This spot" chip is a
   plain span and doesn't get the button chrome. */
.hg-np-legend-toggle {
  background:transparent;
  border:1px solid transparent;
  border-radius:999px;
  padding:3px 9px 3px 3px;
  margin:-2px 0; /* keep vertical rhythm of the flex row tight */
  font-family:inherit; font-size:12px; color:inherit;
  cursor:pointer;
  line-height:1.4;
  transition:background .12s ease, border-color .12s ease, opacity .12s ease;
  -webkit-appearance:none; appearance:none;
}
.hg-np-legend-toggle:hover {
  background:#f4f5f7;
  border-color:#d5d7dc;
}
.hg-np-legend-toggle.is-off {
  opacity:.45;
  text-decoration:line-through;
}
.hg-np-legend-toggle.is-off .hg-np-dot {
  filter:grayscale(100%);
}
.hg-np-legend-toggle:focus { outline:2px solid #2c3e50; outline-offset:2px; }

.hg-np-dot {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%;
  border:1.5px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.1);
  flex-shrink:0;
}
.hg-np-dot-glyph {
  color:#fff;
  font-size:10px; font-weight:700; line-height:1;
}

/* Desktop — map and side column sit side-by-side, card grows wider. */
@media (min-width:1024px) {
  .hg-np-modal-card { max-width:1180px; height:88vh; max-height:88vh; }
  .hg-np-layout { flex-direction:row; }
  .hg-np-map-col { flex:1 1 60%; border-right:1px solid #e8e8e8; }
  .hg-np-side-col { flex:0 0 40%; max-width:480px; }
  #hg-np-map { height:100%; min-height:520px; }
  .hg-np-legend { border-top:1px solid #f0f0f0; }

  /* Detail slides in from the right on desktop (vs. bottom on mobile). */
  .hg-np-detail-pane { transform:translateX(100%); box-shadow:-8px 0 24px rgba(0,0,0,.08); }
  .hg-np-side-col.detail-open .hg-np-detail-pane { transform:translateX(0); }
  .hg-np-side-col.detail-open .hg-np-list-pane { opacity:1; transform:translateX(-8px); }
}
@media (min-width:1400px) {
  .hg-np-modal-card { max-width:1320px; }
  #hg-np-map { min-height:600px; }
}

/* ---- Modal footer ---- */
.hg-np-modal-foot {
  padding:12px 18px;
  border-top:1px solid #e8e8e8;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
  font-size:12px; color:#888;
  background:#fff;
}
.hg-np-coords { color:#999; font-family:monospace; }
.hg-np-attribution { color:#888; font-size:11px; display:inline-flex; align-items:center; gap:4px; }
.hg-np-attribution .fa-shaka { color:#f59e0b; font-size:12px; }
.hg-np-gmaps {
  color:#1866B4; text-decoration:none; font-weight:600;
  display:inline-flex; align-items:center; gap:5px;
}
.hg-np-gmaps:hover { color:#0f4a85; text-decoration:underline; }

/* ---- Side list — groups + items ---- */
.hg-np-loading, .hg-np-empty {
  color:#888; font-size:14px; margin:0; padding:14px 4px;
  text-align:center;
}
.hg-np-group { margin:0 0 18px; }
.hg-np-group.is-hidden { display:none; }
.hg-np-group-h {
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; color:#444;
  text-transform:uppercase; letter-spacing:.4px;
  margin:0 0 8px;
}
.hg-np-group-count { color:#999; font-weight:500; font-size:12px; text-transform:none; letter-spacing:0; }

.hg-np-items { list-style:none; margin:0; padding:0; }
.hg-np-items li { margin:0 0 8px; }
.hg-np-item {
  display:flex; gap:10px; align-items:flex-start;
  width:100%;
  background:#fff; border:1px solid #ececec; border-radius:10px;
  padding:8px 10px;
  text-align:left; cursor:pointer;
  font-family:inherit;
  transition:box-shadow .15s, border-color .15s, transform .1s;
}
.hg-np-item:hover {
  border-color:#d0d0d0;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  transform:translateY(-1px);
}
.hg-np-item:focus {
  outline:2px solid var(--hg-island,#007840); outline-offset:-1px;
}
.hg-np-item-thumb {
  flex:0 0 64px; width:64px; height:64px;
  border-radius:8px; overflow:hidden;
  background:#e8eee8;
  display:flex; align-items:center; justify-content:center;
}
.hg-np-item-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.hg-np-item-thumb-ph .hg-np-dot-glyph { font-size:20px; font-weight:700; }

.hg-np-item-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.hg-np-item-name {
  font-size:14px; font-weight:700; color:#222; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.hg-np-item-meta { font-size:12px; color:#666; line-height:1.4; }
.hg-np-item-meta .sep { color:#ccc; }
.hg-np-item-meta .hg-np-rating { color:#444; font-weight:600; }
.hg-np-item-meta .hg-np-rating .fa-shaka { color:#f59e0b; font-size:13px; margin-right:2px; vertical-align:-1px; }
.hg-np-item-meta .hg-np-price { color:#555; font-weight:500; }
.hg-np-item-dist {
  font-size:12px; color:#444; font-weight:500;
  line-height:1.4;
}
.hg-np-item-dist .sep { color:#ccc; }

.hg-np-item-link {
  display:inline-block; margin-top:4px;
  font-size:12px; font-weight:600;
  color:#1866B4; text-decoration:none;
  align-self:flex-start;
}
.hg-np-item-link:hover { text-decoration:underline; }

/* ---- Leaflet popup styling (shared with leaflet-map-modal — keep in sync) ---- */
.hg-np-modal .leaflet-popup-content-wrapper {
  border-radius:8px; font-family:inherit;
}
.hg-np-modal .leaflet-popup-content {
  margin:10px 12px; font-size:14px; line-height:1.4;
}

.hg-np-modal .hg-mp { display:flex; gap:10px; min-width:210px; max-width:260px; }
.hg-np-modal .hg-mp-thumb {
  flex:0 0 72px; width:72px; height:72px;
  border-radius:6px; overflow:hidden;
  background:#e8eee8; position:relative;
}
.hg-np-modal .hg-mp-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.hg-np-modal .hg-mp-body { flex:1; min-width:0; }
.hg-np-modal .hg-mp-title { font-weight:700; font-size:14px; line-height:1.25; color:#222; margin:0 0 3px; }
.hg-np-modal .hg-mp-meta { font-size:12px; color:#666; line-height:1.35; margin:0 0 4px; }
.hg-np-modal .hg-mp-meta .sep { color:#bbb; margin:0 4px; }
.hg-np-modal .hg-mp-rating { color:#444; font-weight:600; }
.hg-np-modal .hg-mp-rating .fa-shaka { color:#f59e0b; font-size:13px; margin-right:2px; vertical-align:-1px; }
.hg-np-modal .hg-mp-time { font-size:12px; color:#374151; line-height:1.35; margin:0; }
.hg-np-modal .hg-mp-actions { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.hg-np-modal .hg-mp-actions a {
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; font-weight:600; text-decoration:none;
  padding:4px 9px; border-radius:999px; line-height:1.2;
}
.hg-np-modal .hg-mp-actions a.primary { background:#1866B4; color:#fff; }
.hg-np-modal .hg-mp-actions a.secondary { background:#f0f0f0; color:#333; }
.hg-np-modal .hg-mp-actions a:hover { opacity:.88; }
.hg-np-modal .hg-mp-attr { font-size:10px; color:#999; margin-top:6px; font-style:italic; }
.hg-np-modal .hg-mp-you {
  display:block;
  min-width:200px;
}
.hg-np-modal .hg-mp-you-kicker {
  display:block;
  font-size:10px; font-weight:700;
  color:var(--hg-island,#007840);
  text-transform:uppercase; letter-spacing:.6px;
  margin:0 0 4px;
}
.hg-np-modal .hg-mp-you strong {
  display:block;
  font-size:15px; color:#111; line-height:1.3;
}

/* ---- Full-bleed modal (tablet-portrait and down) ----
   Go fully edge-to-edge on anything 767px or narrower so the page's ad
   slots and sticky promos get hidden while the reader is inside the
   modal. Also gives the flex layout a definite container height so the
   side column actually distributes space to the map + list. Dynamic
   viewport units where supported (100dvh) so the modal extends under
   the iOS toolbar when the browser chrome is collapsed. */
@media (max-width:767px) {
  .hg-np-modal { padding:0; }
  .hg-np-modal-card {
    max-width:none; width:100vw;
    height:100vh; max-height:100vh;
    height:100dvh; max-height:100dvh;
    border-radius:0;
    animation:none; /* full-bleed modals don't need a scale-in */
  }
}

/* ---- Phone-only polish (map height + padding + tile sizing) ---- */
@media (max-width:600px) {
  #hg-np-map { height:280px; }
  .hg-np-list-pane { padding:12px; }
  .hg-np-group-h { font-size:12px; }
  .hg-np-item-thumb { flex-basis:56px; width:56px; height:56px; }
}

/* ============================================================================
   Detail pane (side-panel takeover)
   ============================================================================ */
.hg-np-detail-head {
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center;
  padding:10px 14px;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(150%) blur(6px);
  -webkit-backdrop-filter:saturate(150%) blur(6px);
  border-bottom:1px solid #f0f0f0;
}
.hg-np-detail-back {
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:none; cursor:pointer;
  padding:6px 10px 6px 6px; border-radius:8px;
  font-family:inherit; font-size:14px; font-weight:600;
  color:#333;
  transition:background .15s, color .15s;
}
.hg-np-detail-back:hover,
.hg-np-detail-back:focus-visible {
  background:#f0f0f0; color:#111; outline:none;
}
.hg-np-detail-back svg { display:block; }

.hg-np-detail-body { padding:0 0 20px; }

.hg-np-detail-hero {
  width:100%;
  aspect-ratio:16 / 9;
  background:#e8eee8; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.hg-np-detail-hero img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.hg-np-detail-hero-ph { font-size:72px; font-weight:700; opacity:.55; }

.hg-np-detail-main { padding:16px 18px 0; }

.hg-np-detail-kicker {
  display:block;
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.8px;
  margin:0 0 6px;
}
.hg-np-detail-name {
  margin:0 0 8px;
  font-size:22px; font-weight:800;
  color:#111; line-height:1.2;
}
.hg-np-detail-meta {
  font-size:14px; color:#444; line-height:1.5;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  margin:0 0 6px;
}
.hg-np-detail-meta .hg-np-rating { color:#222; font-weight:700; }
.hg-np-detail-meta .hg-np-rating .fa-shaka { color:#f59e0b; font-size:15px; margin-right:3px; vertical-align:-1px; }
.hg-np-detail-meta .hg-np-price { color:#555; font-weight:600; }
.hg-np-detail-meta .sep { color:#ccc; padding:0 2px; }

.hg-np-detail-dist {
  font-size:13px; color:#555;
  margin:0 0 14px;
}
.hg-np-detail-dist .sep { color:#ccc; padding:0 4px; }

.hg-np-detail-status {
  display:inline-block;
  padding:6px 12px; margin:0 0 16px;
  border-radius:8px;
  font-size:13px; font-weight:600; line-height:1.3;
}
.hg-np-detail-status.is-green { background:#e7f5ef; color:#0f6b4e; border-left:4px solid #1D9771; }
.hg-np-detail-status.is-amber { background:#fdf6e0; color:#6b4f00; border-left:4px solid #d4a017; }
.hg-np-detail-status.is-red   { background:#fbeaea; color:#8a1b24; border-left:4px solid #c3232f; }

.hg-np-detail-field { margin:0 0 14px; }
.hg-np-detail-label {
  font-size:11px; font-weight:700; color:#777;
  text-transform:uppercase; letter-spacing:.4px;
  margin:0 0 3px;
}
.hg-np-detail-value {
  font-size:14px; color:#222; line-height:1.5;
}

.hg-np-detail-actions {
  display:flex; flex-wrap:wrap; gap:8px;
  margin:16px 0 12px;
}
.hg-np-detail-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:10px;
  background:#f0f0f0; color:#222;
  font-family:inherit; font-size:13px; font-weight:600;
  text-decoration:none; border:none; cursor:pointer;
  transition:background .15s, color .15s;
  flex:1 1 auto; min-width:120px;
  text-align:center;
}
.hg-np-detail-btn:hover { background:#e4e4e4; color:#111; }
.hg-np-detail-btn.primary {
  background:var(--hg-island,#007840); color:#fff;
}
.hg-np-detail-btn.primary:hover { opacity:.92; color:#fff; }

.hg-np-detail-attr {
  margin:12px 0 0;
  font-size:11px; color:#999; font-style:italic;
}

/* Mobile tweaks for the detail pane */
@media (max-width:600px) {
  .hg-np-detail-hero { aspect-ratio:4 / 3; }
  .hg-np-detail-name { font-size:20px; }
  .hg-np-detail-btn { flex:1 1 100%; }
}