/* City page v2 - docs/design/pages-h/W1_City.html (desktop) and W1_City_m.html (phones), visual system H.
   Depends on tokens.css + components.css (+ theme-velvet.css when ui:Theme = velvet). Tokens only: no colour literals. */

/* ---- Category tab bar (the category pages' bar; "Latest" is the active tab here) ------------------------ */
.cg-cats { background: var(--ground); border-bottom: 1px solid var(--border); }
.cg-cats__in { display: flex; align-items: center; gap: 16px; }
.cg-cats__list { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cg-cats__list::-webkit-scrollbar { display: none; }
.cg-body a.cg-cat { flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 76px; padding: 12px 14px 10px;
  border-bottom: 3px solid transparent; color: var(--ink-caption); font-size: 14px; font-weight: var(--w-strong); }
.cg-body a.cg-cat:hover { color: var(--ink); border-bottom-color: var(--border); }
.cg-body a.cg-cat[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }
.cg-body a.cg-mapview { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: var(--radius-pill);
  background: var(--surface-soft); color: var(--ink); font-size: 15px; font-weight: var(--w-strong); white-space: nowrap; }
.cg-body a.cg-mapview:hover { background: var(--surface-warm-strong); color: var(--ink); }
.cg-cats--phone { display: none; }

/* ---- Page ------------------------------------------------------------------------------------------------ */
.cg-citypage { display: flex; flex-direction: column; gap: 40px; padding-block: 18px 64px; }
.cg-citypage > .cg-crumbs { margin-bottom: -22px; }
.cg-citypage h1 { font: italic var(--w-regular) 56px/1 var(--font-display); letter-spacing: -.015em; overflow-wrap: anywhere; }
.cg-h3 { font: italic var(--w-regular) 30px/1.05 var(--font-display); }
.cg-h2__count { font: var(--w-strong) 16px/1 var(--font-sans); color: var(--ink-caption); white-space: nowrap; }
[data-theme="velvet"] .cg-citypage h1, [data-theme="velvet"] .cg-h3, [data-theme="velvet"] .cg-stat__n, [data-theme="velvet"] .cg-dblock__d { color: var(--heading); }
.cg-csec { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ---- Header: copy + stats | small map ---------------------------------------------------------------------- */
.cg-chead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38%); gap: 32px; align-items: stretch; }
.cg-chead--nomap { grid-template-columns: minmax(0, 1fr); }
.cg-chead__main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.cg-chead__bar { display: flex; align-items: center; gap: 10px; }
.cg-chead__title { min-width: 0; }
.cg-chead__round, .cg-chead__sub { display: none !important; }
.cg-cintro { margin: 0; max-width: 680px; font-size: 17px; line-height: 1.6; color: var(--ink-muted); overflow-wrap: anywhere; }
.cg-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.cg-stat, .cg-body a.cg-stat { display: flex; flex-direction: column; gap: 4px; min-width: 150px; padding: 14px 20px; border-radius: var(--radius-l); background: var(--surface); color: var(--ink); }
.cg-stat__l { font-size: 13px; font-weight: var(--w-strong); color: var(--ink-caption); white-space: nowrap; }
.cg-stat__n { font: italic var(--w-regular) 40px/1 var(--font-display); }
.cg-stat__s { font-size: 13px; color: var(--ink-muted); white-space: nowrap; }
.cg-stat--live { background: var(--live-tint); }
.cg-stat--live .cg-stat__l, .cg-stat--live .cg-stat__s { color: var(--on-live); }
.cg-body a.cg-stat--link:hover { background: var(--surface-warm-strong); color: var(--ink); }
.cg-body .cg-stat--link .cg-stat__s { color: var(--link); font-weight: var(--w-strong); }
.cg-cmap { height: 100%; min-height: 280px; max-height: 340px; }

/* ---- Browse: the categories with their place counts ---------------------------------------------------------- */
.cg-browse { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -12px; }
.cg-body a.cg-browse__item { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 14px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); font-size: 15px; white-space: nowrap; }
.cg-body a.cg-browse__item:hover { border-color: var(--ink-caption); color: var(--ink); }
.cg-browse__item .cg-icon { color: var(--ink-caption); }
.cg-browse__n { color: var(--ink-caption); font-size: 13px; font-weight: var(--w-strong); }

