/* Public site of Kurason pa Kòrsou, one-to-one with the Figma file "Kurason pa Korsou"
   (pages 02_Components, 04_Sections, 05_Pages Desktop at 1440, 06_Pages Mobile at 390).
   Every colour and size is a token from kurason-tokens.css (var(--kpk-...)); the measured
   paddings and gaps of the section frames are written as pixel values next to the token they
   equal. Class prefix kpk- = public site; kp- is the admin (app.css).
   Breakpoints (Figma handover): mobile up to 701, tablet 702-1025 (mobile build, wider blocks),
   desktop from 1026. Layout max-width 1600, coloured surfaces run to the screen edge. */

/* ---------- Fonts ---------- */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Inter-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Inter-Bold.woff2") format("woff2");
}

/* The heading font of the design is Macho SemiBold (Capitalics, licensed). Its web font file is
   not part of this repository; drop the licensed woff2 in wwwroot/fonts (HeadingFont.MachoFontFile) and App.razor emits
   its @font-face (HeadingFont.MachoFontFaceCss) so the site uses it. Until then the open fallback
   below (Barlow Semi Condensed 600, OFL) carries the headings. */

@font-face {
    font-family: "Kurason Heading Fallback";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/BarlowSemiCondensed-SemiBold.woff2") format("woff2");
}

/* ---------- Base ---------- */
.kpk-site {
    font-family: var(--kpk-font-body);
    font-size: var(--kpk-text-body-md-size);
    line-height: var(--kpk-text-body-line);
    color: var(--kpk-color-text-default);
    background: var(--kpk-color-surface-default);
    -webkit-font-smoothing: antialiased;
    /* The design draws the phone status bar as a fixed band (token safe-area-top). On a real device
       the browser reports the true inset instead, which is 0 on a phone without a notch, so nothing
       empty is reserved above the header. */
    --kpk-safe-top: env(safe-area-inset-top, var(--kpk-layout-safe-area-top));
    overflow-x: clip;
    /* A word that does not fit (an e-mail address, a long compound) wraps instead of pushing the
       column wider than the screen; on a phone that used to cut the address off at the edge. */
    overflow-wrap: break-word;
}

.kpk-site *,
.kpk-site *::before,
.kpk-site *::after {
    box-sizing: border-box;
}

/* Element resets are written as ".kpk-site :where(element)": one class of specificity, so they beat
   Bootstrap's bare "a { text-decoration: underline }" but tie with (and, coming first, lose to) every
   single-class rule such as .kpk-nav__link. A plain ".kpk-site a" (class + element) turned the
   navigation black. */
.kpk-site :where(h1, h2, h3, p, ul, ol, dl, figure) {
    margin: 0;
}

.kpk-site :where(ul, ol) {
    padding: 0;
    list-style: none;
}

.kpk-site :where(img, picture) {
    display: block;
    max-width: 100%;
}

.kpk-site :where(a) {
    color: inherit;
    text-decoration: none;
}

.kpk-site :focus-visible {
    outline: 3px solid var(--kpk-color-brand-accent);
    outline-offset: 2px;
}

/* The heading scale of 00_Design Tile · 02 Typografie. */
.kpk-heading-xl,
.kpk-heading-lg,
.kpk-heading-md,
.kpk-heading-sm,
.kpk-label {
    font-family: var(--kpk-font-heading);
    font-weight: var(--kpk-text-heading-weight);
}

.kpk-heading-xl { font-size: var(--kpk-text-heading-xl-size); line-height: var(--kpk-text-heading-line); letter-spacing: var(--kpk-text-heading-tracking); }
.kpk-heading-lg { font-size: var(--kpk-text-heading-lg-size); line-height: var(--kpk-text-heading-line); letter-spacing: var(--kpk-text-heading-tracking); }
.kpk-heading-md { font-size: var(--kpk-text-heading-md-size); line-height: var(--kpk-text-heading-line); letter-spacing: var(--kpk-text-heading-tracking); }
.kpk-heading-sm { font-size: var(--kpk-text-heading-sm-size); line-height: var(--kpk-text-body-line); }

/* The content column: 1060 wide inside 1440 (margin 190), 350 inside 390 (margin 20), never
   wider than the content-max token, and never closer than 48 px to the screen edge on desktop. */
.kpk-content-width {
    width: min(var(--kpk-layout-content-max), 100% - 2 * var(--kpk-layout-margin));
    margin-inline: auto;
}

/* On a phone the column follows the MARGIN of the design (20) instead of its fixed width (350):
   at the design width of 390 that is the same 350, and on a wider phone the text uses the screen
   instead of leaving a second, empty margin beside it. */
@media (max-width: 1025px) {
    .kpk-content-width, .kpk-documents__inner, .kpk-faq__inner, .kpk-text-block__inner, .kpk-article__inner {
        width: calc(100% - 2 * var(--kpk-layout-margin));
    }
}

/* The layout frame: everything inside is at most 1600 wide and centred; the backgrounds of the
   sections themselves run on to the screen edge (they sit on the section element). */
.kpk-frame {
    width: min(100%, var(--kpk-layout-max-width));
    margin-inline: auto;
}

/* ---------- Colour variants (Figma "Color" property) ---------- */
.kp-color--primary { --kpk-surface: var(--kpk-color-brand-primary); --kpk-surface-hover: var(--kpk-color-brand-primary-hover); --kpk-surface-selected: var(--kpk-color-brand-primary-selected); --kpk-on-surface: var(--kpk-color-text-inverse); }
.kp-color--primary-alt { --kpk-surface: var(--kpk-color-brand-primary-alt); --kpk-surface-hover: var(--kpk-color-brand-primary-alt-hover); --kpk-surface-selected: var(--kpk-color-brand-primary-alt-selected); --kpk-on-surface: var(--kpk-color-text-inverse); }
.kp-color--primary-soft { --kpk-surface: var(--kpk-color-brand-primary-soft); --kpk-surface-hover: var(--kpk-color-brand-primary-soft-hover); --kpk-surface-selected: var(--kpk-color-brand-primary-soft-selected); --kpk-on-surface: var(--kpk-color-text-inverse); }
.kp-color--secondary { --kpk-surface: var(--kpk-color-brand-secondary); --kpk-surface-hover: var(--kpk-color-brand-secondary-hover); --kpk-surface-selected: var(--kpk-color-brand-secondary-selected); --kpk-on-surface: var(--kpk-color-text-inverse); }
.kp-color--accent { --kpk-surface: var(--kpk-color-brand-accent); --kpk-surface-hover: var(--kpk-color-brand-accent-hover); --kpk-surface-selected: var(--kpk-color-brand-accent-selected); --kpk-on-surface: var(--kpk-color-text-inverse); }
.kp-color--accent-alt { --kpk-surface: var(--kpk-color-brand-accent-alt); --kpk-surface-hover: var(--kpk-color-brand-accent-alt-hover); --kpk-surface-selected: var(--kpk-color-brand-accent-alt-selected); --kpk-on-surface: var(--kpk-color-text-inverse); }
.kp-color--accent-warm { --kpk-surface: var(--kpk-color-brand-accent-warm); --kpk-surface-hover: var(--kpk-color-brand-accent-warm-hover); --kpk-surface-selected: var(--kpk-color-brand-accent-warm-selected); --kpk-on-surface: var(--kpk-color-text-inverse); }
.kp-color--surface { --kpk-surface: var(--kpk-color-surface-default); --kpk-surface-hover: var(--kpk-color-text-inverse-hover); --kpk-surface-selected: var(--kpk-color-text-inverse-selected); --kpk-on-surface: var(--kpk-color-text-default); }

/* Text colour on a coloured surface: "auto" follows the design default of the variant, which is
   white on every colour and black on the white surface. light/dark force one colour. */
.kp-text--auto { --kpk-text: var(--kpk-on-surface); }
.kp-text--light { --kpk-text: var(--kpk-color-text-inverse); }
.kp-text--dark { --kpk-text: var(--kpk-color-text-default); }

/* Heading colour of a block (field "Kopkleur"). The design gives the very same block kind a blue
   heading on one page ("Wie we zijn") and a magenta one on another ("Organisatie", "Onze impact in
   cijfers"), so the colour belongs to the block and not to the stylesheet. Without a choice the
   heading keeps the colour it inherits from its own section. The attribute selector raises the
   specificity above the section's own heading rule, so the order in this file does not matter. */
.kp-heading--primary { --kpk-heading: var(--kpk-color-brand-primary); }
.kp-heading--primary-alt { --kpk-heading: var(--kpk-color-brand-primary-alt); }
.kp-heading--secondary { --kpk-heading: var(--kpk-color-brand-secondary); }
.kp-heading--accent { --kpk-heading: var(--kpk-color-brand-accent); }
.kp-heading--accent-alt { --kpk-heading: var(--kpk-color-brand-accent-alt); }
.kp-heading--accent-warm { --kpk-heading: var(--kpk-color-brand-accent-warm); }
.kp-heading--surface { --kpk-heading: var(--kpk-color-surface-default); }
[class*="kp-heading--"] .kpk-section-head__title,
[class*="kp-heading--"] .kpk-image-text__heading,
[class*="kp-heading--"] .kpk-intro-band__heading,
[class*="kp-heading--"] .kpk-listing__heading,
[class*="kp-heading--"] .kpk-related__heading,
[class*="kp-heading--"] .kpk-portal__heading,
[class*="kp-heading--"] .kpk-steps__heading,
[class*="kp-heading--"] .kpk-fund-partners__heading,
[class*="kp-heading--"] .kpk-partner-logos__heading,
[class*="kp-heading--"] .kpk-documents__heading,
[class*="kp-heading--"] .kpk-contact-form__heading,
[class*="kp-heading--"] .kpk-text-block__title { color: var(--kpk-heading); }

/* ---------- Button (component "Button") ---------- */
.kpk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kpk-space-xs);
    padding: 0 var(--kpk-space-xl);          /* 32 */
    border: 0;
    border-radius: var(--kpk-radius-md);     /* 8 */
    background: var(--kpk-surface, var(--kpk-color-brand-secondary));
    color: var(--kpk-color-text-inverse);
    font-family: var(--kpk-font-heading);
    font-weight: var(--kpk-text-heading-weight);
    line-height: var(--kpk-text-label-line);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 200ms ease-out;
}

.kpk-btn--md { min-height: 48px; font-size: var(--kpk-text-label-md-size); }
.kpk-btn--lg { min-height: 64px; font-size: var(--kpk-text-label-lg-size); }
.kpk-btn--full { width: 100%; white-space: normal; }
.kpk-btn:hover { background: var(--kpk-surface-hover); color: var(--kpk-color-text-inverse); }
.kpk-btn:active, .kpk-btn--selected { background: var(--kpk-surface-selected); }

@media (max-width: 1025px) {
    .kpk-btn { padding: 0 var(--kpk-space-lg); }   /* mobile buttons: padding 24 */
}

/* ---------- Arrow (component "Pijlknop") ---------- */
.kpk-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 32px;
    color: var(--kpk-color-text-inverse);
    filter: drop-shadow(0 4px 4px rgb(0 0 0 / 0.25));
    transition: transform 200ms ease-out, color 200ms ease-out;
}

