/* ==========================================================================
   Pakketten Mobile — V4
   Prefix: kppm-
   Depends on shared.css
   ========================================================================== */

/* --- Age pills --- */
.kppm-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 12px 10px 16px;
    justify-content: center;
}

.kppm-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    text-decoration: none;
    flex-shrink: 0;
}

.kppm-pill__label {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 8px;
    line-height: 1.1;
    text-align: center;
    color: inherit;
}

.kppm-pill__age {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
    color: inherit;
}

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


/* --- Intro text --- */
.kppm-intro {
    padding: 0 20px 28px;
    text-align: center;
}

.kppm-intro__title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 40px;
    color: var(--color-text);
    margin: 0 0 8px;
    line-height: 1.1;
}

.kppm-intro__subtitle {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 22px;
    color: var(--color-text);
    line-height: 1.4;
    margin: 0;
}

/* --- Package info (white box below shortcode blocks) --- */
.kppm-pkg-info {
    text-align: center;
    background: var(--color-white);
    margin: -149px 44px 28px;
    padding: 140px 20px 24px;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    box-shadow: 4px 4px 16px rgba(0,0,0,0.12);
    position: relative;
    z-index: 0;
}

.kpm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    background: #FF4000;
    border: 2px solid var(--color-white);
    border-radius: var(--radius-btn);
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 18px;
    color: var(--color-white);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}

.kpm-nijntje,
.kpm-prentenboek {
    z-index: 2 !important;
    isolation: auto !important;
}

.kpm-nijntje::before,
.kpm-prentenboek::before {
    z-index: 1;
}

.kpm-nijntje__heading,
.kpm-nijntje__text,
.kpm-nijntje__books--wide,
.kpm-prentenboek__heading,
.kpm-prentenboek__text,
.kpm-prentenboek__btn-wrap {
    position: relative;
    z-index: 2;
}

.kpm-btn.kpm-btn--nijntje,
.kpm-btn.kpm-btn--prentenboek {
    z-index: 4 !important;
}

.kpm-nijntje__books--overlap {
    position: relative;
    z-index: 3 !important;
    margin-left: 30px !important;
    margin-right: 30px !important;
}

.kpm-prentenboek__books {
    position: relative;
    z-index: 3 !important;
}

/* Prentenboek overlap — HEIGHT-INDEPENDENT (ported from the age-pakket mechanism
   below). The old `.kppm-pkg-info--prentenboek { margin-top:-190px }` was tuned to
   the DEFAULT image height; a differently-proportioned upload (Willem's staging.be
   470×413 vs the default 518×475) broke the clearance → image sat over the bullets.
   Fix mirrors dreumes/peuter/…: the image spills a FIXED amount past its flow box
   (margin-bottom:-100px) and the bullets reserve a FIXED clearance (−40px pull-up +
   145px padding-top), so the overlap no longer depends on the image's height.
   `.kpm-prentenboek__books img` carries width:115%/margin-left:-7.5% from shared.css
   (centred bleed) — only margin-bottom is added, and only here: pakketten-mobile.css
   is enqueued solely on /pakketten/ (templates/pakketten*.php), so the homepage +
   /prentenboeken/ prentenboek render — which share `.kpm-prentenboek__books` — are
   untouched. */
.kpm-prentenboek__books img {
    margin-bottom: -100px;
}

.kppm-pkg-info--prentenboek {
    margin-top: -40px;
    /* 145px → 120px (Dick iPhone): the overlap fix worked but the image→bullets
       gap read a bit too big; this lifts the bullets ~25px toward the image. Still
       height-independent — the image spills a FIXED 100px (margin-bottom:-100px),
       so 120px clearance keeps it clear of the text with no re-overlap. */
    padding-top: 120px;
}

.kppm-pkg-info--dreumes,
.kppm-pkg-info--peuter,
.kppm-pkg-info--kleuter,
.kppm-pkg-info--schoolkind,
.kppm-pkg-info--tiener {
    /* padding-top reserves room for the compilation image that overflows the card
       bottom (margin-bottom:-100px) so the bullets clear it. Peuter joined this group
       (Willem #1): it now overflows like the siblings, so it needs the same 145px
       clearance — its old 60px let the image overlap the text. */
    margin-top: -40px;
    padding-top: 145px;
}

.kppm-card__books {
    position: relative;
    z-index: 3;
}

.kppm-pkg-info__list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    text-align: left;
}

.kppm-pkg-info__list li {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    color: var(--color-text);
    padding: 2px 0;
}

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

.kppm-pkg-info__btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 28px;
    background: var(--color-primary);
    border-radius: 25px;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none;
}

/* --- Package card (shared structure for age packages) --- */
.kppm-card {
    margin: 0 16px 0;
    position: relative;
    z-index: 2;
    border-radius: var(--radius-card);
    padding: 28px 20px 0;
    overflow: visible;
    text-align: center;
}

.kppm-card__title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 28px;
    margin: 0 0 4px;
    line-height: 1.1;
}

