/* VS — Blogartikel: één vaste opbouw voor elk bericht (ArticleModule). */

.vs-article {
    --vs-art-navy: var(--vs-ch-navy, #314696);
    --vs-art-dark: var(--vs-ch-dark, #061b3d);
    --vs-art-text: var(--vs-ch-text, #5c676d);
    --vs-art-line: var(--vs-ch-line, #e3e8ef);
    --vs-art-soft: #f6f8fb;
    font-family: 'Lato', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--vs-art-text);
}

.vs-article__wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: 10px 20px 50px;
}

/* Kop */

.vs-article__head {
    margin: 26px 0 22px;
}

.vs-article__cats {
    margin: 0 0 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vs-article__cat {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--vs-art-soft);
    color: var(--vs-art-navy);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.vs-article__cat:hover,
.vs-article__cat:focus-visible {
    background: var(--vs-art-navy);
    color: #fff;
}

.vs-article__title {
    margin: 0;
    font-family: inherit;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--vs-art-dark);
    letter-spacing: normal;
}

.vs-article__meta {
    margin: 10px 0 0;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.vs-article__sep {
    opacity: .6;
}

.vs-article__media {
    margin: 22px 0 0;
}

.vs-article__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Inhoud — de redacteur levert alleen dit deel aan. */

.vs-article__content {
    font-size: 17px;
    line-height: 1.7;
}

.vs-article__content > * + * {
    margin-top: 1.1em;
}

.vs-article__content h2 {
    margin-top: 1.8em;
    font-size: 25px;
    font-weight: 700;
    color: var(--vs-art-dark);
    line-height: 1.25;
}

.vs-article__content h3 {
    margin-top: 1.5em;
    font-size: 20px;
    font-weight: 700;
    color: var(--vs-art-dark);
}

.vs-article__content a {
    color: var(--vs-art-navy);
}

.vs-article__content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Blokeditor: "breed" en "volledig" binnen het artikelkader. Zonder deze regels
   tonen die knoppen wel op maar gebeurt er niets — de leeskolom is smaller dan
   de site. Zelfde begrenzing als de productstrook, zodat een brede afbeelding
   niet tegen de schermranden plakt. */
.vs-article__content .alignwide,
.vs-article__content .alignfull {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: none;
}

.vs-article__content .alignwide {
    width: min(1140px, calc(100vw - 40px));
}

.vs-article__content .alignfull {
    width: 100vw;
}

.vs-article__content .alignfull img {
    border-radius: 0;
}

.vs-article__content .alignleft {
    float: left;
    margin: .3em 1.4em .8em 0;
    max-width: 45%;
}

.vs-article__content .alignright {
    float: right;
    margin: .3em 0 .8em 1.4em;
    max-width: 45%;
}

.vs-article__content .aligncenter {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.vs-article__content figure {
    margin-left: 0;
    margin-right: 0;
}

.vs-article__content figcaption {
    margin-top: .5em;
    font-size: 14px;
    opacity: .8;
}

@media (max-width: 860px) {
    .vs-article__content .alignwide,
    .vs-article__content .alignfull {
        position: static;
        left: auto;
        transform: none;
        width: auto;
    }

    .vs-article__content .alignleft,
    .vs-article__content .alignright {
        float: none;
        margin: 0;
        max-width: 100%;
    }
}

.vs-article__content blockquote {
    margin-left: 0;
    margin-right: 0;
    padding: 4px 0 4px 18px;
    border-left: 4px solid var(--vs-art-navy);
    color: var(--vs-art-dark);
}

.vs-article__content ul,
.vs-article__content ol {
    padding-left: 22px;
}

.vs-article__content li + li {
    margin-top: .4em;
}

/* Vaste afsluitstrook: producten + offerte + nieuwsbrief. */

.vs-article__after {
    margin-top: 44px;
    padding-top: 8px;
    border-top: 1px solid var(--vs-art-line);
}

.vs-article__block {
    margin-top: 34px;
}

.vs-article__blocktitle {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 700;
    color: var(--vs-art-dark);
    line-height: 1.25;
}

.vs-article__lead {
    margin: 0 0 16px;
}

.vs-article__block--quote,
.vs-article__block--news {
    padding: 24px;
    border-radius: 12px;
    background: var(--vs-art-soft);
}

.vs-article__cta {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 8px;
    background: var(--vs-color-primary, var(--vs-orange, #e8722b));
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.vs-article__cta:hover,
.vs-article__cta:focus-visible {
    filter: brightness(.94);
    color: #fff;
}

/* De productgrid breekt uit de leeskolom (780px) zodat vier kaarten niet worden
   platgedrukt — maar niet verder dan de gewone sitebreedte, anders plakt hij
   tegen de schermranden. */
.vs-article__block--products {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: min(1140px, calc(100vw - 40px));
    max-width: none;
}

@media (max-width: 860px) {
    .vs-article__block--products {
        position: static;
        left: auto;
        transform: none;
        width: auto;
    }

    .vs-article__title {
        font-size: 27px;
    }

    .vs-article__content {
        font-size: 16px;
    }
}