.kpk-arrow svg { width: 39px; height: 28px; display: block; }
.kpk-arrow--left svg { transform: scaleX(-1); }
.kpk-arrow--accent { color: var(--kpk-color-brand-accent); }
.kpk-arrow--primary { color: var(--kpk-color-brand-primary); filter: none; }
a:hover > .kpk-arrow, .kpk-program-block__link:hover .kpk-arrow { transform: translateX(-10px); }
a:hover > .kpk-arrow--left { transform: translateX(10px); }
a:active > .kpk-arrow--accent { color: var(--kpk-color-brand-accent-selected); }
a:active > .kpk-arrow--inverse { color: var(--kpk-color-text-inverse-selected); }

/* ---------- Pictures ---------- */
.kpk-picture img { width: 100%; height: 100%; object-fit: cover; }
.kpk-picture--empty, .kpk-picture--missing { display: block; width: 100%; height: 100%; min-height: 120px; background: var(--kpk-color-surface-placeholder); }
.kpk-picture--missing { padding: var(--kpk-space-md); font-size: 14px; color: var(--kpk-color-text-default); }

/* ---------- Skip link and hidden badge ---------- */
.kpk-skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 8px 16px; background: var(--kpk-color-brand-primary); color: #fff; }
.kpk-skip-link:focus { left: 8px; top: 8px; }
.kpk-hidden-badge { position: fixed; right: 12px; bottom: 12px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--kpk-radius-full); background: #1f1f1f; color: #fff; font-size: 13px; font-weight: 600; opacity: 0.9; }
.kpk-hidden-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--kpk-color-brand-accent-alt); }

/* ---------- Header (component "Header MENU · Desktop" 1440x112, "· Mobile" 390x72) ---------- */
/* The header and footer colours are the adjustable brand colours of /beheer/colors (app.css :root);
   their factory values are the Figma tokens, so the design is the default. */
.kpk-header {
    position: sticky;
    top: 0;
    z-index: 800;
    background: var(--kp-header-bg);
    /* Every page frame of the design puts the header AND the first section at y = 0, so the header
       lies over the hero; its rounded bottom-left corner (radius/lg 50) shows the photo behind it.
       On the phone the design stacks them (header 121 = 72 + safe area), so the mobile block below
       puts both back to 0. */
    margin-bottom: calc(-1 * var(--kpk-layout-header-height));
    border-bottom-left-radius: var(--kpk-radius-lg);
}

.kpk-header__toggle { position: absolute; opacity: 0; pointer-events: none; }

.kpk-header__inner {
    width: min(100%, var(--kpk-layout-max-width));
    margin-inline: auto;
    min-height: var(--kpk-layout-header-height);   /* 112 desktop, 72 mobile */
    padding: 0 var(--kpk-space-2xl);                /* 48 */
    padding-top: var(--kpk-safe-top);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kpk-space-xl);
}

.kpk-header__brand { display: block; flex: 0 0 auto; }
/* Without a logo in the settings the name carries the header and the footer. */
.kpk-header__wordmark { font-family: var(--kpk-font-heading); font-weight: 600; font-size: 24px; color: var(--kp-header-text); }
.kpk-footer__wordmark { font-family: var(--kpk-font-heading); font-weight: 600; font-size: 24px; color: var(--kp-footer-text); }
.kpk-header__logo { width: 333px; height: 47px; display: block; }

.kpk-nav { display: flex; align-items: center; gap: var(--kpk-space-xl); }  /* 32 */
.kpk-nav__list { display: flex; align-items: center; gap: var(--kpk-space-xs); }  /* 8 */

/* Nav item: label 15/130% in the heading font, padding 12 8, underline 2 px that appears on hover
   and stays on the current page (magenta). */
.kpk-nav__link {
    display: block;
    padding: var(--kpk-space-sm) var(--kpk-space-xs);
    font-family: var(--kpk-font-heading);
    font-weight: var(--kpk-text-heading-weight);
    font-size: var(--kpk-text-label-sm-size);
    line-height: var(--kpk-text-label-line);
    color: var(--kp-header-text);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.kpk-header__button { --kpk-surface: var(--kp-header-accent); }

.kpk-nav__link:hover { color: var(--kpk-color-brand-primary-hover); border-bottom-color: var(--kpk-color-brand-primary-hover); }
.kpk-nav__link--selected, .kpk-nav__link--selected:hover { color: var(--kpk-color-brand-secondary); border-bottom-color: var(--kpk-color-brand-secondary); }

.kpk-header__lang { font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-label-md-size); line-height: 1.3; color: var(--kpk-color-brand-primary); }
.kpk-header__lang .kpk-lang__code--inactive { display: none; }   /* the desktop header shows the current language only */
.kpk-header__lang .kpk-lang__code + .kpk-lang__code::before { content: " | "; color: var(--kp-header-accent-soft); }

.kpk-header__burger { display: none; }
.kpk-menu { display: none; }

/* Mobile header: logo 240 wide left, hamburger 48x48 right, side margin 20. The open menu is a
   state of the header: the panel unfolds under the bar on primary with the nav rows, the contact
   button on the full width and the language choice at the bottom. */
@media (max-width: 1025px) {
    .kpk-header { margin-bottom: 0; border-bottom-left-radius: 0; }
    .kpk-header__inner { padding: 0 var(--kpk-layout-margin); padding-top: var(--kpk-safe-top); gap: var(--kpk-space-md); }
    .kpk-header__logo { width: 240px; height: 34px; }
    .kpk-nav { display: none; }
    .kpk-header__burger {
        display: inline-flex; align-items: center; justify-content: center;
        width: 48px; height: 48px; margin-right: -12px;
        color: var(--kpk-color-brand-primary); cursor: pointer;
    }
    .kpk-header__burger svg { width: 24px; height: 24px; display: block; }
    .kpk-header__burger:hover { color: var(--kpk-color-brand-primary-hover); }
    .kpk-header__burger-close { display: none; }
    .kpk-header__toggle:checked ~ .kpk-header__bar .kpk-header__burger-open { display: none; }
    .kpk-header__toggle:checked ~ .kpk-header__bar .kpk-header__burger-close { display: inline-flex; }
    .kpk-header__toggle:checked ~ .kpk-menu { display: block; }
    .kpk-menu {
        position: fixed; inset: 0; top: calc(var(--kpk-layout-header-height) + var(--kpk-safe-top));
        z-index: 790; background: var(--kpk-color-brand-primary); overflow-y: auto;
    }
    .kpk-menu__panel {
        min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--kpk-space-3xl); /* 40 */
        padding: var(--kpk-space-xl) var(--kpk-layout-margin) var(--kpk-space-3xl);   /* 24 20 40 */
    }
    .kpk-menu__list { width: 100%; }
    /* Nav item · Mobile: row 64 high, label 20 in the heading font, white, divider 1 px primary-soft. */
    .kpk-menu__link {
        display: flex; align-items: center; min-height: 64px; padding: var(--kpk-space-md) 0;
        border-bottom: 1px solid var(--kpk-color-brand-primary-soft);
        font-family: var(--kpk-font-heading); font-weight: 600; font-size: 20px; line-height: 1.6;
        color: var(--kpk-color-text-inverse);
    }
    .kpk-menu__link:hover { color: var(--kpk-color-text-inverse-hover); border-bottom-color: var(--kpk-color-text-inverse-hover); border-bottom-width: 2px; }
    .kpk-menu__link--selected, .kpk-menu__link--selected:hover { color: var(--kpk-color-brand-accent); border-bottom-color: var(--kpk-color-brand-accent); border-bottom-width: 2px; }
    .kpk-menu__bottom { display: flex; flex-direction: column; gap: var(--kpk-space-lg); }   /* 20 */
    .kpk-menu__lang { display: flex; gap: var(--kpk-space-sm); font-family: var(--kpk-font-heading); font-weight: 600; font-size: 16px; line-height: 1.3; }
    .kpk-menu__lang .kpk-lang__code--current { color: var(--kpk-color-text-inverse); }
    .kpk-menu__lang .kpk-lang__code, .kpk-menu__lang .kpk-lang__separator { color: var(--kp-header-accent-soft); }
    .kpk-menu__lang a.kpk-lang__code:hover { color: var(--kpk-color-text-inverse); }
    .kpk-header__toggle:checked ~ .kpk-header__bar { position: relative; z-index: 795; }
    /* The page behind the open menu does not scroll along: without this the visitor scrolls the
       page under the panel and lands somewhere else after closing it. */
    body:has(.kpk-header__toggle:checked) { overflow: hidden; }
}

/* ---------- Footer (component "Footer · Desktop" 1440x573, "· Mobile" 390x672) ---------- */
.kpk-footer__main {
    background: var(--kp-footer-bg);
    color: var(--kp-footer-text);
    border-top-left-radius: var(--kpk-radius-xl);   /* 100 */
}

.kpk-footer__inner {
    width: min(100%, var(--kpk-layout-max-width));
    margin-inline: auto;
    padding: var(--kpk-space-4xl) var(--kpk-layout-margin);   /* 96 190 */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--kpk-space-3xl);   /* 64 */
}

.kpk-footer__brand { display: flex; flex-direction: column; gap: 40px; width: 244px; flex: 0 0 auto; }
.kpk-footer__logo { width: 244px; height: 110px; display: block; }
.kpk-footer__button { display: none; }   /* the contact button in the footer is a mobile element */

.kpk-social { display: flex; gap: 25px; }
.kpk-social__link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; }
.kpk-social__circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--kpk-color-text-inverse); color: var(--kpk-color-brand-primary);
    transition: background-color 200ms ease-out;
}
.kpk-social__circle svg { display: block; }
.kpk-social__link:hover .kpk-social__circle { background: var(--kpk-color-text-inverse-hover); }
.kpk-social__link:active .kpk-social__circle { background: var(--kpk-color-text-inverse-selected); }

.kpk-footer__column { display: flex; flex-direction: column; gap: var(--kpk-space-md); }   /* 16 */
.kpk-footer__sublinks { display: flex; flex-direction: column; gap: var(--kpk-space-2xs); }  /* 4 */
.kpk-footer__mainlinks { display: flex; flex-direction: column; gap: var(--kpk-space-md); }

/* Link (component "Link"): white, heading 20/160% semibold for column heads, body 16/160% for
   sub links, bar 16/130% semibold in the magenta bar; underline 2 px on hover (15% darker),
   selected yellow. Padding 4 0 gives the 40/46 high tap targets of the design. */
.kpk-footer__link {
    display: inline-flex; align-items: center; padding: var(--kpk-space-2xs) 0;
    color: var(--kp-footer-link); border-bottom: 2px solid transparent; line-height: 1.6;
}
/* The heights of the design's Link component: 46 for a column head and a main link, 40 for a sub
   link. With gap 16 and 4 they add up to the columns of the design exactly (46 + 16 + 4x40 + 3x4 =
   234, and 5 x 46 + 4 x 16 = 294), which is what keeps the footer 486 high instead of growing. */