.kppm-card__subtitle {
    font-family: var(--font-body);
    font-weight: 700;
    /* Willem 26-Jun item 1: the regular age-pakketten read smaller on mobile than the
       special collections, whose descriptive text is 15px / line-height 1.6
       (.kpm-nijntje__text / .kpm-prentenboek__text in shared.css). Match that size +
       line spacing so the overview is consistent. Weight stays 700 (it is a subtitle,
       not body copy). Desktop (pakketten.css) is untouched. */
    font-size: 15px;
    margin: 0 0 12px;
    line-height: 1.6;
}

.kppm-card__desc {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 16px;
}

/* --- Compilation image --- */
.kppm-card__compilation {
    text-align: center;
    margin: 0 20px;
    position: relative;
    z-index: 3;
}

.kppm-card__compilation img {
    width: 100%;
    height: auto;
    margin-bottom: -100px;
}
/* Willem #1: Peuter was the only pakket whose compilation did NOT spill over the
   bottom edge of its coloured block — a leftover `margin-bottom:0` override from the
   V4 build held it inside. Removed so Peuter overlaps the block like every other
   pakket (inherits the shared -100px). Proportions unchanged — pure overflow, no scaling. */

/* --- Book images row (legacy) --- */
.kppm-card__books {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 0 -8px 16px;
    min-height: 90px;
}

.kppm-card__books img {
    height: 100px;
    width: auto;
    border-radius: 3px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    margin: 0 -6px;
    flex-shrink: 0;
}

.kppm-card__books img:nth-child(1) { transform: rotate(-3deg); z-index: 3; }
.kppm-card__books img:nth-child(2) { transform: rotate(2deg);  z-index: 4; }
.kppm-card__books img:nth-child(3) { transform: rotate(-2deg); z-index: 5; }
.kppm-card__books img:nth-child(4) { transform: rotate(3deg);  z-index: 4; }
.kppm-card__books img:nth-child(5) { transform: rotate(-3deg); z-index: 3; }
.kppm-card__books img:nth-child(6) { transform: rotate(2deg);  z-index: 2; }

/* --- Bullet list --- */
.kppm-card__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.kppm-card__bullets li {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.6;
    padding: 1px 0 1px 16px;
    position: relative;
}

.kppm-card__bullets li::before {
    content: "–";
    position: absolute;
    left: 0;
    font-weight: 700;
}

/* --- CTA button --- */
.kppm-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    background: var(--color-primary);
    border-radius: var(--radius-btn);
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-white);
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    transition: background 0.2s;
}

.kppm-card__btn:active {
    background: var(--color-primary-dark);
}


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

/* Nijntje — yellow */
.kppm-card--nijntje {
    background: #F4D401;
}
.kppm-card--nijntje .kppm-card__title,
.kppm-card--nijntje .kppm-card__subtitle,
.kppm-card--nijntje .kppm-card__desc,
.kppm-card--nijntje .kppm-card__bullets li {
    color: var(--color-text);
}

/* Prentenboek — green */
.kppm-card--prentenboek {
    background: #00AA55;
}
.kppm-card--prentenboek .kppm-card__title,
.kppm-card--prentenboek .kppm-card__subtitle,
.kppm-card--prentenboek .kppm-card__desc,
.kppm-card--prentenboek .kppm-card__bullets li,
.kppm-card--prentenboek .kppm-card__bullets li::before {
    color: var(--color-white);
}

/* Dreumes — purple */
.kppm-card--dreumes {
    background: #AE00FF;
}
.kppm-card--dreumes .kppm-card__title,
.kppm-card--dreumes .kppm-card__subtitle,
.kppm-card--dreumes .kppm-card__bullets li,
.kppm-card--dreumes .kppm-card__bullets li::before {
    color: var(--color-white);
}

/* Peuter — blue */
.kppm-card--peuter {
    background: #0044FF;
}
.kppm-card--peuter .kppm-card__title,
.kppm-card--peuter .kppm-card__subtitle,
.kppm-card--peuter .kppm-card__bullets li,
.kppm-card--peuter .kppm-card__bullets li::before {
    color: var(--color-white);
}

/* Kleuter — cyan */
.kppm-card--kleuter {
    background: #00E1FF;
}
.kppm-card--kleuter .kppm-card__title,
.kppm-card--kleuter .kppm-card__subtitle,
.kppm-card--kleuter .kppm-card__bullets li {
    color: var(--color-text);
}

/* Schoolkind — green */
.kppm-card--schoolkind {
    background: #00FF73;
}
.kppm-card--schoolkind .kppm-card__title,
.kppm-card--schoolkind .kppm-card__subtitle,
.kppm-card--schoolkind .kppm-card__bullets li {
    color: var(--color-text);
}

/* Tiener — yellow */
.kppm-card--tiener {
    background: var(--color-accent);
}
.kppm-card--tiener .kppm-card__title,
.kppm-card--tiener .kppm-card__subtitle,
.kppm-card--tiener .kppm-card__bullets li {
    color: var(--color-text);
}