/* Platform-homepage (publiek, /): statische component-CSS. Los gehouden zodat het niet bij elke
   paginaweergave meereist maar gecachet + gecomprimeerd wordt (zelfde aanpak als sjk-enquete.css). */
    /* ---- Hero ---------------------------------------------------------- */
    .phero { position: relative; overflow: hidden; color: #fff;
        padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 8vw, 7rem); background: var(--sjk-grad-navy); }
    .phero h1 { font-size: var(--sjk-fs-h1); line-height: 1.06; letter-spacing: -.022em; color: #fff; }
    .phero .lead { font-size: var(--sjk-fs-lead); color: rgba(255,255,255,.78); }
    .phero .accent { color: var(--sjk-koraal); }
    /* Chique kicker boven de kop, lichter koraal zodat het leest op de donkere hero */
    .phero-eyebrow { color: var(--sjk-koraal); }
    .phero-eyebrow::before { background: var(--sjk-koraal); }
    .text-dim { color: rgba(255,255,255,.72); }
    .phero-trust { display:flex; flex-wrap:wrap; gap:1.1rem 1.5rem; color: rgba(255,255,255,.7); font-size:.86rem; font-weight:600; }
    .phero-trust span { display:inline-flex; align-items:center; gap:.4rem; }
    .phero-trust svg { color: var(--sjk-koraal); }

    /* Hero-visual: telefoon in device-frame met wisselende demo + zwevend cijfer */
    .phero-stage { position: relative; width: min(320px, 82vw); margin-inline: auto; }
    .hv-phone { position: relative; background:#fff; border-radius: 34px; padding: 1.4rem 1.35rem;
        transform: rotate(-3deg); box-shadow: 0 44px 80px -26px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.5);
        transition: transform .5s var(--sjk-ease-out); }
    .phero-stage:hover .hv-phone { transform: rotate(-1deg) translateY(-4px); }
    .hv-notch { width:56px; height:6px; border-radius:6px; background: var(--sjk-lijn); margin:0 auto 1.1rem; }
    .hv-prog { font-size:.72rem; color: var(--sjk-grijs); font-weight:600; }
    .hv-prog .bar { height:5px; background: var(--sjk-lijn); border-radius:5px; margin-top:.35rem; overflow:hidden; }
    .hv-prog .bar span { display:block; height:100%; background: var(--sjk-grad-warm); transition: width .5s var(--sjk-ease-out); }
    .hv-q { font-weight:800; color: var(--sjk-diep); font-size:1.06rem; margin:.95rem 0 .9rem; min-height:2.6em; }
    /* Demo-slides: fade + lift */
    .sjk-demo-slide { display:none; }
    .sjk-demo-slide.is-active { display:block; animation: demoIn .5s var(--sjk-ease-out); }
    @keyframes demoIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }
    .hv-opt { border:1px solid var(--sjk-lijn); border-radius:12px; padding:.6rem .8rem; margin-bottom:.5rem;
        font-weight:600; color: var(--sjk-inkt); font-size:.9rem; }
    .hv-opt.sel { border-color: var(--sjk-koraal-diep); background: var(--sjk-rozetint); color: var(--sjk-koraal-diep); }
    .hv-stars { font-size:2rem; letter-spacing:.18rem; color:#e4e2f6; line-height:1; }
    .hv-stars .on { color: var(--sjk-koraal-diep); }
    .hv-smiley { font-size:1.85rem; display:flex; justify-content:space-between; margin:.4rem .1rem 0; }
    .hv-smiley .on { position:relative; transform: scale(1.15); }
    .hv-hint { color: var(--sjk-grijs); font-size:.82rem; margin-top:.7rem; }
    .hv-dots { display:flex; gap:.4rem; justify-content:center; margin-top:1.1rem; }
    .sjk-demo-dot { width:7px; height:7px; border-radius:50%; background: var(--sjk-lijn); border:0; padding:0; cursor:pointer; transition: all .2s; }
    .sjk-demo-dot.is-active { background: var(--sjk-koraal-diep); width:20px; border-radius:5px; }
    .hv-float { position:absolute; left:-26px; bottom:-20px; background:#fff; border-radius:18px;
        padding:.75rem 1.05rem; box-shadow: var(--sjk-el-4); transform: rotate(4deg); display:flex; align-items:center; gap:.7rem; }
    .hv-float .n { font-weight:800; font-size:1.75rem; color: var(--sjk-diep); line-height:1; white-space:nowrap; }
    .hv-float .n b { color: var(--sjk-koraal-diep); }
    .hv-float .t { font-size:.7rem; color: var(--sjk-grijs); font-weight:600; line-height:1.25; }

    /* ---- Secties ------------------------------------------------------- */
    .psection { padding: var(--sjk-section-y) 0; }
    .psection h2 { font-weight: 800; color: var(--sjk-diep); letter-spacing: -.01em; margin-bottom: .5rem; font-size: var(--sjk-fs-h2); }
    .pmuted { color: var(--sjk-grijs); }
    .pcard { background:#fff; border:1px solid var(--sjk-lijn); border-radius: var(--sjk-radius-card); padding:1.6rem; height:100%; box-shadow: var(--sjk-el-1); }
    .pcard h3 { font-weight: 700; font-size: var(--sjk-fs-h3); color: var(--sjk-diep); }
    .pbg-rozetint { background: var(--sjk-rozetint); }
    .pbg-lavendel { background: var(--sjk-lavendel); }
    .pchip { display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--sjk-lijn);
        border-radius:999px; padding:.5rem 1rem; margin:.28rem; font-weight:600; color: var(--sjk-inkt); box-shadow: var(--sjk-el-1); }
    .pchip svg { color: var(--sjk-koraal-diep); }

    /* Stappen met verbindende lijn die zich intekent */
    .psteps { position: relative; }
    .pstep-num { display:inline-flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem; border-radius:999px;
        background: var(--sjk-grad-warm); color:#fff; font-weight:800; margin-bottom:.85rem; box-shadow: var(--sjk-el-koraal); }
    @media (min-width: 768px) {
        .psteps::before { content:""; position:absolute; top:2.6rem; left:16.6%; right:16.6%; height:2px;
            background: repeating-linear-gradient(90deg, var(--sjk-lijn) 0 8px, transparent 8px 16px); z-index:0; }
    }
    .psteps .col-md-4 { position: relative; z-index: 1; }

    /* Showcase */
    .pshowcase { background: linear-gradient(180deg,#fff 0%, var(--sjk-lavendel) 100%); }
    .pphones { display:flex; gap:1.4rem; justify-content:center; align-items:flex-start; flex-wrap:wrap; }
    .pphone { width:212px; max-width:100%; background:#fff; border:1px solid var(--sjk-lijn); border-radius:26px; padding:1.1rem; box-shadow: var(--sjk-el-3); }
    .pphone .pp-notch { width:52px; height:5px; border-radius:5px; background: var(--sjk-lijn); margin:.1rem auto .9rem; }
    .pphone .pp-prog { font-size:.72rem; color: var(--sjk-grijs); font-weight:600; margin-bottom:.7rem; }
    .pphone .pp-prog .bar { height:5px; background: var(--sjk-lijn); border-radius:5px; margin-top:.3rem; overflow:hidden; }
    .pphone .pp-prog .bar span { display:block; height:100%; background: var(--sjk-koraal-diep); }
    .pphone .pp-q { font-weight:700; color: var(--sjk-diep); font-size:.96rem; margin-bottom:.8rem; }
    .pphone .pp-opt { border:1px solid var(--sjk-lijn); border-radius:12px; padding:.6rem .8rem; margin-bottom:.5rem; font-weight:600; color: var(--sjk-inkt); font-size:.9rem; }
    .pphone .pp-opt.sel { border-color: var(--sjk-koraal-diep); background: var(--sjk-rozetint); color: var(--sjk-koraal-diep); }
    .pp-stars { font-size:1.75rem; letter-spacing:.12rem; color:#e4e2f6; line-height:1; }
    .pp-stars .on { color: var(--sjk-koraal-diep); }
    .pp-smiley { font-size:1.7rem; display:flex; justify-content:space-between; margin:.2rem .2rem 0; }
    .pp-smiley .on { position:relative; }
    .pp-smiley .on::after { content:""; position:absolute; inset:-6px -4px; border:2px solid var(--sjk-koraal-diep); border-radius:50%; }
    .pp-cap { text-align:center; margin-top:.8rem; font-size:.76rem; font-weight:800; color: var(--sjk-indigo); text-transform:uppercase; letter-spacing:.05em; }
    .presultcard { background:#fff; border:1px solid var(--sjk-lijn); border-radius:20px; box-shadow: var(--sjk-el-3); padding:1.4rem 1.5rem; max-width:520px; margin:2.4rem auto 0; }
    .presultcard .rc-q { font-weight:800; color: var(--sjk-diep); margin-bottom:1rem; }
    .pp-rbar { display:flex; align-items:center; gap:.8rem; margin:.55rem 0; }
    .pp-rbar .lbl { width:6rem; flex:0 0 auto; text-align:right; font-size:.85rem; font-weight:600; color: var(--sjk-inkt); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .pp-rbar .track { flex:1; height:1.25rem; background:#f1f0fb; border-radius:999px; overflow:hidden; }
    .pp-rbar .track span { display:block; height:100%; border-radius:999px; }
    .pp-rbar .val { width:2.6rem; flex:0 0 auto; font-weight:800; color: var(--sjk-diep); font-size:.86rem; }

    /* Feature-tegels */
    .pfeat h3 { font-weight:700; font-size: var(--sjk-fs-h3); color: var(--sjk-diep); }
    .pchecks { list-style:none; padding:0; margin:1rem 0; }
    .pchecks li { position:relative; padding-left:1.9rem; margin-bottom:.7rem; color: var(--sjk-inkt); }
    .pchecks li svg { position:absolute; left:0; top:.15rem; color: var(--sjk-koraal-diep); }

    /* Mobiel-eerst-telefoon */
    .pphone-solo { width:236px; max-width:78%; margin-inline:auto; }
    .pphone-solo .pp-bar { height:6px; border-radius:6px; background: var(--sjk-lijn); margin-top:1rem; overflow:hidden; }
    .pphone-solo .pp-bar span { display:block; height:100%; width:60%; background: var(--sjk-koraal-diep); }

    /* FAQ — accordeon met native <details> (toegankelijk + crawlbaar) */
    .pfaq-item { border-bottom:1px solid var(--sjk-lijn); }
    .pfaq-item summary { list-style:none; cursor:pointer; padding:1.15rem 2.4rem 1.15rem 0; position:relative;
        font-weight:700; font-size:1.06rem; color: var(--sjk-diep); transition: color .15s ease; }
    .pfaq-item summary::-webkit-details-marker { display:none; }
    .pfaq-item summary:hover { color: var(--sjk-koraal-diep); }
    .pfaq-item summary::after { content:""; position:absolute; right:.5rem; top:1.5rem; width:.62rem; height:.62rem;
        border-right:2.5px solid var(--sjk-koraal-diep); border-bottom:2.5px solid var(--sjk-koraal-diep);
        transform: rotate(45deg); transition: transform .22s var(--sjk-ease-out); }
    .pfaq-item[open] summary::after { transform: rotate(-135deg); }
    .pfaq-body { padding:0 0 1.2rem; color: var(--sjk-grijs); line-height:1.6; }
    .pfaq-body p { margin:0; }
    .pfaq-item[open] summary { color: var(--sjk-koraal-diep); }

    /* Partner-strook */
    .ppartners { background:#fff; border-bottom:1px solid var(--sjk-lijn); padding: 1.8rem 0; }
    .ppartners .pp-label { text-align:center; color: var(--sjk-grijs); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:1.2rem; }
    .ppartners img { height:40px; max-width:150px; object-fit:contain; filter: grayscale(1); opacity:.5; transition: filter .2s, opacity .2s; }
    .ppartners img:hover { filter: grayscale(0); opacity:1; }
    /* Weinig partners: statisch gecentreerd i.p.v. een lopende band die met 1-2 logo's leeg oogt. */
    .pp-static { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:1.4rem 2.6rem; }

    /* Afsluitende CTA */
    .pcta-band { position:relative; overflow:hidden; background: var(--sjk-grad-navy); color:#fff; border-radius: 26px; padding: clamp(2rem, 4vw, 3.4rem); }
    .pcta-band h2 { color:#fff; }
    .pcta-band .glow { position:absolute; width:420px; height:420px; border-radius:50%; filter: blur(70px);
        background: radial-gradient(circle, rgba(255,107,107,.5), transparent 68%); top:-140px; right:-80px; z-index:0; }
    .pcta-band > .inner { position:relative; z-index:1; }

    @media (max-width: 575.98px) {
        .phero { padding-top: 2.6rem; padding-bottom: 2.6rem; }
        .psection { padding: 2rem 0; }
        .pphones { gap: 1rem; }
        .pphone { width: 200px; }
        .presultcard { padding: 1.1rem 1.15rem; }
    }

/* Homepage-utilities (voorheen losse inline styles) */
.home-promo { background: var(--sjk-grad-warm, linear-gradient(90deg,#ff6b6b,#f2564f)); color: #fff; }
.home-promo__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.4rem; text-align: center; padding: 1rem; }
.home-promo__text { font-size: 1.05rem; font-weight: 800; }
.home-promo__sub { font-weight: 600; opacity: .92; }
.home-promo__cta { background: #fff; color: var(--sjk-koraal-diep, #f2564f); font-weight: 800; text-decoration: none; border-radius: 999px; padding: .5rem 1.2rem; white-space: nowrap; }
.home-w-820 { max-width: 820px; }
.sjk-bar-fill--coral { background: linear-gradient(90deg, #f2564f, #ff6b6b); }
.sjk-bar-fill--indigo { background: linear-gradient(90deg, #5457e5, #6d70f0); }

/* "Voor elk soort kamp"-galerij met echte kampfoto's (public/images/*.webp, 800x600). De foto ligt over
   een kleur-gradient als terugval; de donkere overlay + het label blijven leesbaar (cover staat al aan). */
/* Mobiel 2 kolommen (compact, geen schermvullende foto's onder elkaar), desktop 4 kolommen
   zodat de 8 kampsoorten netjes als 2x4 / 4x2 uitkomen zonder losse tegel. */
.camp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .camp-grid { grid-template-columns: repeat(4, 1fr); } }
.camp-tile { position: relative; aspect-ratio: 4 / 3; border-radius: 1.1rem; overflow: hidden; display: flex; align-items: flex-end;
    padding: 1rem; background-size: cover; background-position: center; box-shadow: 0 12px 26px -14px rgba(27,23,64,.4);
    transition: transform .18s ease, box-shadow .18s ease; }
.camp-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -14px rgba(27,23,64,.5); }
.camp-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.52)); }
.camp-tile__icon { display: none; } /* placeholder-icoon niet meer nodig nu er echte foto's zijn */
.camp-tile__label { position: relative; z-index: 1; color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: -.01em; text-shadow: 0 1px 5px rgba(0,0,0,.35); }
/* Kampfoto over een kleur-gradient (de gradient is de terugval als een foto ontbreekt). background-image
   (geen shorthand) zodat de cover/center van .camp-tile blijft gelden. */
.camp-tile--sport { background-image: url('/images/sport.webp'), linear-gradient(135deg, #ff7a7a, #f2564f); }
.camp-tile--zeil { background-image: url('/images/zeil.webp'), linear-gradient(135deg, #38bdf8, #0284c7); }
.camp-tile--scouting { background-image: url('/images/scouting.webp'), linear-gradient(135deg, #fbbf24, #d97706); }
.camp-tile--dans { background-image: url('/images/dans.webp'), linear-gradient(135deg, #c084fc, #7c3aed); }
.camp-tile--techniek { background-image: url('/images/techniek.webp'), linear-gradient(135deg, #6d70f0, #4245cc); }
.camp-tile--taal { background-image: url('/images/taal.webp'), linear-gradient(135deg, #34d399, #059669); }
.camp-tile--school { background-image: url('/images/schoolkamp.webp'), linear-gradient(135deg, #2dd4bf, #0d9488); }
.camp-tile--zomer { background-image: url('/images/zomerkamp.webp'), linear-gradient(135deg, #fbbf24, #f59e0b); }