/* /:slug cross-city section page (/business-development) — section bar,
   featured story, city filter chips and card grid (see the bottom of this
   file). Scoped under .topic-front so it never leaks onto other pages.

   The --tp-* tokens and the hero/row rules (.tp-hero*, .tp-row*, .tp-kicker,
   .tp-latest-h) are also used by the city pages, which render inside
   `.topic-front.city-front` (see city_front.css). */

.topic-front {
  --tp-ink: #212121;
  --tp-ink-a70: rgba(33, 33, 33, 0.7);
  --tp-ink-a50: rgba(33, 33, 33, 0.5);
  --tp-ink-a10: rgba(33, 33, 33, 0.1);
  --tp-white: #ffffff;
  --tp-link: #216bff;
  --tp-link-hover: #0054fc;
  --tp-border: var(--tp-ink-a10);
  --tp-border-field: var(--tp-ink-a50);
  --tp-surface-subtle: #eef2f6;
  --tp-font-primary: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tp-font-editorial: 'Bricolage Grotesque', Inter, system-ui, sans-serif;
  --tp-space-4: 4px;
  --tp-space-8: 8px;
  --tp-space-12: 12px;
  --tp-space-16: 16px;
  --tp-space-24: 24px;
  --tp-space-32: 32px;
  --tp-space-40: 40px;
  --tp-space-48: 48px;
  --tp-space-section-spacious: clamp(64px, calc(64px + 9.7vw), 144px);
  --tp-radius-pill: 9999px;
  --tp-radius-control: 6px;
  --tp-chip: #2c3a4f;
  --tp-chip-hover: #1c2737;
  --tp-surface-blue: #d2f4ff;

  color: var(--tp-ink);
  font-family: var(--tp-font-primary);
  background: var(--tp-white);
}

.topic-front .tp-edge { max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.topic-front .tp-c-primary { color: var(--tp-ink); }
.topic-front .tp-c-secondary { color: var(--tp-ink-a70); }
.topic-front .tp-body { color: var(--tp-ink-a70); }
.topic-front .tp-metadata { font-size: 13px; font-weight: 500; }
.topic-front .tp-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tp-ink-a70); }
.topic-front a { color: inherit; text-decoration: none; }

.topic-front .tp-page { padding-block: var(--tp-space-40) var(--tp-space-section-spacious); }
.topic-front .tp-display-lg {
  font-family: var(--tp-font-editorial); font-weight: 800; letter-spacing: -0.04em; line-height: 1.02;
  font-size: clamp(30px, calc(30px + 2vw), 48px); margin: var(--tp-space-8) 0 0;
}
.topic-front .tp-page > .tp-body { margin-top: var(--tp-space-8); font-size: clamp(17px, calc(17px + 0.12vw), 18px); }

/* hero: big lead story + stacked sidebar of the next 3 */
.topic-front .tp-hero { display: flex; flex-direction: column; gap: var(--tp-space-32); margin-top: var(--tp-space-24); }
@media (min-width: 860px) { .topic-front .tp-hero { flex-direction: row; align-items: flex-start; } }

.topic-front .tp-hero-main { flex: 1 1 62%; min-width: 0; }
.topic-front .tp-hero-main a { display: flex; flex-direction: column; gap: var(--tp-space-16); }
.topic-front .tp-hero-img { margin: 0; aspect-ratio: 16/10; border-radius: var(--tp-radius-control); overflow: hidden; background: var(--tp-surface-subtle); }
.topic-front .tp-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.topic-front .tp-hero-h {
  font-family: var(--tp-font-editorial); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(26px, calc(26px + 1.6vw), 40px); line-height: 1.05; margin: 0;
}
.topic-front .tp-hero-dek { margin: 0; font-size: 17px; color: var(--tp-ink-a70); }
.topic-front .tp-hero-main a:hover .tp-hero-h { color: var(--tp-link-hover); text-decoration: underline; text-underline-offset: 3px; }

