/* =======================================================================
   page-important-landmarks.css
   Hotel The Black Gold — Important Landmarks page
   v1.0 — Scope: landmark-card distance chip, audience sub-section labels,
   and the card cross-link row. Everything else resolves to utilities in
   global.css. Mirrors the card pattern established on
   page-nearby-attractions.css so the two sibling pages read consistently.
   ======================================================================= */

/* ── Audience sub-section label (Medical / Legal & Administrative /
      Academic / Business & Exhibitions) — a lighter eyebrow above each
      card group so the long grid reads as four scannable clusters. ───── */
.landmarks-group {
  margin-top: 8px;
}
.landmarks-group + .landmarks-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 landmark name; wraps below on narrow cards. ────── */
.landmark-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 1rem;
}
.why-visit strong {
  color: var(--text);
}

/* ── Card action row: a benefit link (left) and/or the "Get Directions"
      button that opens Google Maps in a new tab. Flex so a lone
      Get Directions button still sits flush at the card foot. ───────── */
.card-links {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .65rem;
  font-size: .92rem;
}
.card-links a {
  white-space: nowrap;
}
.directions-link i {
  margin-right: .4rem;
}