/* ============================================================================
   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 ---- */
.hg-np-modal {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  z-index:999999; 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;
  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;
}
.hg-np-list-col {
  flex:1; min-height:0;
  overflow-y:auto;
  padding:14px 16px 4px;
  background:#fafafa;
}

.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; }
.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 list side-by-side, card grows wider. */
@media (min-width:1024px) {
  .hg-np-modal-card { max-width:1180px; max-height:88vh; }
  .hg-np-layout { flex-direction:row; }
  .hg-np-map-col { flex:1 1 60%; border-right:1px solid #e8e8e8; }
  .hg-np-list-col { flex:0 0 40%; max-width:480px; }
  #hg-np-map { height:100%; min-height:520px; }
  .hg-np-legend { border-top:1px solid #f0f0f0; }
}
@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-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-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:#d97706; font-weight:600; }
.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:#F59E0B; font-weight:600; }
.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;
}

/* ---- Mobile polish ---- */
@media (max-width:600px) {
  .hg-np-modal { padding:0; }
  .hg-np-modal-card { max-width:none; max-height:100vh; border-radius:0; }
  #hg-np-map { height:280px; }
  .hg-np-list-col { padding:12px; }
  .hg-np-group-h { font-size:12px; }
  .hg-np-item-thumb { flex-basis:56px; width:56px; height:56px; }
}