/* ==========================================================================
   page-lijst.css : lijstpagina's met zoekbalk, resultaten en sticky kaart, ontwerp opus:
   /installateur-in-{stad}, /{cat}-installateur(/{stad}), /{cat}-installateur/{merk} en /zoeken.
   Opmaakblokken in components/opus-lijst/ (design-voltoo.md §9.24).
   Alleen wat specifiek is voor deze pagina; componenten komen uit voltoo-ui.css.
   ========================================================================== */

/* Kop met zoekbalk en filters: compacter dan een gewone hero */
.vt-hero--list { padding-bottom: var(--space-24); }
.vt-hero--list .vt-sub { margin-top: var(--space-12); }
.vt-hero--list .vt-sub strong { font-weight: 700; }

/* Resultaten */
.vt-results { padding-bottom: var(--space-64); }
.vt-results .vt-results-bar { margin-top: 0; }
.vt-results .vt-pagination { margin-top: var(--space-24); }

/* Lege staat (filters leveren niets op) */
.vt-empty p { max-width: 44em; }
.vt-empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-16); }

/* Stadsinformatie met review ernaast */
.vt-intro-aside { align-self: start; }
.vt-prose .vt-h3 { margin-top: var(--space-32); }

/* Populaire installaties + uitgelichte installateurs */
.vt-stad-blok + .vt-stad-blok { margin-top: var(--space-64); padding-top: var(--space-64); border-top: 1px solid var(--vt-line); }
.vt-stad-blok-link { margin-top: var(--space-16); }
.vt-stad-landelijk { margin-top: var(--space-16); font-size: 15px; line-height: 1.6; color: var(--color-text-soft); }   /* links naar de vijf categoriepagina's */
.vt-tabs--links { margin-bottom: 0; }
.vt-ranks--card { margin-top: 0; padding: 8px 20px; background: var(--color-surface); border: 1px solid var(--vt-line); border-radius: var(--radius); }

/* In de buurt sluit aan op de kostenband; handig om te weten op de buurt-sectie */
.vt-articles { padding-bottom: var(--space-64); }

@media (max-width: 1024px) {
  .vt-results-map-col { order: -1; }
}
@media (max-width: 768px) {
  .vt-stad-blok + .vt-stad-blok { margin-top: var(--space-48); padding-top: var(--space-48); }
  .vt-stad-blok .vt-full-md + .vt-full-md { margin-top: var(--space-24); }
  .vt-ranks--card { padding: 4px 12px; }
}

/* ── Informatie over de dienst (categoriepagina): blogopmaak links, meescrollende kolom rechts ── */
.vt-catinfo-aside { grid-column: 9 / span 4; }
.vt-catinfo-sticky { position: sticky; top: calc(var(--vt-header-h) + 24px); display: flex; flex-direction: column; gap: 16px; }

/* Blog: zelfde tekstritme als een artikel (17px/1.75, korte alinea's, duidelijke tussenkoppen) */
.vt-blog > .vt-h2 { margin-bottom: var(--space-24); }
.vt-blog p { margin-top: 0; margin-bottom: 18px; font-size: 17px; line-height: 1.75; max-width: 40em; }
.vt-blog p.vt-blog-lead { margin-bottom: 22px; font-size: 20px; line-height: 1.55; font-weight: 600; }
.vt-blog .vt-blog-h { margin: 44px 0 14px; padding-top: 28px; border-top: 1px solid var(--vt-line); font: 700 25px/1.25 var(--h2-font); letter-spacing: var(--letter-spacing); }
.vt-blog a { color: var(--color-text); text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color var(--vt-t); }
.vt-blog a:hover { color: var(--color-accent); }
.vt-blog .amount { font-weight: 700; }

