/* ==================================================================
INSPIRATIE (BLOG) — overzicht en onderwerp (views/inspiration/index.php, blog/post-preview.php, blog/paging.php)
en de rand rond een artikel (views/inspiration/view.php; de tekst zelf behoudt de opmaak van de blog/Elementor).
Prefix bl-, enkel tokens. Laadt vóór lt.css en lijstjestijd.css: regels die daar iets overschrijven beginnen met .bl.
docs/ui/
================================================================== */
.bl { color: var(--lt-navy); }
.bl-mark { padding: 0 .12em; background: linear-gradient(transparent 12%, var(--lt-blue) 12%, var(--lt-blue) 92%, transparent 92%); color: var(--lt-white); font-style: italic; }
.bl .bl-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; font-weight: 600; color: var(--lt-navy); text-decoration: none; }
.bl .bl-back:hover { color: var(--lt-blue); }
.bl .bl-link { font-weight: 700; color: var(--lt-navy); text-decoration: none; border-bottom: 3px solid var(--lt-blue); padding-bottom: 2px; }
.bl .bl-link:hover { color: var(--lt-blue); }

/* hero (op het verloop van de pagina, zonder golf) */
.bl-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; padding-top: 8px; }
.bl-hero__text { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 18px; padding-bottom: 40px; }
.bl .bl-hero__title { margin: 0; font-size: 3rem; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
.bl-hero__text p { margin: 0; max-width: 480px; font-size: 1.25rem; line-height: 1.5; }
.bl-hero__img { flex: 1 1 380px; min-width: 0; display: flex; justify-content: flex-end; }
.bl-hero__img img { display: block; width: 100%; max-width: 400px; height: auto; }
.bl-hero--topic { padding: 28px 0 56px; }
.bl-hero--topic .bl-hero__text { padding-bottom: 0; }
.bl-hero--topic .bl-hero__title { font-size: 3rem; }

/* onderwerpen als chips */
.bl-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -4px; padding: 4px; scrollbar-width: none; }
.bl-chips::-webkit-scrollbar { display: none; }
.bl .bl-chip { flex: none; height: 42px; padding: 0 18px; border: 1.5px solid var(--lt-border); border-radius: var(--lt-radius-pill); background: var(--lt-white); color: var(--lt-navy); font-size: .9375rem; font-weight: 600; display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none; transition: border-color .15s ease; }
.bl .bl-chip:hover { border-color: var(--lt-navy); color: var(--lt-navy); }
.bl .bl-chip.is-active { border-color: var(--lt-navy); background: var(--lt-navy); color: var(--lt-white); }

/* lijst */
.bl-list { display: flex; flex-direction: column; gap: 56px; padding: 28px 0 24px; }
.bl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bl .bl-head h2 { margin: 0; font-size: 2.125rem; font-weight: 700; }
.bl-head span { font-size: .875rem; color: var(--lt-muted); }
.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }

