/* Rīga neighbourhood pages. Rides on landing.css for tokens, fonts and both themes — this file
   only lays out the one shape landing.css has no component for: a page whose job is to answer a
   single question and then get out of the way.

   The reading order IS the design: question, one-sentence answer, the four numbers behind it,
   what is on the market, where to go next. Nothing above the answer, because a visitor who
   arrived from a search for "cik maksā dzīvoklis Purvciemā" has already asked; making them
   scroll past a hero to reach their own question is the whole failure mode of SEO landing
   pages. */

.dist-body { background: var(--bg); color: var(--ink); font-family: var(--body); }

.dist-main {
  max-width: 780px;                 /* answer pages are READ — keep the measure near 70ch */
  margin: 0 auto;
  padding: 34px 20px 72px;
  display: flex; flex-direction: column; gap: 40px;
}

.dist-crumb {
  font-size: 13px; color: var(--ink-faint); margin-bottom: 14px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.dist-crumb a { color: var(--ink-soft); text-decoration: none; }
.dist-crumb a:hover, .dist-crumb a:focus-visible { color: var(--accent-2); text-decoration: underline; }

.dist-answer h1 {
  margin: 0 0 14px; font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 5vw, 40px); line-height: 1.1; letter-spacing: -.025em;
  text-wrap: balance;
}
/* The lede carries the number, so it is set larger than body and lighter than a heading —
   quotable on its own, which is exactly what an answer engine lifts. */
.dist-lede { margin: 0; font-size: clamp(18px, 2.4vw, 21px); line-height: 1.5; color: var(--ink); }
.dist-rank { margin: 10px 0 0; font-size: 15px; color: var(--ink-soft); }
.dist-intro { margin: 16px 0 0; font-size: 16px; line-height: 1.65; color: var(--ink-soft); }

.dist-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden;
}
.dstat { background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.dstat-k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.dstat-v {
  font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 620px) { .dist-stats { grid-template-columns: repeat(2, 1fr); } }

.dist-sect h2 {
  margin: 0 0 14px; font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 3vw, 25px); letter-spacing: -.02em; text-wrap: balance;
}
.dist-note { margin: -6px 0 16px; font-size: 14px; color: var(--ink-faint); }
.dist-empty {
  margin: 0; padding: 20px; border: 1px dashed var(--line); border-radius: var(--radius-sm);
  color: var(--ink-soft); font-size: 16px; line-height: 1.6; background: var(--surface-2);
}

.dist-cards { display: flex; flex-direction: column; gap: 8px; }
.dcard {
  display: flex; flex-direction: column; gap: 5px; position: relative;
  padding: 14px 16px; background: var(--surface); color: inherit; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.dcard:hover, .dcard:focus-visible {
  border-color: var(--green-100); transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
@media (prefers-reduced-motion: reduce) { .dcard { transition: none; } .dcard:hover { transform: none; } }
.dcard-top { display: flex; align-items: baseline; gap: 12px; }
.dcard-price {
  font-family: var(--mono); font-weight: 700; font-size: 18px;
  font-variant-numeric: tabular-nums;
}
/* Discount is state, not decoration: below market gets the accent, at-or-above stays neutral so
   a page full of ordinary prices cannot read, at a glance, as a page full of bargains. */
.dcard-deal {
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink-faint);
  padding: 2px 8px; border-radius: 999px; background: var(--bg-soft);
}
.dcard-deal.is-below { color: var(--accent-ink); background: var(--accent-wash); }
.dcard-meta { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* The area on this row is one our own parse flagged as doubtful; the card still shows, because
   hiding it would silently shrink the neighbourhood, but it must not read as a confirmed fact. */
.dcard-warn { position: absolute; top: 12px; right: 14px; font-size: 13px; color: var(--amber); }

.dist-neigh { display: flex; gap: 28px; flex-wrap: wrap; }
.dneigh-col { display: flex; flex-direction: column; gap: 8px; min-width: 190px; }
.dneigh-k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.dneigh-col a {
  color: var(--ink); text-decoration: none; font-size: 16px;
  display: flex; justify-content: space-between; gap: 14px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line-soft);
}
.dneigh-col a span { font-family: var(--mono); font-size: 14px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.dneigh-col a:hover, .dneigh-col a:focus-visible { color: var(--accent-2); }
.dist-all { margin: 18px 0 0; font-size: 15px; }
.dist-all a { color: var(--accent-2); text-decoration: none; }
.dist-all a:hover { text-decoration: underline; }

.dist-cta {
  padding: 26px; border-radius: var(--radius); background: var(--surface-2);
  border: 1px solid var(--line);
}
.dist-cta h2 { margin: 0 0 8px; font-family: var(--display); font-size: 21px; letter-spacing: -.02em; text-wrap: balance; }
.dist-cta p { margin: 0 0 18px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.dcta-btn {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 600; text-decoration: none;
}
.dcta-btn:hover, .dcta-btn:focus-visible { background: var(--accent-2); }

.dist-faq dl { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.dist-faq dt { font-weight: 700; font-size: 17px; color: var(--ink); }
.dist-faq dd { margin: 6px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.65; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }