/*
 * CTA B — EDITORIAL SPLIT
 * Eén architectonisch vlak, geen card.
 */
@media screen and (min-width: 969px) {

body.pb-cta-variant-b
:is(
    .vokk-services-cta-box,
    .vokk-about-cta-box,
    .vokk-projects-cta-box,
    .vokk-reviews-cta-box,
    .vokk-detail-cta-box
) {
    position: relative !important;

    display: grid !important;
    grid-template-columns: minmax(0,1.25fr) auto !important;

    align-items: center !important;

    gap: 60px !important;

    padding: 68px 72px !important;

    overflow: hidden !important;

    background:
        linear-gradient(
            120deg,
            var(--vokk-darker) 0%,
            var(--vokk-dark) 100%
        ) !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}

body.pb-cta-variant-b
:is(
    .vokk-services-cta-box,
    .vokk-about-cta-box,
    .vokk-projects-cta-box,
    .vokk-reviews-cta-box,
    .vokk-detail-cta-box
)::before {
    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 5px !important;
    height: 100% !important;

    background:
        var(--vokk-primary) !important;
}

}

/* ============================================================
 * VOKK CTA DARK CONTRAST CONTRACT
 * Donkere CTA-oppervlakken moeten altijd lichte copy houden.
 * Geen typografie/layout wijzigingen.
 * ============================================================ */

body.pb-cta-variant-b
:is(
    .vokk-services-cta-box,
    .vokk-about-cta-box,
    .vokk-projects-cta-box,
    .vokk-reviews-cta-box,
    .vokk-detail-cta-box
)
:is(h2, h3, h4) {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.pb-cta-variant-b
:is(
    .vokk-services-cta-box,
    .vokk-about-cta-box,
    .vokk-projects-cta-box,
    .vokk-reviews-cta-box,
    .vokk-detail-cta-box
) p {
    color: rgba(255,255,255,.82) !important;
    opacity: 1 !important;
    visibility: visible !important;
}