/* Blog gebruikt Webflow-homepagepatronen: hero-detail, section/container,
   resources-grid/resources-card, benefit-grid en app-button. Alleen filters,
   redactionele kaartdetails en tekstloze diagrammen zijn paginaspecifiek. */

[data-vp-x-route="blog"] .vp-blog-hero .hero-detail-div {
  width: 100%;
}

[data-vp-x-route="blog"] .vp-blog-hero .common-heading-div {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}

[data-vp-x-route="blog"] .vp-blog-filtersectie {
  padding-block: clamp(38px, 5vw, 58px);
}

[data-vp-x-route="blog"] .vp-blog-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

[data-vp-x-route="blog"] .vp-blog-filter {
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--vp-lijn);
  border-radius: var(--_spacing---radius--100px, 100px);
  background: var(--vp-kaart);
  color: var(--vp-body);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: color .175s ease, border-color .175s ease, background-color .175s ease;
}

[data-vp-x-route="blog"] .vp-blog-filter[aria-pressed="true"] {
  border-color: var(--vp-navy);
  background: var(--vp-navy);
  color: var(--vp-kaart);
}

[data-vp-x-route="blog"] .vp-blog-filter:hover {
  border-color: var(--vp-navy);
}

[data-vp-x-route="blog"] .vp-blog-filter:focus-visible,
[data-vp-x-route="blog"] .vp-blog-kaart:focus-visible,
[data-vp-x-route="blog"] .vp-blog-pilo-link:focus-visible {
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: 3px;
}

[data-vp-x-route="blog"] .vp-blog-grid {
  align-items: stretch;
}

[data-vp-x-route="blog"] .vp-blog-item,
[data-vp-x-route="blog"] .vp-blog-kaart {
  min-width: 0;
  height: 100%;
}

[data-vp-x-route="blog"] .vp-blog-item[hidden] {
  display: none;
}

[data-vp-x-route="blog"] .vp-blog-beeld {
  height: clamp(200px, 20vw, 250px);
  min-height: 200px;
  padding: 24px;
}

[data-vp-x-route="blog"] .vp-blog-grafiek,
[data-vp-x-route="blog"] .vp-blog-statement-grafiek {
  width: min(100%, 380px);
}

[data-vp-x-route="blog"] .vp-blog-grafiek {
  height: 100%;
  max-height: 220px;
  align-items: center;
}

[data-vp-x-route="blog"] .vp-blog-statement-grafiek svg {
  width: 100%;
  height: auto;
  display: block;
}

[data-vp-x-route="blog"] .vp-blog-grafiek svg {
  width: auto;
  max-width: 100%;
  height: 100%;
  display: block;
}

[data-vp-x-route="blog"] .vp-blog-g-laag {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .24s ease;
}

[data-vp-x-route="blog"] .vp-blog-g-laag--voor {
  filter: drop-shadow(0 14px 14px color-mix(in srgb, var(--vp-navy) 18%, transparent));
}

[data-vp-x-route="blog"] .vp-blog-kaart:hover .vp-blog-g-laag--voor,
[data-vp-x-route="blog"] .vp-blog-kaart:focus-visible .vp-blog-g-laag--voor {
  transform: translateY(-4px) rotate(-1deg);
}

[data-vp-x-route="blog"] .vp-blog-kaart:hover .vp-blog-g-laag--achter,
[data-vp-x-route="blog"] .vp-blog-kaart:focus-visible .vp-blog-g-laag--achter {
  transform: translateY(2px) rotate(1deg);
}

[data-vp-x-route="blog"] .vp-blog-g-kaart {
  fill: var(--vp-kaart);
  stroke: var(--vp-lijn);
  stroke-width: 2;
}

[data-vp-x-route="blog"] .vp-blog-g-schaduw {
  fill: color-mix(in srgb, var(--vp-navy) 13%, transparent);
}

[data-vp-x-route="blog"] .vp-blog-g-donker,
[data-vp-x-route="blog"] .vp-blog-g-inktvlak {
  fill: var(--vp-navy);
}

[data-vp-x-route="blog"] .vp-blog-g-accentvlak {
  fill: var(--vp-accent-op-licht);
}

[data-vp-x-route="blog"] .vp-blog-g-tealvlak {
  fill: var(--vp-teal);
}

[data-vp-x-route="blog"] .vp-blog-g-inkt,
[data-vp-x-route="blog"] .vp-blog-g-route,
[data-vp-x-route="blog"] .vp-blog-g-orbit,
[data-vp-x-route="blog"] .vp-blog-g-goed,
[data-vp-x-route="blog"] .vp-blog-g-lijnlicht {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-vp-x-route="blog"] .vp-blog-g-inkt,
[data-vp-x-route="blog"] .vp-blog-g-orbit {
  stroke: var(--vp-navy);
  stroke-width: 3;
}

[data-vp-x-route="blog"] .vp-blog-g-orbit {
  opacity: .72;
}

[data-vp-x-route="blog"] .vp-blog-g-route {
  stroke: var(--vp-accent-op-licht);
  stroke-width: 3;
}

[data-vp-x-route="blog"] .vp-blog-g-route--streep {
  stroke-dasharray: 7 8;
}