/* kaart (blog/post-preview.php) */
.bl .bl-card { display: flex; flex-direction: column; gap: 12px; color: var(--lt-navy); text-decoration: none; }
.bl-card__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; background: var(--lt-surface); box-shadow: 0 10px 24px rgba(12, 35, 62, .10); transition: transform .25s ease; }
.bl-card:hover .bl-card__img { transform: rotate(-1deg) scale(1.02); }
.bl-tag { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--lt-blue); }
.bl .bl-card__title { margin: 0; font-size: 1.25rem; line-height: 1.25; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s ease; }
.bl-card:hover .bl-card__title { color: var(--lt-blue); }
.bl-card__text { margin: 0; font-size: .9375rem; line-height: 1.5; color: #33475B; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-meta { font-size: .8125rem; color: var(--lt-muted); }

/* uitgelicht (eerste post op het overzicht) */
.bl .bl-feature { flex-direction: row; align-items: center; gap: 56px; }
.bl-feature__img { flex: 1 1 58%; min-width: 0; }
.bl-feature__img .bl-card__img { aspect-ratio: 3 / 2; border-radius: 28px; }
.bl-feature__text { flex: 1 1 42%; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.bl .bl-feature .bl-card__title { font-size: 2rem; line-height: 1.1; font-weight: 700; -webkit-line-clamp: 3; }
.bl-feature .bl-card__text { font-size: 1.0625rem; line-height: 1.55; -webkit-line-clamp: 3; }
.bl-feature .bl-meta { font-size: .875rem; }
.bl-feature__more { margin-top: 4px; }

/* nieuwsbrief: zelfde balk als op de homepage */
.bl-news { margin: 64px 0; }
.bl-news__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 48px; padding: 56px 0; }
.bl-news__text { flex: 1 1 360px; display: flex; flex-direction: column; gap: 8px; }
.bl .bl-news__text h2 { margin: 0; font-size: 2.125rem; font-weight: 700; }
.bl-news__text p { margin: 0; font-size: 1rem; line-height: 1.5; color: #33475B; }
.bl-news form { flex: 1 1 420px; margin: 0; }
.bl-news .hm-quick__row { background: var(--lt-white); }

/* paginering */
.bl-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding-bottom: 72px; }
.bl .bl-pages__step { height: 46px; padding: 0 18px; border: 1.5px solid var(--lt-navy); border-radius: var(--lt-radius-pill); color: var(--lt-navy); font-size: .9375rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.bl .bl-pages__step:hover { background: var(--lt-navy); color: var(--lt-white); }
.bl-pages__step.is-disabled { border-color: var(--lt-line); color: var(--lt-faint); pointer-events: none; }
.bl .bl-pages__nr { width: 46px; height: 46px; border-radius: 50%; color: var(--lt-navy); font-size: .9375rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.bl .bl-pages__nr:hover { background: var(--lt-surface); color: var(--lt-navy); }
.bl .bl-pages__nr.is-active { background: var(--lt-navy); color: var(--lt-white); }
.bl-pages__gap { color: var(--lt-muted); }

/* artikel: kop, foto, delen, afsluiter, meer inspiratie */
.bl-art__head { max-width: 880px; margin: 0 auto; padding: 28px 0 150px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.bl-art__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bl .bl-art__tags a { height: 32px; padding: 0 14px; border-radius: var(--lt-radius-pill); background: var(--lt-white); color: var(--lt-navy); font-size: .8125rem; font-weight: 700; display: inline-flex; align-items: center; text-decoration: none; }
.bl .bl-art__tags a:hover { color: var(--lt-blue); }
.bl .bl-art__title { color: var(--lt-navy); margin: 0; font-size: 3rem; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; }
.bl-art__meta { font-size: .9375rem; color: #33475B; }
.bl-art__photo { max-width: 1040px; margin: -110px auto 0; position: relative; }
.bl-art__photo img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 32px; box-shadow: 0 18px 44px rgba(12, 35, 62, .16); }
.bl-art__body { max-width: 1040px; margin: 0 auto; padding: 56px 0 72px; display: flex; gap: 40px; align-items: flex-start; }
.bl-share { position: sticky; top: 24px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 6px; }
.bl-share__label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--lt-muted); }
.bl .bl-share a, .bl-share button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--lt-surface); color: var(--lt-navy); display: flex; align-items: center; justify-content: center; font-size: 1.125rem; text-decoration: none; cursor: pointer; }
.bl .bl-share a:hover, .bl-share button:hover { background: var(--lt-blue-soft); color: var(--lt-blue); }
.bl-content { flex: 1; min-width: 0; max-width: 860px; }
/* de Elementor-tekst van de blog in de huisstijl van de hulpartikels (help.css); dezelfde regels staan in de
   WordPress-template "Lijstjestijd artikel" zodat blog en site gelijk lopen. Zwaarder dan de per-element-css van Elementor. */
