/* /:city_slug and /:city_slug/:category_slug — the city front and city section
   pages. Structured like Community Impact's section pages (breadcrumb, title,
   section tab bar, lead + side stack, "the latest" list, numbered pagination)
   but built on the Vox system: these pages render inside
   `.topic-front.city-front`, so the hero/row rules and --tp-* tokens come from
   topic_front.css. This file only adds the city-specific pieces. */

.city-front .ct-main { padding-top: var(--tp-space-24); }

/* breadcrumb */
.city-front .ct-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tp-space-8); color: var(--tp-ink-a70); margin: 0 0 var(--tp-space-16); }
.city-front .ct-crumbs a:hover { color: var(--tp-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.city-front .ct-crumbs [aria-current] { color: var(--tp-ink); font-weight: 600; }

.city-front .ct-dek { margin: var(--tp-space-8) 0 0; max-width: 62ch; font-size: clamp(17px, calc(17px + 0.12vw), 18px); }

/* section tab bar — underlined active tab, scrolls sideways on phones */
.city-front .ct-tabs {
  display: flex; gap: var(--tp-space-24); margin-top: var(--tp-space-24);
  border-bottom: 1px solid var(--tp-border); overflow-x: auto; scrollbar-width: none;
}
.city-front .ct-tabs::-webkit-scrollbar { display: none; }
.city-front .ct-tab {
  flex: none; padding-block: var(--tp-space-12); margin-bottom: -1px; border-bottom: 3px solid transparent;
  font-size: 15px; font-weight: 600; color: var(--tp-ink-a70); white-space: nowrap;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
.city-front .ct-tab:hover { color: var(--tp-ink); }
.city-front .ct-tab[aria-current="page"] { color: var(--tp-ink); border-bottom-color: var(--tp-link); }

.city-front .ct-head + .tp-hero,
.city-front .ct-cta + .tp-hero { margin-top: var(--tp-space-32); }

/* solid pill button — same as homepage .hf-btn */
.city-front .ct-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding-inline: var(--tp-space-24); border-radius: var(--tp-radius-pill);
  background: var(--tp-link); color: var(--tp-white); font-weight: 700; font-size: 15px; white-space: nowrap;
  transition: background-color 150ms ease-out;
}
.city-front .ct-btn:hover { background: var(--tp-link-hover); }

/* membership ask */
.city-front .ct-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tp-space-16);
  margin-top: var(--tp-space-24); padding: var(--tp-space-16) var(--tp-space-24);
  border-radius: var(--tp-radius-control); background: var(--tp-surface-subtle);
}
.city-front .ct-cta p { margin: 0; }
.city-front .ct-cta-h { font-weight: 800; font-size: 17px; }

/* row list additions: a dek under the headline, slightly larger thumbnail */
.city-front .ct-row-dek { margin: 0; font-size: 15px; line-height: 1.45; color: var(--tp-ink-a70); }
@media (min-width: 641px) { .city-front .ct-row-img { width: 160px; aspect-ratio: 16 / 10; } }

.city-front .ct-more { margin-top: var(--tp-space-32); text-align: center; }
.city-front .ct-empty { margin-top: var(--tp-space-40); max-width: 60ch; }
.city-front .ct-empty a { color: var(--tp-link); text-decoration: underline; text-underline-offset: 3px; }

/* numbered pagination */
.city-front .ct-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tp-space-8); margin-top: var(--tp-space-40); }
.city-front .ct-page {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px;
  padding-inline: var(--tp-space-12); border: 1px solid var(--tp-border-field); border-radius: var(--tp-radius-control);
  font-weight: 600; font-size: 15px; color: var(--tp-ink);
}
.city-front .ct-page:hover { background: var(--tp-surface-subtle); }
.city-front .ct-page[aria-current="page"] { background: var(--tp-ink); border-color: var(--tp-ink); color: var(--tp-white); }

/* newsletter band — same surface as the homepage .hf-nlband */
.city-front .ct-nl { background: #d2f4ff; padding-block: var(--tp-space-48); }
.city-front .ct-nl-in { display: grid; gap: var(--tp-space-24); }
@media (min-width: 860px) { .city-front .ct-nl-in { grid-template-columns: minmax(0, 1fr) auto; gap: var(--tp-space-48); align-items: center; } }
.city-front .ct-nl-h {
  margin: 0 0 var(--tp-space-8); font-family: var(--tp-font-editorial); font-weight: 800;
  font-size: clamp(24px, calc(24px + 1vw), 32px); line-height: 1.1; letter-spacing: -0.02em;
}
.city-front .ct-nl .tp-body { margin: 0; }
.city-front .ct-nl-cta { min-height: 52px; padding-inline: var(--tp-space-32); font-size: 17px; }
@media (max-width: 639px) { .city-front .ct-nl-cta { width: 100%; } }

.city-front .ct-nl-issues-h { margin: var(--tp-space-40) 0 var(--tp-space-12); }
.city-front .ct-nl-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tp-space-12); }
@media (min-width: 720px) { .city-front .ct-nl-issues { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.city-front .ct-nl-issues a {
  display: flex; flex-direction: column; gap: var(--tp-space-4); height: 100%;
  padding: var(--tp-space-16); border-radius: var(--tp-radius-control); background: var(--tp-white);
}
.city-front .ct-nl-issue-h { margin: 0; font-weight: 700; line-height: 1.3; }
.city-front .ct-nl-issues a:hover .ct-nl-issue-h { color: var(--tp-link-hover); text-decoration: underline; text-underline-offset: 3px; }

/* a section with a single story has no side stack — keep the lead at a readable width */
.city-front .tp-hero-main:only-child { flex: 0 1 760px; }