/*
 * ============================================================
 * VOKK SERVICES B
 * LARGE EDITORIAL SPLIT
 * ============================================================
 *
 * Geen cards.
 * Geen overlays.
 * Geen witte tekst op wit.
 * Bestaande markup wordt volledig gereset.
 *
 * Desktop only.
 */

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

body.pb-template-front-page.pb-services-variant-b
.pb-vokk-services {
    padding: 105px 0 !important;

    background: transparent !important;
}


body.pb-template-front-page.pb-services-variant-b
.pb-vokk-service-grid {
    display: block !important;

    margin: 0 !important;

    background: transparent !important;
}


/* ============================================================
 * COMPLETE RESET OUDE SERVICE CARD
 * ============================================================ */

body.pb-template-front-page.pb-services-variant-b
.pb-vokk-service-card {
    position: relative !important;

    display: grid !important;

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

    align-items: stretch !important;

    width: 100% !important;

    min-height: 430px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    text-decoration: none !important;

    background:
        var(--pb-section-bg, #ffffff) !important;

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

    border-top:
        1px solid
        color-mix(
            in srgb,
            var(--vokk-dark) 11%,
            transparent
        ) !important;

    box-shadow: none !important;

    transform: none !important;
}


body.pb-template-front-page.pb-services-variant-b
.pb-vokk-service-card:last-child {
    border-bottom:
        1px solid
        color-mix(
            in srgb,
            var(--vokk-dark) 11%,
            transparent
        ) !important;
}


/* ============================================================
 * FOTO
 * Oude absolute image-regels volledig overschrijven.
 * ============================================================ */

body.pb-template-front-page.pb-services-variant-b
.pb-vokk-service-card
img.pb-service-bg {
    position: relative !important;

    inset: auto !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    grid-column: 1 !important;
    grid-row: 1 !important;

    display: block !important;

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

    min-height: 430px !important;

    max-width: none !important;

    object-fit: cover !important;

    opacity: 1 !important;

    z-index: 1 !important;

    filter: none !important;

    transform: none !important;

    border-radius: 0 !important;
}


/* ============================================================
 * CONTENT
 * ============================================================ */

body.pb-template-front-page.pb-services-variant-b
.pb-vokk-service-content {
    position: relative !important;

    inset: auto !important;

    grid-column: 2 !important;
    grid-row: 1 !important;

    z-index: 2 !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    align-items: flex-start !important;

    width: auto !important;
    height: auto !important;

    padding:
        64px
        clamp(48px, 6vw, 88px) !important;

    background:
        var(--pb-section-bg, #ffffff) !important;

    color:
        var(--vokk-dark) !important;

    text-align: left !important;
}


/* ============================================================
 * EVEN ITEMS OMDRAAIEN
 * ============================================================ */

body.pb-template-front-page.pb-services-variant-b
.pb-vokk-service-card:nth-child(even)
img.pb-service-bg {
    grid-column: 2 !important;
}


body.pb-template-front-page.pb-services-variant-b
.pb-vokk-service-card:nth-child(even)
.pb-vokk-service-content {
    grid-column: 1 !important;
}


/* ============================================================
 * OUDE OVERLAY UITSCHAKELEN
 * ============================================================ */

body.pb-template-front-page.pb-services-variant-b
.pb-vokk-service-card::after {
    content: none !important;

    display: none !important;

    position: static !important;

    background: none !important;
}


/* ============================================================
 * ACCENT
 * ============================================================ */

body.pb-template-front-page.pb-services-variant-b
.pb-vokk-service-content::before {
    content: "" !important;

    display: block !important;

    width: 48px !important;
    height: 2px !important;

    margin: 0 0 30px !important;

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


/* ============================================================
 * TYPOGRAFIE
 * ============================================================ */

body.pb-template-front-page.pb-services-variant-b
.pb-vokk-service-content h3 {
    margin: 0 0 16px !important;

    max-width: 520px !important;

    color:
        var(--vokk-dark) !important;

}


body.pb-template-front-page.pb-services-variant-b
.pb-vokk-service-content p {
    margin: 0 0 24px !important;

    max-width: 520px !important;

    color:
        color-mix(
            in srgb,
            var(--vokk-dark) 67%,
            transparent
        ) !important;

}


body.pb-template-front-page.pb-services-variant-b
.pb-vokk-service-more {
    display: inline-flex !important;

    align-items: center !important;

    gap: 8px !important;

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

}


/* ============================================================
 * SUBTIELE HOVER
 * ============================================================ */

body.pb-template-front-page.pb-services-variant-b
.pb-vokk-service-card:hover {
    transform: none !important;

    box-shadow: none !important;
}


body.pb-template-front-page.pb-services-variant-b
.pb-vokk-service-card:hover
img.pb-service-bg {
    transform:
        scale(1.015) !important;

    transition:
        transform .45s ease !important;
}


body.pb-template-front-page.pb-services-variant-b
.pb-vokk-service-card:hover
.pb-vokk-service-more {
    color:
        var(--vokk-primary-light) !important;
}

}