/*
 * ============================================================
 * VOKK BUSINESS — DIENSTEN
 * CLEAN FINAL
 * ============================================================
 *
 * Alleen desktop / tablet-landscape.
 * Geen hero.
 * Geen mobiel.
 * Geen typografie.
 * Geen hardcoded content.
 * ============================================================
 */

@media screen and (min-width: 969px) {


/* ============================================================
 * INTRO
 * ============================================================ */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-services-intro {
    padding: 78px 0 62px !important;
    background: #ffffff !important;
}


body.pb-layout-pack-business.pb-template-page-diensten
.vokk-services-intro-inner {
    max-width: 780px !important;
    margin-left: 0 !important;
    text-align: left !important;
}


/* ============================================================
 * DIENSTENLIJST
 * ============================================================ */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-services-list {
    padding: 0 0 90px !important;
}


body.pb-layout-pack-business.pb-template-page-diensten
.vokk-services-list .vokk-services-container {
    max-width: 1280px !important;
}


/*
 * Iedere dienst:
 *
 * FOTO | INFORMATIE
 *
 * Geen volledig kader.
 * Slechts één horizontale lijn TUSSEN diensten.
 */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-row {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr) !important;

    grid-template-rows: 1fr !important;

    gap: 0 !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 460px !important;

    margin: 0 !important;

    overflow: hidden !important;

    background: #ffffff !important;

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

    box-shadow: none !important;
    transform: none !important;
}


/*
 * Exact één scheidingslijn tussen opeenvolgende diensten.
 */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-row + .vokk-service-row {
    margin-top: 34px !important;

    padding-top: 34px !important;

    border-top:
        1px solid var(--pb-business-line) !important;
}


/*
 * Geen pseudo-randen uit oudere CSS.
 */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-row::before,
body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-row::after {
    display: none !important;
}


/* ============================================================
 * AFBEELDING
 * ============================================================ */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-image {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 100% !important;
    min-height: 460px !important;

    margin: 0 !important;

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

    box-shadow: none !important;

    justify-self: stretch !important;
    align-self: stretch !important;

    overflow: hidden !important;

    transform: none !important;
}


body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-number {
    z-index: 3 !important;
}


/* ============================================================
 * CONTENTVLAK
 * ============================================================ */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-content {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 100% !important;

    margin: 0 !important;

    padding:
        56px
        60px !important;

    box-sizing: border-box !important;

    background:
        var(--pb-business-soft) !important;

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

    box-shadow: none !important;

    transform: none !important;
}


/*
 * Eén korte accentlijn.
 * Geen lijn over volledige breedte.
 */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-content::before {
    content: "" !important;

    display: block !important;

    width: 44px !important;
    height: 3px !important;

    margin:
        0
        0
        26px !important;

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


/*
 * Geen pseudo-element achter content.
 */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-content::after {
    display: none !important;
}


body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-content > * {
    max-width: none !important;
}


/* ============================================================
 * BULLETS
 * ============================================================ */

/*
 * Hier exact één subtiele lijn.
 */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-points {
    width: 100% !important;

    margin:
        24px
        0
        0 !important;

    padding:
        20px
        0
        0 !important;

    border: 0 !important;

    border-top:
        1px solid var(--pb-business-line) !important;
}


body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-link {
    align-self: flex-start !important;

    margin-top: 22px !important;
}


/* ============================================================
 * GEEN ZIG-ZAG BIJ ZAKELIJK
 * ============================================================ */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-row:nth-child(even)
.vokk-service-image {
    grid-column: 1 !important;
    grid-row: 1 !important;
}


body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-row:nth-child(even)
.vokk-service-content {
    grid-column: 2 !important;
    grid-row: 1 !important;
}


/* ============================================================
 * VOORDELENSTROOK
 * ============================================================ */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-benefits {
    padding:
        0
        0
        85px !important;

    background: #ffffff !important;
}


body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-benefits-grid {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 0 !important;

    border: 0 !important;

    border-top:
        1px solid var(--pb-business-line) !important;

    border-bottom:
        1px solid var(--pb-business-line) !important;
}


body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-benefit {
    padding:
        34px
        30px !important;

    background:
        var(--pb-business-soft) !important;

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

    box-shadow: none !important;
}


body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-benefit
+ .vokk-service-benefit {
    border-left:
        1px solid var(--pb-business-line) !important;
}


body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-benefit-icon {
    background: transparent !important;

    border: 0 !important;

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


/* ============================================================
 * EVENTUELE OUDE PSEUDO-LIJNEN WEG
 * ============================================================ */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-benefits-grid::before,
body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-benefits-grid::after,
body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-benefit::before,
body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-benefit::after {
    display: none !important;
}

}


/*
 * ============================================================
 * BUSINESS DIENSTEN — FINAL SPACING FIX
 * ============================================================
 *
 * Geen lange horizontale lijnen tussen diensten.
 * Scheiding gebeurt via witruimte.
 * Interne functionele lijn boven bullets blijft staan.
 * ============================================================
 */

@media screen and (min-width: 969px) {

/*
 * Geen lijn boven eerste dienst.
 */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-row:first-child {
    border-top: 0 !important;
}


/*
 * Geen lijn tussen opeenvolgende diensten.
 */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-row + .vokk-service-row {
    margin-top: 54px !important;

    padding-top: 0 !important;

    border-top: 0 !important;
}


/*
 * Geen onderlijn per dienst.
 */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-row {
    border-top: 0 !important;
    border-bottom: 0 !important;
}


/*
 * Laatste dienst ook geen afsluitende lijn.
 */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-row:last-child {
    border-bottom: 0 !important;
}


/*
 * Eventuele pseudo-lijnen definitief uit.
 */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-row::before,
body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-row::after {
    display: none !important;
}


/*
 * De functionele lijn binnen het tekstvlak
 * boven de specificaties blijft WEL bestaan.
 */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-points {
    border-top:
        1px solid var(--pb-business-line) !important;
}

}


/*
 * ============================================================
 * BUSINESS DIENSTEN — BENEFITS CLEANUP
 * ============================================================
 *
 * Geen lange horizontale tabel-lijnen.
 * Alleen verticale scheiding tussen de 4 voordelen.
 * ============================================================
 */

@media screen and (min-width: 969px) {

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-benefits {
    border-top: 0 !important;
    border-bottom: 0 !important;
}


body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-benefits::before,
body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-benefits::after {
    display: none !important;
}


body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-benefits-grid {
    border: 0 !important;
}


body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-benefits-grid::before,
body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-benefits-grid::after {
    display: none !important;
}


/*
 * Alleen verticale scheidingen tussen voordelen behouden.
 */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-benefit {
    border-top: 0 !important;
    border-bottom: 0 !important;
}


body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-benefit + .vokk-service-benefit {
    border-left:
        1px solid var(--pb-business-line) !important;
}


/*
 * Sectie vóór CTA: geen horizontale afsluitlijn.
 */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-service-benefits + * {
    border-top: 0 !important;
}


/*
 * CTA sectie zelf ook geen extra bovenlijn.
 */

body.pb-layout-pack-business.pb-template-page-diensten
.vokk-services-cta {
    border-top: 0 !important;
}

}