/* ============================================================
   BLOG — extra stijlen bovenop site.css (licht thema)
   ============================================================ */
.blog-hero{padding:clamp(120px,14vw,150px) 0 40px;text-align:center}
.blog-hero .kicker{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cyan);background:rgba(48,105,179,.09);
  border:1px solid var(--hairline-lit);padding:6px 14px;border-radius:var(--r-pill);margin-bottom:18px}
.blog-hero h1{font-size:clamp(1.8rem,4vw,2.7rem);max-width:18ch;margin:0 auto 14px}
.blog-hero p{color:var(--steel);max-width:52ch;margin:0 auto;font-size:1.02rem}

.blog-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding-bottom:10px}
.blog-filters button{font:inherit;font-size:.85rem;font-weight:700;padding:9px 18px;border-radius:var(--r-pill);
  border:1px solid var(--hairline);background:#fff;color:#4A586B;cursor:pointer;transition:all .25s var(--ease)}
.blog-filters button:hover{border-color:var(--hairline-lit);color:#0F1822}
.blog-filters button.is-on{background:linear-gradient(135deg,#4680E5,#3169C3);color:#03181F;border-color:transparent}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;
  padding-block:40px 90px}
.blog-card.is-hidden{display:none}
.blog-card{background:#fff;border:1px solid var(--hairline);border-radius:var(--r-md);
  overflow:hidden;box-shadow:0 2px 4px rgba(20,32,48,.04),0 12px 30px rgba(20,32,48,.07);
  display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.blog-card:hover{transform:translateY(-4px);box-shadow:0 6px 12px rgba(20,32,48,.06),0 22px 48px rgba(20,32,48,.12)}
.blog-card .bc-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:10px}
.blog-card .bc-body{padding:24px 24px 26px}
.blog-card h2{font-size:1.22rem;line-height:1.3;margin-bottom:10px}
.blog-card p{color:var(--steel);font-size:.92rem;line-height:1.55;margin-bottom:16px}
.blog-card a.bc-link{display:inline-flex;align-items:center;gap:6px;font-weight:700;
  font-size:.88rem;color:#0F1822;text-decoration:none}
.blog-card a.bc-link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;
  transition:transform .25s var(--ease)}
.blog-card:hover a.bc-link svg{transform:translateX(3px)}
.blog-card .bc-meta{font-size:.78rem;color:#93A1B2;margin-top:auto;padding-top:10px}

/* ---- artikelpagina ---- */
.artikel{padding:clamp(120px,14vw,150px) 0 30px}
.artikel .breadcrumb{font-size:.85rem;color:var(--steel);margin-bottom:22px}
.artikel .breadcrumb a{color:var(--steel);text-decoration:none}
.artikel .breadcrumb a:hover{color:var(--cyan)}
.artikel .a-tag{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--cyan);background:rgba(48,105,179,.09);
  border:1px solid var(--hairline-lit);padding:5px 13px;border-radius:var(--r-pill);margin-bottom:18px}
.artikel h1{font-size:clamp(1.7rem,3.6vw,2.5rem);max-width:24ch;margin-bottom:16px}
.artikel .a-meta{color:#93A1B2;font-size:.88rem;margin-bottom:36px}
.artikel .a-body{max-width:70ch;font-size:1.04rem;line-height:1.75;color:#2A3543}
.artikel .a-body h2{font-size:1.35rem;margin:38px 0 14px;color:#0F1822}
.artikel .a-body h3{font-size:1.1rem;margin:28px 0 10px;color:#0F1822}
.artikel .a-body p{margin-bottom:18px}
.artikel .a-body ul,.artikel .a-body ol{margin:0 0 20px 22px;display:grid;gap:8px}
.artikel .a-body li{color:#2A3543}
.artikel .a-body strong{color:#0F1822}
.artikel .a-cta{margin-top:44px;padding:26px 28px;border-radius:var(--r-md);
  background:linear-gradient(150deg,rgba(48,105,179,.09),#fff);border:1px solid rgba(48,105,179,.25);
  box-shadow:0 12px 34px rgba(20,32,48,.08);display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between}
.artikel .a-cta p{margin:0;font-weight:700;color:#0F1822;max-width:34ch}
.artikel .a-cta .btn-req{white-space:nowrap}
.artikel .a-terug{display:inline-flex;align-items:center;gap:6px;margin-top:50px;
  color:var(--steel);text-decoration:none;font-size:.9rem;font-weight:600}
.artikel .a-terug:hover{color:var(--cyan)}

@media (max-width:640px){
  .artikel .a-cta{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   MOBILE BLOG POLISH — task #11
   Compact spacing on the blog index and improve long-form
   readability without changing desktop layout or article copy.
   ============================================================ */
@media (max-width:700px){
  /* Blog index: remove the large empty band between intro and filters. */
  .blog-hero{
    padding:104px 0 22px;
  }
  .blog-hero .kicker{
    margin-bottom:14px;
  }
  .blog-hero h1{
    font-size:clamp(1.72rem,8vw,2.05rem);
    line-height:1.16;
    margin-bottom:12px;
  }
  .blog-hero p{
    font-size:.96rem;
    line-height:1.58;
  }
  main > section.shell:not(.blog-hero){
    padding-top:18px;
    padding-bottom:22px;
  }
  .blog-filters{
    gap:8px;
    padding-bottom:4px;
  }
  .blog-filters button{
    font-size:.8rem;
    padding:8px 13px;
  }
  .blog-grid{
    grid-template-columns:1fr;
    gap:18px;
    padding-block:22px 28px;
  }
  .blog-card .bc-body{
    padding:21px 20px 22px;
  }
  .blog-card h2{
    font-size:1.16rem;
    line-height:1.32;
  }
  .blog-card p{
    margin-bottom:14px;
  }

  /* Article template: slightly denser type for easier mobile scanning. */
  .artikel{
    padding:104px 0 26px;
  }
  .artikel .breadcrumb{
    margin-bottom:18px;
  }
  .artikel .a-tag{
    margin-bottom:14px;
  }
  .artikel h1{
    font-size:clamp(1.62rem,7.2vw,1.9rem);
    line-height:1.18;
    margin-bottom:13px;
  }
  .artikel .a-meta{
    margin-bottom:26px;
    line-height:1.45;
  }
  .artikel .a-body{
    font-size:.97rem;
    line-height:1.64;
  }
  .artikel .a-body h2{
    font-size:1.22rem;
    line-height:1.3;
    margin:30px 0 11px;
  }
  .artikel .a-body h3{
    font-size:1.06rem;
    margin:24px 0 9px;
  }
  .artikel .a-body p{
    margin-bottom:15px;
  }
  .artikel .a-body ul,
  .artikel .a-body ol{
    margin:0 0 18px 20px;
    gap:6px;
  }
  .artikel .a-cta{
    margin-top:34px;
    padding:21px 20px;
    gap:14px;
  }
  .artikel .a-cta .btn-req{
    width:100%;
    justify-content:center;
    text-align:center;
  }
  .artikel .a-terug{
    margin-top:34px;
  }
}

/* ============================================================
   MOBILE BLOG POLISH — 2026-10-06
   Compact index spacing + article readability. Desktop unchanged.
   ============================================================ */
@media (max-width:640px){
  .blog-hero{
    padding:104px 0 22px;
  }
  .blog-hero .kicker{
    margin-bottom:12px;
  }
  .blog-hero h1{
    font-size:clamp(1.7rem,8vw,2.15rem);
    line-height:1.12;
    margin-bottom:10px;
  }
  .blog-hero p{
    font-size:.96rem;
    line-height:1.55;
  }
  .blog-filters{
    gap:7px;
    padding:0 0 6px;
  }
  .blog-filters button{
    font-size:.8rem;
    padding:7px 12px;
  }
  .blog-grid{
    grid-template-columns:1fr;
    gap:16px;
    padding-block:22px 36px;
  }
  .blog-card .bc-body{
    padding:20px 18px 21px;
  }
  .blog-card h2{
    font-size:1.15rem;
  }
  .blog-card p{
    margin-bottom:13px;
  }

  .artikel{
    padding:104px 0 22px;
  }
  .artikel .breadcrumb{
    margin-bottom:16px;
  }
  .artikel .a-tag{
    margin-bottom:13px;
  }
  .artikel h1{
    font-size:clamp(1.65rem,7.4vw,2.05rem);
    line-height:1.16;
    margin-bottom:12px;
  }
  .artikel .a-meta{
    margin-bottom:25px;
  }
  .artikel .a-body{
    font-size:.98rem;
    line-height:1.65;
  }
  .artikel .a-body h2{
    font-size:1.23rem;
    line-height:1.3;
    margin:29px 0 10px;
  }
  .artikel .a-body h3{
    margin:23px 0 8px;
  }
  .artikel .a-body p{
    margin-bottom:15px;
  }
  .artikel .a-body ul,
  .artikel .a-body ol{
    margin-bottom:17px;
    gap:6px;
  }
  .artikel .a-cta{
    margin-top:32px;
    padding:20px 18px;
    gap:13px;
  }
  .artikel .a-cta .btn-req{
    width:100%;
    justify-content:center;
    text-align:center;
  }
  .artikel .a-terug{
    margin-top:32px;
  }

  /* Remove the oversized white gap before the footer on blog pages. */
  main + footer{
    margin-top:0;
  }
}

/* ============================================================
   RELATED ARTICLES — phones: tappable cards instead of a bullet list
   (2026-10-07). Desktop keeps the plain list.
   ============================================================ */
@media (max-width:700px){
  .artikel .a-body ul.a-related{
    list-style:none;
    margin:0 0 4px;
    display:grid;
    gap:10px;
  }
  .artikel .a-body ul.a-related li{
    margin:0;
  }
  .artikel .a-body ul.a-related a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    min-height:56px;
    padding:13px 16px;
    background:#fff;
    border:1px solid var(--hairline);
    border-radius:var(--r-md);
    box-shadow:0 2px 4px rgba(20,32,48,.04),0 8px 22px rgba(20,32,48,.06);
    color:#0F1822;
    font-weight:700;
    font-size:.94rem;
    line-height:1.35;
    text-decoration:none;
  }
  .artikel .a-body ul.a-related a::after{
    content:"\2192";
    flex:none;
    color:var(--cyan);
    font-weight:700;
  }
}