.topic-front .tp-hero-side { flex: 1 1 38%; min-width: 0; list-style: none; margin: 0; padding: 0; }
.topic-front .tp-hero-side-item + .tp-hero-side-item { border-top: 1px solid var(--tp-border); }
.topic-front .tp-hero-side-item a { display: flex; align-items: flex-start; gap: var(--tp-space-16); padding-block: var(--tp-space-16); }
.topic-front .tp-hero-side-item:first-child a { padding-top: 0; }
.topic-front .tp-hero-side-body { display: flex; flex-direction: column; gap: var(--tp-space-4); flex: 1 1 auto; min-width: 0; }
.topic-front .tp-hero-side-h { font-size: 16px; line-height: 1.25; font-weight: 700; margin: 0; }
.topic-front .tp-hero-side-img { flex: none; width: 88px; aspect-ratio: 1/1; border-radius: var(--tp-radius-control); overflow: hidden; background: var(--tp-surface-subtle); margin: 0; }
.topic-front .tp-hero-side-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.topic-front .tp-hero-side-item a:hover .tp-hero-side-h { color: var(--tp-link-hover); text-decoration: underline; text-underline-offset: 3px; }

/* "THE LATEST IN <county>" section label above the row list */
.topic-front .tp-latest-h {
  margin: var(--tp-space-48) 0 0; padding-bottom: var(--tp-space-16); border-bottom: 2px solid var(--tp-ink);
  font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em;
}

/* flat list, like Vox's "THE LATEST IN ..." rail: consistent layout (kicker,
   headline, dek) with a fixed small thumbnail on the right — no alternating
   sides, so the list reads as one steady column instead of a zigzag. */
.topic-front .tp-row-list { list-style: none; margin: 0; padding: 0; }
.topic-front .tp-row { border-top: 1px solid var(--tp-border); }
.topic-front .tp-row a {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--tp-space-24);
  padding-block: var(--tp-space-16);
}
.topic-front .tp-row-body { display: flex; flex-direction: column; gap: var(--tp-space-8); flex: 1 1 auto; min-width: 0; }
.topic-front .tp-row-img { flex: none; width: 96px; aspect-ratio: 1 / 1; border-radius: var(--tp-radius-control); overflow: hidden; background: var(--tp-surface-subtle); margin: 0; }
.topic-front .tp-row-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.topic-front .tp-kicker { font-size: 13px; font-weight: 600; color: var(--tp-ink-a70); margin: 0; }
.topic-front .tp-row-h {
  font-family: var(--tp-font-editorial); font-weight: 800; letter-spacing: -0.01em;
  font-size: clamp(17px, calc(17px + 0.3vw), 20px); line-height: 1.2; margin: 0;
}
.topic-front .tp-row a:hover .tp-row-h { color: var(--tp-link-hover); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .topic-front .tp-row-img { width: 76px; aspect-ratio: 1/1; }
}

.topic-front [hidden] { display: none !important; }

/* ---- section page ---------------------------------------------------- */

/* section bar: every beat, current one underlined */
.topic-front .tp-sections { border-bottom: 1px solid var(--tp-border); }
.topic-front .tp-sections-row { display: flex; gap: var(--tp-space-24); overflow-x: auto; scrollbar-width: none; }
.topic-front .tp-sections-row::-webkit-scrollbar { display: none; }
.topic-front .tp-section {
  flex: none; padding-block: var(--tp-space-16) var(--tp-space-12); 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;
}
.topic-front .tp-section:hover { color: var(--tp-ink); }
.topic-front .tp-section[aria-current="page"] { color: var(--tp-ink); border-bottom-color: var(--tp-link); }

.topic-front .tp-head .tp-body { margin: var(--tp-space-8) 0 0; font-size: clamp(17px, calc(17px + 0.12vw), 18px); }

/* city label + date line used by the feature and the cards */
.topic-front .tp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tp-space-8); margin: 0; font-size: 13px; font-weight: 600; color: var(--tp-ink-a70); }
.topic-front .tp-city { color: var(--tp-link); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 12px; }

/* featured story: one wide panel, image left / copy right on desktop */
.topic-front .tp-feature { margin-top: var(--tp-space-32); }
.topic-front .tp-feature-link {
  display: grid; overflow: hidden; border-radius: 10px; background: var(--tp-surface-subtle);
}
@media (min-width: 860px) { .topic-front .tp-feature-link { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.topic-front .tp-feature-img { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--tp-surface-subtle); }
.topic-front .tp-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease-out; }
.topic-front .tp-feature-body { display: flex; flex-direction: column; justify-content: center; gap: var(--tp-space-12); padding: var(--tp-space-24); }
@media (min-width: 860px) { .topic-front .tp-feature-body { padding: var(--tp-space-40); } }
.topic-front .tp-feature-h {
  margin: 0; font-family: var(--tp-font-editorial); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(26px, calc(22px + 1.4vw), 38px); line-height: 1.05;
}
.topic-front .tp-feature-dek { margin: 0; font-size: 17px; line-height: 1.5; color: var(--tp-ink-a70); }
.topic-front .tp-feature-cta { margin-top: var(--tp-space-4); font-weight: 700; color: var(--tp-link); }
.topic-front .tp-feature-link:hover .tp-feature-h { text-decoration: underline; text-underline-offset: 4px; }
.topic-front .tp-feature-link:hover .tp-feature-img img { transform: scale(1.03); }

