/* ========================================================================== 
   Homepage-canon voor gegenereerde V6-pagina's

   Opt-in via .vp-homepage-canon. De inhoud blijft maximaal 1000px breed,
   met dezelfde papierkleuren, hoeken en typografische rust als de homepage.
   ========================================================================== */

.vp-homepage-canon {
  --vp-x-shell: 1040px;
  --vp-x-gutter: 20px;
  --vp-x-paper: #fbf9f4;
  --vp-x-band: #f3f0e9;
  --vp-x-line: #e1dbce;
  --vp-x-ink: #1e3a5f;
  --vp-x-navy: #1e3a5f;
  --vp-body: #1e3a5f;
  --vp-card: #f3f0e9;
  --vp-radius-md: var(--_spacing---radius--24px, 24px);
  --radius-md: var(--_spacing---radius--24px, 24px);
  background: var(--vp-x-paper);
}

.vp-homepage-canon .container,
.vp-homepage-canon .w-container,
.vp-homepage-canon .footer > .container {
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Hero ------------------------------------------------------------------- */

.vp-homepage-canon .vp-x-hero,
.vp-homepage-canon[data-vp-x-route] .vp-x-hero {
  min-height: auto;
  padding-block: clamp(160px, 14vw, 210px) clamp(88px, 9vw, 120px);
  overflow: hidden;
  border-bottom: 0;
  background: var(--vp-x-paper);
  color: var(--vp-x-ink);
}

.vp-homepage-canon .vp-x-hero-grid {
  box-sizing: border-box;
  width: 100%;
  max-width: 1040px;
  padding-inline: 20px;
  display: block;
  background: transparent;
}

.vp-homepage-canon .vp-x-hero-copy {
  width: min(100%, 1000px);
  max-width: 1000px;
  margin-inline: auto;
  text-align: center;
}

.vp-homepage-canon .vp-x-hero h1,
.vp-homepage-canon.vp-x-kern .vp-x-hero h1,
.vp-homepage-canon.vp-x-artikel .vp-x-hero h1,
.vp-homepage-canon.vp-x-compliance .vp-x-hero h1,
.vp-homepage-canon.vp-x-naslag .vp-x-hero h1,
.vp-homepage-canon[data-vp-x-route] .vp-x-hero h1 {
  max-width: 16ch;
  margin: 0 auto 28px;
  color: var(--vp-x-navy);
  font-size: clamp(56px, 6.6vw, 96px);
  line-height: .98;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.vp-homepage-canon .vp-x-hero .large-paragraph,
.vp-homepage-canon[data-vp-x-route] .vp-x-hero .large-paragraph {
  max-width: 660px;
  margin-inline: auto;
  color: var(--vp-body);
  font-size: clamp(18px, 1.45vw, 20px);
  line-height: 1.58;
  text-wrap: pretty;
}

.vp-homepage-canon .vp-x-hero .button-div {
  justify-content: center;
  margin-top: clamp(26px, 3vw, 36px);
}

/* Secties en kaarten ----------------------------------------------------- */

.vp-homepage-canon .vp-x-sectie {
  padding-block: 6px;
  background: var(--vp-x-paper);
}

.vp-homepage-canon .vp-x-sectie-band,
.vp-homepage-canon.vp-x-kern .vp-x-sectie-band {
  border-block: 0;
  background: var(--vp-x-paper);
}

.vp-homepage-canon .vp-x-sectie > .container {
  box-sizing: border-box;
  width: min(calc(100% - 40px), 1000px);
  max-width: 1000px;
  padding: clamp(40px, 5vw, 60px);
  border-radius: var(--_spacing---radius--24px, 24px);
  background: var(--vp-x-band);
}

.vp-homepage-canon .vp-x-sectie-kop,
.vp-homepage-canon .vp-x-sectie-band .vp-x-sectie-kop,
.vp-homepage-canon .vp-x-sectie-kop--rechts {
  width: min(100%, 680px);
  margin: 0 0 clamp(40px, 5vw, 60px);
}

.vp-homepage-canon .vp-x-sectie-kop h2 {
  margin: 0;
  color: var(--vp-x-navy);
  font-size: clamp(36px, 3.5vw, 44px);
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.vp-homepage-canon .vp-x-sectie-kop > p {
  max-width: 62ch;
  color: var(--vp-body);
  font-size: 18px;
  line-height: 1.65;
}

.vp-homepage-canon .vp-x-kaarten {
  width: 100%;
  max-width: 1000px;
  gap: 12px;
}

.vp-homepage-canon .vp-x-kaart {
  min-width: 0;
  min-height: 0;
  padding: 24px 0;
  gap: 24px;
  border: 0;
  border-radius: var(--_spacing---radius--24px, 24px);
  background: var(--vp-x-paper);
  box-shadow: none;
  transform: none !important;
  transition: none;
}

.vp-homepage-canon .vp-x-sectie-band .vp-x-kaart {
  background: var(--vp-x-paper);
}

.vp-homepage-canon .vp-x-kaart::before,
.vp-homepage-canon .vp-x-kaart::after,
.vp-homepage-canon .vp-x-kaart-beeld::before,
.vp-homepage-canon .vp-x-kaart-beeld::after {
  content: none;
}

.vp-homepage-canon .vp-x-kaart-beeld {
  height: 146px;
  min-height: 146px;
}

.vp-homepage-canon .vp-x-kaart-object,
.vp-homepage-canon .vp-x-kaart-beeld--2 .vp-x-kaart-object,
.vp-homepage-canon .vp-x-kaart-beeld--3 .vp-x-kaart-object {
  width: min(42%, 132px);
  padding-inline: 22px;
  border-color: rgba(30, 58, 95, .12);
  border-radius: 18px;
  background: var(--vp-x-navy);
  box-shadow: 12px 22px 34px -28px rgba(34, 48, 59, .42);
  transform: perspective(520px) rotateX(44deg) rotateZ(-7deg);
}

.vp-homepage-canon .vp-x-kaart-beeld--3 .vp-x-kaart-object {
  background: var(--vp-x-navy);
}

.vp-homepage-canon .vp-x-kaart-beeld--2 .vp-x-kaart-object::after {
  background: var(--vp-x-accent-helder);
}

.vp-homepage-canon .vp-x-kaart h3 {
  max-width: 24ch;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.14;
}

.vp-homepage-canon .vp-x-kaart p {
  max-width: 46ch;
  color: var(--vp-body);
  font-size: 16px;
  line-height: 1.55;
}

/* Artikelen en kenniscomponenten ---------------------------------------- */

.vp-homepage-canon .vp-x-artikel-vlak {
  padding-block: 6px clamp(72px, 8vw, 104px);
  background: var(--vp-x-paper);
}

.vp-homepage-canon .vp-x-artikel-grid {
  box-sizing: border-box;
  width: min(calc(100% - 40px), 1000px);
  max-width: 1000px;
  padding: clamp(40px, 5vw, 60px);
  grid-template-columns: 200px minmax(0, 720px);
  gap: clamp(40px, 8vw, 80px);
  border-radius: var(--_spacing---radius--24px, 24px);
  background: var(--vp-x-band);
}

.vp-homepage-canon .vp-x-leeskolom > h2 {
  margin: 76px 0 22px !important;
  color: var(--vp-x-navy) !important;
  font-size: clamp(32px, 3.5vw, 44px) !important;
  line-height: 1.08 !important;
}

.vp-homepage-canon .vp-x-leeskolom > h3 {
  margin: 42px 0 16px !important;
  color: var(--vp-x-ink) !important;
  font-size: clamp(24px, 2.5vw, 28px) !important;
}

.vp-homepage-canon .vp-x-leeskolom > p,
.vp-homepage-canon .vp-x-leeskolom li,
.vp-homepage-canon .vp-x-leeskolom blockquote {
  color: var(--vp-body) !important;
  font-size: clamp(17px, 1.4vw, 19px) !important;
  line-height: 1.7 !important;
}

.vp-homepage-canon .article-callout,
.vp-homepage-canon .checklist-diagram,
.vp-homepage-canon .key-passage,
.vp-homepage-canon .article-toc,
.vp-homepage-canon .recht-summary,
.vp-homepage-canon .vp-x-bronnen {
  border: 0;
  border-radius: var(--_spacing---radius--24px, 24px);
  background: var(--vp-x-paper);
  box-shadow: none;
}

.vp-homepage-canon .article-callout {
  display: block;
}

.vp-homepage-canon .article-callout-marker,
.vp-homepage-canon .article-callout--ember .article-callout-marker,
.vp-homepage-canon .article-callout--navy .article-callout-marker {
  padding: 24px 28px 0;
  background: none;
  color: var(--vp-x-accent);
  letter-spacing: .025em;
}

.vp-homepage-canon .article-callout-body {
  padding: 14px 28px 28px;
}

.vp-homepage-canon .key-passage {
  background: var(--vp-x-paper);
}

.vp-homepage-canon .key-passage-label {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.vp-homepage-canon .vp-x-tabel,
.vp-homepage-canon .plx-tabelwrap {
  border-color: var(--vp-x-line);
  border-radius: var(--_spacing---radius--24px, 24px);
  background: var(--vp-x-paper);
}

/* CTA, juridische pagina's en profielen -------------------------------- */

.vp-homepage-canon .vp-x-cta {
  padding-block: 6px clamp(80px, 8vw, 112px);
  background: var(--vp-x-paper);
}

.vp-homepage-canon .vp-x-cta .container {
  max-width: 1040px;
}

.vp-homepage-canon .vp-x-cta-vlak {
  gap: clamp(28px, 4vw, 48px);
  padding: clamp(32px, 5vw, 56px);
  border: 1px solid var(--vp-x-line);
  border-radius: var(--_spacing---radius--24px, 24px);
  background: var(--vp-x-band);
  box-shadow: none;
}

.vp-homepage-canon .vp-x-cta-vlak h2 {
  font-size: clamp(34px, 4vw, 44px);
  line-height: 1.06;
}

/* Woordenboek: zichtbare veldgrens en 44px doelen voor éénletterlinks. */
.vp-homepage-canon .vp-x-naslag-tools input {
  border-color: rgba(34, 48, 59, .6);
}

.vp-homepage-canon .vp-x-naslag-tools a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vp-homepage-canon .vp-x-legal {
  padding-block: 6px clamp(80px, 8vw, 112px);
  background: var(--vp-x-paper);
}

.vp-homepage-canon .vp-x-legal .plx-legal {
  box-sizing: border-box;
  width: min(calc(100% - 40px), 840px);
  max-width: 840px;
  padding: clamp(48px, 7vw, 80px);
  border-radius: var(--_spacing---radius--24px, 24px);
  background: var(--vp-x-band);
}

.vp-homepage-canon .vp-x-legal h1 {
  color: var(--vp-x-navy);
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -.04em;
}

.vp-homepage-canon .vp-x-legal h2 {
  font-size: clamp(30px, 3.5vw, 42px);
}

.vp-homepage-canon .vp-x-legal .plx-contactkaart,
.vp-homepage-canon .vp-x-legal .plx-uitgelicht {
  border-radius: var(--_spacing---radius--24px, 24px);
  background: var(--vp-x-paper);
  box-shadow: none;
}

.vp-homepage-canon.vp-x-profiel {
  background: var(--vp-x-paper);
}

.vp-homepage-canon.vp-x-profiel::before {
  content: none;
}

.vp-homepage-canon.vp-x-profiel .kt {
  width: min(calc(100% - 40px), 620px);
  margin: 0 auto;
  padding: 56px;
  border-radius: var(--_spacing---radius--24px, 24px);
  background: var(--vp-x-band);
}

.vp-homepage-canon .vp-x-profiel-inhoud {
  padding-block: 6px clamp(80px, 8vw, 112px);
}

.vp-homepage-canon .vp-x-profiel-rol {
  margin-bottom: 8px;
  color: var(--vp-x-navy);
  font-weight: 700;
}

.vp-homepage-canon.vp-x-profiel .kt-lijst {
  gap: 12px;
}

.vp-homepage-canon.vp-x-profiel .kt-knop {
  border: 0;
  border-radius: var(--_spacing---radius--24px, 24px);
  background: var(--vp-x-band);
  box-shadow: none;
  transform: none !important;
}

.vp-homepage-canon.vp-x-profiel .kt-knop--primair {
  background: var(--vp-x-accent);
  color: #fff;
}

@media (max-width: 1099px) {
  .vp-homepage-canon .vp-x-hero-copy {
    width: min(100%, 900px);
    margin-inline: auto;
    text-align: center;
  }

  .vp-homepage-canon .vp-x-hero h1,
  .vp-homepage-canon .vp-x-hero .large-paragraph {
    margin-inline: auto;
  }

  .vp-homepage-canon .vp-x-hero .button-div {
    justify-content: center;
  }

  .vp-homepage-canon .vp-x-artikel-grid {
    grid-template-columns: minmax(0, 720px);
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .vp-homepage-canon {
    --vp-x-gutter: 20px;
    /* Geen eigen radius-overrides meer: de basis wijst naar het sitetoken en
       dat stapt zelf 24-20-18 af. Een lokale 18 op 767 liep uit de pas met
       proces- en vertrouwenpagina's in de zone 480-767. */
  }

  .vp-homepage-canon .vp-x-hero,
  .vp-homepage-canon[data-vp-x-route] .vp-x-hero {
    padding-block: 120px 76px;
  }

  .vp-homepage-canon .vp-x-sectie > .container,
  .vp-homepage-canon .vp-x-artikel-grid {
    padding: 32px 24px;
  }

  .vp-homepage-canon .vp-x-hero-grid {
    padding-inline: 20px;
  }

  .vp-homepage-canon .vp-x-hero h1,
  .vp-homepage-canon.vp-x-kern .vp-x-hero h1,
  .vp-homepage-canon.vp-x-artikel .vp-x-hero h1,
  .vp-homepage-canon.vp-x-compliance .vp-x-hero h1,
  .vp-homepage-canon.vp-x-naslag .vp-x-hero h1 {
    max-width: 16ch;
    font-size: clamp(38px, 11vw, 48px);
    line-height: 1.04;
  }

  .vp-homepage-canon .vp-x-sectie {
    padding-block: 6px;
  }

  .vp-homepage-canon .vp-x-sectie-kop h2 {
    font-size: clamp(30px, 9vw, 36px);
  }

  .vp-homepage-canon .vp-x-kaart,
  .vp-homepage-canon .article-callout,
  .vp-homepage-canon .checklist-diagram,
  .vp-homepage-canon .key-passage,
  .vp-homepage-canon .article-toc,
  .vp-homepage-canon .recht-summary,
  .vp-homepage-canon .vp-x-bronnen,
  .vp-homepage-canon.vp-x-profiel .kt {
    padding: 42px 24px;
  }

  .vp-homepage-canon .vp-x-kaart {
    padding: 20px 0;
  }

  .vp-homepage-canon .vp-x-kaart-detail {
    padding-inline: 20px;
  }

  .vp-homepage-canon .vp-x-legal .plx-legal {
    padding: 48px 24px;
  }

}

@media (max-width: 479px) {
  .vp-homepage-canon,
  .vp-homepage-canon .container,
  .vp-homepage-canon .w-container,
  .vp-homepage-canon .footer > .container {
    --vp-x-gutter: 18px;
  }

  .vp-homepage-canon .container,
  .vp-homepage-canon .w-container,
  .vp-homepage-canon .footer > .container {
    padding-inline: 18px;
  }

  .vp-homepage-canon .vp-x-sectie > .container,
  .vp-homepage-canon .vp-x-artikel-grid {
    width: min(calc(100% - 36px), 1000px);
    padding: 28px 22px;
  }

  .vp-homepage-canon .vp-x-hero-grid {
    width: 100%;
    padding-inline: 18px;
  }

  .vp-homepage-canon .vp-x-hero-copy,
  .vp-homepage-canon .vp-x-sectie-kop,
  .vp-homepage-canon .vp-x-kaart,
  .vp-homepage-canon .vp-x-leeskolom,
  .vp-homepage-canon .vp-x-legal,
  .vp-homepage-canon.vp-x-profiel .kt {
    overflow-wrap: anywhere;
  }

  .vp-homepage-canon .vp-x-cta-vlak {
    padding: 26px 22px;
  }

  .vp-homepage-canon .vp-x-legal .plx-legal {
    width: min(calc(100% - 36px), 840px);
    padding: 40px 22px;
  }

  .vp-homepage-canon.vp-x-profiel .kt {
    width: min(calc(100% - 36px), 620px);
  }

  .vp-homepage-canon .article-callout-marker {
    padding: 22px 22px 0;
  }

  .vp-homepage-canon .article-callout-body {
    padding: 12px 22px 24px;
  }

  .vp-homepage-canon .vp-x-kaart-detail {
    padding-inline: 18px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .vp-homepage-canon *,
  .vp-homepage-canon *::before,
  .vp-homepage-canon *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: .01ms !important;
  }
}