/* assets/css/site.css */
/* InglêsGo — eigen uitstraling bovenop main.css/home.css. Kleuren en lettertypen komen uit de instellingen
   (accent_color, bg_color, text_color, font_family, font_heading via wl-vars); hier alleen vorm en opbouw. */

:root {
    --ig-sun: #ffc94d;
    --ig-sky: #eaf1fb;
    --ig-mint: #d9f2e6;
    --ig-peach: #ffe9d6;
    --ig-lilac: #efe9fb;
    --radius: 24px;
}

/* ---------- Typografie en knoppen ---------- */
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; }
.section-title { font-weight: 800; }
.eyebrow { font-weight: 700; letter-spacing: 0.08em; color: var(--accent); }
.btn { font-weight: 700; border-radius: var(--radius-pill); }
.btn-primary { box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.25); }
.btn-outline { border-width: 2px; border-color: var(--text); color: var(--text); background: #fff; }
.site-header { background: rgba(255, 255, 255, 0.85); }
.section-sub { color: var(--text-muted); max-width: 620px; margin: 10px auto 0; font-size: 1.05rem; }

/* ---------- Topblok ---------- */
.hero { background: var(--bg); }
.hero-title { font-weight: 800; line-height: 1.05; }
.hero-points li { background: #fff; font-weight: 600; }
.hero-visual { min-height: 440px; }
.hero-visual.has-bubbles { padding: 34px 10px 10px 40px; }
.hero-visual > img, .hero-visual .hero-slides { border-radius: 40px 40px 40px 120px; overflow: hidden; }
.hero-art {
    position: relative; width: 100%; min-height: 420px; border-radius: 40px 40px 40px 120px;
    background: linear-gradient(160deg, #e3ecfb, #c3d4f1);
}
/* Mascottes (plugin escola) zolang er geen eigen foto bovenaan staat */
.hero-art img { position: absolute; height: auto; }
.hero-art-1 { width: 40%; left: 8%; top: 22%; }
.hero-art-2 { width: 38%; right: 8%; bottom: 6%; }
.hero-bubble {
    position: absolute; z-index: 2; background: #fff; border-radius: 22px; padding: 12px 18px;
    box-shadow: 0 14px 30px rgba(27, 42, 74, 0.15); font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem;
    color: var(--accent); max-width: 70%;
}
.hero-bubble small { display: block; font-family: var(--font); font-weight: 500; font-size: 0.78rem; color: var(--text-muted); }
.hero-bubble::after {
    content: ""; position: absolute; bottom: -10px; left: 26px;
    border: 10px solid transparent; border-top-color: inherit; border-bottom: 0;
}
.hero-bubble-1 { top: 0; left: 0; border-top-color: #fff; }
.hero-bubble-1::after { border-top-color: #fff; }
.hero-bubble-2 { top: 40%; right: -6px; background: var(--text); color: #fff; }
.hero-bubble-2::after { border-top-color: var(--text); left: auto; right: 26px; }
.hero-bubble-3 { bottom: 34px; left: 0; background: var(--ig-sun); color: var(--text); }
.hero-bubble-3::after { border-top-color: var(--ig-sun); }
.hero-bubble-3 small { color: #6b5310; }

/* ---------- Voor wie ---------- */
.aud-section { background: var(--bg-2); }
.aud-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; }
.aud-card { border-radius: 28px; padding: 28px 24px; min-height: 230px; }
.aud-card h3 { font-size: 1.35rem; margin: 0 0 6px; }
.aud-card p { color: var(--text-muted); font-size: 0.96rem; margin: 0; }
.aud-card-1 { background: var(--ig-peach); }
.aud-card-2 { background: var(--ig-sky); }
.aud-card-3 { background: var(--ig-mint); }
.aud-card-4 { background: var(--ig-lilac); }
.aud-ico {
    display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px;
    border-radius: 18px; background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.aud-ico::before { content: ""; width: 26px; height: 26px; background: var(--accent); -webkit-mask: var(--ig-ico) center/contain no-repeat; mask: var(--ig-ico) center/contain no-repeat; }
.aud-card-1 .aud-ico { --ig-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M5 21c0-4 3-7 7-7s7 3 7 7'/%3E%3C/svg%3E"); }
.aud-card-2 .aud-ico { --ig-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='3'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.aud-card-3 .aud-ico { --ig-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3Cpath d='M21 4v5h-5'/%3E%3C/svg%3E"); }
.aud-card-4 .aud-ico { --ig-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); }

/* ---------- Niveaus ---------- */
.lv-box {
    display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: center;
    background: var(--text); color: #fff; border-radius: 40px; padding: 56px;
}
.lv-copy h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.lv-copy p { color: rgba(255, 255, 255, 0.75); }
.lv-copy .eyebrow { color: var(--ig-sun); }
.lv-ladder { display: flex; align-items: flex-end; gap: 12px; height: 260px; list-style: none; margin: 0; padding: 0; }
.lv-ladder li {
    flex: 1; height: var(--h); display: flex; flex-direction: column; justify-content: flex-end; padding: 14px;
    border-radius: 18px 18px 6px 6px; background: rgba(255, 255, 255, 0.09);
}
.lv-ladder li:last-child { background: var(--accent); }
.lv-ladder b { font-family: var(--font-heading); font-size: 1.6rem; }
.lv-ladder span { font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); }

/* ---------- Zo werkt het + slot ---------- */
.process-card { background: #fff; border-radius: 28px; }
.process-num {
    background: var(--accent); color: #fff; border-radius: 50% 50% 50% 6px;
    width: 44px; height: 44px; display: grid; place-items: center; font-weight: 800;
    font-family: var(--font-heading); font-style: normal; font-size: 0.95rem; letter-spacing: 0;
}
.cta-inner .btn-outline { background: transparent; border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.cta-inner { border-radius: 40px; }

/* ---------- Mobiel ---------- */
@media (max-width: 900px) {
    .aud-grid { grid-template-columns: 1fr 1fr; }
    .lv-box { grid-template-columns: 1fr; padding: 32px 22px; border-radius: 28px; }
    .lv-ladder { height: 200px; gap: 8px; }
    .lv-ladder span { display: none; }
    .hero-visual { min-height: 340px; order: 0; }
    .hero-art { min-height: 320px; }
}
@media (max-width: 560px) {
    .aud-grid { grid-template-columns: 1fr; }
    .aud-card { min-height: 0; }
    .hero-visual.has-bubbles { padding: 30px 0 0 16px; }
    .hero-bubble { font-size: 0.95rem; }
}