/* ═══════════════════════════════════════
   v3 huisstijl — stadspagina's
   Bereikbaar via /geo-optimaliseren-[slug]/. Leunt op v3-gedeeld.css voor de
   hero en op v3-diensten.css voor de secties, de kaartjes en de vragen.
   Hier staat alleen wat alleen op deze pagina's voorkomt.
═══════════════════════════════════════ */

/* ── Marktvragen ──
   Dit is het deel dat per plaats verschilt, dus het mag ook het meest
   opvallen. Als citaat opgemaakt, want het zijn letterlijk de zinnen die
   iemand aan een AI-systeem typt. */
.stad-vragen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px; margin-top: 34px;
}
.stad-vraag {
  padding: 20px 24px; border-radius: 14px;
  background: rgba(255, 255, 255, .026);
  border: 1px solid var(--v3-border);
  border-left: 2px solid var(--v3-cyan);
  font: 400 var(--v3-fs-lead) / 1.55 var(--v3-font);
  color: var(--v3-text-1); text-wrap: pretty;
}
.stad-vraag::before { content: "\201C"; color: var(--v3-cyan); margin-right: 2px; }
.stad-vraag::after  { content: "\201D"; color: var(--v3-cyan); margin-left: 2px; }

/* ── De case ──
   Bij een klant uit de regio zelf blijft de afstandsregel weg. Staat hij er
   wel, dan is dat een bewuste vermelding dat de klant ergens anders zit; die
   hoort dus zichtbaar te zijn en niet weggemoffeld. */
.stad-case { margin-top: 30px; }
.stad-case-kaart {
  margin-top: 26px; padding: 30px 32px; border-radius: 18px;
  background: var(--v3-card-alt);
  border: 1px solid rgba(159, 211, 255, .12);
}
.stad-case-kop strong {
  display: block; font: 700 var(--v3-fs-kop-l) / 1.3 var(--v3-font);
  color: var(--v3-text-1);
}
.stad-case-kop span {
  display: block; margin-top: 4px;
  font: 500 var(--v3-fs-klein) / 1.5 var(--v3-font); color: var(--v3-cyan);
}
.stad-case-afstand {
  display: inline-block; margin-top: 12px; padding: 6px 13px;
  border-radius: var(--v3-r-pill);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  font: 500 var(--v3-fs-klein) / 1.3 var(--v3-font); color: var(--v3-text-3);
}
.stad-case-resultaat {
  margin: 16px 0 0; max-width: 66ch;
  font: 400 var(--v3-fs-body) / 1.7 var(--v3-font); color: var(--v3-text-2);
}
.stad-case-link {
  display: inline-block; margin-top: 16px;
  font: 500 var(--v3-fs-klein) / 1.4 var(--v3-font);
  color: var(--v3-text-1); text-decoration: none;
  border-bottom: 1px solid rgba(159, 211, 255, .3);
  transition: var(--v3-ease);
}
.stad-case-link:hover { color: var(--v3-cyan); border-bottom-color: var(--v3-cyan); }

/* ── Terugverwijzing onderaan ── */
.stad-terug {
  margin: 34px 0 0;
  font: 400 var(--v3-fs-klein) / 1.6 var(--v3-font); color: var(--v3-text-3);
}
.stad-terug a { color: var(--v3-text-2); text-decoration: none; border-bottom: 1px solid rgba(159, 211, 255, .28); }
.stad-terug a:hover { color: var(--v3-cyan); border-bottom-color: var(--v3-cyan); }

@media (max-width: 700px) {
  .stad-vragen { grid-template-columns: 1fr; }
  .stad-case-kaart { padding: 24px 22px; }
}