.kpk-footer__link--heading { min-height: 46px; font-weight: 600; font-size: 20px; color: var(--kp-footer-heading); }
.kpk-footer__link--body { min-height: 40px; font-weight: 400; font-size: 16px; }
.kpk-footer__link:hover { color: var(--kp-footer-link-hover); border-bottom-color: var(--kp-footer-link-hover); }
.kpk-footer__link--selected, .kpk-footer__link--selected:hover { color: var(--kpk-color-brand-accent); border-bottom-color: var(--kpk-color-brand-accent); }

.kpk-footer__bar { background: var(--kpk-color-brand-secondary); color: var(--kpk-color-text-inverse); }
.kpk-footer__bar-inner {
    width: min(100%, var(--kpk-layout-max-width)); margin-inline: auto;
    padding: 26px var(--kpk-layout-margin);
    /* One line, as in the design (bar 87 = 26 + 35 + 26). The substitute for the missing Macho font
       renders these six labels about 20 px wider than the design does, so a fixed gap of 48 wrapped
       the language choice onto a second line; space-between spreads the same six over the 1060 of
       the content and keeps 48 as its upper bound. */
    display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--kpk-space-lg);   /* 24 */
}
.kpk-footer__barlink {
    display: inline-flex; align-items: center; min-height: 35px; gap: var(--kpk-space-sm);
    padding: var(--kpk-space-2xs) 0; font-weight: 600; font-size: 16px; line-height: 1.3;
    color: var(--kpk-color-text-inverse); border-bottom: 2px solid transparent;
}
a.kpk-footer__barlink:hover { color: var(--kpk-color-text-inverse-hover); border-bottom-color: var(--kpk-color-text-inverse-hover); }
a.kpk-footer__barlink--selected { border-bottom-color: var(--kpk-color-text-inverse); }
.kpk-footer__language .kpk-lang__code--inactive, .kpk-footer__language .kpk-lang__separator { color: var(--kpk-color-text-inverse); opacity: 0.7; }
@media (min-width: 1440px) {
    /* At the width of the design the five main links and the four sub links of a column each
       fit on one line (columns of 197, 283 and 147). Below it they may wrap, otherwise the
       footer would push past the right edge of a narrower desktop. */
    .kpk-footer__link { white-space: nowrap; }
}
/* The muted footer colour is not used by the design (the bar text is white); it stays adjustable for a
   later element and is scoped here so the admin setting has a home. */
.kpk-footer { --kpk-footer-muted: var(--kp-footer-muted); }
.kpk-footer__language a.kpk-lang__code:hover { text-decoration: underline; }

@media (max-width: 1025px) {
    .kpk-footer__main { border-top-left-radius: 0; }
    .kpk-footer__bar-inner { flex-wrap: wrap; justify-content: flex-start; }
    .kpk-footer__inner { flex-direction: column; align-items: stretch; padding: var(--kpk-space-3xl) var(--kpk-layout-margin); gap: var(--kpk-space-3xl); }   /* 40 20 */
    .kpk-footer__brand { width: 100%; align-items: center; gap: 28px; }
    .kpk-footer__button { display: inline-flex; }
    .kpk-footer__column, .kpk-footer__mainlinks { display: none; }   /* the mobile footer keeps the navigation in the menu (Figma spec) */
    .kpk-footer__bar-inner { flex-direction: column; align-items: flex-start; padding: var(--kpk-space-lg); gap: 0; }   /* 20 */
    .kpk-footer__barlink { min-height: 48px; }
}

/* ---------- Consent bar ---------- */
.kpk-consent {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--kpk-space-md);
    padding: var(--kpk-space-md) var(--kpk-layout-margin);
    background: var(--kpk-color-brand-primary); color: var(--kpk-color-text-inverse);
    box-shadow: 0 -4px 16px rgb(0 0 0 / 0.15);
}
.kpk-consent[hidden] { display: none; }
.kpk-consent__text { margin: 0; }
.kpk-consent__text a { text-decoration: underline; }
.kpk-consent__buttons { display: flex; gap: var(--kpk-space-sm); }

/* ---------- Section head (component "Sectiekop") ---------- */
.kpk-section-head { display: flex; align-items: flex-start; gap: 40px; }
.kpk-section-head__title { flex: 0 0 420px; font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-heading-md-size); line-height: 1.2; letter-spacing: -0.02em; color: var(--kpk-color-brand-primary); }
.kpk-section-head__intro { flex: 1 1 auto; color: var(--kpk-color-text-default); }

@media (max-width: 1025px) {
    .kpk-section-head { flex-direction: column; gap: var(--kpk-space-md); }
    .kpk-section-head__title { flex: 0 0 auto; }
}

/* ---------- Page hero (Sectie · Paginahero) ---------- */
.kpk-page-hero { position: relative; color: var(--kpk-color-text-inverse); }
.kpk-page-hero__media { position: relative; height: 691px; overflow: hidden; background: var(--kpk-color-surface-placeholder); }
.kpk-page-hero__image, .kpk-page-hero__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kpk-page-hero__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.2); }   /* the 20% black fill of the design */
.kpk-page-hero__title {
    font-family: var(--kpk-font-heading); font-weight: 600; text-align: center;
    font-size: var(--kpk-text-heading-xl-size); line-height: 1.2; letter-spacing: -0.02em;
    color: var(--kpk-color-text-inverse);
}
.kpk-page-hero__title--over { position: absolute; left: 50%; top: 279px; transform: translateX(-50%); width: min(1020px, 100% - 2 * var(--kpk-space-2xl)); }
.kpk-page-hero__title--in-band { display: none; }
/* The band: 272 high, overlapping the photo by 106, padding 48 210, gap 8, centred. */
/* "Sectie . Paginahero": the band under the photo rounds its top-right corner (bottom-left on the phone). */
.kpk-page-hero__band { position: relative; margin-top: -106px; background: var(--kpk-surface); color: var(--kpk-color-text-inverse); border-top-right-radius: var(--kpk-radius-xl); }
.kpk-page-hero__band-inner {
    width: min(100%, var(--kpk-layout-max-width)); margin-inline: auto; min-height: 272px;
    padding: var(--kpk-space-2xl) 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--kpk-space-xs);
    text-align: center;
}
.kpk-page-hero__subheading { font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-heading-md-size); line-height: 1.2; letter-spacing: -0.02em; width: min(1020px, 100%); }
.kpk-page-hero__text { width: min(1020px, 100%); }
.kpk-page-hero__text p + p { margin-top: var(--kpk-space-md); }

@media (max-width: 1025px) {
    .kpk-page-hero__media { height: 380px; }
    .kpk-page-hero__title--over { display: none; }
    .kpk-page-hero__title--in-band { display: block; font-size: var(--kpk-text-heading-md-size); text-align: left; }
    .kpk-page-hero__band { margin-top: 0; border-top-right-radius: 0; border-bottom-left-radius: var(--kpk-radius-xl); }
    .kpk-page-hero__band-inner { min-height: 0; padding: var(--kpk-space-2xl) var(--kpk-layout-margin); align-items: stretch; text-align: left; gap: var(--kpk-space-xs); }   /* 32 20, gap 8 */
    .kpk-page-hero__subheading { font-size: var(--kpk-text-heading-sm-size); line-height: 1.6; letter-spacing: 0; }
}

/* ---------- Homepage hero (Sectie · Hero homepage) ---------- */
.kpk-home-hero { position: relative; background: var(--kpk-color-surface-inverse); color: var(--kpk-color-text-inverse); }
.kpk-home-hero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.kpk-home-hero__track::-webkit-scrollbar { display: none; }
.kpk-home-hero__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
.kpk-home-hero__media { position: relative; height: 863px; overflow: hidden; }
.kpk-home-hero__image, .kpk-home-hero__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kpk-home-hero__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.2); }
.kpk-home-hero__content {
    position: absolute; left: 50%; top: 393px; transform: translateX(-50%);
    width: min(1020px, 100% - 2 * 100px); display: flex; flex-direction: column; align-items: center; gap: 56px; text-align: center;
}
.kpk-home-hero__title { font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-heading-lg-size); line-height: 1.2; letter-spacing: -0.02em; color: var(--kpk-color-text-inverse); }
.kpk-home-hero__arrow { position: absolute; top: 420px; z-index: 2; display: inline-flex; }
.kpk-home-hero__arrow--previous { left: 100px; }
.kpk-home-hero__arrow--next { right: 100px; }
.kpk-home-hero__empty { height: 480px; background: var(--kpk-color-surface-placeholder); }

@media (max-width: 1025px) {
    .kpk-home-hero { background: var(--kpk-color-brand-primary); }
    .kpk-home-hero__media { height: 380px; }
    .kpk-home-hero__content { position: static; transform: none; width: auto; align-items: stretch; text-align: left; gap: var(--kpk-space-lg); padding: var(--kpk-space-xl) var(--kpk-layout-margin) var(--kpk-space-3xl); }   /* 24 20 40, gap 20 */
    .kpk-home-hero__title { font-size: var(--kpk-text-heading-md-size); }
    .kpk-home-hero__button { width: 100%; min-height: 48px; font-size: var(--kpk-text-label-md-size); }
    .kpk-home-hero__arrow { top: 307px; }
    .kpk-home-hero__arrow--previous { left: 76px; }
    .kpk-home-hero__arrow--next { right: 76px; }
}

/* ---------- Intro band (Sectie · Introband) ---------- */
/* "Sectie . Introband": rounded top-right corner on the desktop, bottom-left on the phone. */
.kpk-intro-band { background: var(--kpk-surface); color: var(--kpk-text, var(--kpk-color-text-inverse)); border-top-right-radius: var(--kpk-radius-xl); }
/* "Sectie . Introband" is 250 high in the design; a longer text still makes it grow. */
.kpk-intro-band__inner {
    width: min(100%, var(--kpk-layout-max-width)); margin-inline: auto;
    min-height: 250px; padding: 40px 254px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--kpk-space-xs); text-align: center;
}
.kpk-intro-band__heading { font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-heading-md-size); line-height: 1.2; letter-spacing: -0.02em; width: min(932px, 100%); }
.kpk-intro-band__text { width: min(932px, 100%); }
.kpk-intro-band__text p + p { margin-top: var(--kpk-space-md); }

@media (max-width: 1025px) {
    .kpk-intro-band { border-top-right-radius: 0; border-bottom-left-radius: var(--kpk-radius-xl); }
    .kpk-intro-band__inner { min-height: 0; padding: var(--kpk-space-xl) var(--kpk-layout-margin); align-items: stretch; text-align: left; gap: var(--kpk-space-md); }   /* 24 20, gap 16 */
    .kpk-intro-band__heading { font-size: var(--kpk-text-heading-sm-size); line-height: 1.6; letter-spacing: 0; }
}