/* ---- Cards (Commented this week / Recently verified) -------------------------------------------------------- */
.cg-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cg-body a.cg-cc { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--ink); }
.cg-body a.cg-cc--text { gap: 4px; padding: 14px 16px; border-radius: var(--radius-l); background: var(--surface); }
.cg-cc__media { position: relative; display: block; height: 170px; border-radius: var(--radius-l); overflow: hidden; background: var(--surface-soft); margin-bottom: 4px; }
.cg-cc__media--short { height: 150px; }
.cg-cc__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cg-cc__media--none { display: flex; align-items: center; justify-content: center; color: var(--ink-caption); background: var(--surface-warm); }
.cg-cc__chip { position: absolute; left: 12px; top: 12px; z-index: 2; padding: 5px 10px; font-size: 12px; }
.cg-cc__name { font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.cg-cc:hover .cg-cc__name { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.cg-cc__meta { font-size: 14px; color: var(--ink-caption); }
.cg-cc__q { font-size: 14px; line-height: 1.5; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cg-cc__desc { font-size: 14px; line-height: 1.5; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cg-cc__q b { color: var(--ink); }

/* ---- Members | latest comments --------------------------------------------------------------------------------- */
.cg-crow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: start; }
.cg-crow__a { grid-column: span 5; min-width: 0; }
.cg-crow__b { grid-column: span 7; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cg-clist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cg-clist li { display: flex; gap: 14px; padding: 14px 18px; border-radius: var(--radius-l); background: var(--surface); }
.cg-clist__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cg-clist__who { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 14px; color: var(--ink-caption); }
.cg-clist__who strong { color: var(--ink); }
.cg-clist__who a { font-weight: var(--w-strong); }
.cg-clist__text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-muted); overflow-wrap: anywhere; white-space: pre-line; }

/* ---- Coming up (events) ------------------------------------------------------------------------------------------ */
.cg-citypage .cg-events-s { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cg-citypage .cg-events { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cg-crow__b .cg-events { grid-template-columns: minmax(0, 1fr); }
.cg-body a.cg-event { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: var(--radius-l); background: var(--surface); color: var(--ink); min-width: 0; }
.cg-body a.cg-event:hover { box-shadow: 0 0 0 1.5px var(--border); color: var(--ink); }
.cg-dblock { flex: none; width: 58px; padding: 8px 0 7px; border-radius: var(--radius-m); background: var(--surface-warm-strong); display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1; }
.cg-dblock__w, .cg-dblock__m { font-size: 11px; font-weight: var(--w-strong); letter-spacing: .06em; color: var(--ink-muted); }
.cg-dblock__d { font: italic var(--w-regular) 28px/1.05 var(--font-display); color: var(--ink); }
.cg-event > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cg-event__name { font-weight: var(--w-strong); font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.cg-event__meta { font-size: 13px; color: var(--ink-caption); }

/* ---- Nearby cities | Stay | Sponsored ------------------------------------------------------------------------------ */
.cg-ctrio { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: start; }
.cg-panel { padding: 24px; border-radius: var(--radius-xl); background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.cg-nearcities ul { list-style: none; margin: 0; padding: 0; }
.cg-body a.cg-crow2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 0; color: var(--ink); border-top: 1px solid var(--surface-divider); }
.cg-nearcities li:first-child a.cg-crow2 { border-top: 0; }
.cg-crow2 > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cg-crow2 strong { font-size: 16px; }
.cg-body a.cg-crow2:hover strong { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.cg-crow2__m { font-size: 13px; color: var(--ink-caption); }
.cg-ctrio__ad, .cg-ctrio__stay, .cg-ctrio__members { min-width: 0; }
.cg-city-spons .cg-sponsored__creative { min-height: 0; }

/* Phones-only parts are hidden on desktop */
.cg-tabs, .cg-mappill { display: none; }

@media (max-width: 1180px) and (min-width: 901px) {
  .cg-citypage h1 { font-size: 46px; }
  .cg-chead { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); gap: 24px; }
  .cg-grid4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cg-grid4 > :nth-child(n+7) { display: none; }
  .cg-crow { gap: 24px; }
  .cg-crow__a, .cg-crow__b { grid-column: span 6; }
  .cg-citypage .cg-events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Phones (W1_City_m) ----------------------------------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.cg-page-city .cg-top { display: none; }
  nav.cg-cats:not(.cg-cats--phone) { display: none; }
  .cg-cats--phone { display: block; border-bottom: 0; background: transparent; }
  .cg-citypage { gap: 22px; padding-block: 0 24px; }
  .cg-citypage > .cg-crumbs { display: none; }
  /* the header dissolves so its sticky top block stays pinned for the whole page */
  .cg-chead, .cg-chead__main { display: contents; }

  /* Top block: back · country and place count over the H1 · map, then the category tabs */
  .cg-chead__top { position: sticky; top: 0; z-index: 950; margin-inline: calc(-1 * var(--gutter)); padding: 12px var(--gutter) 0;
    padding-top: calc(12px + env(safe-area-inset-top, 0px)); background: var(--surface); box-shadow: var(--shadow-card); border-radius: 0 0 var(--radius-l) var(--radius-l); }
  .cg-chead__bar { gap: 10px; }
  .cg-chead__round { display: inline-flex !important; }
  .cg-chead__title { flex: 1; }
  .cg-chead__sub { display: block !important; margin: 0 0 2px; font-size: 13px; font-weight: var(--w-strong); color: var(--ink-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cg-citypage h1 { font-size: 26px; line-height: 1.05; }
  .cg-cats--phone .cg-cats__list { margin-inline: calc(-1 * var(--gutter)); padding-inline: 8px; }
  .cg-body .cg-cats--phone a.cg-cat { min-width: 64px; padding: 8px 10px 6px; }

  .cg-cintro { font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .cg-stats { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 6px; margin-top: 0; }
  .cg-stat, .cg-body a.cg-stat { min-width: 0; padding: 10px 12px; gap: 2px; border-radius: var(--radius-m); }
  .cg-stat__l { font-size: 12px; }
  .cg-stat__n { font-size: 30px; }
  .cg-stat__s { font-size: 12px; white-space: normal; }
  .cg-cmap { display: none; }
  .cg-browse { display: none; }

  .cg-h2 { font-size: 30px; }
  .cg-h2__count { font-size: 13px; }
  .cg-grid4 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cg-grid4 > :nth-child(n+5) { display: none; }
  .cg-cc__media, .cg-cc__media--short { height: 190px; }
  .cg-crow { display: flex; flex-direction: column; gap: 22px; }
  .cg-citypage .cg-events { grid-template-columns: minmax(0, 1fr); }
  .cg-clist li { padding: 12px 14px; gap: 10px; }
  .cg-ctrio { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cg-panel { padding: 18px; border-radius: var(--radius-l); }

  .cg-body a.cg-mappill { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 990; display: inline-flex; align-items: center; gap: 8px;
    height: 48px; padding: 0 20px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: var(--w-strong); white-space: nowrap; box-shadow: var(--shadow-primary); }
  .cg-body a.cg-mappill:hover { background: var(--accent-hover); color: var(--on-accent); }
  body.cg-gate-open .cg-mappill { display: none; }

  /* Bottom tab bar */
  .cg-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    padding: 6px 8px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-radius: var(--radius-l) var(--radius-l) 0 0; box-shadow: var(--shadow-sheet); }
  .cg-body .cg-tabs a, .cg-tabs button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px;
    border: 0; background: none; padding: 0; color: var(--ink-caption); font-size: 13px; font-weight: var(--w-strong); }
  body.cg-page-city .cg-footer .cg-wrap { padding-bottom: calc(24px + 76px + env(safe-area-inset-bottom, 0px)); }
  body.cg-gate-open .cg-tabs { display: none; }
}

@media (max-width: 400px) {
  .cg-stat__n { font-size: 26px; }
  .cg-stat__l { font-size: 11px; }
}