/*
 * kpwaarom — "Waarom kiezen ouders voor Kinderplezier?" block (Willem 25-Jun item 4).
 * Desktop: photo left + text right (like the Voorlezen hero). Mobile: stacked card.
 * USP list rendered with green checkmarks. Background colour is set inline by the
 * block when Willem picks one; the rule below is the default when he hasn't.
 */

/* ---- Desktop ---- */
.kpwaarom {
    background: var(--color-grey-warm, #f4efe7);
}
.kpwaarom__inner {
    max-width: var(--max-width, 1200px);
    margin: 0 auto;
    padding: 48px 60px;
    display: flex;
    align-items: center;
    gap: 48px;
}
.kpwaarom__image {
    flex: 0 0 44%;
    border-radius: var(--radius-card, 16px);
    overflow: hidden;
    align-self: stretch;
    min-height: 320px;
}
.kpwaarom__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.kpwaarom__text {
    flex: 1;
    font-family: var(--font-body, sans-serif);
    color: var(--color-text, #1d1d1b);
}
.kpwaarom__heading {
    font-family: var(--font-heading, serif);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.2;
    margin: 0 0 16px;
    color: var(--color-text, #1d1d1b);
}
.kpwaarom__intro {
    font-size: 16px;
    line-height: 28px;
}
.kpwaarom__intro p { margin: 0 0 16px; }
.kpwaarom__intro p:last-child { margin-bottom: 0; }

/* USP list with green checkmarks (shared look desktop + mobile). */
.kpwaarom__usps,
.kpwaarom-m__usps {
    list-style: none;
    margin: 20px 0;
    padding: 0;
}
.kpwaarom__usps li,
.kpwaarom-m__usps li {
    position: relative;
    padding-left: 30px;
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 24px;
}
.kpwaarom__usps li::before,
.kpwaarom-m__usps li::before {
    content: "\2713"; /* ✓ */
    position: absolute;
    left: 0;
    top: 0;
    color: #3aaa35;
    font-weight: 700;
}
.kpwaarom__closing,
.kpwaarom-m__closing {
    margin: 16px 0 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

/* ---- Mobile ---- */
.kpwaarom-m {
    background: var(--color-grey-warm, #f4efe7);
    padding: 24px 16px 32px;
}
.kpwaarom-m__card {
    max-width: 560px;
    margin: 0 auto;
}
.kpwaarom-m__photo {
    border-radius: var(--radius-card, 16px);
    overflow: hidden;
    margin-bottom: 20px;
}
.kpwaarom-m__photo img {
    width: 100%;
    height: auto;
    display: block;
}
.kpwaarom-m__heading {
    font-family: var(--font-heading, serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.25;
    margin: 0 0 12px;
    color: var(--color-text, #1d1d1b);
}
.kpwaarom-m__intro {
    font-family: var(--font-body, sans-serif);
    font-size: 15px;
    line-height: 25px;
    color: var(--color-text, #1d1d1b);
}
.kpwaarom-m__intro p { margin: 0 0 14px; }
.kpwaarom-m__intro p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * Content-block builder ([kp_block]) — per-placement, per-VIEWPORT
 * image size + overlap + image side, driven by inline CSS custom
 * properties from parts/content-block.php. Every var has a fallback
 * equal to the ORIGINAL kpwaarom value, so an unset block (incl. the
 * folded-in kpwaarom) renders pixel-identical to before.
 * ------------------------------------------------------------------ */

/* Desktop: image column width (was the fixed `flex: 0 0 44%`). */
.kpwaarom__image { flex-basis: var(--kpb-img-d, 44%); }
/* Image RIGHT instead of left (mobile always stacks image-top). */
.kpwaarom--rechts .kpwaarom__inner { flex-direction: row-reverse; }
/* Text-only block (no image): let the text use the full width. */
.kpwaarom--noimg .kpwaarom__inner { display: block; }

/* Mobile: image width (centred when < 100%). */
.kpwaarom-m__photo { max-width: var(--kpb-img-m, 100%); margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ *
 * Foto-overstek ("doorsteek") — the photo sticks OUT past the coloured
 * panel, kept in proportion (object-fit:cover, no distortion). Opt-in:
 * only the .kpwaarom--doorsteek-d / .kpwaarom-m--doorsteek classes
 * (set by parts/content-block.php when an overstek % is entered) switch
 * to this model, so blocks without an overstek render exactly as before.
 * The panel keeps its background + rounded corners (border-radius works
 * without overflow:hidden); the wrapper must NOT clip the protruding photo.
 * The overstek value is a % of the photo box height (see content-block.php).
 * ------------------------------------------------------------------ */

/* Desktop: protrude above AND below. The photo column is align-self:stretch
   (= panel inner height), a definite height, so the absolutely-positioned img's
   top/bottom % resolve against it → the photo extends overstek% of the panel
   height above and below. */
.kpwaarom--doorsteek-d,
.kpwaarom--doorsteek-d .kpwaarom__inner,
.kpwaarom--doorsteek-d .kpwaarom__image { overflow: visible; }
.kpwaarom--doorsteek-d .kpwaarom__image { position: relative; }
.kpwaarom--doorsteek-d .kpwaarom__image img {
    position: absolute;
    top: calc(-1 * var(--kpb-overlap-d, 0%));
    bottom: calc(-1 * var(--kpb-overlap-d, 0%));
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-card, 16px);
}

/* Mobile (stacked): the photo protrudes ABOVE the card only — below the photo is
   the text, so a downward overstek would cover it. The photo box gets a definite
   height from the image's natural ratio (--kpb-ratio-m) so the % resolves. */
.kpwaarom-m--doorsteek,
.kpwaarom-m--doorsteek .kpwaarom-m__card { overflow: visible; }
.kpwaarom-m--doorsteek .kpwaarom-m__photo {
    position: relative;
    overflow: visible;
    aspect-ratio: var(--kpb-ratio-m, 3 / 2);
}
.kpwaarom-m--doorsteek .kpwaarom-m__photo img {
    position: absolute;
    top: calc(-1 * var(--kpb-overlap-m, 0%));
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    border-radius: var(--radius-card, 16px);
}

/* Per-block corner radius (default 16px, like the example block) + block width.
   overflow:hidden so the radius clips. The vars come inline from
   parts/content-block.php; the fallbacks reproduce the original full-width,
   lightly-rounded kpwaarom look when unset. */
.kpwaarom,
.kpwaarom-m {
    border-radius: var(--kpb-radius, 16px);
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}
/* Block width is PER-VIEWPORT: desktop --kpb-width, mobile --kpb-width-m. Both
   default 100% (centred when < 100%). Mobile blank ⇒ 100%, NOT the desktop value,
   so a desktop-narrowed block stays full-width on mobile until Willem narrows it. */
.kpwaarom   { max-width: var(--kpb-width, 100%); }
.kpwaarom-m { max-width: var(--kpb-width-m, 100%); }