/* Kennisbank: artikelpagina. Kleuren en lettertype volgen het thema (variables.less, typhography.less). */
.ccm-page .kennisbank-artikel {
    --kb-navy: #172745;
    --kb-oranje: #F7941E;
    --kb-oranje-hover: #fdba12;
    --kb-vlak: #f3f4f6;
    --kb-kolom: 760px;
}

/* Kop: de donkere titelbalk van het thema, met label, samenvatting en datum */
.ccm-page .kennisbank-artikel .kennisbank-kop {
    margin-bottom: 0;
    padding: 50px 0;
}
.ccm-page .kennisbank-artikel .kennisbank-kop--met-beeld {
    padding-bottom: 130px;
}
.ccm-page .kennisbank-artikel .kennisbank-label {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--kb-oranje);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
}
.ccm-page .kennisbank-artikel .kennisbank-label:hover {
    color: var(--kb-oranje-hover);
}
.ccm-page .kennisbank-artikel .kennisbank-kop h1 {
    margin: 0 0 18px;
    font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
    line-height: 1.1;
}
.ccm-page .kennisbank-artikel .kennisbank-intro {
    max-width: 640px;
    margin: 0 auto 16px;
    color: rgba(255, 255, 255, .8);
    font-size: 1.2rem;
    line-height: 1.5;
}
.ccm-page .kennisbank-artikel .kennisbank-meta {
    margin: 0;
    color: rgba(255, 255, 255, .6);
    font-size: .8125rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Leeskolom */
.ccm-page .kennisbank-artikel .kennisbank-kolom {
    max-width: var(--kb-kolom);
    margin: 0 auto;
}
.ccm-page .kennisbank-artikel .kennisbank-beeld {
    position: relative;
    margin: -90px 0 44px;
}
.ccm-page .kennisbank-artikel .kennisbank-beeld img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-bottom: 6px solid var(--kb-oranje);
    background-color: var(--kb-navy);
}

/* Lopende tekst uit het Content-block */
.ccm-page .kennisbank-artikel .kennisbank-tekst {
    font-size: 1.125rem;
    line-height: 1.7;
}
.ccm-page .kennisbank-artikel .kennisbank-tekst > p:first-child {
    font-size: 1.3rem;
    line-height: 1.55;
}
.ccm-page .kennisbank-artikel .kennisbank-tekst p {
    margin: 0 0 20px;
}
.ccm-page .kennisbank-artikel .kennisbank-tekst h2 {
    margin: 52px 0 16px;
    color: var(--kb-navy);
    font-size: 1.5rem;
    line-height: 1.2;
}
.ccm-page .kennisbank-artikel .kennisbank-tekst h2::before {
    content: "";
    display: block;
    width: 44px;
    height: 4px;
    margin-bottom: 14px;
    background-color: var(--kb-oranje);
}
.ccm-page .kennisbank-artikel .kennisbank-tekst h3 {
    margin: 36px 0 12px;
    color: var(--kb-navy);
    font-size: 1.2rem;
    line-height: 1.25;
}
.ccm-page .kennisbank-artikel .kennisbank-tekst a {
    color: var(--kb-navy);
    text-decoration: underline;
    text-decoration-color: var(--kb-oranje);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.ccm-page .kennisbank-artikel .kennisbank-tekst a:hover {
    color: var(--kb-oranje);
}
.ccm-page .kennisbank-artikel .kennisbank-tekst ul,
.ccm-page .kennisbank-artikel .kennisbank-tekst ol {
    margin: 0 0 24px;
    padding-left: 1.4em;
}
.ccm-page .kennisbank-artikel .kennisbank-tekst ul {
    list-style: square;
}
.ccm-page .kennisbank-artikel .kennisbank-tekst li {
    margin-bottom: 8px;
    padding-left: 4px;
}
.ccm-page .kennisbank-artikel .kennisbank-tekst li::marker {
    color: var(--kb-oranje);
    font-weight: 700;
}

/* Checklist: <ul class="kennisbank-checklist"> */
.ccm-page .kennisbank-artikel .kennisbank-tekst ul.kennisbank-checklist {
    padding: 28px 32px;
    list-style: none;
    background-color: var(--kb-vlak);
    border-left: 6px solid var(--kb-navy);
}
.ccm-page .kennisbank-artikel .kennisbank-tekst ul.kennisbank-checklist li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 36px;
}
.ccm-page .kennisbank-artikel .kennisbank-tekst ul.kennisbank-checklist li:last-child {
    margin-bottom: 0;
}
.ccm-page .kennisbank-artikel .kennisbank-tekst ul.kennisbank-checklist li::before {
    content: "";
    position: absolute;
    top: .3em;
    left: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--kb-oranje);
    background-color: #fff;
}

/* Vaste CTA onder elk artikel */
.ccm-page .kennisbank-artikel .kennisbank-cta {
    margin: 60px 0 32px;
    padding: 40px;
    color: #fff;
    background-color: var(--kb-navy);
    border-top: 6px solid var(--kb-oranje);
}
.ccm-page .kennisbank-artikel .kennisbank-cta h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.2;
}
.ccm-page .kennisbank-artikel .kennisbank-cta p {
    margin: 0 0 24px;
    color: rgba(255, 255, 255, .85);
    font-size: 1.125rem;
}
.ccm-page .kennisbank-artikel .kennisbank-cta-acties {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
}
.ccm-page .kennisbank-artikel .kennisbank-cta-tel {
    color: #fff;
    text-decoration: none;
}
.ccm-page .kennisbank-artikel .kennisbank-cta-tel:hover {
    color: var(--kb-oranje);
}
.ccm-page .kennisbank-artikel .kennisbank-terug {
    margin: 0 0 20px;
}
.ccm-page .kennisbank-artikel .kennisbank-terug a {
    color: var(--kb-navy);
    font-size: .875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
}
.ccm-page .kennisbank-artikel .kennisbank-terug a:hover {
    color: var(--kb-oranje);
}

@media (max-width: 767.98px) {
    .ccm-page .kennisbank-artikel .kennisbank-kop {
        padding: 32px 0;
    }
    .ccm-page .kennisbank-artikel .kennisbank-kop--met-beeld {
        padding-bottom: 80px;
    }
    .ccm-page .kennisbank-artikel .kennisbank-intro {
        font-size: 1.05rem;
    }
    .ccm-page .kennisbank-artikel .kennisbank-beeld {
        margin: -56px 0 32px;
    }
    .ccm-page .kennisbank-artikel .kennisbank-tekst {
        font-size: 1.0625rem;
    }
    .ccm-page .kennisbank-artikel .kennisbank-tekst > p:first-child {
        font-size: 1.15rem;
    }
    .ccm-page .kennisbank-artikel .kennisbank-tekst h2 {
        margin-top: 40px;
        font-size: 1.3rem;
    }
    .ccm-page .kennisbank-artikel .kennisbank-tekst ul.kennisbank-checklist {
        padding: 22px 20px;
    }
    .ccm-page .kennisbank-artikel .kennisbank-cta {
        padding: 28px 22px;
    }
}