/* ---------- Program blocks (Sectie · Programmablokken) ---------- */
.kpk-program-blocks { background: var(--kpk-color-surface-default); }
.kpk-program-blocks__row { width: min(1125px, 100%); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.kpk-program-block { display: flex; flex-direction: column; color: var(--kpk-color-text-inverse); }
.kpk-program-block__link { display: flex; flex-direction: column; flex: 1 1 auto; color: inherit; }
.kpk-program-block__media { height: 338px; overflow: hidden; background: var(--kpk-color-surface-placeholder); }
.kpk-program-block__media .kpk-picture, .kpk-program-block__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 200ms ease-out; }
.kpk-program-block__panel {
    flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; gap: var(--kpk-space-md);
    padding: var(--kpk-space-2xl) var(--kpk-space-xl);   /* 48 32 */
    /* The design fixes a block at 708: a photo of 338 above a panel of 370, on the desktop and on
       the phone. A longer text still makes the panel grow. */
    min-height: 370px;
    background: var(--kpk-surface);
}
.kpk-program-block__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kpk-space-md); }
.kpk-program-block__title { font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-heading-md-size); line-height: 1.2; letter-spacing: -0.02em; }
.kpk-program-block__arrow { flex: 0 0 auto; }
.kpk-program-block__text p + p { margin-top: var(--kpk-space-md); }
/* "Programmablok . Desktop" gives every colour variant its own pair of rounded corners (radius/xl,
   56 on the phone). It is the variant that carries them, not the position in the row, so a block
   keeps its corner when the order or the colour changes. */
.kpk-program-block.kp-color--accent .kpk-program-block__media { border-bottom-left-radius: var(--kpk-radius-xl); }
.kpk-program-block.kp-color--accent .kpk-program-block__panel { border-top-right-radius: var(--kpk-radius-xl); }
.kpk-program-block.kp-color--accent-alt .kpk-program-block__media { border-top-left-radius: var(--kpk-radius-xl); }
.kpk-program-block.kp-color--accent-alt .kpk-program-block__panel { border-bottom-left-radius: var(--kpk-radius-xl); }
.kpk-program-block.kp-color--primary-alt .kpk-program-block__media { border-top-right-radius: var(--kpk-radius-xl); }
.kpk-program-block.kp-color--primary-alt .kpk-program-block__panel { border-top-left-radius: var(--kpk-radius-xl); }
.kpk-program-block__link:hover img { transform: scale(1.06); }
.kpk-program-block__link:active img { transform: scale(1.03); }

@media (max-width: 1025px) {
    .kpk-program-blocks { padding: var(--kpk-space-3xl) var(--kpk-layout-margin); }   /* 40 20 */
    .kpk-program-blocks__row { grid-template-columns: minmax(0, 1fr); width: 100%; }
    .kpk-program-block__panel { padding: var(--kpk-space-2xl) var(--kpk-space-xl) var(--kpk-space-4xl); }   /* 32 24 56 24 */
}

/* ---------- Image and text (Sectie · Beeld en tekst) ---------- */
.kpk-image-text { position: relative; background: var(--kpk-color-surface-default); color: var(--kpk-text, var(--kpk-color-text-inverse)); }
.kpk-image-text__inner { width: min(100%, var(--kpk-layout-max-width)); margin-inline: auto; display: grid; align-items: stretch; }
.kpk-image-text--image-right .kpk-image-text__inner { grid-template-columns: var(--kpk-panel-width, 50%) minmax(0, 1fr); }
.kpk-image-text--image-left .kpk-image-text__inner { grid-template-columns: minmax(0, 1fr) var(--kpk-panel-width, 50%); }
.kpk-image-text--image-left .kpk-image-text__panel { order: 2; }
.kpk-image-text--image-left .kpk-image-text__media { order: 1; }
.kpk-image-text--split-half { --kpk-panel-width: 50%; --kpk-panel-left: 170px; }
.kpk-image-text--split-52-48 { --kpk-panel-width: 52.5%; --kpk-panel-left: 187px; }
.kpk-image-text--split-51-49 { --kpk-panel-width: 51.11%; --kpk-panel-left: 187px; }
.kpk-image-text__panel {
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--kpk-space-lg);   /* 24 */
    padding: 121px 88px 117px var(--kpk-panel-left, 187px);
    min-height: 360px; background: var(--kpk-surface);
}
/* "Sectie . Beeld en tekst": the panel rounds the inner top corner and the photo the inner bottom
   corner (radius/xl). Mirrored per layout, measured on both variants of the component. */
.kpk-image-text--image-left .kpk-image-text__panel { border-top-left-radius: var(--kpk-radius-xl); }
.kpk-image-text--image-right .kpk-image-text__panel { border-top-right-radius: var(--kpk-radius-xl); }
.kpk-image-text--image-left .kpk-image-text__media { border-bottom-right-radius: var(--kpk-radius-xl); }
.kpk-image-text--image-right .kpk-image-text__media { border-bottom-left-radius: var(--kpk-radius-xl); }
/* "Sectie . Macroproject" on Subsidie aanvragen rounds the photo on its OUTER bottom corner instead
   of the inner one, where the three other beeld-links blocks of the design follow the component.
   The block carries this class in its own data (Blok bewerken > CSS-klasse), so the exception stays
   in the page and not in the rule. */
.kpk-image-text--image-left.kpk-image-text--photo-outer .kpk-image-text__media { border-bottom-right-radius: 0; border-bottom-left-radius: var(--kpk-radius-xl); }
.kpk-image-text--image-right.kpk-image-text--photo-outer .kpk-image-text__media { border-bottom-left-radius: 0; border-bottom-right-radius: var(--kpk-radius-xl); }
/* The delivered design (canvas 03_Design) mirrors the pair top to bottom on the first two blocks of
   Over ons: there the PANEL rounds the corner facing the photo at the bottom and the PHOTO the one
   facing the panel at the top. The block carries this class in its own data, like the one above. */
.kpk-image-text--image-left.kpk-image-text--corners-mirrored .kpk-image-text__panel { border-top-left-radius: 0; border-bottom-left-radius: var(--kpk-radius-xl); }
.kpk-image-text--image-right.kpk-image-text--corners-mirrored .kpk-image-text__panel { border-top-right-radius: 0; border-bottom-right-radius: var(--kpk-radius-xl); }
.kpk-image-text--image-left.kpk-image-text--corners-mirrored .kpk-image-text__media { border-bottom-right-radius: 0; border-top-right-radius: var(--kpk-radius-xl); }
.kpk-image-text--image-right.kpk-image-text--corners-mirrored .kpk-image-text__media { border-bottom-left-radius: 0; border-top-left-radius: var(--kpk-radius-xl); }
/* And the block where only the PHOTO moves up: "Sectie · Onze impact in cijfers" on Programma's
   rounds the corner facing the panel at the top, while its panel keeps the component corner. */
.kpk-image-text--image-left.kpk-image-text--photo-top .kpk-image-text__media { border-bottom-right-radius: 0; border-top-right-radius: var(--kpk-radius-xl); }
.kpk-image-text--image-right.kpk-image-text--photo-top .kpk-image-text__media { border-bottom-left-radius: 0; border-top-left-radius: var(--kpk-radius-xl); }
/* The panel colour runs on to the screen edge (Figma handover). */
.kpk-image-text--image-right::before, .kpk-image-text--image-left::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: max(0px, (100% - var(--kpk-layout-max-width)) / 2); background: var(--kpk-surface);
}
.kpk-image-text--image-right::before { left: 0; }
.kpk-image-text--image-left::after { right: 0; }
.kpk-image-text__body { display: flex; flex-direction: column; gap: var(--kpk-space-md); }
.kpk-image-text__heading { font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-heading-md-size); line-height: 1.2; letter-spacing: -0.02em; }
.kpk-image-text__text p + p, .kpk-image-text__text p + ul, .kpk-image-text__text ul + p { margin-top: var(--kpk-space-md); }
.kpk-image-text__text ul { list-style: disc; padding-left: 1.25em; }
.kpk-image-text__button { align-self: flex-start; }
.kpk-image-text__media { position: relative; min-height: 360px; overflow: hidden; background: var(--kpk-color-surface-placeholder); }
.kpk-image-text__media .kpk-picture, .kpk-image-text__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Compact (500 high) and long (1084 high): the panel keeps the rounded inner top corner of the
   normal variant and the photo is a straight rectangle, measured on "Sectie . Waarom investeren"
   (compact) and "Sectie . Subsidie aanvragen" (long). The panel has a fixed width of 720. A block
   that does carry a corner here says so in its own data: the corner classes above name three
   classes and therefore win from this rule, whatever the order in the file. */
.kpk-image-text--compact .kpk-image-text__inner, .kpk-image-text--long .kpk-image-text__inner { grid-template-columns: 1fr 1fr; }
.kpk-image-text--compact .kpk-image-text__panel { padding: 120px 68px 120px 187px; min-height: 500px; gap: var(--kpk-space-md); }
.kpk-image-text--long .kpk-image-text__panel { padding: 120px 68px 120px 128px; min-height: 1084px; gap: var(--kpk-space-md); }
.kpk-image-text--compact .kpk-image-text__media, .kpk-image-text--long .kpk-image-text__media { border-radius: 0; }
.kpk-image-text--long.kpk-image-text--image-left .kpk-image-text__panel { padding-left: 128px; padding-right: 68px; }

