/* ===========================================================================
   DonnieDoet — blog
   Bouwt voort op styles.css en pagina.css; hier alleen wat het blog nodig heeft.

   De opbouw volgt wat het onderzoek opleverde: het antwoord staat bovenaan en
   apart (daar plukken zoekmachines en antwoordmachines uit), de kop van elke
   sectie is de vraag zoals mensen hem intikken, en onderaan staan de
   vervolgvragen los opgemaakt zodat ze als vraag-en-antwoord te herkennen zijn.
   =========================================================================== */

/* ------------------------------------------------------------- overzicht */
.blog-lijst { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 8px; }

.blog-kaart {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--rand); border-radius: 16px;
  padding: 26px 26px 24px; text-decoration: none; color: inherit;
  transition: border-color .14s, transform .14s;
}
.blog-kaart:hover { border-color: var(--paars); transform: translateY(-2px); }
.blog-kaart .kicker {
  font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--paars); margin-bottom: 12px;
}
.blog-kaart h3 {
  margin: 0 0 10px; font-size: 21px; font-weight: 800; letter-spacing: -.022em;
  line-height: 1.22; text-wrap: balance;
}
.blog-kaart p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: rgba(36,28,61,.68); }
.blog-kaart .voet {
  margin-top: auto; font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px; color: rgba(36,28,61,.5);
  display: flex; gap: 14px; flex-wrap: wrap;
}

.binnenkort {
  border: 1px dashed var(--rand); border-radius: 16px; padding: 26px;
  background: transparent;
}
.binnenkort .kicker {
  font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: rgba(36,28,61,.45); margin-bottom: 12px;
}
.binnenkort ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.binnenkort li { font-size: 15px; line-height: 1.5; color: rgba(36,28,61,.68); }

/* --------------------------------------------------------------- artikel */
.artikel { max-width: 100%; }
.artikel-kolom { max-width: 68ch; }

.artikel-meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0;
  font-family: ui-monospace, Menlo, monospace; font-size: 11.5px;
  color: rgba(246,243,234,.55);
}
.artikel-meta b { color: var(--bone); font-weight: 500; }

/* Het korte antwoord: los blok, direct onder de kop. */
.kort-antwoord {
  background: #fff; border: 1px solid var(--rand); border-left: 5px solid var(--paars);
  border-radius: 12px; padding: 24px 26px; margin: 0 0 36px;
}
.kort-antwoord .label {
  font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--paars); display: block; margin-bottom: 10px;
}
.kort-antwoord p { margin: 0; font-size: 17.5px; line-height: 1.55; }
.kort-antwoord strong { font-weight: 700; }

.artikel h2 {
  margin: 52px 0 14px; font-size: clamp(22px, 2.6vw, 28px); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.2; text-wrap: balance; max-width: 24ch;
}
.artikel h3 { margin: 32px 0 8px; font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.artikel p { margin: 0 0 16px; font-size: 16.5px; line-height: 1.68; color: rgba(36,28,61,.82); }
.artikel a { color: var(--paars); }
.artikel ul.punten { margin: 0 0 18px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.artikel ul.punten li { font-size: 16.5px; line-height: 1.6; color: rgba(36,28,61,.82); }

/* Beeld: eigen tekeningen, met onderschrift. */
figure { margin: 34px 0; }
figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rand); border-radius: 12px; background: var(--bone);
}
figcaption {
  margin-top: 10px; font-size: 13px; line-height: 1.55;
  color: rgba(36,28,61,.58); max-width: 60ch;
}

/* Tabel met de tarieven. */
.tabel-rol { overflow-x: auto; margin: 26px 0; }
table.tarieven { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 460px; }
table.tarieven th {
  text-align: left; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px;
  letter-spacing: 1.2px; text-transform: uppercase; color: rgba(36,28,61,.55);
  font-weight: 500; padding: 0 18px 10px 0; border-bottom: 2px solid var(--inkt);
}
table.tarieven th.rechts, table.tarieven td.rechts { text-align: right; padding-right: 0; }
table.tarieven td { padding: 13px 18px 13px 0; border-bottom: 1px solid var(--rand); }
table.tarieven td.bedrag {
  font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums;
  font-weight: 600; white-space: nowrap;
}

/* Eerlijk-blok: wanneer wij het niet zijn. */
.eerlijk-blok {
  background: var(--geel-vlak, #FBEFC6); border: 1px solid var(--geel-rand);
  border-radius: 12px; padding: 24px 26px; margin: 34px 0;
}
.eerlijk-blok h3 { margin: 0 0 10px; }
.eerlijk-blok p:last-child { margin-bottom: 0; }

/* Vervolgvragen. */
.vraag {
  border-top: 1px solid var(--rand); padding: 22px 0 4px;
}
.vraag h3 { margin: 0 0 8px; font-size: 17.5px; }
.vraag p { margin: 0 0 12px; }

/* Bronnenlijst. */
.bronnen { margin: 34px 0 0; padding: 22px 0 0; border-top: 1px solid var(--rand); }
.bronnen h3 { margin: 0 0 12px; font-size: 15px; }
.bronnen ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.bronnen li { font-size: 14px; line-height: 1.55; color: rgba(36,28,61,.65); }

/* Zachte verwijzing naar het product, onderaan. */
.artikel-slot {
  margin-top: 44px; background: var(--inkt); color: var(--bone);
  border-radius: 16px; padding: 32px 34px;
}
.artikel-slot h3 { margin: 0 0 10px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--bone); }
.artikel-slot p { margin: 0 0 20px; color: rgba(246,243,234,.72); font-size: 16px; line-height: 1.6; max-width: 52ch; }
.artikel-slot .btn-groot { display: inline-block; }

@media (max-width: 760px) {
  .blog-lijst { grid-template-columns: 1fr; }
  .artikel h2 { margin-top: 40px; }
  .kort-antwoord { padding: 20px; }
  .kort-antwoord p { font-size: 16.5px; }
  .artikel-slot { padding: 26px 22px; }
}