/* Sjabloonbibliotheek (publiek): /sjablonen + /sjablonen/{slug}. Bouwt voort op sjk-content.css. */

    /* Hero: zelfde navy-verloop als de contentpagina's, met lead + facts */
    .tpl-hero .lead { color: rgba(255,255,255,.78); max-width: 680px; margin: .9rem 0 0; font-size: clamp(1.02rem, .95rem + .4vw, 1.18rem); line-height: 1.6; }
    .tpl-hero .sjk-eyebrow { color: #fff; margin-bottom: .8rem; }
    .tpl-hero .sjk-eyebrow::before { background: var(--sjk-koraal); }
    .tpl-hero-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.4rem;
        border-radius: 16px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); font-size: 1.7rem;
        margin-bottom: .9rem; }
    .tpl-hero-facts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
    .tpl-hero-facts li { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 600;
        color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: .32rem .8rem; }
    .tpl-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }

    /* Sectie-ritme */
    .tpl-section { padding: clamp(2.4rem, 5vw, 3.8rem) 0; }
    .tpl-section h2 { font-weight: 800; color: var(--sjk-diep); letter-spacing: -.01em; font-size: var(--sjk-fs-h2-sub); margin: 0 0 .5rem; }
    .tpl-section .tpl-sub { color: var(--sjk-grijs); max-width: 640px; margin: 0 0 1.6rem; line-height: 1.6; }

    /* Kaartenrooster (overzicht) */
    .tpl-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
    .tpl-card { position: relative; display: flex; flex-direction: column; gap: .7rem; height: 100%;
        background: #fff; border: 1px solid var(--sjk-lijn); border-radius: var(--sjk-radius-card); padding: 1.4rem;
        box-shadow: var(--sjk-el-1); color: var(--sjk-inkt); text-decoration: none;
        transition: transform .25s var(--sjk-ease-out), box-shadow .25s var(--sjk-ease-out), border-color .25s ease; }
    .tpl-card:hover, .tpl-card:focus-visible { transform: translateY(-5px); box-shadow: var(--sjk-el-4); border-color: rgba(84,87,229,.35); color: var(--sjk-inkt); }
    .tpl-card-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
    .tpl-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem;
        border-radius: 14px; font-size: 1.45rem; background: linear-gradient(140deg, var(--sjk-lavendel), #fff); border: 1px solid var(--sjk-lijn); }
    .tpl-card h3, .tpl-card .h3 { font-weight: 800; color: var(--sjk-diep); font-size: 1.12rem; margin: 0; letter-spacing: -.01em; }
    .tpl-card p { margin: 0; color: var(--sjk-grijs); font-size: .95rem; line-height: 1.6; flex: 1 1 auto; }
    .tpl-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .82rem; color: var(--sjk-grijs); }
    .tpl-card-more { font-weight: 700; color: var(--sjk-indigo); font-size: .93rem; }
    .tpl-card:hover .tpl-card-more { text-decoration: underline; }

    /* Doelgroep-badge en kleine chips */
    .tpl-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 700; white-space: nowrap;
        border-radius: 999px; padding: .22rem .65rem; background: var(--sjk-lavendel); color: var(--sjk-indigo); border: 1px solid var(--sjk-lijn); }
    .tpl-badge--ouders { background: var(--sjk-rozetint); color: var(--sjk-koraal-diep); }
    .tpl-badge--beide { background: linear-gradient(120deg, var(--sjk-rozetint), var(--sjk-lavendel)); color: var(--sjk-diep); }

    /* Vragenlijst (detail) */
    .tpl-list { list-style: none; margin: 0; padding: 0; counter-reset: vraag; }
    .tpl-page { display: flex; align-items: center; gap: .8rem; margin: 1.8rem 0 .9rem; color: var(--sjk-grijs); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
    .tpl-page::before, .tpl-page::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--sjk-lijn); }
    .tpl-page:first-child { margin-top: 0; }
    .tpl-q { display: grid; grid-template-columns: 2.2rem 1fr; gap: .2rem .8rem; padding: 1rem 1.1rem; margin-bottom: .7rem;
        background: #fff; border: 1px solid var(--sjk-lijn); border-radius: 16px; box-shadow: var(--sjk-el-1); }
    .tpl-q--statement { background: var(--sjk-lavendel); box-shadow: none; }
    .tpl-q-num { grid-row: 1 / span 3; display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem;
        border-radius: 50%; font-weight: 800; font-size: .9rem; color: #fff; background: var(--sjk-indigo); }
    .tpl-q--statement .tpl-q-num { background: transparent; color: var(--sjk-grijs); border: 1px dashed var(--sjk-grijs); }
    .tpl-q-num::before { counter-increment: vraag; content: counter(vraag); }
    .tpl-q--statement .tpl-q-num::before { content: "i"; counter-increment: none; }
    .tpl-q-label { font-weight: 700; color: var(--sjk-diep); line-height: 1.4; margin: .25rem 0 0; }
    .tpl-q-req { color: var(--sjk-koraal-diep); font-weight: 800; margin-left: .15rem; }
    .tpl-q-help { color: var(--sjk-grijs); font-size: .9rem; line-height: 1.5; margin: 0; }
    .tpl-q-type { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--sjk-grijs); margin-top: .35rem; }
    .tpl-q-type .ico { font-size: .95rem; line-height: 1; }
    .tpl-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
    .tpl-chip { display: inline-flex; align-items: center; font-size: .8rem; font-weight: 600; color: var(--sjk-inkt);
        background: var(--sjk-lavendel); border: 1px solid var(--sjk-lijn); border-radius: 999px; padding: .2rem .6rem; }

    /* Welkom- en bedankscherm als voorbeeldkaartjes */
    .tpl-screens { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin-top: 1.4rem; }
    .tpl-screen { position: relative; background: #fff; border: 1px solid var(--sjk-lijn); border-radius: var(--sjk-radius-card); padding: 1.4rem 1.4rem 1.4rem 1.6rem; box-shadow: var(--sjk-el-1); overflow: hidden; }
    .tpl-screen::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--sjk-indigo); }
    .tpl-screen--outro::before { background: var(--sjk-koraal-diep); }
    .tpl-screen-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--sjk-grijs); margin-bottom: .4rem; }
    .tpl-screen h3 { font-weight: 800; color: var(--sjk-diep); font-size: 1.1rem; margin: 0 0 .45rem; }
    .tpl-screen p { margin: 0; color: var(--sjk-inkt); line-height: 1.6; font-size: .95rem; }

    /* Zijkolom: CTA-kaart + feiten + andere sjablonen */
    .tpl-side-cta { background: linear-gradient(150deg, var(--sjk-diep), #2c2a6b); color: #fff; border-radius: var(--sjk-radius-card); padding: 1.4rem; box-shadow: var(--sjk-el-2); }
    .tpl-side-cta h2 { color: #fff; font-size: 1.2rem; font-weight: 800; margin: 0 0 .4rem; }
    .tpl-side-cta p { color: rgba(255,255,255,.78); font-size: .92rem; line-height: 1.55; margin: 0 0 1rem; }
    .tpl-side-cta .sjk-btn { width: 100%; }
    .tpl-side-cta small { display: block; margin-top: .7rem; color: rgba(255,255,255,.65); font-size: .8rem; line-height: 1.5; }
    .tpl-facts { list-style: none; margin: 0; padding: .4rem .3rem; }
    .tpl-facts li { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem .5rem; font-size: .92rem; color: var(--sjk-inkt); border-top: 1px solid var(--sjk-lijn); }
    .tpl-facts li:first-child { border-top: 0; }
    .tpl-facts .ico { flex: 0 0 auto; width: 1.4rem; text-align: center; }
    .tpl-facts strong { color: var(--sjk-diep); }
    .tpl-side-stack { display: flex; flex-direction: column; gap: 1rem; }
    .tpl-side-stack .cpage-side-card a { font-size: .92rem; }
    .tpl-side-stack .cpage-side-card a .ico { font-size: 1.1rem; }

    /* Op mobiel: zijkolom onder de inhoud, niet sticky */
    @media (max-width: 991.98px) { .tpl-side-stack .cpage-side { position: static; } }

    /* Afsluitend CTA-blok */
    .tpl-cta { position: relative; overflow: hidden; background: var(--sjk-grad-navy); color: #fff; border-radius: var(--sjk-radius-card);
        padding: clamp(1.8rem, 4vw, 2.8rem); text-align: center; box-shadow: var(--sjk-el-3); }
    .tpl-cta h2 { color: #fff; font-weight: 800; font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin: 0 0 .5rem; letter-spacing: -.01em; }
    .tpl-cta p { color: rgba(255,255,255,.78); max-width: 560px; margin: 0 auto 1.3rem; line-height: 1.6; }
    .tpl-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
    .tpl-cta .sjk-btn-ghost { padding: .95rem 1.5rem; border-radius: var(--sjk-radius-btn); display: inline-flex; align-items: center; font-weight: 700; text-decoration: none; }