@media (max-width: 1025px) {
    /* minmax(0, 1fr) and not 1fr: a 1fr track is at least as wide as its widest unbreakable word,
       so one long e-mail address made the whole block wider than the phone and cut the text off. */
    .kpk-image-text--image-right .kpk-image-text__inner, .kpk-image-text--image-left .kpk-image-text__inner,
    .kpk-image-text--compact .kpk-image-text__inner, .kpk-image-text--long .kpk-image-text__inner { grid-template-columns: minmax(0, 1fr); }
    /* Every variant is named on purpose: a desktop rule with more classes than this one would
       otherwise keep its rounded corner on a phone, whatever the order in the file. The mobile
       master rounds the top left of the photo and nothing else ("Sectie . Beeld en tekst . Mobile"). */
    .kpk-image-text__media, .kpk-image-text--image-left .kpk-image-text__media,
    .kpk-image-text--image-right .kpk-image-text__media,
    .kpk-image-text--compact .kpk-image-text__media, .kpk-image-text--long .kpk-image-text__media,
    .kpk-image-text--image-left.kpk-image-text--photo-outer .kpk-image-text__media,
    .kpk-image-text--image-right.kpk-image-text--photo-outer .kpk-image-text__media,
    .kpk-image-text--image-left.kpk-image-text--corners-mirrored .kpk-image-text__media,
    .kpk-image-text--image-right.kpk-image-text--corners-mirrored .kpk-image-text__media,
    .kpk-image-text--image-left.kpk-image-text--photo-top .kpk-image-text__media,
    .kpk-image-text--image-right.kpk-image-text--photo-top .kpk-image-text__media { order: 1; min-height: 280px; height: 280px; border-top-left-radius: var(--kpk-radius-xl); border-top-right-radius: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
    .kpk-image-text__panel, .kpk-image-text--image-left .kpk-image-text__panel, .kpk-image-text--image-right .kpk-image-text__panel,
    .kpk-image-text--compact .kpk-image-text__panel, .kpk-image-text--long .kpk-image-text__panel,
    .kpk-image-text--long.kpk-image-text--image-left .kpk-image-text__panel, .kpk-image-text--compact.kpk-image-text--image-left .kpk-image-text__panel,
    .kpk-image-text--image-left.kpk-image-text--corners-mirrored .kpk-image-text__panel,
    .kpk-image-text--image-right.kpk-image-text--corners-mirrored .kpk-image-text__panel {
        order: 2; min-height: 0; padding: var(--kpk-space-3xl) var(--kpk-layout-margin); gap: var(--kpk-space-xl); border-radius: 0;   /* 40 20, gap 24 */
    }
    .kpk-image-text__heading { font-size: var(--kpk-text-heading-sm-size); line-height: 1.6; letter-spacing: 0; }
    .kpk-image-text__button { align-self: stretch; }
    .kpk-image-text--image-right::before, .kpk-image-text--image-left::after { display: none; }
}

/* ---------- News mosaic (Sectie · Nieuws, homepage) ---------- */
.kpk-news-mosaic { background: var(--kpk-color-surface-default); }
.kpk-news-mosaic__inner {
    width: min(100%, var(--kpk-layout-max-width)); margin-inline: auto;
    padding: var(--kpk-space-3xl) var(--kpk-layout-margin);   /* 64 190: the mosaic of the design is 1060 wide, like every other content column */
    display: flex; flex-direction: column; gap: var(--kpk-space-2xl);   /* 48 */
}
/* The mosaic of the design: the big card fills the left column over the full height (545x480) and
   the three list cards stack in the right one (515x160 each). Without the explicit places the four
   cards flow through the two columns and the block falls apart as soon as there is more than one
   article. */
.kpk-news-mosaic__grid { display: grid; grid-template-columns: 545px minmax(0, 1fr); grid-auto-rows: 160px; gap: 0; }
.kpk-news-card--feature { grid-column: 1; grid-row: 1 / span 3; }
.kpk-news-card--row { grid-column: 2; }
.kpk-news-card { position: relative; color: var(--kpk-text, var(--kpk-color-text-default)); }
.kpk-news-card__link { display: flex; color: inherit; height: 100%; }
.kpk-news-card--feature .kpk-news-card__link { flex-direction: column; }
/* A list card writes its text on the left and its photo on the right; the photo comes first in the
   markup so a screen reader reads the card the same way as the big one. */
.kpk-news-card--row .kpk-news-card__link { flex-direction: row; }
.kpk-news-card--row .kpk-news-card__media { order: 2; }
.kpk-news-card__media { position: relative; overflow: hidden; background: var(--kpk-color-surface-placeholder); }
.kpk-news-card--feature .kpk-news-card__media { height: 320px; border-bottom-right-radius: var(--kpk-radius-xl); }
.kpk-news-card--row .kpk-news-card__media { flex: 0 0 162px; height: 160px; border-top-left-radius: var(--kpk-radius-lg); }
.kpk-news-card__media .kpk-picture, .kpk-news-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 200ms ease-out; }
.kpk-news-card__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0); transition: background-color 200ms ease-out; }
.kpk-news-card__panel { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--kpk-space-xs); padding: var(--kpk-space-lg); background: var(--kpk-surface); }   /* 24, gap 8 */
.kpk-news-card--feature .kpk-news-card__panel { min-height: 160px; border-top-right-radius: var(--kpk-radius-lg); }
.kpk-news-card--row .kpk-news-card__panel { border-bottom-right-radius: var(--kpk-radius-lg); }
.kpk-news-card__title { font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-heading-sm-size); line-height: 1.6; }
.kpk-news-card__text { font-size: var(--kpk-text-body-md-size); line-height: 1.6; }
.kpk-news-card__link:hover img { transform: scale(1.06); }
.kpk-news-card__link:hover .kpk-news-card__scrim { background: rgb(0 0 0 / 0.04); }
.kpk-news-card__link:active img { transform: scale(1.03); }
.kpk-news-card__link:active .kpk-news-card__scrim { background: rgb(0 0 0 / 0.12); }
.kpk-news-mosaic__actions { display: flex; justify-content: center; }

@media (max-width: 1025px) {
    .kpk-news-mosaic__inner { padding: var(--kpk-space-3xl) var(--kpk-layout-margin); gap: var(--kpk-space-xl); }   /* 40 20, gap 24 */
    .kpk-news-mosaic__grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
    .kpk-news-card--feature, .kpk-news-card--row { grid-column: auto; grid-row: auto; }
    .kpk-news-card--row .kpk-news-card__link { flex-direction: column; }
    .kpk-news-card--row .kpk-news-card__media { order: 0; }
    /* "Kaart nieuws . Mobile" moves the rounded corner of the photo to the bottom right and keeps
       the panel corner at the top right (radius/xl 56 for the feature card, radius/lg 32 for a row). */
    .kpk-news-card--row .kpk-news-card__media { flex: 0 0 auto; height: 160px; border-radius: 0; border-bottom-right-radius: var(--kpk-radius-lg); }
    .kpk-news-card--feature .kpk-news-card__media { border-radius: 0; border-bottom-right-radius: var(--kpk-radius-xl); }
    .kpk-news-card--feature .kpk-news-card__panel, .kpk-news-card--row .kpk-news-card__panel {
        border-radius: 0; border-top-right-radius: var(--kpk-radius-lg);
    }
    .kpk-news-card__panel, .kpk-news-card--feature .kpk-news-card__panel { padding: var(--kpk-space-lg); min-height: 0; }   /* 20 */
    .kpk-news-mosaic__button { width: 100%; }
}

/* ---------- Portal (Sectie · Portaal) ---------- */
/* "Sectie . Aanvraagportaal": rounded top-left corner, straight on the phone. */
.kpk-portal { background: var(--kpk-surface); color: var(--kpk-text, var(--kpk-color-text-inverse)); border-top-left-radius: var(--kpk-radius-xl); }
.kpk-portal.kp-color--surface { --kpk-on-surface: var(--kpk-color-brand-primary); }
.kpk-portal__inner {
    width: min(100%, var(--kpk-layout-max-width)); margin-inline: auto; min-height: 382px;
    padding: var(--kpk-space-3xl) var(--kpk-layout-margin); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--kpk-space-md); text-align: center;   /* 64 */
}
.kpk-portal__heading { font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-heading-md-size); line-height: 1.2; letter-spacing: -0.02em; }

@media (max-width: 1025px) {
    .kpk-portal { border-top-left-radius: 0; }
    .kpk-portal__inner { min-height: 0; padding: 48px var(--kpk-layout-margin); align-items: stretch; }   /* 48 20 */
    .kpk-portal__button { width: 100%; }
}

/* ---------- Steps (Sectie · Stappenplan) ---------- */
.kpk-steps { position: relative; background: var(--kpk-color-surface-default); color: var(--kpk-text, var(--kpk-color-text-inverse)); }
.kpk-steps__inner { width: min(100%, var(--kpk-layout-max-width)); margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.kpk-steps--image-left .kpk-steps__panel { order: 2; }
.kpk-steps--image-left .kpk-steps__media { order: 1; }
.kpk-steps__panel { display: flex; flex-direction: column; gap: var(--kpk-space-xs); padding: 120px 68px 64px 187px; background: var(--kpk-surface); border-bottom-right-radius: var(--kpk-radius-xl); }
/* "Sectie . Stappenplan": the panel rounds its own bottom corner and the photo the bottom corner
   that faces the panel (radius/xl), the other corners are straight. Mirrored per layout. */
.kpk-steps--image-left .kpk-steps__panel { border-bottom-right-radius: 0; border-bottom-left-radius: var(--kpk-radius-xl); }
.kpk-steps--image-right .kpk-steps__media { border-bottom-left-radius: var(--kpk-radius-xl); }
.kpk-steps--image-left .kpk-steps__media { border-bottom-right-radius: var(--kpk-radius-xl); }
.kpk-steps--image-right::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: max(0px, (100% - var(--kpk-layout-max-width)) / 2); background: var(--kpk-surface); }
.kpk-steps__heading { font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-heading-md-size); line-height: 1.2; letter-spacing: -0.02em; }
.kpk-steps__list { display: flex; flex-direction: column; gap: var(--kpk-space-xs); counter-reset: step; }
.kpk-steps__step { display: flex; flex-direction: column; gap: var(--kpk-space-xs); }
.kpk-steps__step-title { font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-heading-sm-size); line-height: 1.6; }
.kpk-steps__step-text p + p { margin-top: var(--kpk-space-md); }
.kpk-steps__media { position: relative; min-height: 400px; overflow: hidden; background: var(--kpk-color-surface-placeholder); }
.kpk-steps__media .kpk-picture, .kpk-steps__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1025px) {
    .kpk-steps__inner { grid-template-columns: minmax(0, 1fr); }
    .kpk-steps__media, .kpk-steps--image-left .kpk-steps__media,
    .kpk-steps--image-right .kpk-steps__media { order: 1; min-height: 280px; height: 280px; border-radius: 0; border-top-left-radius: var(--kpk-radius-xl); }
    .kpk-steps__panel, .kpk-steps--image-left .kpk-steps__panel { order: 2; padding: var(--kpk-space-3xl) var(--kpk-layout-margin); gap: var(--kpk-space-xl); }   /* 40 20, gap 24 */
    .kpk-steps__list { gap: var(--kpk-space-lg); }
    .kpk-steps__panel, .kpk-steps--image-left .kpk-steps__panel { border-bottom-left-radius: 0; border-bottom-right-radius: var(--kpk-radius-xl); }   /* "Sectie . Stappenplan . Mobile" */
    .kpk-steps--image-right::before { display: none; }
}

/* ---------- Fund partners (Sectie · Fondspartners) ---------- */
.kpk-fund-partners { background: var(--kpk-color-surface-default); }
.kpk-fund-partners__inner {
    width: min(100%, var(--kpk-layout-max-width)); margin-inline: auto;
    padding: var(--kpk-space-section) var(--kpk-layout-margin); display: flex; flex-direction: column; gap: var(--kpk-space-2xl);   /* 120 190, gap 48 */
}
.kpk-fund-partners__heading { font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-heading-md-size); line-height: 1.2; letter-spacing: -0.02em; color: var(--kpk-color-brand-primary); }
/* align-items: start, because every card of the design is as tall as its own text; stretching
   them to one height hid the rounded bottom corner of the two shorter ones. */
.kpk-fund-partners__row { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; width: min(1125px, 100%); margin-inline: auto; margin-left: -32px; }
.kpk-partner-card { display: flex; flex-direction: column; color: var(--kpk-text, var(--kpk-color-text-inverse)); }
.kpk-partner-card__logo { height: 338px; padding: 111px 76px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--kpk-surface); border-bottom: 0; background: var(--kpk-color-surface-default); }
.kpk-partner-card__logo a { display: block; width: 100%; height: 100%; }
.kpk-partner-card__logo .kpk-picture, .kpk-partner-card__logo-image, .kpk-partner-card__logo img { width: 100%; height: 100%; object-fit: contain; }
/* "Partnerkaart . Desktop": every colour variant carries its own two corners (radius/xl), and the
   design writes the name and the text white on all three. */