/* city filter chips: solid fills so they read on white */
.topic-front .tp-filter { margin-top: var(--tp-space-48); padding-top: var(--tp-space-16); border-top: 2px solid var(--tp-ink); }
.topic-front .tp-filter .tp-label { margin: 0 0 var(--tp-space-12); }
.topic-front .tp-filter-chips { display: flex; flex-wrap: wrap; gap: var(--tp-space-8); }
.topic-front .tp-fchip {
  display: inline-flex; align-items: center; gap: var(--tp-space-8); min-height: 38px; padding-inline: var(--tp-space-16);
  border: 0; border-radius: var(--tp-radius-pill); background: var(--tp-chip); color: var(--tp-white);
  font: 600 15px/1 var(--tp-font-primary); cursor: pointer; transition: background-color 150ms ease-out;
}
.topic-front .tp-fchip:hover { background: var(--tp-chip-hover); }
.topic-front .tp-fchip[aria-pressed="true"] { background: var(--tp-link); }
.topic-front .tp-fchip[aria-pressed="true"]:hover { background: var(--tp-link-hover); }
.topic-front .tp-fchip-n { font-weight: 500; opacity: 0.75; font-size: 13px; }
.topic-front .tp-fchip:focus-visible { outline: 2px solid var(--tp-link); outline-offset: 2px; }

.topic-front .tp-status { margin: var(--tp-space-16) 0 0; min-height: 1.2em; font-size: 14px; font-weight: 600; color: var(--tp-ink-a70); }

/* card grid */
.topic-front .tp-cards {
  list-style: none; margin: var(--tp-space-16) 0 0; padding: 0;
  display: grid; gap: var(--tp-space-40) var(--tp-space-24); grid-template-columns: 1fr;
}
@media (min-width: 640px) { .topic-front .tp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .topic-front .tp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.topic-front .tp-card a { display: flex; flex-direction: column; gap: var(--tp-space-12); }
.topic-front .tp-card-img { margin: 0 0 var(--tp-space-4); aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--tp-surface-subtle); }
.topic-front .tp-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease-out; }
.topic-front .tp-card-h {
  margin: 0; font-family: var(--tp-font-editorial); font-weight: 800; letter-spacing: -0.01em;
  font-size: clamp(19px, calc(18px + 0.3vw), 22px); line-height: 1.15;
}
.topic-front .tp-card-dek {
  margin: 0; font-size: 15px; line-height: 1.45; color: var(--tp-ink-a70);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.topic-front .tp-card a:hover .tp-card-h { color: var(--tp-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.topic-front .tp-card a:hover .tp-card-img img { transform: scale(1.03); }

/* solid pill button (same as homepage .hf-btn) */
.topic-front .tp-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding-inline: var(--tp-space-24); border: 0; border-radius: var(--tp-radius-pill);
  background: var(--tp-link); color: var(--tp-white); font: 700 15px/1.25 var(--tp-font-primary);
  white-space: nowrap; cursor: pointer; transition: background-color 150ms ease-out;
}
.topic-front .tp-btn:hover { background: var(--tp-link-hover); }
.topic-front .tp-more { margin-top: var(--tp-space-48); text-align: center; }

/* newsletter band (same surface as the homepage .hf-nlband) */
.topic-front .tp-nl { background: var(--tp-surface-blue); }
.topic-front .tp-nl-in { display: grid; gap: var(--tp-space-24); padding-block: var(--tp-space-48); }
@media (min-width: 860px) { .topic-front .tp-nl-in { grid-template-columns: minmax(0, 1fr) auto; gap: var(--tp-space-48); align-items: center; } }
.topic-front .tp-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;
}
.topic-front .tp-nl .tp-body { margin: 0; }
.topic-front .tp-nl-cta { min-height: 52px; padding-inline: var(--tp-space-32); font-size: 17px; }
@media (max-width: 639px) { .topic-front .tp-nl-cta { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .topic-front .tp-feature-img img, .topic-front .tp-card-img img { transition: none; }
  .topic-front .tp-feature-link:hover .tp-feature-img img, .topic-front .tp-card a:hover .tp-card-img img { transform: none; }
}