/* Kaarten in de zijkolom */
.vt-side-card { padding: 24px; background: var(--color-surface); border: 1px solid var(--vt-line-strong); border-radius: var(--radius); }
.vt-side-title { font: 700 21px/1.25 var(--h2-font); letter-spacing: var(--letter-spacing); }
.vt-side-sub { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--color-text-soft); }
.vt-ranks--side { margin-top: 12px; }
.vt-ranks--side .vt-rank { gap: 12px; padding: 10px 4px; }
.vt-ranks--side .vt-rank-num { width: 14px; font-size: 14px; }
.vt-ranks--side .vt-rank-thumb { width: 56px; height: 42px; }
.vt-ranks--side .vt-rank-link { font-size: 15px; }
.vt-ranks--side .vt-rank-place { font-size: 13px; }
.vt-side-btn { width: 100%; margin-top: 16px; }
.vt-side-link { margin-top: 14px; font-size: 14px; }
.vt-side-prices { margin-top: 14px; }
.vt-side-prices > div { padding: 12px 0; border-top: 1px solid var(--vt-line); }
.vt-side-prices dt { font-size: 14px; line-height: 1.4; }
.vt-side-prices dd { margin: 2px 0 0; font: 700 18px/1.3 var(--h2-font); }

@media (max-width: 1024px) {
  .vt-catinfo-aside { grid-column: 1 / -1; margin-top: var(--space-48); }
  .vt-catinfo-sticky { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 768px) {
  .vt-catinfo-sticky { grid-template-columns: minmax(0, 1fr); }
  .vt-blog p { font-size: 16px; }
  .vt-blog p.vt-blog-lead { font-size: 18px; }
  .vt-blog .vt-blog-h { font-size: 21px; margin-top: 36px; padding-top: 24px; }
}

/* ── Merkpagina: logo naast de titel ── */
.vt-hero-brand { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-32); }
/* Logovak even hoog als één regel van de H1 (font-size x 1.15), logo daarin gecentreerd: lijnt uit op de titel */
.vt-hero-logo { flex-shrink: 0; width: auto; max-width: 180px; height: calc(48px * 1.15); object-fit: contain; object-position: right center; }

/* ── Blog: link naar het volledige artikel, foto, citaat, voor- en nadelen ── */
.vt-blog p.vt-blog-more { margin-top: 4px; }
.vt-blog a.vt-link { text-decoration: underline; text-decoration-style: solid; }
.vt-blog-figure { margin: var(--space-32) 0; overflow: hidden; border-radius: var(--radius); background: var(--color-bg-medium); }
.vt-blog-figure img { display: block; width: 100%; height: auto; }
.vt-blog-quote { margin: var(--space-32) 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--color-text); }   /* zoals het citaat in een artikel */
.vt-blog .vt-blog-quote p { margin: 0; font: italic 400 24px/1.45 var(--font-body); max-width: 32em; }
.vt-proscons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-24); }
.vt-proscons-col { padding: 20px 22px; background: var(--color-surface); border: 1px solid var(--vt-line-strong); border-radius: var(--radius); }
.vt-proscons-title { font: 700 18px/1.3 var(--h2-font); letter-spacing: var(--letter-spacing); }
.vt-proscons-list { margin: 12px 0 0; padding: 0; list-style: none; }
.vt-proscons-list li { position: relative; padding: 10px 0 10px 28px; border-top: 1px solid var(--vt-line); font-size: 16px; line-height: 1.55; }
.vt-proscons-list li:first-child { border-top: 0; }
.vt-proscons-list li::before { position: absolute; left: 0; top: 9px; width: 18px; font: 700 18px/1.4 var(--font-body); text-align: center; }
.vt-proscons-list--plus li::before { content: "+"; }
.vt-proscons-list--min li::before { content: "\2212"; }

/* ── Merkpagina: gebruikersreview met score ── */
.vt-merk-review .vt-prose p strong { font-weight: 700; }
.vt-merk-score { grid-column: 9 / span 4; align-self: start; }
.vt-merk-score-num { font: 400 16px/1.3 var(--font-body); }
.vt-merk-score-num strong { margin-right: 4px; font: 700 44px/1 var(--h2-font); letter-spacing: var(--letter-spacing); }
.vt-merk-score .vt-stars { margin-top: 12px; }
.vt-merk-score-label { margin-top: 12px; }