.kpk-partner-card.kp-text--auto { --kpk-text: var(--kpk-color-text-inverse); }
.kpk-partner-card.kp-color--accent .kpk-partner-card__logo { border-bottom-left-radius: var(--kpk-radius-xl); }
.kpk-partner-card.kp-color--accent .kpk-partner-card__panel { border-top-right-radius: var(--kpk-radius-xl); }
.kpk-partner-card.kp-color--accent-alt .kpk-partner-card__logo { border-top-left-radius: var(--kpk-radius-xl); }
.kpk-partner-card.kp-color--accent-alt .kpk-partner-card__panel { border-bottom-right-radius: var(--kpk-radius-xl); }
.kpk-partner-card.kp-color--secondary .kpk-partner-card__logo { border-bottom-left-radius: var(--kpk-radius-xl); }
.kpk-partner-card.kp-color--secondary .kpk-partner-card__panel { border-bottom-left-radius: var(--kpk-radius-xl); }
.kpk-partner-card__panel { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--kpk-space-xs); padding: var(--kpk-space-lg) var(--kpk-space-lg) var(--kpk-space-3xl); background: var(--kpk-surface); }   /* 24 24 64 */
.kpk-partner-card__title { font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-heading-md-size); line-height: 1.2; letter-spacing: -0.02em; }
.kpk-partner-card__text p + p { margin-top: var(--kpk-space-md); }

@media (max-width: 1025px) {
    .kpk-fund-partners__inner { padding: var(--kpk-space-3xl) var(--kpk-layout-margin); gap: var(--kpk-space-xl); }   /* 40 20, gap 24 */
    .kpk-fund-partners__row { grid-template-columns: minmax(0, 1fr); width: 100%; margin-left: 0; }
    .kpk-partner-card__logo { height: 240px; padding: 60px 48px; }
    .kpk-partner-card__panel { padding: var(--kpk-space-xl) var(--kpk-space-xl) var(--kpk-space-3xl); }   /* 24 24 40 */
}

/* ---------- Partner logos (Sectie · Partners) ---------- */
.kpk-partner-logos { position: relative; background: var(--kpk-color-surface-default); color: var(--kpk-text, var(--kpk-color-text-inverse)); }
.kpk-partner-logos__inner { width: min(100%, var(--kpk-layout-max-width)); margin-inline: auto; display: grid; grid-template-columns: 51.11% minmax(0, 1fr); align-items: stretch; }
/* The design centres a row of 512 (two frames of 244 with a gap of 24) on x = 394 of the 736 wide
   left half, so the row is wider than the padding box of 148/97 and overflows it in Figma. Written
   out as the real edges of that row (138 and 736 - 650 = 86) two logos fit on the first line here
   too; with 148/97 every logo dropped onto a line of its own. */
.kpk-partner-logos__logos { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 36px 24px; padding: 144px 86px 144px 138px; }
/* max-width next to the width: the left half is 51.11% of 1440, which lands a fraction below the
   512 that two frames of 244 with a gap of 24 need, and that fraction dropped the second logo onto
   a line of its own. */
.kpk-partner-logos__logo { width: 244px; max-width: calc(50% - 12px); height: 128px; display: flex; align-items: center; justify-content: center; }
.kpk-partner-logos__logo a { display: block; width: 100%; height: 100%; }
.kpk-partner-logos__logo .kpk-picture, .kpk-partner-logos__logo img { width: 100%; height: 100%; object-fit: contain; }
/* The page of the design (Programma's) runs this panel the full height of the section and rounds
   its bottom-left corner; the master in 04_Sections shows it hugging its text. */
.kpk-partner-logos__panel { display: flex; flex-direction: column; gap: var(--kpk-space-md); padding: 102px 79px 102px 129px; background: var(--kpk-surface); }
/* The design writes this panel white (heading and text #ffffff on primary-alt), where the same
   colour carries black text in a block of image and text. The choice in the admin still wins. */
.kpk-partner-logos.kp-text--auto { --kpk-text: var(--kpk-color-text-inverse); }
.kpk-partner-logos__panel { border-bottom-left-radius: var(--kpk-radius-xl); }
.kpk-partner-logos::after { content: ""; position: absolute; top: 0; right: 0; height: 100%; width: max(0px, (100% - var(--kpk-layout-max-width)) / 2); background: transparent; }
.kpk-partner-logos__heading { font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-heading-md-size); line-height: 1.2; letter-spacing: -0.02em; }
.kpk-partner-logos__text p + p { margin-top: var(--kpk-space-md); }

@media (max-width: 1025px) {
    .kpk-partner-logos__inner { grid-template-columns: minmax(0, 1fr); }
    /* Side padding 15 and not 20: the design puts two logo frames of 172 with a gap of 16 next to
       each other (row of 360 centred in 390, node 356:5266). With 20 the row no longer fitted and
       every logo dropped onto its own line, which left a tall empty white block. */
    .kpk-partner-logos__logos { gap: var(--kpk-space-md); padding: var(--kpk-space-3xl) 15px; }   /* 40 15 */
    .kpk-partner-logos__logo { width: 172px; height: 91px; }
    .kpk-partner-logos__panel { padding: var(--kpk-space-3xl) var(--kpk-layout-margin); border-top-right-radius: var(--kpk-radius-xl); }   /* "Sectie . Partners . Mobile" */
}

/* ---------- Listing (Sectie · Nieuws en Projecten) ---------- */
.kpk-listing { background: var(--kpk-surface); color: var(--kpk-color-text-inverse); border-top-left-radius: var(--kpk-radius-xl); }
.kpk-listing__inner {
    width: min(100%, var(--kpk-layout-max-width)); margin-inline: auto;
    padding: var(--kpk-space-section) var(--kpk-layout-margin); display: flex; flex-direction: column; gap: 28px;   /* 120 190 */
}
.kpk-listing__heading { font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-heading-md-size); line-height: 1.2; letter-spacing: -0.02em; }
/* The design puts the cards in the left column, the search box with the four filters at the TOP of
   the right column and the "Laad meer" link at the BOTTOM of that same column (node 120:4912:
   "Zoek en filter" at y 0 with a height of 277, "Meer nieuws" at y 795 of 827). Named areas, so the
   phone can put the three in the order of its own master without moving anything in the markup. */
.kpk-listing__layout { display: grid; grid-template-columns: minmax(0, 1fr) 166px; gap: 44px; align-items: stretch; }
.kpk-listing--filters .kpk-listing__layout { grid-template-areas: "results filters" "results more"; grid-template-rows: 1fr auto; }
.kpk-listing--compact .kpk-listing__layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "results" "more"; grid-template-rows: auto auto; }
.kpk-listing__results { grid-area: results; display: flex; flex-direction: column; gap: 57px; }
.kpk-listing__grid { display: grid; grid-template-columns: repeat(3, 239px); gap: 57px 44px; justify-content: start; }
.kpk-listing--compact .kpk-listing__grid { justify-content: center; }
.kpk-listing__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kpk-space-md); font-weight: 700; }
.kpk-chip { display: inline-flex; align-items: center; gap: var(--kpk-space-xs); padding: 6px 12px 6px 16px; border-radius: var(--kpk-radius-full); background: var(--kpk-color-surface-default); color: var(--kpk-color-brand-primary); font-weight: 700; }
.kpk-chip:hover { background: var(--kpk-color-text-inverse-hover); }
.kpk-listing__empty { font-weight: 700; }
.kpk-listing__more { grid-area: more; font-family: var(--kpk-font-heading); font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--kpk-color-text-inverse); border-bottom: 2px solid transparent; align-self: end; justify-self: start; }
.kpk-listing__more:hover { border-bottom-color: var(--kpk-color-text-inverse); }
/* The search box and the four filters are one tight group of 12 px gaps at the top of the column,
   not five fields spread over its whole height. */
.kpk-listing__side { grid-area: filters; display: flex; flex-direction: column; align-content: start; gap: var(--kpk-space-sm); }
.kpk-listing__actions { display: flex; justify-content: center; }

/* Search box (component "Zoekveld"): 166x45 white, label 20 bold primary, 2 px border when focused. */
.kpk-search { margin: 0 0 0; }
.kpk-search__label { position: absolute; left: -9999px; }
.kpk-search__input {
    width: 100%; height: 45px; padding: 10px 12px; border: 2px solid transparent; border-radius: 0;
    background: var(--kpk-color-surface-default); color: var(--kpk-color-brand-primary);
    font-family: var(--kpk-font-body); font-weight: 700; font-size: 20px; line-height: 1.6;
}
.kpk-search__input::placeholder { color: var(--kpk-color-brand-primary); opacity: 1; }
.kpk-search__input:hover::placeholder { color: var(--kpk-color-brand-primary-hover); }
.kpk-search__input:focus { outline: none; border-color: var(--kpk-color-brand-primary); }

/* Filter (component "Filter"): 166x46 white head with label 16 bold primary and a caret; the open
   list is white with a 1 px primary-soft divider and options 16 primary. */
.kpk-filter { position: relative; }
.kpk-filter__head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--kpk-space-xs);
    min-height: 46px; padding: 10px 12px; background: var(--kpk-color-surface-default); color: var(--kpk-color-brand-primary);
    font-weight: 700; font-size: 16px; line-height: 1.6; cursor: pointer; list-style: none;
}
.kpk-filter__head::-webkit-details-marker { display: none; }
.kpk-filter__head:hover { color: var(--kpk-color-brand-primary-hover); }
.kpk-filter__caret { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; transition: transform 200ms ease-out; }
.kpk-filter[open] .kpk-filter__caret { transform: rotate(180deg); }
.kpk-filter__options { position: absolute; left: 0; right: 0; z-index: 5; padding: 8px 12px 12px; background: var(--kpk-color-surface-default); display: flex; flex-direction: column; gap: 4px; box-shadow: 0 6px 16px rgb(0 0 0 / 0.12); }
.kpk-filter__options::before { content: ""; display: block; height: 1px; background: var(--kpk-color-brand-primary-soft); margin-bottom: 4px; }
.kpk-filter__option { display: block; padding: 2px 0; color: var(--kpk-color-brand-primary); font-size: 16px; line-height: 1.6; }
.kpk-filter__option:hover { color: var(--kpk-color-brand-primary-hover); text-decoration: underline; }
.kpk-filter__option--selected { font-weight: 700; }

/* Item card (component "Projectkaart"): photo 239x222, title 20/160% bold white, gap 35. */
.kpk-item-card { color: var(--kpk-color-text-inverse); }
.kpk-item-card__link { display: flex; flex-direction: column; gap: 35px; color: inherit; }
/* "Projectkaart": the photo rounds its bottom-right corner (radius/lg, 32 on the phone). */
.kpk-item-card__media { position: relative; height: 222px; overflow: hidden; border-bottom-right-radius: var(--kpk-radius-lg); background: var(--kpk-color-surface-placeholder); }
.kpk-item-card__media .kpk-picture, .kpk-item-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 200ms ease-out; }
.kpk-item-card__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0); transition: background-color 200ms ease-out; }
.kpk-item-card__title { font-family: var(--kpk-font-body); font-weight: 700; font-size: 20px; line-height: 1.6; }
.kpk-item-card__link:hover img { transform: scale(1.06); }
.kpk-item-card__link:hover .kpk-item-card__scrim { background: rgb(0 0 0 / 0.04); }
.kpk-item-card__link:active img { transform: scale(1.03); }
.kpk-item-card__link:active .kpk-item-card__scrim { background: rgb(0 0 0 / 0.12); }
.kpk-item-card__link:active .kpk-item-card__title { color: var(--kpk-color-text-inverse-hover); }

