/* =========================================================================
   INZICHTEN (08-09-2026): het overzicht, een artikel en het blok op de homepage.

   Eigen bestand, alleen geladen waar berichten staan (inc/inzichten.php), na
   vesmo-paginas.css en vesmo-home.css: de kop van een artikel is de paginakop
   van de site (.vs-pkop) en het blok op de homepage gebruikt de sectiekop
   (.vs-skop) en de tekstlink (.vs-tlink). Tokens en letters komen uit blok 1 en
   2 van vesmo-style.css. Maat en regelafstand van de lopende tekst staan op de
   container en niet op de p (valkuil 30).

   RONDE 2 (08-09-2026, keuzes van Daan op schetsen): de rijen zijn bandrijen
   (nummer bij de titel, meta rechts, beeld als vierde kolom), de artikelkop is
   de paginakop, onder een artikel staan twee rijen en de verwijzing naar het
   overzicht, en op een telefoon geeft van twee buren met dezelfde achtergrond
   alleen de bovenste ruimte. Elke sectie hier heeft padding aan beide kanten of
   een last-child-reset: een marge die naar buiten collapst wordt een zwarte
   band (valkuil 33).
   ========================================================================= */

/* --- het overzicht ---------------------------------------------------------- */

/* De kop draagt de naad naar de lijst (110, 80 onder 991: dezelfde maat als
   .vs-notitie en .vs-tegels). */
.vs-inzichten-kop {
  padding-bottom: 110px;
  background-color: var(--vs-wit);
}

.vs-inzichten-lijst {
  padding: 0 var(--vs-kant) var(--vs-sectie);
  background-color: var(--vs-wit);
}

.vs-inzichten {
  border-top: 1px solid var(--vs-line);
}

/* De bandrij. Grid-areas, zodat een rij zonder nummer of zonder beeld niet in
   de verkeerde kolom valt. */
.vs-inzicht {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 260px;
  grid-template-areas: "nr tekst meta beeld";
  gap: 32px;
  align-items: start;
  padding: 34px 0;
  border-bottom: 1px solid var(--vs-line);
}

.vs-inzicht__nr {
  grid-area: nr;
  margin: 0;
  color: var(--vs-accent);
}

.vs-inzicht__tekst {
  grid-area: tekst;
  min-width: 0;
}

.vs-inzicht__titel {
  margin: 0 0 12px;
  font-family: var(--vs-kop);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--vs-ink);
}

/* Dezelfde groeiende onderlijn als .vs-link, zonder het blokje. */
.vs-inzicht__titel a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .35s var(--vs-ease);
}

.vs-inzicht__titel a:hover,
.vs-inzicht__titel a:focus-visible {
  background-size: 100% 1px;
}

.vs-inzicht__zin {
  margin: 0;
  max-width: 520px;
  font-family: var(--vs-body);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vs-tekst);
}

.vs-inzicht__meta {
  grid-area: meta;
  margin: 0;
  text-align: right;
  white-space: nowrap;
}

.vs-inzicht__meta > * + *::before {
  content: '\00B7';
  margin: 0 6px;
}

.vs-inzicht__beeld {
  grid-area: beeld;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--vs-radius);
  background-color: var(--vs-papier);
}

.vs-inzicht__beeld img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Compact, "Verder lezen" onder een artikel: datum en leestijd links, de titel
   rechts; geen nummer, geen zin, geen beeld. */
.vs-inzichten--compact .vs-inzicht {
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-areas: "meta tekst";
  gap: 24px;
  padding: 18px 0;
}

.vs-inzichten--compact .vs-inzicht__meta {
  text-align: left;
}

.vs-inzichten--compact .vs-inzicht__titel {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
}

.vs-inzichten__paginering ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.vs-inzichten__paginering a,
.vs-inzichten__paginering span {
  color: var(--vs-tekst);
  text-decoration: none;
}

.vs-inzichten__paginering a:hover,
.vs-inzichten__paginering a:focus-visible,
.vs-inzichten__paginering .current {
  color: var(--vs-ink);
}

.vs-inzichten__leeg {
  margin: 40px 0 0;
  font-family: var(--vs-body);
  font-size: 18px;
  color: var(--vs-tekst);
}

/* --- een artikel ---------------------------------------------------------- */

/* De kop is .vs-pkop uit vesmo-paginas.css (150 boven, 110 onder 991); de
   sectie zelf draagt alleen de onderkant. De 72 is de naad naar "Verder lezen"
   en tegelijk de grendel van valkuil 33. */
.vs-artikel {
  padding: 0 0 72px;
  background-color: var(--vs-wit);
}

/* De metaregel staat in de intro van de paginakop; die zet zijn p op 19px,
   daarom hier met drie klassen terug naar mono. */
.vs-artikel .vs-pkop__intro .vs-artikel__meta {
  margin: 18px 0 0;
  font-family: var(--vs-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--vs-tekst);
}

.vs-artikel__meta > * + *::before {
  content: '\00B7';
  margin: 0 8px;
}

.vs-artikel__lijf {
  padding: 72px var(--vs-kant) 0;
}

.vs-artikel__beeld {
  margin: 0 0 56px;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  border-radius: var(--vs-radius);
  background-color: var(--vs-papier);
}

.vs-artikel__beeld img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Links uitgelijnd onder de titel, niet gecentreerd. */
.vs-artikel__kolom {
  max-width: 680px;
  margin: 0;
}

.vs-artikel__tekst {
  font-family: var(--vs-body);
  font-size: 18px;
  line-height: var(--vs-regel);
  letter-spacing: 0;
  color: var(--vs-ink);
}

