/* ==========================================================================
   Pakketten — page-specific styles
   Prefix: kpp-
   Depends on shared.css
   ========================================================================== */

/* --- Intro --- */
.kpp-intro {
    text-align: center;
    padding: 48px var(--kp-pageheader-pad-x) 0;
    max-width: var(--max-width);
    margin: 0 auto;
}

.kpp-intro h1 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 48px;
    color: var(--color-text);
    margin: 0 0 16px;
    line-height: 1.1;
}

.kpp-intro p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 18px;
    color: var(--color-text);
    line-height: 28px;
    max-width: 720px;
    margin: 0 auto;
}

/* --- Age filter pills --- */
.kpp-pills {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 32px 60px 48px;
    max-width: var(--max-width);
    margin: 0 auto;
}

.kpp-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    padding: 10px 36px;
    border-radius: var(--radius-card);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.kpp-pill:hover {
    transform: translateY(-2px);
    box-shadow: 4px 4px 12px rgba(0,0,0,0.15);
}

.kpp-pill__label {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.1;
}

.kpp-pill__price {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    margin-top: 1px;
}

.kpp-pill__age {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.2;
    margin-top: 4px;
}

/* Pill colors */
.kpp-pill--dreumes    { background: #AE00FF; color: var(--color-white); }
.kpp-pill--peuter     { background: #0044FF; color: var(--color-white); }
.kpp-pill--kleuter    { background: #00E1FF; color: var(--color-text); }
.kpp-pill--schoolkind { background: #00FF73; color: var(--color-text); }
.kpp-pill--tiener     { background: var(--color-accent); color: var(--color-text); }


/* --- Package row (colored card + white info side by side) --- */
.kpp-row {
    display: flex;
    gap: 24px;
    max-width: var(--max-width);
    margin: 0 auto 40px;
    padding: 0 60px;
    /* Willem 2026-06-13 (re-verify item 4): de categorie-pills (#dreumes etc.)
       lieten de rij halverwege onder de sticky header (.kph-header, 80px) landen.
       scroll-margin-top duwt het anker-doel (de rij-TOP) net onder de header zodat
       het hele blok zichtbaar is — zelfde patroon/waarde als .kp-anchor (shared.css):
       80px header + 20px lucht. Geldt voor elke rij, dus alle categorieën. */
    scroll-margin-top: 100px;
}

.kpp-row--reversed {
    flex-direction: row-reverse;
}

/* --- Colored card --- */
.kpp-card {
    flex: 1;
    border-radius: var(--radius-card);
    padding: 40px 32px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    min-height: 440px;
}

.kpp-card__banner {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 10px;
    transform: rotate(-3deg);
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}

.kpp-card__banner h2 {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 32px;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
}

.kpp-card__subtitle {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    /* R1 (Dick's eyeball, revisie 1): tekstblok spant de kaartbreedte; de
       kaart-padding (32px per kant) levert de gevraagde zijmarge. Was een
       vaste 360px-kolom — smal blok, hoge kaart. Geldt voor alle 7 kaarten. */
    max-width: 100%;
    margin: 0 auto 12px;
    position: relative;
    z-index: 2;
}

.kpp-card__desc {
    font-family: var(--font-body);
    font-weight: 700;        /* bold body text, consistent across all pakketten (item 9a) */
    font-size: 15px;
    line-height: 24px;
    text-align: center;
    max-width: 100%;         /* R1 — zie .kpp-card__subtitle */
    margin: 0 auto auto;
    position: relative;
    z-index: 2;
}

/* Willem #2: collectie-afbeelding is een link naar de detailpagina.
   MOBIEL (kpp_render_mobile_card + shared-nijntje/prentenboek-mobile): de
   display:contents-anker werkt daar; layout-transparant, alleen cursor + target. */
.kpp-link-wrap { display: contents; cursor: pointer; }

/* DESKTOP (2026-06-23): display:contents ving de klik op de afbeelding NIET
   betrouwbaar (geen eigen box; nijntje-composiet heeft pointer-events:none).
   Vervangen door een stretched-link overlay over de hele gekleurde kaart, boven
   alle kaart-content (boeken-img z-index max 4, nijntje-composiet z-index 3).
   Geen visuele wijziging — de afbeeldingen renderen identiek. */
.kpp-card__link {
    position: absolute;
    inset: 0;
    z-index: 6;
    cursor: pointer;
}

.kpp-card__books {
    width: 100%;
    min-height: 130px;
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 16px 24px 0;
    z-index: 1;
}

.kpp-card--nijntje .kpp-card__books {
    justify-content: center;
}

.kpp-card__books img {
    height: 140px;
    width: auto;
    border-radius: 4px;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.2);
    margin: 0 -12px;
    position: relative;
    flex-shrink: 0;
}

.kpp-card--nijntje .kpp-card__books img {
    height: 110px;
    margin: 0 -6px;
}

/* 6 books in 3 pairs, each pair slightly slanted */
.kpp-card__books img:nth-child(1) { transform: rotate(-4deg); z-index: 3; margin-right: -10px; }
.kpp-card__books img:nth-child(2) { transform: rotate(3deg);  z-index: 3; margin-right: 12px; }
.kpp-card__books img:nth-child(3) { transform: rotate(-3deg); z-index: 4; margin-right: -10px; }
.kpp-card__books img:nth-child(4) { transform: rotate(4deg);  z-index: 4; margin-right: 12px; }
.kpp-card__books img:nth-child(5) { transform: rotate(-4deg); z-index: 3; margin-right: -10px; }
.kpp-card__books img:nth-child(6) { transform: rotate(3deg);  z-index: 3; }

.kpp-card__placeholder {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(0,0,0,0.3);
    font-style: italic;
    text-align: center;
    padding: 40px 0;
}


/* --- White info card --- */
.kpp-info {
    flex: 1;
    background: var(--color-white);
    border-radius: var(--radius-card);
    padding: 40px;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.kpp-info__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.kpp-info__list li {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    color: var(--color-black);
    padding: 2px 0;
}

.kpp-info__list li::before {
    content: "\2022  ";
}

.kpp-info__btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 28px;
    border-radius: 25px;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    margin-top: 24px;
    align-self: flex-start;
    color: var(--color-white);
    transition: transform 0.2s;
}

.kpp-info__btn:hover { transform: scale(1.05); }


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  COLOR VARIANTS                                                       ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

/* nijntje collectie — yellow card, plain title, overlapping layout */
.kpp-card--nijntje                      { background: #F4D401; }
.kpp-card--nijntje .kpp-card__banner    { background: none; transform: none; padding: 0; }
.kpp-card--nijntje .kpp-card__banner h2 { color: var(--color-text); }
.kpp-card--nijntje .kpp-card__subtitle  { color: var(--color-text); }
.kpp-card--nijntje .kpp-card__desc      { color: var(--color-text); }
.kpp-row--nijntje .kpp-info__btn        { background: var(--color-primary); }

.kpp-row--nijntje .kpp-card {
    flex: 1.1;
    z-index: 2;
    position: relative;
    box-shadow: 8px 4px 24px rgba(0,0,0,0.18);
    /* item 9c — tighten vertical whitespace so the nijntje block height lines
       up with the other rows (the composite image is bottom-anchored, so a
       shorter card pulls it up with it). First pass — needs Willem's eyeball. */
    min-height: 380px;
    padding-top: 28px;
    padding-bottom: 28px;
}

.kpp-row--nijntje .kpp-info {
    flex: 1.2;
    align-self: center;
    margin-left: -48px;
    z-index: 1;
    position: relative;
    padding-left: 64px;
    box-shadow: 4px 4px 16px rgba(0,0,0,0.12);
}

/* Willem 2026-06-13 (re-verify, item 1): de dreumes- + prentenboek-composieten
   stonden "niet lekker in het blok" — ze waren absoluut gepositioneerd en staken
   fors buiten de kaart (580/620px, overflow). Willem vroeg ze "zoals de andere
   reguliere pakketten" (peuter/kleuter/schoolkind/tiener) te tonen: composiet
   BINNEN de kaart, contained, onderaan gecentreerd. Daarom vervalt de eerdere
   padding-bottom-reservatie en de overhang-marge hier — de composiet is nu een
   gewone flex-item onderin (zie .kpp-card--dreumes/--prentenboek .kpp-card__main).
   nijntje (niet geflagd) blijft ongemoeid met zijn eigen overflow-composiet. */

/* Composite image — overflows bottom-left of yellow card.
   Willem #1 (2026-06-23): that overflow sits OUTSIDE the card box, so the card
   overlay (.kpp-card__link, inset:0) never covered it — the nijntje image was
   the one card that didn't click through. The composite now lives in its own
   anchor (.kpp-card__main-link); the absolute positioning + overflow move to
   that anchor (z-7, above the overlay) so the whole visible composite links to
   /nijntje. The inner img just fills the anchor. */
.kpp-card--nijntje { overflow: visible; }
.kpp-card--nijntje .kpp-card__main-link {
    position: absolute;
    left: -50px;
    bottom: -50px;
    width: 700px;   /* item 9c — enlarge the nijntje composite (was 640px) */
    z-index: 7;
    display: block;
    cursor: pointer;
}
.kpp-card--nijntje .kpp-card__main {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(4px 6px 10px rgba(0,0,0,0.18));
}

/* Prentenboek collectie — warm cream, overlapping layout (reversed) */
.kpp-card--prentenboek                      { background: #00AA55; }
.kpp-card--prentenboek .kpp-card__banner    { background: none; transform: none; padding: 0; }
.kpp-card--prentenboek .kpp-card__banner h2 { color: var(--color-white); }
.kpp-card--prentenboek .kpp-card__subtitle  { color: var(--color-white); }
.kpp-card--prentenboek .kpp-card__desc      { color: var(--color-white); }
.kpp-row--prentenboek .kpp-info__btn        { background: var(--color-primary); }

.kpp-row--prentenboek .kpp-card {
    flex: 1.1;
    z-index: 2;
    position: relative;
    box-shadow: 8px 4px 24px rgba(0,0,0,0.18);
}
.kpp-row--prentenboek .kpp-info {
    flex: 1.2;
    align-self: center;
    margin-right: -48px;
    z-index: 1;
    position: relative;
    padding-right: 64px;
    box-shadow: 4px 4px 16px rgba(0,0,0,0.12);
}

/* Composite image — sits inside the green card, no overflow (Willem 2026-06-13
   re-verify item 1: exact zelfde behandeling als peuter/kleuter/schoolkind/tiener). */
.kpp-card--prentenboek .kpp-card__main {
    position: static;
    width: 90%;
    height: auto;
    max-height: 240px;
    object-fit: contain;
    margin-top: auto;
    align-self: center;
    filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.18));
}

/* Composite image for dreumes — sits inside the purple card, no overflow (Willem
   2026-06-13 re-verify item 1: zelfde behandeling als de reguliere pakketten). */
.kpp-card--dreumes .kpp-card__main {
    position: static;
    width: 90%;
    height: auto;
    max-height: 240px;
    object-fit: contain;
    margin-top: auto;
    align-self: center;
    filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.18));
}

/* Composite image for peuter — sits inside the blue card, no overflow */
.kpp-card--peuter .kpp-card__main {
    position: static;
    width: 90%;
    height: auto;
    max-height: 240px;
    object-fit: contain;
    margin-top: auto;
    align-self: center;
    filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.18));
}