@media (max-width: 1025px) {
    .kpk-listing { border-top-left-radius: 0; }
    .kpk-listing__inner { padding: var(--kpk-space-3xl) var(--kpk-layout-margin); gap: var(--kpk-space-xl); }   /* 40 20, gap 24 */
    /* "Sectie . Nieuws en Projecten . Mobile" (node 352:1187): the filters at the top, then the
       cards, then the "Laad meer" link. Every variant is named, so a desktop area never survives. */
    .kpk-listing__layout, .kpk-listing--filters .kpk-listing__layout, .kpk-listing--compact .kpk-listing__layout {
        grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "filters" "results" "more"; gap: var(--kpk-space-lg);
    }
    .kpk-listing__side { gap: var(--kpk-space-sm); }
    .kpk-listing__results { gap: var(--kpk-space-lg); }
    .kpk-listing__grid, .kpk-listing--compact .kpk-listing__grid { grid-template-columns: minmax(0, 1fr); gap: var(--kpk-space-lg); }
    .kpk-search__input { height: 48px; padding: 8px 12px; }
    .kpk-filter__head { min-height: 48px; padding: 11px 12px; }
    .kpk-filter__options { position: static; box-shadow: none; }
    .kpk-filter__option { min-height: 48px; display: flex; align-items: center; }
    .kpk-listing__button { width: 100%; }
}

/* ---------- Related items (Sectie · Meer nieuws / Meer projecten) ---------- */
/* "Sectie . Meer nieuws" and ". Meer projecten": rounded bottom-left corner, on both screens. */
.kpk-related { background: var(--kpk-surface); color: var(--kpk-color-text-inverse); border-bottom-left-radius: var(--kpk-radius-xl); }
.kpk-related__inner {
    width: min(100%, var(--kpk-layout-max-width)); margin-inline: auto;
    padding: var(--kpk-space-section) var(--kpk-layout-margin); display: flex; flex-direction: column; gap: 80px;   /* 120 190 */
}
.kpk-related__heading { font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-heading-md-size); line-height: 1.2; letter-spacing: -0.02em; text-align: center; }
.kpk-related__row { display: grid; grid-template-columns: repeat(3, 239px); gap: 44px; justify-content: center; }

@media (max-width: 1025px) {
    .kpk-related__inner { padding: var(--kpk-space-3xl) var(--kpk-layout-margin); gap: var(--kpk-space-xl); }   /* 40 20, gap 24 */
    .kpk-related__heading { font-size: var(--kpk-text-heading-sm-size); line-height: 1.6; letter-spacing: 0; }
    .kpk-related__row { grid-template-columns: minmax(0, 1fr); gap: var(--kpk-space-lg); }
}

/* ---------- Documents (Sectie · Factsheets & Documents) ---------- */
.kpk-documents { background: var(--kpk-color-surface-default); }
.kpk-documents__inner {
    width: min(var(--kpk-layout-content-max), 100% - 2 * var(--kpk-layout-margin)); margin-inline: auto;
    padding: var(--kpk-space-section) 0; display: flex; flex-direction: column; gap: 46px;   /* 120 */
}
.kpk-documents__heading { font-family: var(--kpk-font-heading); font-weight: 600; font-size: 20px; line-height: 1.6; color: var(--kpk-color-brand-primary); text-align: center; }
.kpk-documents__list { display: grid; grid-template-columns: repeat(4, 220px); justify-content: space-evenly; gap: 46px 40px; }
.kpk-documents__item .kpk-btn { white-space: normal; text-align: center; }

@media (max-width: 1025px) {
    .kpk-documents__inner { padding: var(--kpk-space-3xl) 0; gap: var(--kpk-space-xl); }   /* 40, gap 24 */
    .kpk-documents__heading { font-size: var(--kpk-text-heading-md-size); line-height: 1.2; letter-spacing: -0.02em; text-align: left; }
    .kpk-documents__list { grid-template-columns: minmax(0, 1fr); gap: var(--kpk-space-md); }
}

/* ---------- Contact form (Sectie · Invulformulier) ---------- */
.kpk-contact-form { background: var(--kpk-surface); }
.kpk-contact-form__inner {
    width: min(772px, 100% - 2 * var(--kpk-layout-margin)); margin-inline: auto;
    padding: var(--kpk-space-section) 0; display: flex; flex-direction: column; gap: 60px;   /* 120 334 */
}
.kpk-contact-form__heading { font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-heading-md-size); line-height: 1.2; letter-spacing: -0.02em; color: var(--kpk-color-brand-accent-alt); text-align: center; }
.kpk-form { display: flex; flex-direction: column; gap: 18px; }
.kpk-form__field { display: flex; flex-direction: column; }
.kpk-form__label { position: absolute; left: -9999px; }   /* the design shows the label inside the field */
.kpk-form__input {
    width: 100%; min-height: 31px; padding: 4px 12px; border: 0; border-radius: 0;
    /* The field is the brand orange at 20% (design "Contact", rgba(250,175,65,0.2)), not the full
       colour: written as a mix of the token, so the orange still has one place to change. */
    background: color-mix(in srgb, var(--kpk-color-brand-accent) 20%, transparent); color: var(--kpk-color-text-default);
    font-family: var(--kpk-font-body); font-size: 16px; line-height: 1.6;
}
.kpk-form__input::placeholder { color: var(--kpk-color-brand-accent-alt); opacity: 1; }
.kpk-form__input:focus { outline: 2px solid var(--kpk-color-brand-accent-alt); outline-offset: 0; }
.kpk-form__input--area { min-height: 351px; resize: vertical; }
.kpk-form__error { color: var(--kpk-color-brand-accent-alt); font-size: 14px; }
.kpk-form__honey { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.kpk-contact-form__actions { display: flex; justify-content: center; }
/* The "Verstuur" button of the design is 226 wide, not the width of its label (design "Contact",
   Button 226x48); the shared button keeps its padding and only gets a floor here. */
.kpk-contact-form__actions .kpk-btn { min-width: 226px; }
.kpk-contact-form__message { padding: var(--kpk-space-md); border-radius: var(--kpk-radius-md); font-weight: 600; }
.kpk-contact-form__message--success { background: var(--kpk-color-brand-primary); color: var(--kpk-color-text-inverse); }
.kpk-contact-form__message--error { background: var(--kpk-color-brand-accent-alt); color: var(--kpk-color-text-inverse); }

@media (max-width: 1025px) {
    .kpk-contact-form__inner { width: min(772px, 100% - 2 * var(--kpk-layout-margin)); padding: var(--kpk-space-3xl) 0; gap: var(--kpk-space-xl); }   /* 40, gap 24 */
    .kpk-form { gap: var(--kpk-space-md); }
    /* 16 and not the 12 of the design: iOS Safari zooms the whole page in as soon as a focused
       field has text below 16 px, and the visitor then has to pinch back. See Documents/Deviations.md. */
    .kpk-form__input { min-height: 48px; padding: 12px 16px; font-size: 16px; color: #2e333d; }
    .kpk-form__input::placeholder { color: #2e333d; }
    .kpk-form__input--area { min-height: 160px; }
    .kpk-contact-form__actions .kpk-btn { width: 100%; }
}

/* ---------- Contact details (Bezoek ons) ---------- */
/* "Bezoek ons" is the only image-and-text block the design draws differently: the map is a straight
   rectangle and the coloured panel rounds its BOTTOM left corner, where the block rule rounds the
   top of the panel and the bottom of the photo. Both layouts are named, so the rule also holds when
   an editor puts the map on the right. */
.kpk-contact-details .kpk-image-text__media,
.kpk-contact-details.kpk-image-text--image-left .kpk-image-text__media,
.kpk-contact-details.kpk-image-text--image-right .kpk-image-text__media { border-radius: 0; }
.kpk-contact-details .kpk-image-text__panel,
.kpk-contact-details.kpk-image-text--image-left .kpk-image-text__panel { border-radius: 0; border-bottom-left-radius: var(--kpk-radius-xl); }
.kpk-contact-details.kpk-image-text--image-right .kpk-image-text__panel { border-radius: 0; border-bottom-right-radius: var(--kpk-radius-xl); }
.kpk-contact-details__list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--kpk-space-xs) var(--kpk-space-md); }
.kpk-contact-details__list dt { font-weight: 700; }
.kpk-contact-details__list dd { margin: 0; }
/* An address or an e-mail address is one long unbreakable string; it wraps rather than run off. */
.kpk-contact-details__list dd, .kpk-contact-details__list a { overflow-wrap: anywhere; }
.kpk-contact-details__list a { text-decoration: underline; }
.kpk-contact-details__map-link { display: inline-block; margin-top: var(--kpk-space-md); text-decoration: underline; }
.kpk-contact-details__map { position: relative; }
.kpk-contact-details__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: none; }
.kpk-contact-details__frame--loaded { display: block; z-index: 2; }

/* ---------- FAQ (Sectie · FAQ) ---------- */
.kpk-faq { background: var(--kpk-color-surface-default); }
.kpk-faq__inner { width: min(var(--kpk-layout-content-max), 100% - 2 * var(--kpk-layout-margin)); margin-inline: auto; padding: var(--kpk-space-section) 0; }
.kpk-faq__item { border-bottom: 1px solid var(--kpk-color-brand-primary-soft); padding: var(--kpk-space-lg) 0; }
.kpk-faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--kpk-space-lg); cursor: pointer; list-style: none; color: var(--kpk-color-brand-primary); font-weight: 600; font-size: 20px; line-height: 1.6; }
.kpk-faq__question::-webkit-details-marker { display: none; }
.kpk-faq__question:hover .kpk-faq__chevron { color: var(--kpk-color-brand-primary-hover); }
.kpk-faq__chevron { flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--kpk-color-brand-primary); transition: transform 200ms ease-out; }
.kpk-faq__item[open] .kpk-faq__chevron { transform: rotate(180deg); }
.kpk-faq__answer { margin-top: var(--kpk-space-md); color: var(--kpk-color-text-default); }
.kpk-faq__answer p + p { margin-top: var(--kpk-space-md); }

@media (max-width: 1025px) {
    .kpk-faq__inner { padding: var(--kpk-space-3xl) 0; }
    .kpk-faq__item { padding: var(--kpk-space-lg) 0; }
    .kpk-faq__question { font-family: var(--kpk-font-heading); gap: var(--kpk-space-md); }
}

/* ---------- Text block (Sectie · Info- en Juridische pagina's) ---------- */
.kpk-text-block { background: var(--kpk-color-surface-default); }
.kpk-text-block__inner {
    width: min(var(--kpk-layout-content-max), 100% - 2 * var(--kpk-layout-margin)); margin-inline: auto;
    padding: 320px 0 var(--kpk-space-section); display: flex; flex-direction: column; gap: var(--kpk-space-4xl);   /* 96 */
}
.kpk-text-block__title { font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-heading-md-size); line-height: 1.2; letter-spacing: -0.02em; color: var(--kpk-color-text-default); }
.kpk-text-block__intro { font-weight: 700; }
.kpk-not-found .kpk-text-block__inner { padding-top: var(--kpk-space-section); }

