/* ================================================
   Blog stijl (Felemenkçe)
   - Volledige breedte grid
   - Kleuraccenten voor koppen, lijsten, vetgedrukte tekst
   - Licht thema, geoptimaliseerd voor performance
   ================================================ */

/* Basis variabelen */
:root {
    --blg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --blg-bg: #f5f7fa;
    --blg-bg-alt: #ffffff;
    --blg-border: #e3e8ef;
    --blg-border-soft: #eef1f5;
    --blg-text: #1f2933;
    --blg-text-light: #5d6b7a;
    --blg-accent: #2563eb;
    --blg-accent-alt: #7c3aed;
    --blg-accent-green: #10b981;
    --blg-accent-warm: #f97316;
    --blg-radius-sm: 8px;
    --blg-radius: 16px;
    --blg-shadow-sm: 0 2px 6px -1px rgba(0,0,0,.08),0 2px 4px -2px rgba(0,0,0,.05);
    --blg-shadow: 0 6px 22px -4px rgba(0,0,0,.15);
    --blg-transition: .25s cubic-bezier(.4,0,.2,1);
    --blg-grad-h2: linear-gradient(90deg,#2563eb,#7c3aed);
    --blg-grad-h3: linear-gradient(90deg,#10b981,#2563eb);
    --blg-strong-gradient: linear-gradient(90deg,#f97316,#ec4899,#7c3aed);
    --blg-inline-code-bg: #eef2f7;
    --blg-inline-code-color: #c2410c;
    --blg-bullet-1: #2563eb;
    --blg-bullet-2: #7c3aed;
    --blg-bullet-3: #f59e0b;
    --blg-bullet-4: #10b981;
    --blg-max: 1440px;
}

/* Reset basis */
* { box-sizing: border-box; margin:0; padding:0; }
img { display:block; max-width:100%; height:auto; }
a { text-decoration:none; color: var(--blg-accent); }
a:hover { color:#1d4fbf; }
:focus-visible { outline:2px solid var(--blg-accent); outline-offset:3px; border-radius:4px; }
body { font-family: var(--blg-font); background: var(--blg-bg); color: var(--blg-text); -webkit-font-smoothing: antialiased; }

/* Hero volledige breedte */
.blg-fw-hero {
    width:100%;
    background: linear-gradient(135deg,#ffffff,#e9f0fa);
    border-bottom:1px solid var(--blg-border);
    padding:4.5rem clamp(1rem,3vw,3rem) 2.5rem;
    position:relative;
    overflow:hidden;
}
.blg-fw-hero:after {
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 20% 25%, rgba(37,99,235,.12), transparent 60%),
      radial-gradient(circle at 80% 60%, rgba(124,58,237,.12), transparent 55%);
    opacity:.8;
    pointer-events:none;
}
.blg-fw-hero-inner {
    max-width: var(--blg-max);
    margin:0 auto;
    position:relative;
    z-index:2;
}
.blg-fw-title {
    font-size:clamp(2.4rem,5vw,3.6rem);
    line-height:1.05;
    font-weight:800;
    letter-spacing:-1px;
    margin:0 0 1rem;
    background: linear-gradient(90deg,#1f2933,#3e4c59);
    -webkit-background-clip:text;
    color:transparent;
}
.blg-fw-sub {
    font-size: clamp(1rem,1.3vw,1.25rem);
    max-width: 840px;
    color: var(--blg-text-light);
    line-height:1.5;
}

/* Categorie lijst */
.blg-fw-cats { margin-top:2.2rem; }
.blg-fw-cats-list {
    display:flex;
    gap:.65rem;
    flex-wrap:wrap;
    list-style:none;
}
.blg-fw-cat-link {
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    background:#fff;
    border:1px solid var(--blg-border);
    padding:.55rem 1rem .55rem .9rem;
    border-radius:999px;
    font-size:.75rem;
    font-weight:600;
    letter-spacing:.8px;
    text-transform:uppercase;
    color: var(--blg-text-light);
    position:relative;
    box-shadow: var(--blg-shadow-sm);
    transition: background var(--blg-transition), color var(--blg-transition), border-color var(--blg-transition), transform var(--blg-transition);
}
.blg-fw-cat-link:hover {
    background:#eff4fb;
    color: var(--blg-text);
    transform:translateY(-2px);
}
.blg-fw-cat-link.is-actief {
    background: linear-gradient(90deg,#2563eb,#7c3aed);
    color:#fff;
    border-color:transparent;
    box-shadow:0 6px 18px -6px rgba(37,99,235,.4);
}
.blg-fw-cat-count {
    background: rgba(0,0,0,.06);
    padding:.2rem .55rem;
    border-radius:14px;
    font-size:.6rem;
    font-weight:600;
}
.blg-fw-cat-link.is-actief .blg-fw-cat-count {
    background: rgba(255,255,255,.25);
    color:#fff;
}

/* Wrapper en grid */
.blg-fw-wrapper {
    width:100%;
    max-width: var(--blg-max);
    margin:0 auto;
    padding:3rem clamp(1rem,3vw,3rem) 4rem;
}
@media (max-width:900px){
    .blg-fw-wrapper { padding:2.2rem 1.25rem 3rem; }
}

.blg-fw-grid {
    display:grid;
    gap:2.2rem;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
}

/* Kaarten */
.blg-card {
    background: var(--blg-bg-alt);
    border:1px solid var(--blg-border);
    border-radius: var(--blg-radius);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    position:relative;
    box-shadow: var(--blg-shadow-sm);
    transition: transform var(--blg-transition), box-shadow var(--blg-transition), border-color var(--blg-transition);
}
.blg-card:hover {
    transform:translateY(-6px);
    box-shadow: var(--blg-shadow);
    border-color:#d3dae2;
}
.blg-card--large {
    grid-column: span 2;
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(380px,1fr));
}
@media (max-width:1100px){
    .blg-card--large { grid-template-columns:1fr; }
}

/* Media */
.blg-card-media {
    position:relative;
    display:block;
    aspect-ratio:16/10;
    background:#eef2f6;
    overflow:hidden;
}
.blg-card-media img {
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.04);
    transition: transform 1.1s ease;
}
.blg-card:hover .blg-card-media img { transform:scale(1.12); }

/* Chips */
.blg-chip-hoofd,
.blg-chip-cat {
    position:absolute;
    left:.9rem;
    top:.9rem;
    background: var(--blg-accent);
    color:#fff;
    font-size:.65rem;
    font-weight:600;
    letter-spacing:.8px;
    padding:.45rem .85rem;
    border-radius:999px;
    box-shadow:0 4px 12px -4px rgba(37,99,235,.5);
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
}
.blg-chip-cat {
    top:auto;
    bottom:.9rem;
    background: var(--blg-accent-alt);
    box-shadow:0 4px 12px -4px rgba(124,58,237,.45);
}

/* Card body */
.blg-card-body {
    padding:1.4rem 1.4rem 1.8rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.blg-card-title {
    font-size:1.25rem;
    line-height:1.25;
    margin:0;
    font-weight:700;
    letter-spacing:-.4px;
}
.blg-card-title a {
    color: var(--blg-text);
    background-image: linear-gradient(currentColor,currentColor);
    background-size:0 2px;
    background-repeat:no-repeat;
    background-position:0 100%;
    transition: background-size var(--blg-transition), color var(--blg-transition);
}
.blg-card-title a:hover {
    color: var(--blg-accent);
    background-size:100% 2px;
}
.blg-card-meta {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.7rem;
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:600;
    color: var(--blg-text-light);
}
.blg-meta-dot {
    width:6px;
    height:6px;
    background: var(--blg-accent);
    border-radius:50%;
}
.blg-meta-cat {
    color: var(--blg-accent);
    font-weight:600;
}
.blg-meta-cat:hover { color:#1d4fbf; }

.blg-card-excerpt {
    margin:0;
    font-size:.95rem;
    line-height:1.6;
    color: var(--blg-text-light);
    flex-grow:1;
}
.blg-card-actions {
    margin-top:.25rem;
}
.blg-btn-lees {
    display:inline-block;
    padding:.65rem 1.15rem;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
    border-radius:10px;
    background: linear-gradient(90deg,#2563eb,#7c3aed);
    color:#fff;
    box-shadow:0 4px 14px -4px rgba(37,99,235,.5);
}
.blg-btn-lees:hover { filter:brightness(1.08); }

/* Lege staat */
.blg-empty-state {
    background:#fff;
    border:1px dashed var(--blg-border);
    max-width:760px;
    margin:3rem auto;
    padding:3rem 2rem;
    text-align:center;
    border-radius: var(--blg-radius);
    box-shadow: var(--blg-shadow-sm);
}
.blg-empty-icon { font-size:3rem; display:block; margin-bottom:1rem; }
.blg-empty-text { font-size:1.05rem; color: var(--blg-text-light); margin:0 0 1rem; }
.blg-empty-link { font-weight:600; font-size:.85rem; }
.blg-empty-link:hover { text-decoration:underline; }

/* Categorie pagina header */
.blg-cat-header {
    background:linear-gradient(135deg,#ffffff,#eef3f9);
    border-bottom:1px solid var(--blg-border);
    padding:3.2rem clamp(1rem,3vw,3rem) 1.8rem;
}
.blg-cat-header-inner { max-width: var(--blg-max); margin:0 auto; }
.blg-cat-title {
    font-size:clamp(2rem,4vw,3rem);
    margin:.2rem 0 .75rem;
    font-weight:800;
    letter-spacing:-.6px;
    background: linear-gradient(90deg,#1f2933,#3e4c59);
    -webkit-background-clip:text;
    color:transparent;
}
.blg-cat-desc { color: var(--blg-text-light); margin:0 0 1.6rem; font-size:1rem; }
.blg-cat-switch {
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:.55rem;
    padding:0;
}
.blg-cat-switch-link {
    background:#fff;
    border:1px solid var(--blg-border);
    padding:.5rem 1rem;
    border-radius:999px;
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.7px;
    text-transform:uppercase;
    color: var(--blg-text-light);
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    box-shadow: var(--blg-shadow-sm);
    transition: background var(--blg-transition), color var(--blg-transition), border-color var(--blg-transition);
}
.blg-cat-switch-link:hover { background:#eff4fb; color:var(--blg-text); }
.blg-cat-switch-link.is-actief {
    background: linear-gradient(90deg,#2563eb,#7c3aed);
    color:#fff;
    border-color:transparent;
}

/* Breadcrumb */
.blg-breadcrumb {
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.8px;
    text-transform:uppercase;
    margin:0 0 1.2rem;
    color: var(--blg-text-light);
}
.blg-breadcrumb ol {
    list-style:none;
    display:flex;
    gap:.7rem;
    flex-wrap:wrap;
}
.blg-breadcrumb li {
    display:flex;
    align-items:center;
    gap:.7rem;
}
.blg-breadcrumb li+li:before {
    content:"/";
    color:#94a3b8;
}
.blg-breadcrumb a { color:#64748b; }
.blg-breadcrumb a:hover { color: var(--blg-accent); }

/* Enkel bericht */
.blg-single {
    margin:2.5rem auto 3.5rem;
    background:#fff;
    border:1px solid var(--blg-border);
    border-radius: var(--blg-radius);
    padding:2.2rem clamp(1rem,3vw,2.2rem) 3.2rem;
    box-shadow: var(--blg-shadow-sm);
}
@media (max-width:780px){
    .blg-single { padding:1.8rem 1.2rem 2.5rem; }
}
.blg-single-header { margin-bottom:1.5rem; }
.blg-single-title {
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.08;
    font-weight:800;
    margin:.3rem 0 .9rem;
    letter-spacing:-.7px;
    background: linear-gradient(90deg,#1f2933,#3e4c59);
    -webkit-background-clip:text;
    color:transparent;
}
.blg-single-meta {
    display:flex;
    flex-wrap:wrap;
    gap:.85rem;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:600;
    color: var(--blg-text-light);
    margin-bottom:1.1rem;
}
.blg-single-figure { margin:0; }
.blg-single-image {
    width:100%;
    border-radius:22px;
    border:1px solid var(--blg-border);
    aspect-ratio:16/9;
    object-fit:cover;
    box-shadow: var(--blg-shadow-sm);
}

/* Typografie inhoud */
.blg-single-content {
    font-size:1.02rem;
    line-height:1.68;
    color: var(--blg-text-light);
}
.blg-single-content p { margin:1.15rem 0; }

.blg-single-content h2,
.blg-single-content h3 {
    font-weight:700;
    line-height:1.25;
    letter-spacing:-.3px;
    margin:2.2rem 0 .85rem;
    position:relative;
}
.blg-single-content h2 {
    font-size:clamp(1.5rem,2.6vw,2.1rem);
    background: var(--blg-grad-h2);
    -webkit-background-clip:text;
    color:transparent;
}
.blg-single-content h3 {
    font-size:clamp(1.25rem,2.1vw,1.55rem);
    background: var(--blg-grad-h3);
    -webkit-background-clip:text;
    color:transparent;
}
.blg-single-content h2:after,
.blg-single-content h3:after {
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    height:4px;
    width:70px;
    border-radius:3px;
    background: linear-gradient(90deg,#2563eb,#7c3aed,#f97316);
    opacity:.25;
}

/* Vetgedrukt */
.blg-single-content strong,
.blg-single-content b {
    font-weight:700;
    background: var(--blg-strong-gradient);
    -webkit-background-clip:text;
    color:transparent;
    position:relative;
    padding:.15rem .35rem;
    border-radius:6px;
}
.blg-single-content strong:before,
.blg-single-content b:before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#2563eb18,#7c3aed18,#f9731618);
    border-radius:6px;
    z-index:-1;
}

/* Lijsten */
.blg-single-content ul,
.blg-single-content ol {
    list-style:none;
    margin:1.4rem 0 1.4rem;
    padding:0;
}
.blg-single-content li {
    position:relative;
    padding-left:1.9rem;
    margin:.55rem 0;
}
.blg-single-content ul > li:before {
    content:"";
    position:absolute;
    left:0;
    top:.55rem;
    width:14px;
    height:14px;
    border-radius:6px;
    background: var(--blg-bullet-1);
    box-shadow:0 0 0 2px #fff,0 4px 8px -2px rgba(0,0,0,.25);
    transition:transform .4s;
}
.blg-single-content ul > li:nth-child(4n+2):before { background: var(--blg-bullet-2); }
.blg-single-content ul > li:nth-child(4n+3):before { background: var(--blg-bullet-3); }
.blg-single-content ul > li:nth-child(4n+4):before { background: var(--blg-bullet-4); }
.blg-single-content li:hover:before { transform:scale(1.15); }

.blg-single-content a {
    color: var(--blg-accent);
    font-weight:500;
    background-image: linear-gradient(var(--blg-accent),var(--blg-accent));
    background-size:0 2px;
    background-repeat:no-repeat;
    background-position:0 100%;
    transition: background-size var(--blg-transition), color var(--blg-transition);
}
.blg-single-content a:hover {
    background-size:100% 2px;
    color:#1d4fbf;
}

/* Inline code */
.blg-single-content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    background: var(--blg-inline-code-bg);
    color: var(--blg-inline-code-color);
    padding:.25rem .55rem;
    border-radius:6px;
    font-size:.82rem;
    border:1px solid var(--blg-border);
}

/* Citeerblok */
.blg-single-content blockquote {
    margin:2rem 0;
    background:#f1f5fa;
    border-left:5px solid var(--blg-accent);
    padding:1.2rem 1.25rem 1.2rem 1.5rem;
    border-radius:0 var(--blg-radius-sm) var(--blg-radius-sm) 0;
    font-style:italic;
    color:#334155;
}
.blg-single-content blockquote cite {
    display:block;
    margin-top:.85rem;
    font-size:.75rem;
    font-style:normal;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#64748b;
}

/* Afbeeldingen en figures */
.blg-single-content img {
    border-radius:18px;
    border:1px solid var(--blg-border);
    margin:2rem 0;
    box-shadow: var(--blg-shadow-sm);
    margin: 20px;
}
.blg-single-content figure { margin:2.1rem 0; }
.blg-single-content figure figcaption {
    margin-top:.6rem;
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#64748b;
    text-align:center;
}

/* Share sectie */
.blg-share {
    margin-top:2.8rem;
    display:flex;
    align-items:center;
    gap:1.1rem;
    flex-wrap:wrap;
    border-top:1px solid var(--blg-border);
    padding-top:1.6rem;
}
.blg-share-label {
    font-size:.7rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color: var(--blg-text-light);
}
.blg-share-list {
    list-style:none;
    display:flex;
    gap:.6rem;
    flex-wrap:wrap;
}
.blg-share-btn {
    width:44px;
    height:44px;
    border-radius:12px;
    background:#fff;
    border:1px solid var(--blg-border);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:.9rem;
    font-weight:600;
    cursor:pointer;
    color:#475569;
    transition: background var(--blg-transition), color var(--blg-transition), transform var(--blg-transition), border-color var(--blg-transition);
    box-shadow: var(--blg-shadow-sm);
}
.blg-share-btn:hover {
    background: linear-gradient(90deg,#2563eb,#7c3aed);
    color:#fff;
    border-color:transparent;
    transform:translateY(-3px);
}
.blg-share-btn.is-copied {
    background: linear-gradient(90deg,#10b981,#2563eb);
    color:#fff;
}

/* Gerelateerde berichten */
.blg-related {
    max-width: var(--blg-max);
    margin:4rem auto 2rem;
    padding:0 clamp(1rem,3vw,3rem);
}
.blg-related-heading {
    font-size:1.5rem;
    font-weight:700;
    margin:0 0 1.4rem;
    background: linear-gradient(90deg,#2563eb,#7c3aed);
    -webkit-background-clip:text;
    color:transparent;
    letter-spacing:-.4px;
}
.blg-related-grid {
    list-style:none;
    display:grid;
    gap:1.5rem;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    padding:0;
    margin:0;
}
.blg-related-link {
    display:flex;
    flex-direction:column;
    gap:.7rem;
    background:#fff;
    border:1px solid var(--blg-border);
    padding:.85rem .85rem 1rem;
    border-radius:16px;
    text-decoration:none;
    color: var(--blg-text);
    box-shadow: var(--blg-shadow-sm);
    transition: transform var(--blg-transition), border-color var(--blg-transition), box-shadow var(--blg-transition);
}
.blg-related-link:hover {
    transform:translateY(-4px);
    border-color:#d3dae2;
    box-shadow: var(--blg-shadow);
}
.blg-related-media {
    position:relative;
    aspect-ratio:16/10;
    overflow:hidden;
    border-radius:12px;
    background:#eef2f6;
    border:1px solid var(--blg-border);
}
.blg-related-media img {
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.04);
    transition: transform 1s ease;
}
.blg-related-link:hover .blg-related-media img { transform:scale(1.12); }
.blg-related-title {
    font-size:.85rem;
    font-weight:600;
    line-height:1.3;
    color: var(--blg-text-light);
}
.blg-related-link:hover .blg-related-title { color: var(--blg-accent); }

/* Terug link */
.blg-back {
    max-width:980px;
    margin:0 auto 3.5rem;
    padding:0 clamp(1rem,3vw,3rem);
}
.blg-back-link {
    display:inline-block;
    font-weight:600;
    font-size:.85rem;
    color: var(--blg-accent);
}
.blg-back-link:hover { text-decoration:underline; }

/* Responsief */
@media (max-width:680px){
    .blg-fw-grid { gap:1.4rem; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
    .blg-card-body { padding:1.1rem 1.1rem 1.4rem; }
    .blg-card-title { font-size:1.1rem; }
    .blg-single-title { font-size:2.15rem; }
    .blg-single-content h2 { font-size:1.55rem; }
    .blg-single-content h3 { font-size:1.25rem; }
    .blg-share-btn { width:40px; height:40px; }
}

/* Print minimal */
@media print {
    .blg-fw-hero,
    .blg-fw-cats,
    .blg-share,
    .blg-related,
    .blg-back,
    .blg-chip-hoofd,
    .blg-chip-cat { display:none !important; }
    .blg-single,
    .blg-card { box-shadow:none; border:none; }
    a { color:#000 !important; text-decoration:underline; }
    .blg-single-title,
    .blg-card-title a {
        background:none !important;
        color:#000 !important;
        -webkit-background-clip:border-box;
    }
    .blg-single-content strong,
    .blg-single-content b {
        background:none !important;
        color:#000 !important;
    }
}