.vs-artikel__tekst p {
  margin: 0 0 var(--vs-alinea);
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-wrap: pretty;
}

/* Wat er ook als laatste staat (p, ul, h2, figure): geen marge eruit. */
.vs-artikel__tekst > :last-child {
  margin-bottom: 0;
}

.vs-artikel__tekst h2 {
  margin: 52px 0 14px;
  font-family: var(--vs-kop);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--vs-ink);
}

.vs-artikel__tekst h3 {
  margin: 40px 0 10px;
  font-family: var(--vs-kop);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--vs-ink);
}

/* Lijsten in de woordenschat van de site: een vierkantje van 6px op de
   basislijn, zoals .vs-punten, nooit een bolletje. Een list-style op de ul
   deed niets: Tumar zet list-style: none rechtstreeks op li. */
.vs-artikel__tekst ul,
.vs-artikel__tekst ol {
  margin: 0 0 var(--vs-alinea);
  padding: 0;
  list-style: none;
}

.vs-artikel__tekst ul > li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 10px;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.vs-artikel__tekst ul > li::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  background-color: rgba(10, 10, 10, .28);
}

.vs-artikel__tekst ol {
  padding-left: 1.6em;
  list-style: decimal;
}

.vs-artikel__tekst ol > li {
  margin: 0 0 10px;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.vs-artikel__tekst ol > li::marker {
  font-family: var(--vs-mono);
  font-size: 12px;
  color: var(--vs-tekst);
}

/* Voor wat er via wp-admin bij kan komen: een beeld met bijschrift en een
   tabel. Tumar geeft td en th een zwarte rand van 1px; hier haarlijnen. */
.vs-artikel__tekst figure {
  margin: 0 0 var(--vs-alinea);
}

.vs-artikel__tekst figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--vs-radius);
}

.vs-artikel__tekst figcaption {
  margin-top: 10px;
  font-family: var(--vs-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--vs-tekst);
}

.vs-artikel__tekst table {
  width: 100%;
  margin: 0 0 var(--vs-alinea);
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.6;
}

.vs-artikel__tekst th,
.vs-artikel__tekst td {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--vs-line);
  text-align: left;
  vertical-align: top;
}

.vs-artikel__tekst th {
  font-family: var(--vs-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--vs-tekst);
}

.vs-artikel__tekst strong {
  font-weight: 600;
}

.vs-artikel__tekst a {
  color: var(--vs-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.vs-artikel__tekst blockquote {
  margin: 0 0 var(--vs-alinea);
  padding: 0 0 0 24px;
  border-left: 1px solid var(--vs-line);
  color: var(--vs-tekst);
}

/* "Verder lezen": twee compacte rijen en de verwijzing naar het overzicht.
   De naad erboven is van .vs-artikel. */
.vs-artikel-verder {
  padding: 0 var(--vs-kant) var(--vs-sectie);
  background-color: var(--vs-wit);
}

.vs-artikel-verder .vs-artikel__kolom {
  padding-top: 40px;
  border-top: 1px solid var(--vs-line);
}

.vs-artikel__label {
  margin: 0 0 6px;
}

.vs-artikel__alle {
  margin: 34px 0 0;
}

/* --- het blok op de homepage --------------------------------------------- */

.vs-inzichten-blok {
  padding: var(--vs-sectie) var(--vs-kant);
  background-color: var(--vs-wit);
}

.vs-inzichten-blok__titel {
  max-width: 14ch;
  margin: 40px 0 8px;
  font-family: var(--vs-kop);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--vs-ink);
}

.vs-inzichten-blok .vs-inzichten {
  margin-top: 32px;
}

.vs-inzichten-blok__verder {
  margin: 36px 0 0;
}

/* --- tablet ----------------------------------------------------------------- */

/* Dezelfde breekpunten als .vs-pkop (vesmo-paginas.css): 110 en 80. */
@media only screen and (max-width: 991px) {
  .vs-inzichten-kop {
    padding-bottom: 80px;
  }

  .vs-artikel__lijf {
    padding-top: 56px;
  }

  .vs-inzicht {
    grid-template-columns: 44px minmax(0, 1fr) 200px;
    grid-template-areas:
      "nr tekst beeld"
      "nr meta  beeld";
  }

  .vs-inzicht__meta {
    text-align: left;
  }
}

/* --- smal ------------------------------------------------------------------ */

@media only screen and (max-width: 767px) {
  .vs-inzicht {
    grid-template-columns: 1fr;
    grid-template-areas:
      "beeld"
      "nr"
      "tekst"
      "meta";
    gap: 12px;
    padding: 26px 0;
  }

  .vs-inzicht__meta {
    white-space: normal;
  }

  .vs-inzicht__titel {
    font-size: 24px;
  }

  .vs-inzichten--compact .vs-inzicht {
    grid-template-columns: 1fr;
    grid-template-areas:
      "meta"
      "tekst";
    gap: 6px;
  }

  .vs-artikel__beeld {
    aspect-ratio: 16 / 9;
    margin-bottom: 40px;
  }

  .vs-artikel__tekst {
    font-size: 17px;
  }

  .vs-inzichten-blok__titel {
    font-size: 32px;
  }

  /* Eén eigenaar per naad op een telefoon (Daan, 08-09-2026): het blok en de
     vragen erna zijn allebei wit, dus alleen de vragen geven ruimte. */
  .vs-inzichten-blok {
    padding-bottom: 0;
  }
}