@media (max-width: 1025px) {
    .kpk-text-block__inner { padding: var(--kpk-space-3xl) 0; gap: var(--kpk-space-lg); }
    .kpk-text-block__title { font-size: var(--kpk-text-heading-sm-size); line-height: 1.6; letter-spacing: 0; }
}

/* Rich text from the editor (article body, FAQ answers, legal pages). */
.kpk-rich-text p + p, .kpk-rich-text p + ul, .kpk-rich-text ul + p, .kpk-rich-text p + ol { margin-top: var(--kpk-space-md); }
.kpk-rich-text ul { list-style: disc; padding-left: 1.25em; }

/* Every rich text of a section reads the same markup, so it renders the same: a list of the page
   editor (lines that start with a dash) keeps its bullets, and a paragraph after a list keeps its
   distance. Only two containers had this, so the list of the design in "Stappenplan" ran on as
   plain text and the section came out 132 px shorter than the design. */
.kpk-page-hero__text ul, .kpk-intro-band__text ul, .kpk-program-block__text ul, .kpk-steps__step-text ul,
.kpk-partner-card__text ul, .kpk-partner-logos__text ul, .kpk-portal__text ul, .kpk-section-head__intro ul,
.kpk-text-block__intro ul, .kpk-faq__answer ul, .kpk-article__intro ul {
    list-style: disc; padding-left: 1.25em;
}
.kpk-page-hero__text p + ul, .kpk-page-hero__text ul + p,
.kpk-intro-band__text p + ul, .kpk-intro-band__text ul + p,
.kpk-program-block__text p + ul, .kpk-program-block__text ul + p,
.kpk-steps__step-text p + ul, .kpk-steps__step-text ul + p,
.kpk-partner-card__text p + ul, .kpk-partner-card__text ul + p,
.kpk-partner-logos__text p + ul, .kpk-partner-logos__text ul + p,
.kpk-portal__text p + ul, .kpk-portal__text ul + p,
.kpk-section-head__intro p + ul, .kpk-section-head__intro ul + p,
.kpk-text-block__intro p + ul, .kpk-text-block__intro ul + p,
.kpk-faq__answer p + ul, .kpk-faq__answer ul + p,
.kpk-article__intro p + ul, .kpk-article__intro ul + p {
    margin-top: var(--kpk-space-md);
}
.kpk-rich-text ol { list-style: decimal; padding-left: 1.25em; }
.kpk-rich-text a { color: var(--kpk-color-brand-secondary); text-decoration: underline; }
/* Titles typed inside a text (rich text of an article or a block) follow the "Titels" tab of
   /beheer/colors (HeadingStyles: the --kp-hN-* properties of app.css); the section headings of the
   design keep the Figma tokens above. */
.kpk-rich-text h1, .kpk-rich-text h2, .kpk-rich-text h3, .kpk-rich-text h4 { font-family: var(--kpk-font-heading); margin-top: var(--kpk-space-xl); line-height: 1.2; }
.kpk-rich-text h1 { color: var(--kp-h1-color); font-size: var(--kp-h1-size); font-weight: var(--kp-h1-weight); letter-spacing: var(--kp-h1-spacing); text-transform: var(--kp-h1-transform); text-align: var(--kp-h1-align); }
.kpk-rich-text h2 { color: var(--kp-h2-color); font-size: var(--kp-h2-size); font-weight: var(--kp-h2-weight); letter-spacing: var(--kp-h2-spacing); text-transform: var(--kp-h2-transform); text-align: var(--kp-h2-align); }
.kpk-rich-text h3 { color: var(--kp-h3-color); font-size: var(--kp-h3-size); font-weight: var(--kp-h3-weight); letter-spacing: var(--kp-h3-spacing); text-transform: var(--kp-h3-transform); text-align: var(--kp-h3-align); }
.kpk-rich-text h4 { color: var(--kp-h4-color); font-size: var(--kp-h4-size); font-weight: var(--kp-h4-weight); letter-spacing: var(--kp-h4-spacing); text-transform: var(--kp-h4-transform); text-align: var(--kp-h4-align); }
/* A full-width component ([[scheiding:...]] / [[tegels:...]]) breaks out of the text column. */
.kpk-article__full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

/* Heading markers of the page editor (HeadingMarkup): the accent word in the secondary colour, and a
   hand-placed line break that only counts on a wide screen; a phone keeps wrapping by itself. */
.kp-wordmark__accent {
    color: var(--kp-pink);
}
.kp-heading-break {
    display: none;
}
@media (min-width: 1026px) {
    .kp-heading-break { display: inline; }
}

/* Contact details: an anchor target below the sticky header. */
.kpk-contact-details { scroll-margin-top: var(--kpk-layout-header-height); }

@media (max-width: 1025px) {
    /* "Sectie · Beeld en tekst · Mobile" on Contact: the map and the panel are both straight
       rectangles, so the top left corner the mobile block rule gives every photo comes off here.
       Every layout variant is named, the same way the block rule names them. */
    .kpk-contact-details .kpk-image-text__media,
    .kpk-contact-details.kpk-image-text--image-left .kpk-image-text__media,
    .kpk-contact-details.kpk-image-text--image-right .kpk-image-text__media,
    .kpk-contact-details .kpk-image-text__panel,
    .kpk-contact-details.kpk-image-text--image-left .kpk-image-text__panel,
    .kpk-contact-details.kpk-image-text--image-right .kpk-image-text__panel { border-radius: 0; }
    /* The labels stand ABOVE their value (design: the mobile block lists "Adres / E-mail /
       Telefoon" as plain lines), so a long address or e-mail address keeps the full column. */
    .kpk-contact-details__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .kpk-contact-details__list dt { margin-top: var(--kpk-space-md); }
    .kpk-contact-details__list dt:first-of-type { margin-top: 0; }
    /* A link you tap gets at least the 24 px of WCAG 2.5.8; as text it was 20 px high. */
    .kpk-contact-details__list a { display: inline-block; min-height: 24px; padding-block: 2px; }
}
.kpk-rich-text img { max-width: 100%; height: auto; }

/* ---------- Article (Nieuws - post, Projecten - post) ---------- */
.kpk-article-hero { position: relative; color: var(--kpk-color-text-inverse); }
/* "Sectie · Artikelhero · Desktop": the header photo rounds its bottom right corner (radius/xl). */
.kpk-article-hero__media { position: relative; height: 585px; overflow: hidden; border-bottom-right-radius: var(--kpk-radius-xl); background: var(--kpk-color-surface-placeholder); }
.kpk-article-hero__image, .kpk-article-hero__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kpk-article-hero__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / 0.2); }
/* The film of an article (HeaderVideoPath) lies over the photo and fades in once it plays (hero-video.js). */
.kpk-article-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out; }
.kpk-article-hero__video.is-playing { opacity: 1; }
.kpk-article-hero__video.is-playing.is-ending { opacity: 0; }
.kpk-article-hero__title { font-family: var(--kpk-font-heading); font-weight: 600; font-size: var(--kpk-text-heading-xl-size); line-height: 1.2; letter-spacing: -0.02em; text-align: center; color: var(--kpk-color-text-inverse); }
.kpk-article-hero__title--over { position: absolute; left: 50%; top: 205px; transform: translateX(-50%); width: min(1020px, 100% - 2 * var(--kpk-space-2xl)); }
.kpk-article-hero__band { display: none; background: var(--kpk-surface); }
.kpk-article__inner {
    width: min(var(--kpk-layout-content-max), 100% - 2 * var(--kpk-layout-margin)); margin-inline: auto;
    padding: var(--kpk-space-xl) 0 var(--kpk-space-section); display: flex; flex-direction: column; gap: var(--kpk-space-4xl);   /* 32 190 120, gap 96 */
}
.kpk-article__date { font-weight: 600; color: var(--kpk-color-brand-primary); margin-bottom: calc(-1 * var(--kpk-space-3xl)); }
.kpk-article__intro { font-weight: 700; font-size: var(--kpk-text-body-lg-size); line-height: 1.6; }
/* A link in the intro is underlined and keeps the colour of the sentence, the way the design draws
   the word "stemronde" (03_Design "Nieuws - post", node 1:129). */
.kpk-article__intro a { color: inherit; text-decoration: underline; }
.kpk-article__intro a:hover { color: var(--kpk-color-brand-secondary); }
.kpk-gallery { position: relative; }
.kpk-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.kpk-gallery__track::-webkit-scrollbar { display: none; }
.kpk-gallery__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; height: 513px; overflow: hidden; border-top-left-radius: var(--kpk-radius-xl); background: var(--kpk-color-surface-placeholder); }
.kpk-gallery__image, .kpk-gallery__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kpk-gallery__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; padding: 8px; }
.kpk-gallery__arrow--previous { left: 56px; }
.kpk-gallery__arrow--next { right: 36px; }
.kpk-gallery__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--kpk-space-sm) var(--kpk-space-lg); background: rgb(0 0 0 / 0.45); color: var(--kpk-color-text-inverse); font-size: 14px; }
.kpk-article__tags { display: flex; flex-wrap: wrap; gap: var(--kpk-space-xs); margin-top: calc(-1 * var(--kpk-space-3xl)); }
.kpk-tag { display: inline-block; padding: 6px 16px; border-radius: var(--kpk-radius-full); background: var(--kpk-color-brand-primary); color: var(--kpk-color-text-inverse); font-weight: 600; font-size: 14px; }
.kpk-tag:hover { background: var(--kpk-color-brand-primary-hover); }

@media (max-width: 1025px) {
    /* "Sectie · Artikelhero · Mobile": the photo is square and the title band under it rounds its
       bottom left corner, so the desktop corner has to be taken off here by name. */
    .kpk-article-hero__media { height: 380px; border-bottom-right-radius: 0; }
    .kpk-article-hero__title--over { display: none; }
    .kpk-article-hero__band { display: block; padding: var(--kpk-space-2xl) var(--kpk-layout-margin); border-bottom-left-radius: var(--kpk-radius-xl); }   /* 32 20 */
    .kpk-article-hero__title--in-band { display: block; font-size: var(--kpk-text-heading-md-size); text-align: left; }
    .kpk-article__inner { padding: var(--kpk-space-3xl) 0; gap: var(--kpk-space-lg); }
    .kpk-article__date, .kpk-article__tags { margin: 0; }
    .kpk-article__intro { font-size: var(--kpk-text-body-md-size); }
    .kpk-gallery__slide { height: 262px; border-top-left-radius: var(--kpk-radius-xl); }
    .kpk-gallery__arrow--previous { left: 8px; }
    .kpk-gallery__arrow--next { right: 8px; }
}

/* ---------- Tablet (702 to 1025): the mobile build with wider blocks ---------- */
@media (min-width: 702px) and (max-width: 1025px) {
    .kpk-program-blocks__row { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--kpk-space-lg); }
    .kpk-listing__grid, .kpk-listing--compact .kpk-listing__grid, .kpk-related__row { grid-template-columns: repeat(2, 1fr); }
    .kpk-documents__list { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .kpk-site * { transition: none !important; scroll-behavior: auto !important; }
}