/* =======================================================================
   page-curated-full-day-itineraries.css
   Hotel The Black Gold — Curated Full-Day Itineraries page
   v1.0 — Scope: the sequenced .itinerary block (head, "who it's for" line,
   ordered stop list with drive-time legs), plus the shared distance chip,
   why-visit/outing-note fine print and card-link row carried over from the
   sibling area pages (page-full-day-outings.css / page-nearby-attractions.css).
   Everything else resolves to utilities in global.css. Unlike the three
   sibling pages this one is sequence-first, not a card grid, so it adds the
   .itinerary component rather than reusing .cards-grid.
   ======================================================================= */

/* ── Itinerary block ─────────────────────────────────────────────────
      Each itinerary is a self-contained sequenced route, stacked full
      width so the ordered stop list reads top-to-bottom. Generous spacing
      between blocks keeps six routes scannable rather than a wall. ───── */
.itinerary {
  border: 1px solid #232323;
  border-radius: 14px;
  background: #0f0f0f;
  padding: clamp(18px, 3vw, 28px);
}
.itinerary + .itinerary {
  margin-top: 28px;
}

/* ── Itinerary head: name + distance chip, then the "who it's for" line ─ */
.itinerary-head {
  margin-bottom: 14px;
}
.itinerary-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin: 0 0 .5rem;
}
.itinerary-for {
  color: #cfcfcf;
  font-size: .92rem;
  margin: 0;
}
.itinerary-for strong {
  color: var(--text);
}

/* ── Distance chip inside an itinerary heading (shared pattern) ─────── */
.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;
}

/* ── Ordered stop list: the sequence itself. A gold-numbered ordered
      list where each row carries a stop name and a muted drive-time /
      context "leg" that wraps below on narrow screens. ──────────────── */
.itinerary-stops {
  list-style: none;
  counter-reset: stop;
  margin: 16px 0;
  padding: 0;
}
.itinerary-stops li {
  counter-increment: stop;
  position: relative;
  padding: 10px 0 10px 40px;
  border-top: 1px solid #1c1c1c;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .75rem;
}
.itinerary-stops li:last-child {
  border-bottom: 1px solid #1c1c1c;
}
.itinerary-stops li::before {
  content: counter(stop);
  position: absolute;
  left: 0;
  top: 9px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--gold);
  color: #111;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: .82rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stop-name {
  font-weight: 700;
  color: var(--text);
}
.stop-leg {
  color: #b8b8b8;
  font-size: .86rem;
}

/* ── Practical note within an itinerary (closures, permits, etiquette).
      Muted fine print above the directions row (shared pattern). ────── */
.outing-note {
  color: #b8b8b8;
  font-size: .86rem;
  margin: 0 0 1rem;
}
.outing-note i {
  color: var(--gold);
  margin-right: .4rem;
}

/* ── Directions row: the "Get Directions" button opening Google Maps in
      a new tab; flush at the block foot (shared pattern). ───────────── */
.card-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .65rem;
  font-size: .92rem;
  margin: 0;
}
.card-links a {
  white-space: nowrap;
}
.directions-link i {
  margin-right: .4rem;
}