/* rr-editorial.css — the editorial page system, shared.
   Editorial collections, creator collections and city pages all load this
   file, so their mosaic, rows, filmstrips and browse header are one set of
   rules rather than three lookalikes. Moved verbatim out of
   travel-creators.css; that file is loaded just before this one on the
   editorial and creator pages, so the cascade there is unchanged. */

/* ═══════════════════════════════════════════════════════════════════
   EDITORIAL DISCOVERY — trending mosaic + creators row + browse header
   (destinations-style patterns, namespaced tc- to avoid collisions)
   ═══════════════════════════════════════════════════════════════════ */

.tc-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #0066ff, #c27aff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.tc-eyebrow.light {
  background: none;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.82);
  color: rgba(255, 255, 255, 0.82);
}

/* ── Section shell + heads ─────────────────────────────────────────── */
.tc-discover { padding: 40px 0 12px; }
.tc-discover-inner,
.tc-row-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.tc-discover-head { margin: 6px 0 22px; }
.tc-discover-title {
  margin: 8px 0 0;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #000e33;
  line-height: 1.04;
}
.tc-discover-sub {
  margin: 10px 0 0;
  font-size: 1.06rem;
  color: #545459;
  max-width: 580px;
}

/* ── Trending collections mosaic ───────────────────────────────────── */
.tc-mosaic {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.tc-mosaic-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  height: 250px;
  flex: 1 1 300px;
  cursor: pointer;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 10px 26px rgba(0, 14, 51, 0.14);
  transition: transform 0.24s cubic-bezier(.2,.7,.2,1), box-shadow 0.24s ease;
}
.tc-mosaic-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(0, 14, 51, 0.26);
}
.tc-mosaic-card:focus-visible {
  outline: 3px solid #6a5bff;
  outline-offset: 3px;
}
.tc-mosaic-card.hero { flex: 1 1 100%; height: 400px; }
.tc-mosaic-card.size-lg { flex-grow: 2.4; flex-basis: 420px; }
.tc-mosaic-card.size-md { flex-grow: 1; flex-basis: 300px; }
.tc-mosaic-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 1.1s ease;
  z-index: -2;
}
.tc-mosaic-card:hover .tc-mosaic-bg { transform: scale(1.09); }
.tc-mosaic-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,14,51,0.34) 0%, rgba(0,14,51,0.02) 22%, rgba(0,14,51,0) 48%, rgba(0,14,51,0.86) 100%);
}

