/*
 * ============================================================
 * BUSINESS — PROJECTEN
 * ============================================================
 */

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

body.pb-layout-pack-business.pb-template-page-projecten
.vokk-projects-intro {
    padding:
        78px
        0
        58px !important;

    text-align:
        left !important;
}


body.pb-layout-pack-business.pb-template-page-projecten
.vokk-projects-intro-inner {
    max-width:
        760px !important;

    margin-left:
        0 !important;
}


body.pb-layout-pack-business.pb-template-page-projecten
.vokk-projects-showcase {
    padding:
        0
        0
        90px !important;
}


/*
 * Corporate projectoverzicht:
 * vaste 2 kolommen, rechte beelden, duidelijke info.
 */

body.pb-layout-pack-business.pb-template-page-projecten
.vokk-projects-grid {
    display:
        grid !important;

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

    gap:
        30px !important;
}


body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-card {
    display:
        grid !important;

    grid-template-rows:
        auto
        1fr !important;

    overflow:
        hidden !important;

    background:
        #ffffff !important;

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

    border-radius:
        0 !important;

    box-shadow:
        none !important;

    transform:
        none !important;
}


body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-card:hover {
    transform:
        none !important;

    box-shadow:
        none !important;

    border-color:
        var(--pb-business-line-strong) !important;
}


body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-image {
    min-height:
        330px !important;

    border-radius:
        0 !important;
}


body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-content {
    padding:
        28px
        30px
        30px !important;

    background:
        #ffffff !important;
}


/*
 * Uitgelicht als formele case study.
 */

body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-featured {
    padding:
        85px
        0 !important;

    background:
        var(--pb-business-soft) !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-projecten
.vokk-project-featured-grid {
    display:
        grid !important;

    grid-template-columns:
        1fr
        1fr !important;

    gap:
        0 !important;

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


body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-featured-image {
    min-height:
        470px !important;

    border-radius:
        0 !important;
}


body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-featured-content {
    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;

    padding:
        55px
        60px !important;

    background:
        #ffffff !important;
}


body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-details {
    display:
        grid !important;

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

    gap:
        0 !important;

    margin:
        28px
        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-projecten
.vokk-project-detail {
    padding:
        18px
        0 !important;
}


body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-detail:nth-child(even) {
    padding-left:
        25px !important;

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


/*
 * Resultaten als KPI-strip.
 */

body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-results {
    padding:
        80px
        0 !important;

    background:
        #ffffff !important;
}


body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-results-head {
    max-width:
        720px !important;

    margin:
        0
        0
        42px !important;

    text-align:
        left !important;
}


body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-results-grid {
    display:
        grid !important;

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

    gap:
        0 !important;

    background:
        var(--pb-business-dark) !important;
}


body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-result {
    padding:
        34px
        30px !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    color:
        #ffffff !important;
}


body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-result strong,
body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-result span {
    color:
        inherit !important;
}


body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-result
+ .vokk-project-result {
    border-left:
        1px solid
        rgba(255,255,255,.14) !important;
}

}


/*
 * ============================================================
 * BUSINESS PROJECTEN — FEATURED CASE STUDY HARD FIX
 * ============================================================
 *
 * Desktop / tablet-landscape only.
 * Geen typography.
 * Geen hero.
 * ============================================================
 */

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

body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-featured {
    padding:
        72px
        0 !important;

    background:
        var(--pb-business-soft) !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-projecten
.vokk-project-featured-grid {
    display:
        grid !important;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, .9fr) !important;

    grid-template-rows:
        1fr !important;

    gap:
        0 !important;

    width:
        100% !important;

    max-width:
        none !important;

    min-height:
        500px !important;

    margin:
        0 !important;

    overflow:
        hidden !important;

    background:
        #ffffff !important;

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


/* afbeelding vult linker helft volledig */

body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-featured-image {
    grid-column:
        1 !important;

    grid-row:
        1 !important;

    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    min-height:
        500px !important;

    height:
        100% !important;

    margin:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    justify-self:
        stretch !important;

    align-self:
        stretch !important;
}


/* tekstvlak vult rechter helft volledig */

body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-featured-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:
        54px
        58px !important;

    box-sizing:
        border-box !important;

    background:
        #ffffff !important;

    border:
        0 !important;

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


/* oude breedtebeperkingen uitschakelen */

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


/* detailgrid strak en zakelijk */

body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-details {
    display:
        grid !important;

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

    gap:
        0 !important;

    width:
        100% !important;

    margin:
        28px
        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-projecten
.vokk-project-detail {
    padding:
        18px
        0 !important;

    margin:
        0 !important;
}


body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-detail:nth-child(even) {
    padding-left:
        26px !important;

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


body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-detail:nth-child(n+3) {
    border-top:
        1px solid var(--pb-business-line) !important;
}


/* CTA netjes onder details */

body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-featured-content
.vokk-project-link {
    margin-top:
        4px !important;

    align-self:
        flex-start !important;
}


/* eventuele pseudo/legacy overlays weg */

body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-featured-grid::before,
body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-featured-grid::after,
body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-featured-content::before,
body.pb-layout-pack-business.pb-template-page-projecten
.vokk-project-featured-content::after {
    display:
        none !important;
}

}