/* =======================================================================
   page-nearby-attractions.css
   Hotel The Black Gold — Nearby Attractions page
   v1.0 — Scope: attraction-card distance chip, sub-section labels,
   and the "Get Directions" card link. Everything else resolves to
   utilities in global.css.
   ======================================================================= */

/* ── Attraction sub-section label (Icons / More to Explore / Gardens /
      Shopping) — a lighter eyebrow above each card group so the long
      grid reads as four scannable clusters rather than one wall. ────── */
.attractions-group {
  margin-top: 8px;
}
.attractions-group + .attractions-group {
  margin-top: 40px;
}
.group-label {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 2.4vw, 20px);
  color: var(--gold);
  margin: 0 0 14px;
  letter-spacing: .3px;
}

/* ── Distance chip inside a card heading ─────────────────────────────
      Sits beside the attraction name; wraps below on narrow cards. ──── */
.attraction-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
}
.dist-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #141414;
  color: #f3f3f3;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  padding: .2rem .55rem;
  font-family: Lato, sans-serif;
  font-weight: 700;
  font-size: .8rem;
  white-space: nowrap;
}
.dist-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--gold);
  flex: 0 0 auto;
}

/* ── "Why visit" one-liner within a card ─────────────────────────────
      A restrained emphasis line; not a heading, so kept in body flow. ─ */
.why-visit {
  color: #cfcfcf;
  font-size: .92rem;
  margin: 0 0 1.2rem;
}
.why-visit strong {
  color: var(--text);
}

/* ── Card action row: "Get Directions" opens Google Maps in a new tab.
      Reuses .more colour treatment; icon spacing only. ──────────────── */
.directions-link {
  margin-top: auto;
}
.directions-link i {
  margin-right: .4rem;
}