.bl .bl-content .elementor-widget-text-editor.elementor-widget { font-family: inherit; font-size: 1.0625rem; line-height: 1.65; font-weight: 300; color: #23384D; }
.bl .bl-content .elementor-widget-text-editor p { margin: 0 0 16px; }
.bl .bl-content .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.bl .bl-content .elementor-widget-text-editor a { color: var(--lt-blue); }
.bl .bl-content .elementor-widget:not(:last-child) { margin-bottom: 10px; }
.bl .bl-content .elementor-widget-heading.elementor-widget :is(h1, h2).elementor-heading-title { margin: 28px 0 8px; font-family: inherit; font-size: 1.875rem; line-height: 1.2; font-weight: 700; color: var(--lt-navy); }
.bl .bl-content .elementor-widget-heading.elementor-widget :is(h3, h4).elementor-heading-title { margin: 16px 0 6px; font-family: inherit; font-size: 1.1875rem; line-height: 1.3; font-weight: 700; color: var(--lt-navy); }
.bl-share--inline { display: none; }
/* afsluiter: licht, op het verloop van de site (niet donker) */
.bl-cta { margin-top: 40px; padding: 28px 32px; border-radius: 28px; background: linear-gradient(90deg, rgba(241, 255, 223, .6) 0%, rgba(255, 227, 191, .6) 49%, rgba(254, 235, 238, .6) 100%), var(--lt-white); color: var(--lt-navy); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.bl-cta > img { flex: none; width: 96px; height: auto; }
.bl-cta__text { flex: 1 1 240px; display: flex; flex-direction: column; gap: 6px; }
.bl-cta__text strong { font-size: 1.375rem; line-height: 1.2; font-weight: 700; }
.bl-cta__text span { font-size: .9375rem; line-height: 1.5; color: #33475B; }
.bl-cta form { flex: 1 1 100%; min-width: 0; margin: 0; }
.bl-cta .hm-quick__input { min-width: 0; }
.bl-cta .hm-quick__row { background: var(--lt-white); }
.bl-related { display: flex; flex-direction: column; gap: 22px; padding-bottom: 80px; }

@media (max-width: 991.98px) {
    .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bl .bl-feature { flex-direction: column; align-items: stretch; gap: 22px; }
    .bl .bl-feature .bl-card__title { font-size: 2.25rem; }
    .bl-share:not(.bl-share--inline) { display: none; }
    .bl-share--inline { position: static; display: flex; flex-direction: row; margin-top: 28px; padding: 0; }
    .bl-share--inline .bl-share__label { margin-right: 4px; }
}
@media (max-width: 767.98px) {
    .bl .bl-hero__title { font-size: 2.5rem; }
    .bl-hero__text { padding-bottom: 0; }
    .bl-hero__text p { font-size: 1.0625rem; }
    .bl-hero__img img { max-width: 300px; margin: 0 auto; }
    .bl-hero--topic { padding: 18px 0 40px; }
    .bl-hero--topic .bl-hero__title { font-size: 2.5rem; }
    .bl-list { gap: 36px; }
    .bl-grid { grid-template-columns: minmax(0, 1fr); }
    .bl .bl-head h2, .bl .bl-news__text h2 { font-size: 1.625rem; }
    .bl .bl-feature .bl-card__title { font-size: 2rem; }
    .bl-news { margin: 40px 0; }
    .bl-news__inner { padding: 36px 0; }
    .bl-art__head { padding: 16px 0 90px; }
    .bl .bl-art__title { font-size: 2.5rem; }
    .bl-art__photo { margin-top: -64px; }
    .bl-art__photo img { aspect-ratio: 4 / 3; border-radius: 20px; }
    .bl-art__body { padding: 28px 0 48px; }
    .bl-cta { padding: 24px 20px; }
    .bl .bl-content .elementor-widget-heading.elementor-widget :is(h1, h2).elementor-heading-title { font-size: 1.625rem; }
}