/* The public Dutch city leaderboards (/nl/ai-aanbevolen/, order 020), on
   top of marketing-theme.css. Phone first. Small grey text uses --muted
   (about 11:1 on the cards), never dimmer. Gold stays for the call to
   action only: nobody on these lists is "you", so the bars are muted, as
   on /nl/makelaars/. */
.lb-wrap { max-width: 760px; padding-bottom: 24px; }

.lb-crumbs { font-size: 0.85rem; color: var(--muted); margin: 20px 0 0; }
.lb-crumbs a { color: var(--muted); }
.lb-crumbs [aria-current] { color: var(--ink); }

.lb-head { padding: 24px 0 28px; }
.lb-head h1 { font-size: clamp(1.9rem, 1.5rem + 2.2vw, 2.9rem); line-height: 1.1; font-weight: 600; margin: 12px 0 14px; }
.lb-head .lead { color: var(--muted); font-size: 1.08rem; margin: 0 0 14px; }
.lb-meta { font-size: 0.88rem; color: var(--muted); margin: 0; }
.lb-note { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-bright); background: var(--surface-2); font-size: 0.92rem; }

.lb-card { background: var(--surface-1); border: 1px solid var(--line-bright); border-radius: 16px; padding: 18px; margin: 0 0 20px; }
.lb-label { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin: 0 0 14px; }
.lb-foot { margin: 14px 0 0; font-size: 0.86rem; color: var(--muted); }
.lb-center { text-align: center; margin: 8px auto 28px; max-width: 60ch; }

.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.lb-list li { display: grid; grid-template-columns: 2em 1fr; gap: 10px; align-items: start; }
.lb-rank { font-family: var(--font-mono); font-size: 0.95rem; color: var(--muted); padding-top: 2px; text-align: right; }
.lb-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lb-name { font-weight: 600; overflow-wrap: anywhere; }
.lb-name a { color: var(--ink); text-decoration-color: var(--muted); text-underline-offset: 3px; }
.lb-count { font-family: var(--font-mono); font-size: 0.86rem; color: var(--muted); white-space: nowrap; }
.lb-bar { display: block; height: 8px; margin: 8px 0 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.lb-bar span { display: block; height: 100%; width: calc(var(--share) * 100%); background: var(--muted); border-radius: 999px; }
.lb-by { margin: 0; font-size: 0.84rem; color: var(--muted); }
.lb-maps { white-space: nowrap; }
.lb-by .lb-maps { margin-left: 6px; }

.lb-maps-only ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lb-maps-only li { display: flex; justify-content: space-between; gap: 12px; }

.lb-correct { border: 1px dashed var(--line-bright); border-radius: 14px; padding: 16px 18px; margin: 0 0 8px; }
.lb-correct h2 { font-size: 1.05rem; margin: 0 0 6px; }
.lb-correct p { color: var(--muted); margin: 0 0 10px; font-size: 0.92rem; }
/* Removal and correction: two links to the contact form (order 024). */
.lb-contact-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.lb-contact-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.lb-cta { text-align: center; padding: 40px 0 20px; }
.lb-cta h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.15; margin: 0 0 10px; }
.lb-cta p { color: var(--muted); max-width: 46ch; margin: 0 auto 20px; }
.lb-cta .hero-note { color: var(--muted); margin: 12px auto 0; }
.lb-cta-more { margin-top: 12px; }

.lb-section { padding: 28px 0 8px; }
.lb-section h2 { font-size: 1.35rem; margin: 0 0 12px; }
.lb-question-list { margin: 0; padding-left: 22px; display: grid; gap: 8px; color: var(--ink); }
.lb-method { margin: 0; padding-left: 20px; color: var(--muted); display: grid; gap: 8px; }
.lb-promise { margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 0.94rem; }
.lb-promise strong { color: var(--ink); }
.lb-section .faq { max-width: none; }

.lb-links { padding: 28px 0 8px; }
.lb-links .lb-label { margin-top: 18px; }
.lb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.lb-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-bright); border-radius: 999px; text-decoration: none; color: var(--ink); background: var(--surface-1); }
.lb-chips a:hover { border-color: var(--muted); }

.lb-cities { display: grid; gap: 14px; margin: 0 0 20px; }
.lb-city { display: block; background: var(--surface-1); border: 1px solid var(--line-bright); border-radius: 16px; padding: 18px; color: var(--ink); text-decoration: none; }
.lb-city:hover { border-color: var(--muted); }
.lb-city h2 { font-size: 1.25rem; margin: 0 0 10px; }
.lb-city ol { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.lb-city li span:first-child { margin-right: 8px; }
.lb-more { color: var(--accent); font-weight: 600; font-size: 0.92rem; }

.lb-trades { display: grid; gap: 4px; }
.lb-trade h2 { font-size: 1.3rem; margin: 0 0 12px; text-align: left; }
.lb-trade h2 a { color: var(--ink); }

@media (min-width: 700px) {
  .lb-card { padding: 24px; }
  .lb-cities { grid-template-columns: 1fr 1fr; }
}