/* Top bar — fills the previously-blank top with a count/label + Explore pill */
.tc-mosaic-top {
  position: absolute;
  top: 16px;
  left: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tc-mosaic-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.tc-mosaic-tag.featured {
  background: linear-gradient(135deg, #0066ff, #c27aff);
  border-color: transparent;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tc-mosaic-explore {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tc-mosaic-card:hover .tc-mosaic-explore {
  background: linear-gradient(135deg, #0066ff, #c27aff);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
.tc-mosaic-explore i { font-size: 0.72rem; transition: transform 0.2s ease; }
.tc-mosaic-card:hover .tc-mosaic-explore i { transform: translateX(3px); }
.tc-mosaic-body { padding: 22px 22px 20px; width: 100%; }
.tc-mosaic-count {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.86);
  margin-bottom: 6px;
}
.tc-mosaic-title {
  margin: 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.28rem;
  line-height: 1.12;
  text-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
.tc-mosaic-title.xl { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.tc-mosaic-meta {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.9);
  font-size: 0.92rem;
  font-weight: 500;
}
/* Gradient ring around the featured-collection creator pic */
.tc-mosaic-avatar {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  padding: 2px;
  display: inline-flex;
  background: linear-gradient(135deg, #0066ff, #c27aff);
}
.tc-mosaic-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f3e8ff 0%, #ddd6fe 100%);
  color: #000e33;
  font-size: 0.6rem;
  font-weight: 700;
}
.tc-mosaic-avatar-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-mosaic-card.hero .tc-mosaic-avatar { width: 32px; height: 32px; }
.tc-mosaic-card.hero .tc-mosaic-avatar-inner { font-size: 0.72rem; }
.tc-mosaic-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.24s ease, transform 0.24s ease;
}
.tc-mosaic-card:hover .tc-mosaic-cta { opacity: 1; transform: translateY(0); }
.tc-mosaic-cta.solid {
  opacity: 1;
  transform: none;
  background: #fff;
  color: #000e33;
  padding: 9px 16px;
  border-radius: 999px;
}
.tc-mosaic-cta i { transition: transform 0.24s ease; }
.tc-mosaic-card:hover .tc-mosaic-cta i { transform: translateX(4px); }

/* ── Creators people are following (full-bleed filmstrip) ──────────── */
.tc-creators-row { margin-top: 40px; }
.tc-row-head {
  max-width: 1200px;
  margin: 0 auto 18px;
  padding: 0 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.tc-row-title {
  margin: 6px 0 0;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #000e33;
  line-height: 1.05;
}
.tc-row-nav { display: flex; gap: 8px; flex: 0 0 auto; }
.tc-row-arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0,14,51,0.14);
  background: #fff;
  color: #000e33;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,14,51,0.08);
  transition: background 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
.tc-row-arrow:hover { background: #f4f5fb; transform: translateY(-1px); }
.tc-row-arrow.disabled { opacity: 0.35; pointer-events: none; }
.tc-creators-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 24px 8px var(--tc-rail-gutter);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tc-creators-track::-webkit-scrollbar { display: none; }
/* ── Rail gutters ──────────────────────────────────────────────────────────
   Two things were wrong with where these rails start.

   scroll-snap-type:x mandatory plus scroll-snap-align:start on the cards made
   the browser snap the first card to the scrollport's own edge the moment the
   track laid out — so every rail opened already scrolled by exactly its own
   left padding (measured: scrollLeft 24 against padding-left 24px), and the
   first card sat flush against the window with its rounded corner on the
   boundary. scroll-padding-left tells snapping where the start edge really
   is, which keeps the snap the arrow buttons rely on and gives the padding
   back.

   And the padding was a flat 24px while .tc-row-head is max-width:1200px with
   margin auto and 24px of its own, so above 1248px the heading sat further in
   than the cards under it — 64 against 24 at 1280. The gutter below is that
   same geometry, so a rail begins under the first letter of its title.
   ───────────────────────────────────────────────────────────────────────── */
.tc-creators-track,
.tc-city-track,
.tc-vibe-track,
.tc-recs-track {
  --tc-rail-gutter: max(24px, calc((100% - 1200px) / 2 + 24px));
  scroll-padding-left: var(--tc-rail-gutter);
}

.tc-creator-card {
  flex: 0 0 190px;
  width: 190px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid rgba(0,14,51,0.08);
  border-radius: 20px;
  padding: 22px 16px 18px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,14,51,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tc-creator-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0,14,51,0.14);
}
/* Gradient ring around the profile pic (matches the site's creator tiles) */
.tc-creator-avatar {
  width: 78px; height: 78px;
  margin: 0 auto 12px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #0066ff, #c27aff);
  box-shadow: 0 6px 16px rgba(0, 102, 255, 0.22);
}
.tc-creator-avatar-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f3e8ff 0%, #ddd6fe 100%);
  color: #000e33;
  font-weight: 700;
  font-size: 1.4rem;
}
.tc-creator-avatar-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tc-creator-name {
  font-weight: 700;
  color: #000e33;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-creator-loc {
  margin-top: 3px;
  color: #6b7280;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-creator-stats {
  margin-top: 10px;
  color: #545459;
  font-size: 0.82rem;
  font-weight: 500;
}
.tc-creator-cta {
  display: inline-block;
  margin-top: 14px;
  padding: 7px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0066ff, #c27aff);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}

/* ── Browse-all header (search + toggle live below it) ─────────────── */
/* Full-width gradient band, centered content — copied from destinations */
.tc-browse-head {
  text-align: center;
  padding: 60px 24px 34px;
  margin-top: 44px;
  border-top: 1px solid rgba(0, 14, 51, 0.07);
  background: linear-gradient(180deg, #ffffff 0%, #f7f6fd 100%);
}
.tc-browse-head > * {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.tc-browse-title {
  margin: 8px auto 0;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #000e33;
}
.tc-browse-sub {
  margin: 8px auto 0;
  font-size: 1.05rem;
  color: #6b7280;
}

/* Sort sits inside the band, pushed all the way to the right edge */
.tc-sort-bar {
  max-width: none;
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 640px) {
  .tc-discover { padding: 26px 0 8px; }
  .tc-discover-inner, .tc-row-inner, .tc-browse-head { padding: 0 16px; }
  .tc-mosaic-card { height: 210px; flex-basis: 240px; }
  .tc-mosaic-card.hero { height: 320px; }
  .tc-creators-track { padding: 4px 16px 8px; }
  .tc-creator-card { flex-basis: 168px; width: 168px; }
  .tc-row-arrow { display: none; }
}

/* ── Recs creators are saving (individual place filmstrip, dest-places style) ─ */
.tc-recs-track {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Starts under its own heading and bleeds off the right, so at rest it
     reads as ordinary padded content and only runs off once you scroll it.
     It used to sit flush at x=0 while the title above it was inset. */
  padding: 2px 0 10px var(--tc-rail-gutter);
}
.tc-recs-track::-webkit-scrollbar { display: none; }
.tc-rec-card {
  position: relative;
  flex: 0 0 250px;
  width: 250px;
  height: 320px;
  scroll-snap-align: start;
  border-radius: 0;
  overflow: hidden;
  background: #000;
  text-decoration: none;
  transition: transform 0.22s ease;
}
.tc-rec-card:hover { transform: scale(1.02); z-index: 2; }
.tc-rec-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.35s ease;
}
.tc-rec-card:hover .tc-rec-bg { transform: scale(1.035); }
.tc-rec-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.84) 0%, rgba(0,0,0,0.48) 45%, rgba(0,0,0,0.08) 100%);
}
.tc-rec-cat {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  min-height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
}
.tc-rec-bottom {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  color: #fff;
  text-align: left;
}
.tc-rec-name {
  margin: 0 0 6px;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-rec-saved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-rec-saved i {
  font-size: 0.8rem;
  background: linear-gradient(135deg, #3a86ff, #c27aff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (max-width: 768px) {
  .tc-rec-card { flex-basis: 200px; width: 200px; height: 280px; }
  .tc-rec-name { font-size: 1.2rem; }
}

/* Header removed from the discovery section — tighten top spacing, keep an
   accessible/SEO-only h1. */
.tc-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.tc-discover { padding-top: 40px; }
@media (max-width: 640px) { .tc-discover { padding-top: 26px; } }

/* Follow / Following button on the "Creators people are following" cards.
   Overrides the global icon-only-circle .roamer-follow-btn base (which uses
   !important) to render a labelled pill instead. */
.roamer-follow-btn.tc-follow-btn {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  font-size: 0.85rem !important;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #0066ff, #c27aff);
  transition: filter 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 6px 16px rgba(0, 102, 255, 0.22);
}
.roamer-follow-btn.tc-follow-btn span { display: inline !important; }
.roamer-follow-btn.tc-follow-btn:hover { filter: brightness(1.05); }
.roamer-follow-btn.tc-follow-btn i { font-size: 0.82rem !important; color: #fff; }
.roamer-follow-btn.tc-follow-btn.following {
  background: #fff;
  color: #000e33;
  border: 1px solid rgba(0, 14, 51, 0.16);
  box-shadow: none;
}
.roamer-follow-btn.tc-follow-btn.following i { color: #000e33; }
.roamer-follow-btn.tc-follow-btn.following:hover {
  background: #fff5f5;
  border-color: rgba(220, 38, 38, 0.4);
  color: #dc2626;
}
.roamer-follow-btn.tc-follow-btn.following:hover i { color: #dc2626; }

/* Clickable creator name (+ avatar) in mosaic cards → profile */
.tc-mosaic-creator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.tc-mosaic-creator-name { font-weight: 600; }
.tc-mosaic-creator:hover .tc-mosaic-creator-name { text-decoration: underline; }
.tc-mosaic-place { color: rgba(255, 255, 255, 0.72); }

/* Rec cards are now <div> (so "Saved by" can be its own link) */
.tc-rec-card { cursor: pointer; }
a.tc-rec-saved { text-decoration: none; transition: color 0.15s ease; }
a.tc-rec-saved:hover { color: #fff; }
a.tc-rec-saved .tc-rec-saved-name { text-decoration: none; }
a.tc-rec-saved:hover .tc-rec-saved-name { text-decoration: underline; }

/* ── Browse search + controls (destinations dest-search-wrap style) ──────── */
.tc-search-wrap {
  max-width: 600px;
  margin: 24px auto 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid rgba(0, 14, 51, 0.12);
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: 0 20px 50px rgba(0, 14, 51, 0.08), 0 2px 6px rgba(0, 14, 51, 0.05);
  transition: box-shadow 0.2s ease;
}
.tc-search-wrap:focus-within {
  box-shadow: 0 24px 60px rgba(0, 14, 51, 0.12), 0 0 0 3px rgba(106, 91, 255, 0.16);
}
.tc-search-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0066ff, #c27aff);
  color: #fff;
  font-size: 0.85rem;
}
.tc-input-field-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.tc-search-wrap .rotating-placeholder {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa0b5;
  font-size: 1rem;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
.tc-search-wrap #searchInput {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 5px 0;
  font-size: 1rem;
  color: #000e33;
  font-family: inherit;
}

.tc-sort-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #6b7280;
}
.tc-sort-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0, 14, 51, 0.14);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23000e33' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  border-radius: 999px;
  padding: 8px 32px 8px 15px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #000e33;
  font-family: inherit;
  cursor: pointer;
}
.tc-sort-select:hover { border-color: rgba(75, 91, 213, 0.35); }

/* ═══ EDITORIAL DISCOVERY — browse-by-city + browse-by-vibe + scope chip ═══ */
.tc-city-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tc-city-track::-webkit-scrollbar { display: none; }
/* The vibes wrap rather than scroll. There are at most eight, they are a
   filter rather than something to browse, and a second scroller inside the
   same block would have been competing with the city rail's arrows. */
.tc-vibe-track {
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
}

/* By-city cards — the same editorial tile the rest of this page uses.
   .collection-card and .tc-rec-card are both border-radius:0 with no gap
   between them; these were 230x150 rounded cards on a 14px gap, floating over
   the page while everything around them sat flush. Now they match .tc-rec-card
   exactly: 250x320, square corners, touching, and the same scale-on-hover
   rather than a lift-and-shadow that only works on a detached card. */
.tc-city-track { gap: 0; padding: 4px 0 8px var(--tc-rail-gutter); }
.tc-city-card {
  position: relative;
  flex: 0 0 250px;
  width: 250px;
  height: 320px;
  scroll-snap-align: start;
  border: none;
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  isolation: isolate;
  background: #000;
  transition: transform 0.22s ease;
}
.tc-city-card:hover { transform: scale(1.02); z-index: 2; }
.tc-city-bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transform: scale(1.02); transition: transform 0.9s ease;
}
.tc-city-card:hover .tc-city-bg { transform: scale(1.035); }
.tc-city-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0,0,0,0.84) 0%, rgba(0,0,0,0.48) 45%, rgba(0,0,0,0.08) 100%);
}
.tc-city-body { position: absolute; left: 14px; right: 14px; bottom: 14px; text-align: left; color: #fff; }
.tc-city-name {
  font-size: 1.4rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1.05;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tc-city-count { font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,0.88); margin-top: 6px; }

/* By-vibe filter chips */
.tc-vibe-track { gap: 8px; padding: 0 var(--tc-rail-gutter) 16px; }
/* A chip, not a tile: the city rail below is the thing you browse, this is
   how you filter it. 160x110 cards made two filters look like two shelves. */
.tc-vibe-card {
  position: relative;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 14, 51, 0.14);
  border-radius: 999px;
  cursor: pointer;
  background: #fff;
  color: #000e33;
  padding: 8px 14px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 14, 51, 0.06);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.tc-vibe-card:hover {
  border-color: rgba(0, 102, 255, 0.45);
  background: #f7f9ff;
  box-shadow: 0 8px 20px rgba(0, 14, 51, 0.10);
}
.tc-vibe-icon {
  font-size: 0.82rem; line-height: 1; width: 15px; text-align: center;
  color: #6a5bff; transition: color 0.18s ease;
}
.tc-vibe-card:hover .tc-vibe-icon { color: #0066ff; }
.tc-vibe-name { font-size: 0.86rem; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
/* Inline now the chip is one line — it was absolutely positioned into the
   top-right corner of a 160x110 card. */
.tc-vibe-count {
  font-size: 0.72rem; font-weight: 700; color: #6b7280;
  background: #f1f2f8; border-radius: 999px; padding: 1px 7px;
}

/* Active scope filter chip — lives in the browse band (centered) */
.tc-scope-chip-wrap { margin-top: 14px; }
.tc-scope-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid rgba(0,14,51,0.14);
  border-radius: 999px; padding: 7px 8px 7px 15px;
  font-size: 0.9rem; font-weight: 600; color: #000e33;
  box-shadow: 0 6px 16px rgba(0,14,51,0.08);
}
.tc-scope-kind { color: #6b7280; font-weight: 600; text-transform: lowercase; }
.tc-scope-clear {
  border: none; background: #f1f2f8; color: #000e33;
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; transition: background 0.15s ease;
}
.tc-scope-clear:hover { background: #e2e4f0; }

@media (max-width: 640px) {
  .tc-city-track { padding: 4px 0 8px var(--tc-rail-gutter); }
  .tc-vibe-track { padding: 0 var(--tc-rail-gutter) 14px; }
  .tc-city-card { flex-basis: 200px; width: 200px; height: 260px; }
  .tc-city-name { font-size: 1.2rem; }
}