[data-vp-x-route="blog"] .vp-blog-g-goed {
  stroke: var(--vp-teal-tekst);
  stroke-width: 4;
}

[data-vp-x-route="blog"] .vp-blog-g-lijnlicht {
  stroke: var(--vp-op-donker);
  stroke-width: 3;
  opacity: .78;
}

[data-vp-x-route="blog"] .vp-blog-g-paneel {
  fill: var(--vp-kaart);
  stroke: var(--vp-lijn);
  stroke-width: 2;
}

[data-vp-x-route="blog"] .vp-blog-g-kader,
[data-vp-x-route="blog"] .vp-blog-g-lijn,
[data-vp-x-route="blog"] .vp-blog-g-accent,
[data-vp-x-route="blog"] .vp-blog-g-teal,
[data-vp-x-route="blog"] .vp-blog-g-vouw,
[data-vp-x-route="blog"] .vp-blog-g-licht {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-vp-x-route="blog"] .vp-blog-g-kader,
[data-vp-x-route="blog"] .vp-blog-g-lijn,
[data-vp-x-route="blog"] .vp-blog-g-vouw {
  stroke: var(--vp-navy);
  stroke-width: 3;
}

[data-vp-x-route="blog"] .vp-blog-g-kader {
  stroke-width: 2;
}

[data-vp-x-route="blog"] .vp-blog-g-accent {
  stroke: var(--vp-accent-op-licht);
  stroke-width: 4;
}

[data-vp-x-route="blog"] .vp-blog-g-teal {
  stroke: var(--vp-teal-tekst);
  stroke-width: 4;
}

[data-vp-x-route="blog"] .vp-blog-g-punt {
  fill: var(--vp-teal);
}

[data-vp-x-route="blog"] .vp-blog-g-slot {
  fill: var(--vp-navy);
}

[data-vp-x-route="blog"] .vp-blog-g-licht {
  stroke: var(--vp-op-donker);
  stroke-width: 4;
}

[data-vp-x-route="blog"] .vp-blog-kaart .resources-detail-div {
  flex: 1;
}

[data-vp-x-route="blog"] .vp-blog-kaart-context {
  min-height: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  color: var(--vp-teal-tekst);
  font-weight: 700;
}

[data-vp-x-route="blog"] .vp-blog-nieuwste::before {
  content: "·";
  margin-right: 10px;
  color: var(--vp-gedempt);
}

[data-vp-x-route="blog"] .vp-blog-kaart .h4-heading {
  max-width: 30ch;
  text-wrap: balance;
}

[data-vp-x-route="blog"] .vp-blog-samenvatting {
  margin: 0;
}

[data-vp-x-route="blog"] .vp-blog-meta {
  width: 100%;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--vp-lijn);
  color: var(--vp-gedempt);
  font-size: 14px;
  line-height: 1.5;
}

[data-vp-x-route="blog"] .vp-blog-lees {
  color: var(--vp-accent-op-licht);
  font-weight: 700;
}

[data-vp-x-route="blog"] .vp-blog-afsluiter .common-heading-div {
  max-width: 800px;
  margin-inline: auto;
}

[data-vp-x-route="blog"] .vp-blog-afsluiter .large-paragraph {
  max-width: 700px;
}

[data-vp-x-route="blog"] .vp-blog-bijschrift {
  margin: 0;
  color: var(--vp-gedempt);
  font-size: 14px;
}

[data-vp-x-route="blog"] .vp-blog-pilo-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--vp-accent-op-licht);
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

[data-vp-x-route="blog"] .vp-blog-statement .benefit-grid {
  align-items: stretch;
}

[data-vp-x-route="blog"] .vp-blog-statement-beeld {
  min-height: clamp(320px, 34vw, 460px);
  padding: clamp(34px, 5vw, 70px);
}

[data-vp-x-route="blog"] .vp-blog-statement .benefit-card {
  justify-content: center;
  height: 100%;
}

[data-vp-x-route="blog"] .vp-blog-statement .benefit-paragraph {
  max-width: 520px;
}

@media screen and (max-width: 991px) {
  [data-vp-x-route="blog"] .vp-blog-statement .benefit-card.margin {
    margin-left: 0;
  }
}

@media screen and (max-width: 767px) {
  [data-vp-x-route="blog"] .vp-blog-filter {
    flex: 1 1 calc(50% - 10px);
  }

  [data-vp-x-route="blog"] .vp-blog-beeld {
    height: 210px;
    min-height: 210px;
  }

  [data-vp-x-route="blog"] .vp-blog-statement-beeld {
    min-height: 270px;
  }
}

@media screen and (max-width: 479px) {
  [data-vp-x-route="blog"] .vp-blog-beeld {
    height: 180px;
    min-height: 180px;
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-vp-x-route="blog"] .vp-blog-filter,
  [data-vp-x-route="blog"] .vp-blog-kaart .h4-heading,
  [data-vp-x-route="blog"] .vp-blog-g-laag {
    transition: none;
  }

  [data-vp-x-route="blog"] .vp-blog-kaart:hover .vp-blog-g-laag,
  [data-vp-x-route="blog"] .vp-blog-kaart:focus-visible .vp-blog-g-laag {
    transform: none;
  }
}