/* ============================================================
   FairRoofQuote.com — city.css
   Location pages: /roofing-quotes, state pages, city pages.
   Loaded after main.css (and estimate.css on city pages).
   Prose-first sections, so long-form text reads like the guides.
   ============================================================ */

/* Readable prose column inside the wider estimate layout */
.city-prose {
  max-width: 760px;
  margin: 0 auto;
}

.city-prose p {
  font-size: 15px;
  color: var(--ink-mid);
  line-height: 1.75;
  margin-bottom: 16px;
}

.city-prose p:last-child { margin-bottom: 0; }

.city-prose a { color: var(--forest); font-weight: 500; }

.city-prose a.btn,
.city-prose a.btn:hover { color: #fff; }

.city-prose .section-heading { margin-bottom: 18px; }

.city-prose .material-table-wrap { margin: 24px 0; }

.city-note {
  font-size: 13px !important;
  color: var(--ink-light) !important;
  line-height: 1.6 !important;
}

.city-inline-cta { margin-top: 24px; }

/* Hub and state pages: plain hero without the calculator */
.city-hero {
  background: var(--surface);
  padding: 56px 24px 48px;
  border-bottom: 1px solid var(--border);
}

.city-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}

.city-hero h1 {
  font-size: 38px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 16px;
}

.city-hero p {
  font-size: 17px;
  color: var(--ink-mid);
  line-height: 1.65;
  margin-bottom: 14px;
}

.city-hero p:last-child { margin-bottom: 0; }

.city-hero a { color: var(--forest); font-weight: 500; }

/* Location links: reuse .related-tile, laid out to fit any count */
.city-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.city-state-block + .city-state-block { margin-top: 40px; }

.city-state-block h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.city-state-block h3 a { color: var(--ink); }

@media (max-width: 768px) {
  .city-hero { padding: 40px 20px 36px; }
  .city-hero h1 { font-size: 28px; }
  .city-hero p { font-size: 16px; }
}