/* Nearby Places — internal-linking block on place pages.
   Follows the .place-faq module rhythm: top rule, coral serif heading. */

.pg-nearby {
  margin-top: 28px;
  margin-bottom: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.pg-nearby__heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  color: var(--coral);
  font-size: 22px;
  letter-spacing: -.01em;
  margin-bottom: 16px;
}

/* ── Category tabs ─────────────────────────── */

.pg-nearby__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.pg-nearby__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.pg-nearby__tab:hover { border-color: var(--coral); color: var(--coral); }

.pg-nearby__tab.on {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}

/* The walk tab is a distance filter, not a category — green marks it as a
   different kind of thing, and matches the walk times on the cards. */
.pg-nearby__tab.is-walk:hover { border-color: #4a7a55; color: #3a6b45; }

.pg-nearby__tab.is-walk.on {
  background: #4a7a55;
  border-color: #4a7a55;
  color: #fff;
}

/* Walk-time pill — replaces the category pill inside a category tab, where
   the category is already stated by the tab itself. */
.pg-nearby .cat-pill.is-walk {
  background: #e4efdc;
  color: #3a6b45;
  white-space: nowrap;
}

/* ── Panels ────────────────────────────────── */

/* Inactive panels are hidden, never removed — the links stay in the source
   for crawlers, and the block still works with JS off (first panel shows). */
.pg-nearby__panel { display: none; }
.pg-nearby__panel.on { display: block; }

/* Same .place-card markup as the listing grids, just a tighter minimum since
   the place-page column is narrower than the home page. */
.pg-nearby__grid {
  margin-top: 0;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 18px;
}

/* Walk time as a text line (used in the mixed "10 min walk" tab, where the
   pill is carrying the category instead). Same green, so "how far" always
   reads the same colour wherever it appears. */
.pg-nearby .place-card-meta {
  font-size: 12.5px;
  color: #4a7a55;
  font-weight: 600;
  margin-top: 3px;
}

@media (max-width: 700px) {
  .pg-nearby__heading { font-size: 20px; }
  .pg-nearby__tab { font-size: 12.5px; padding: 6px 12px; }
  .pg-nearby__grid { grid-template-columns: 1fr 1fr; gap: 14px; }
}