/* ── Twee uitgelichte bedrijven (merk, /zoeken) ── */
.vt-nearby + .vt-top2 { padding-top: 0; }   /* na "in de buurt" (zelfde achtergrond) geen dubbele ruimte */
.vt-top2 + .vt-articles { padding-top: 0; }
.vt-top2-cards { margin-top: var(--space-32); row-gap: var(--space-24); list-style: none; padding: 0; }
.vt-top2-cards > li { display: flex; min-width: 0; }
.vt-top2-cards .vt-rcard { flex: 1; }

@media (max-width: 1024px) {
  .vt-merk-score { grid-column: 1 / -1; margin-top: var(--space-32); }
}
@media (max-width: 768px) {
  .vt-hero-logo { max-width: 96px; height: calc(36px * 1.15); }   /* H1 is hier 36px (voltoo-ui.css) */
  .vt-proscons { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
  .vt-blog .vt-blog-quote p { font-size: 20px; }
  .vt-blog-quote { padding-left: 18px; }
}
@media (max-width: 480px) {
  .vt-hero-logo { height: calc(30px * 1.15); }   /* H1 is hier 30px */
}

/* ── Richtprijzen + offerte-ingang boven de dienstinformatie (categoriepagina, components/opus-lijst/prijsband.php) ── */
.vt-prijsband-card { margin-bottom: var(--space-64); display: flex; gap: var(--space-32); align-items: center; padding: 24px 28px; background: var(--color-surface); border: 1px solid var(--vt-line-strong); border-radius: var(--radius); }
.vt-prijsband-main { flex: 1 1 auto; min-width: 0; }
.vt-prijsband-title { font: 700 21px/1.25 var(--h2-font); letter-spacing: var(--letter-spacing); }
.vt-prijsband-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 24px; margin: 16px 0 0; }
.vt-prijsband-list > div { padding-top: 12px; border-top: 1px solid var(--vt-line); }
.vt-prijsband-list dt { font-size: 14px; line-height: 1.4; }
.vt-prijsband-list dd { margin: 4px 0 0; font: 700 18px/1.3 var(--h2-font); white-space: nowrap; }
.vt-prijsband-note { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--color-text-soft); }
.vt-prijsband-cta { flex: 0 0 260px; display: flex; flex-direction: column; gap: 12px; padding-left: var(--space-32); border-left: 1px solid var(--vt-line); }
.vt-prijsband-cta-text { font-size: 15px; line-height: 1.5; }
.vt-prijsband-cta .vt-btn { width: 100%; }

@media (max-width: 1024px) {
  .vt-prijsband-card { flex-direction: column; align-items: stretch; }
  .vt-prijsband-cta { flex-basis: auto; padding: var(--space-24) 0 0; border-left: 0; border-top: 1px solid var(--vt-line); }
}
@media (max-width: 768px) {
  .vt-prijsband-card { padding: 20px; margin-bottom: var(--space-48); }
  .vt-prijsband-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vt-prijsband-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 10px; }
  .vt-prijsband-list dd { margin: 0; font-size: 16px; }
  .vt-prijsband-list > div:nth-child(n+3) { display: none; }   /* mobiel: de twee gangbare prijzen; de rest via het kostenartikel */
}

/* Merken op de resultaatkaart (categoriepagina) */
.vt-rcard-merken { font-size: 14px; line-height: 1.45; }
.vt-rcard-merken-label { font-weight: 600; }

/* Redactie, datum en bronnen onder de dienstinformatie */
.vt-blog .vt-blog-meta { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--vt-line); }
.vt-blog .vt-blog-meta p { margin-bottom: 8px; font-size: 14px; line-height: 1.6; color: var(--color-text-soft); }
.vt-blog .vt-blog-bronnen span { font-weight: 600; color: var(--color-text); }

/* Zo werkt de Voltoo Score (components/voltoo-score-uitleg.php): kop als gewone sectiekop */
.cat-page .section-voltoo-score { padding: var(--vt-section-y) 0 !important; }
.cat-page .vs-explainer-title { font: var(--h2-weight) 28px/1.3 var(--h2-font); text-transform: none; letter-spacing: var(--letter-spacing); }
@media (max-width: 768px) { .cat-page .vs-explainer-title { font-size: 24px; } }