/* Composite image for kleuter — sits inside the cyan card, no overflow */
.kpp-card--kleuter .kpp-card__main {
    position: static;
    width: 90%;
    height: auto;
    max-height: 240px;
    object-fit: contain;
    margin-top: auto;
    align-self: center;
    filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.18));
}

/* Composite image for schoolkind — sits inside the green card, no overflow */
.kpp-card--schoolkind .kpp-card__main {
    position: static;
    width: 90%;
    height: auto;
    max-height: 240px;
    object-fit: contain;
    margin-top: auto;
    align-self: center;
    filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.18));
}

/* Composite image for tiener — sits inside the yellow card, no overflow */
.kpp-card--tiener .kpp-card__main {
    position: static;
    width: 90%;
    height: auto;
    max-height: 240px;
    object-fit: contain;
    margin-top: auto;
    align-self: center;
    filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.18));
}

/* Dreumes pakket — red, overlapping layout */
.kpp-card--dreumes                      { background: #AE00FF; }
.kpp-card--dreumes .kpp-card__banner    { background: none; transform: none; padding: 0; }
.kpp-card--dreumes .kpp-card__banner h2 { color: var(--color-white); }
.kpp-card--dreumes .kpp-card__subtitle  { color: var(--color-white); }
.kpp-row--dreumes .kpp-info__btn        { background: var(--color-primary); }

.kpp-row--dreumes .kpp-card {
    flex: 1.1;
    z-index: 2;
    position: relative;
    box-shadow: 8px 4px 24px rgba(0,0,0,0.18);
}
.kpp-row--dreumes .kpp-info {
    flex: 1.2;
    align-self: center;
    margin-left: -48px;
    z-index: 1;
    position: relative;
    padding-left: 64px;
    box-shadow: 4px 4px 16px rgba(0,0,0,0.12);
}

/* Peuter pakket — purple, overlapping layout (reversed) */
.kpp-card--peuter                      { background: #0044FF; }
.kpp-card--peuter .kpp-card__banner    { background: none; transform: none; padding: 0; }
.kpp-card--peuter .kpp-card__banner h2 { color: var(--color-white); }
.kpp-card--peuter .kpp-card__subtitle  { color: var(--color-white); }
.kpp-row--peuter .kpp-info__btn        { background: var(--color-primary); }

.kpp-row--peuter .kpp-card {
    flex: 1.1;
    z-index: 2;
    position: relative;
    box-shadow: 8px 4px 24px rgba(0,0,0,0.18);
}
.kpp-row--peuter .kpp-info {
    flex: 1.2;
    align-self: center;
    margin-right: -48px;
    z-index: 1;
    position: relative;
    padding-right: 64px;
    box-shadow: 4px 4px 16px rgba(0,0,0,0.12);
}

/* Kleuter pakket — green, overlapping layout */
.kpp-card--kleuter                      { background: #00E1FF; }
.kpp-card--kleuter .kpp-card__banner    { background: none; transform: none; padding: 0; }
.kpp-card--kleuter .kpp-card__banner h2 { color: var(--color-text); }
.kpp-card--kleuter .kpp-card__subtitle  { color: var(--color-text); }
.kpp-row--kleuter .kpp-info__btn        { background: var(--color-primary); }

.kpp-row--kleuter .kpp-card {
    flex: 1.1;
    z-index: 2;
    position: relative;
    box-shadow: 8px 4px 24px rgba(0,0,0,0.18);
}
.kpp-row--kleuter .kpp-info {
    flex: 1.2;
    align-self: center;
    margin-left: -48px;
    z-index: 1;
    position: relative;
    padding-left: 64px;
    box-shadow: 4px 4px 16px rgba(0,0,0,0.12);
}

/* Schoolkind pakket — blue, overlapping layout (reversed) */
.kpp-card--schoolkind                      { background: #00FF73; }
.kpp-card--schoolkind .kpp-card__banner    { background: none; transform: none; padding: 0; }
.kpp-card--schoolkind .kpp-card__banner h2 { color: var(--color-text); }
.kpp-card--schoolkind .kpp-card__subtitle  { color: var(--color-text); }
.kpp-row--schoolkind .kpp-info__btn        { background: var(--color-primary); }

.kpp-row--schoolkind .kpp-card {
    flex: 1.1;
    z-index: 2;
    position: relative;
    box-shadow: 8px 4px 24px rgba(0,0,0,0.18);
}
.kpp-row--schoolkind .kpp-info {
    flex: 1.2;
    align-self: center;
    margin-right: -48px;
    z-index: 1;
    position: relative;
    padding-right: 64px;
    box-shadow: 4px 4px 16px rgba(0,0,0,0.12);
}

/* Tiener pakket — orange, overlapping layout */
.kpp-card--tiener                      { background: var(--color-accent); }
.kpp-card--tiener .kpp-card__banner    { background: none; transform: none; padding: 0; }
.kpp-card--tiener .kpp-card__banner h2 { color: var(--color-text); }
.kpp-card--tiener .kpp-card__subtitle  { color: var(--color-text); }
.kpp-row--tiener .kpp-info__btn        { background: var(--color-primary); }

.kpp-row--tiener .kpp-card {
    flex: 1.1;
    z-index: 2;
    position: relative;
    box-shadow: 8px 4px 24px rgba(0,0,0,0.18);
}
.kpp-row--tiener .kpp-info {
    flex: 1.2;
    align-self: center;
    margin-left: -48px;
    z-index: 1;
    position: relative;
    padding-left: 64px;
    box-shadow: 4px 4px 16px rgba(0,0,0,0.12);
}


/* ╔════════════════════════════════════════════════════════════════════════╗
   ║  RESPONSIVE                                                           ║
   ╚════════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 767px) {
    .kpp-intro {
        padding: 32px 20px 0;
    }
    .kpp-intro h1 { font-size: 32px; }
    .kpp-intro p  { font-size: 16px; }

    .kpp-pills {
        padding: 24px 16px 32px;
        gap: 10px;
    }
    .kpp-pill {
        min-width: 0;
        width: calc(50% - 5px);
        padding: 12px 16px;
    }
    .kpp-pill:last-child {
        width: calc(50% - 5px);
    }
    .kpp-pill__label { font-size: 22px; }
    .kpp-pill__price { font-size: 14px; }
    .kpp-pill__age   { font-size: 11px; }

    .kpp-row,
    .kpp-row--reversed {
        flex-direction: column;
        padding: 0 16px;
        margin-bottom: 24px;
    }

    .kpp-card {
        min-height: 280px;
        padding: 32px 24px;
    }
    .kpp-card__banner h2 { font-size: 26px; }
    .kpp-card__books img { height: 110px; }

    .kpp-info {
        padding: 32px 24px;
    }
    .kpp-row--nijntje .kpp-info,
    .kpp-row--dreumes .kpp-info,
    .kpp-row--kleuter .kpp-info,
    .kpp-row--tiener .kpp-info {
        margin-left: 0;
        padding-left: 24px;
    }
    .kpp-row--prentenboek .kpp-info,
    .kpp-row--peuter .kpp-info,
    .kpp-row--schoolkind .kpp-info {
        margin-right: 0;
        padding-right: 24px;
    }
    .kpp-info__list li {
        font-size: 16px;
        line-height: 28px;
    }
    .kpp-info__btn {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .kpp-intro  { padding: 40px 32px 0; }
    .kpp-pills  { padding: 24px 32px 40px; }
    .kpp-row    { padding: 0 32px; }

    .kpp-card__banner h2 { font-size: 28px; }
    .kpp-card__books img { height: 130px; }
}