/*!
 * VOKK Responsive V1
 *
 * Doel:
 * - tablet responsive gedrag centraliseren
 * - mobiel <=650 NIET herontwerpen
 * - laptop/desktop >1180 NIET herontwerpen
 * - typografie NIET wijzigen
 * - kleuren/modi NIET hardlocken
 * - PB Image Studio slots NIET wijzigen
 *
 * Deze laag wordt NA kavion-style.css geladen.
 */


/* ============================================================
   00. VEILIGHEID
   ============================================================ */

@media screen and (min-width:651px) and (max-width:1180px) {

    html,
    body {
        max-width:100%;
        overflow-x:clip;
    }

    .vokk-detail-page *,
    .vokk-services-page *,
    .vokk-projects-page *,
    .vokk-about-page *,
    .vokk-reviews-page *,
    .vokk-contact-page * {
        box-sizing:border-box;
        min-width:0;
    }
}


/* ============================================================
   01. TABLET HEADER
   651 - 1180

   Geen kleuren.
   Geen fonts.
   ============================================================ */

@media screen and (min-width:651px) and (max-width:1180px) {

    .vokk-header {
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:0 !important;

        width:100% !important;
        min-height:74px !important;

        z-index:99999999 !important;
    }

    .vokk-header-inner {
        width:100% !important;
        max-width:none !important;

        height:74px !important;

        padding-left:clamp(22px,4vw,44px) !important;
        padding-right:clamp(22px,4vw,44px) !important;
    }

    .vokk-nav,
    .vokk-action {
        display:none !important;
        visibility:hidden !important;
        opacity:0 !important;
        pointer-events:none !important;
    }

    .vokk-logo {
        flex:1 1 auto !important;
        min-width:0 !important;
    }

    .vokk-logo img {
        height:42px !important;
        max-width:190px !important;
    }

    .vokk-hamburger {
        display:flex !important;
        visibility:visible !important;
        opacity:1 !important;
        pointer-events:auto !important;

        position:relative !important;

        flex:0 0 44px !important;

        width:44px !important;
        min-width:44px !important;
        max-width:44px !important;

        height:44px !important;
        min-height:44px !important;
        max-height:44px !important;
    }
}


/* ============================================================
   02. TABLET PORTRAIT
   651 - 900
   ============================================================ */

@media screen
and (min-width:651px)
and (max-width:900px)
and (orientation:portrait) {

    /*
     * Hoofdpagina's:
     * bestaande tablet-portrait concept behouden:
     * teksthero + normale foto eronder.
     */

    :is(
        .vokk-services-page,
        .vokk-projects-page,
        .vokk-about-page,
        .vokk-reviews-page,
        .vokk-contact-page
    )
    .pb-content-hero {
        display:block !important;

        width:100% !important;
        height:auto !important;
        min-height:0 !important;

        overflow:hidden !important;

        background-image:none !important;
    }

    :is(
        .vokk-services-page,
        .vokk-projects-page,
        .vokk-about-page,
        .vokk-reviews-page,
        .vokk-contact-page
    )
    .pb-content-hero > .pb-content-hero-image {
        display:none !important;
        visibility:hidden !important;
        opacity:0 !important;
    }

    :is(
        .vokk-services-page,
        .vokk-projects-page,
        .vokk-about-page,
        .vokk-reviews-page,
        .vokk-contact-page
    )
    .pb-mobile-hero-after {
        position:relative !important;
        inset:auto !important;

        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

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

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        aspect-ratio:auto !important;

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

        object-fit:contain !important;

        /*
         * Geen vaste object-position.
         * PB Image Framing mag dit bepalen.
         */
        transform:none;

        float:none !important;
        clear:both !important;
    }


    /*
     * Detailpagina's:
     * huidige goede portraitstructuur behouden.
     */

    .vokk-detail-page
    .pb-content-hero {
        display:block !important;

        height:auto !important;
        min-height:0 !important;

        background-image:none !important;
    }

    .vokk-detail-page
    .pb-content-hero > .pb-content-hero-image {
        display:none !important;
        visibility:hidden !important;
        opacity:0 !important;
    }

    .vokk-detail-page
    .pb-mobile-hero-after {
        position:relative !important;

        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

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

        height:auto !important;
        min-height:0 !important;
        max-height:none !important;

        object-fit:contain !important;

        margin:0 auto !important;
    }

    .vokk-detail-page
    :is(
        .vokk-detail-intro-grid,
        .vokk-detail-section-grid,
        .vokk-detail-faq-grid
    ) {
        grid-template-columns:minmax(0,1fr) !important;
    }

    .vokk-detail-page
    :is(
        .vokk-detail-benefits-grid,
        .vokk-detail-process-grid
    ) {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}


/* ============================================================
   LOGO - MOBIEL + TABLET
   Gecentreerd en compacter.
   Desktop blijft ongemoeid.
   ============================================================ */

@media screen and (max-width:1180px) {

    .vokk-header .vokk-logo,
    .vokk-header-inner .vokk-logo {
        position:absolute !important;
        left:50% !important;
        right:auto !important;
        transform:translateX(-50%) !important;
        margin:0 !important;
    }

    .vokk-header .vokk-logo img,
    .vokk-header-inner .vokk-logo img {
        width:auto !important;
        max-width:none !important;
        height:auto !important;
    }

    /*
     * Logo blijft exact gecentreerd.
     * Hamburger onafhankelijk daarvan rechts.
     */
    .vokk-header .vokk-hamburger,
    .vokk-header-inner .vokk-hamburger {
        position:absolute !important;

        left:auto !important;
        right:clamp(20px,3.5vw,42px) !important;

        margin-left:0 !important;
        margin-right:0 !important;

        transform:none !important;

        z-index:20 !important;
    }
}

/* TABLET */
@media screen and (min-width:651px) and (max-width:1180px) {

    .vokk-header .vokk-logo img,
    .vokk-header-inner .vokk-logo img {
        width:160px !important;
    }
}

/* MOBIEL */
@media screen and (max-width:650px) {

    .vokk-header .vokk-logo img,
    .vokk-header-inner .vokk-logo img {
        width:140px !important;
    }
}


/* ============================================================ */

/* ============================================================
   03. TABLET LANDSCAPE
   901 - 1180

   Hoofdpagina's = split hero.
   Detailpagina's = eigen bestaande structuur.
   ============================================================ */

@media screen
and (min-width:901px)
and (max-width:1180px)
and (orientation:landscape) {

    /*
     * ALLEEN HOOFDPAGINA'S.
     * Detailpagina's worden bewust niet door deze selectors geraakt.
     */

    :is(
        .vokk-services-page,
        .vokk-projects-page,
        .vokk-about-page,
        .vokk-reviews-page,
        .vokk-contact-page
    )
    .pb-content-hero {
        position:relative !important;

        display:grid !important;
        grid-template-columns:minmax(0,46%) minmax(0,54%) !important;

        align-items:stretch !important;

        width:100% !important;

        height:clamp(430px,48vw,560px) !important;
        min-height:430px !important;
        max-height:560px !important;

        overflow:hidden !important;

        /*
         * GEEN background/background-color.
         * Bestaande light/medium/dark modus blijft eigenaar.
         */
    }


    /*
     * Desktop hero-afbeelding wordt rechter beeldvlak.
     */

    :is(
        .vokk-services-page,
        .vokk-projects-page,
        .vokk-about-page,
        .vokk-reviews-page,
        .vokk-contact-page
    )
    .pb-content-hero > .pb-content-hero-image {
        position:relative !important;
        inset:auto !important;

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

        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

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

        min-width:0 !important;
        min-height:100% !important;

        max-width:none !important;
        max-height:none !important;

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

        object-fit:cover !important;

        /*
         * ZEER BELANGRIJK:
         * GEEN object-position !important.
         * GEEN transform !important.
         * GEEN scale !important.
         *
         * Daardoor kan PB Sitewide Image Framing
         * per afbeelding/tabletprofiel de compositie bepalen.
         */

        z-index:1 !important;
    }


    /*
     * Losse portrait/mobile foto onder hero uit.
     */

    :is(
        .vokk-services-page,
        .vokk-projects-page,
        .vokk-about-page,
        .vokk-reviews-page,
        .vokk-contact-page
    )
    .pb-mobile-hero-after {
        display:none !important;
        visibility:hidden !important;
        opacity:0 !important;
    }


    /*
     * Tekstcontainer links.
     * GEEN backgroundkleur instellen.
     * Huidige modus/hero-styling blijft gelden.
     */

    .vokk-services-page
    .pb-content-hero
    .vokk-services-container,

    .vokk-projects-page
    .pb-content-hero
    .vokk-projects-container,

    .vokk-about-page
    .pb-content-hero
    .vokk-about-container,

    .vokk-reviews-page
    .pb-content-hero
    .vokk-reviews-container,

    .vokk-contact-page
    .pb-content-hero
    .vokk-contact-container {
        position:relative !important;

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

        display:flex !important;
        align-items:center !important;

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

        min-height:100% !important;

        margin:0 !important;

        padding:
            96px
            clamp(30px,3.5vw,46px)
            54px
            clamp(30px,3.5vw,46px)
            !important;

        z-index:3 !important;
    }


    .vokk-services-page
    .vokk-services-hero-inner,

    .vokk-projects-page
    .vokk-projects-hero-content,

    .vokk-about-page
    .vokk-about-hero-content,

    .vokk-reviews-page
    .vokk-reviews-hero-content,

    .vokk-contact-page
    .vokk-contact-hero-content {
        width:100% !important;
        max-width:460px !important;

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

        transform:none !important;
    }


    /*
     * Geen oude foto-overlay over de split heen.
     * We verwijderen alleen background-image,
     * NIET algemene background/color.
     */

    :is(
        .vokk-services-page,
        .vokk-projects-page,
        .vokk-about-page,
        .vokk-reviews-page,
        .vokk-contact-page
    )
    .pb-content-hero::before {
        background-image:none !important;
    }


    /* --------------------------------------------------------
       DETAILPAGINA'S LANDSCAPE

       Hero:
       foto links 45%
       tekst rechts 55%
       hoogte 400px

       PB Image Framing blijft eigenaar van foto-compositie.
       -------------------------------------------------------- */

    .vokk-detail-page
    > .vokk-detail-hero.pb-content-hero {
        position:relative !important;

        display:grid !important;
        grid-template-columns:minmax(0,55%) minmax(0,45%) !important;
        grid-template-rows:400px !important;

        width:100% !important;

        height:400px !important;
        min-height:400px !important;
        max-height:400px !important;

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

        overflow:hidden !important;
    }


    .vokk-detail-page
    > .vokk-detail-hero.pb-content-hero
    > .pb-content-hero-image {
        position:relative !important;
        inset:auto !important;

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

        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

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

        min-width:0 !important;
        min-height:0 !important;

        max-width:none !important;
        max-height:none !important;

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

        object-fit:cover !important;

        z-index:1 !important;
    }


    .vokk-detail-page
    > .vokk-detail-hero.pb-content-hero
    > .vokk-detail-container {
        position:relative !important;
        inset:auto !important;

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

        display:flex !important;
        align-items:center !important;

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

        height:400px !important;
        min-height:400px !important;
        max-height:400px !important;

        margin:0 !important;
        padding:48px !important;

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

        transform:none !important;
        translate:none !important;

        z-index:2 !important;
    }


    .vokk-detail-page
    .vokk-detail-hero-content {
        width:100% !important;
        max-width:520px !important;
        min-width:0 !important;

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

        transform:none !important;
        translate:none !important;
    }


    /*
     * De losse tablet/portrait-foto is in landscape niet nodig:
     * dezelfde afbeelding zit nu in de split hero.
     */
    .vokk-detail-page
    > .pb-mobile-hero-after {
        display:none !important;
        visibility:hidden !important;
        opacity:0 !important;
    }


    /*
     * Normale detail-contentcontainer.
     * Hero-container hierboven heeft bewust eigen regels.
     */
    .vokk-detail-page
    .vokk-detail-container:not(.vokk-detail-hero > .vokk-detail-container) {
        width:calc(100% - 64px) !important;
        max-width:1080px !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }

    .vokk-detail-page
    :is(
        .vokk-detail-intro-grid,
        .vokk-detail-section-grid
    ) {
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr) !important;

        gap:clamp(32px,4vw,52px) !important;
    }

    .vokk-detail-page
    :is(
        .vokk-detail-benefits-grid,
        .vokk-detail-process-grid
    ) {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
    }

    .vokk-detail-page
    :is(
        .vokk-detail-intro-image,
        .vokk-detail-image
    ) {
        width:100% !important;
        max-width:100% !important;

        overflow:hidden !important;
    }

    /*
     * Geen image-framing hier vastzetten.
     * PB framing blijft eigenaar van position/zoom.
     */
}


/* ============================================================
   04. HOMEPAGE - TABLET PORTRAIT
   ============================================================ */

@media screen
and (min-width:651px)
and (max-width:900px)
and (orientation:portrait) {

    body.pb-template-front-page
    .kb-inner.pb-hero-inner {
        width:calc(100% - 56px) !important;
        max-width:none !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }

    body.pb-template-front-page
    .pb-hero-content {
        width:100% !important;
        max-width:680px !important;
    }

    /*
     * Bestaande portrait-keuze respecteren.
     * Geen desktop hero cards forceren.
     */

    body.pb-template-front-page
    .pb-vokk-services-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:18px !important;
    }

    body.pb-template-front-page
    .pb-vokk-service-card {
        width:100% !important;
        height:auto !important;
        min-height:0 !important;

        aspect-ratio:4 / 3 !important;

        overflow:hidden !important;
    }

    body.pb-template-front-page
    .pb-vokk-service-card
    > img.pb-service-bg {
        position:absolute !important;
        inset:0 !important;

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

        object-fit:cover !important;

        /*
         * Geen object-position hardlock.
         */
    }
}


/* ============================================================
   05. HOMEPAGE - TABLET LANDSCAPE
   ============================================================ */

@media screen
and (min-width:901px)
and (max-width:1180px)
and (orientation:landscape) {

    body.pb-template-front-page
    .kb-inner.pb-hero-inner {
        width:calc(100% - 64px) !important;
        max-width:none !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }

    /*
     * Bestaande hero cards behouden,
     * maar voorspelbaar binnen scherm houden.
     */

    body.pb-template-front-page
    .pb-hero-visual {
        width:clamp(180px,22vw,250px) !important;
        max-width:250px !important;

        margin-left:auto !important;
    }

    body.pb-template-front-page
    .pb-hero-tiles-stack {
        width:100% !important;
        max-width:250px !important;

        gap:clamp(8px,1.2vh,12px) !important;
    }

    body.pb-template-front-page
    .pb-hero-tiles-stack > *,
    body.pb-template-front-page
    .pb-hero-tile,
    body.pb-template-front-page
    .pb-hero-card {
        width:100% !important;
        max-width:250px !important;

        min-height:104px !important;
        max-height:117px !important;
    }


    /*
     * Vier dienstenkaarten.
     */

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

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

        gap:clamp(12px,1.5vw,20px) !important;
    }

    body.pb-template-front-page
    .pb-vokk-service-card {
        width:100% !important;
        max-width:none !important;

        height:auto !important;
        min-height:0 !important;

        aspect-ratio:4 / 3 !important;

        overflow:hidden !important;
    }

    body.pb-template-front-page
    .pb-vokk-service-card
    > img.pb-service-bg {
        position:absolute !important;
        inset:0 !important;

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

        object-fit:cover !important;

        /*
         * PB framing bepaalt compositie.
         */
    }

    body.pb-template-front-page
    .pb-vokk-service-content {
        left:0 !important;
        right:0 !important;
        bottom:0 !important;

        width:100% !important;

        padding:
            clamp(12px,1.2vw,16px)
            clamp(12px,1.2vw,16px)
            !important;
    }
}


/* ============================================================
   06. DIENSTEN CONTENTBEELDEN TABLET
   ============================================================ */

@media screen and (min-width:651px) and (max-width:1180px) {

    .vokk-services-page
    .vokk-service-image {
        position:relative !important;

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

        height:auto !important;
        min-height:0 !important;

        aspect-ratio:4 / 3 !important;

        overflow:hidden !important;
    }

    .vokk-services-page
    .vokk-service-image img {
        position:absolute !important;
        inset:0 !important;

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

        max-width:none !important;

        object-fit:cover !important;
    }


    /* Projecten featured */

    .vokk-projects-page
    .vokk-project-featured-image {
        width:100% !important;

        height:auto !important;
        min-height:0 !important;

        aspect-ratio:4 / 3 !important;

        background-size:cover !important;
        background-repeat:no-repeat !important;

        /*
         * background-position niet hardlocken.
         */
    }
}


/* ============================================================
   07. OVERFLOW HARDENING
   ============================================================ */

@media screen and (min-width:651px) and (max-width:1180px) {

    .vokk-detail-page
    :is(
        .vokk-detail-intro-grid,
        .vokk-detail-section-grid,
        .vokk-detail-benefits-grid,
        .vokk-detail-process-grid,
        .vokk-detail-faq-grid,
        .vokk-detail-cta-box
    ) > * {
        min-width:0 !important;
    }
}


/* ============================================================
   VOKK RESPONSIVE V1.1
   IMAGE FRAMING OWNERSHIP

   Layout:
       VOKK Responsive

   Compositie:
       PB Sitewide Image Framing V6

   Dus hier bewust GEEN:
       object-position
       transform
       transform-origin
       translate
       scale
   ============================================================ */


/* ------------------------------------------------------------
   TABLET 651-1180
   Alleen het BEELDKADER bepalen.
   ------------------------------------------------------------ */

@media screen and (min-width:651px) and (max-width:1180px) {

    /*
     * Hero IMG's.
     * PB Framing bepaalt positie + zoom inline.
     */

    :is(
        .vokk-services-page,
        .vokk-projects-page,
        .vokk-about-page,
        .vokk-reviews-page,
        .vokk-contact-page,
        .vokk-detail-page
    )
    .pb-content-hero-image {
        object-fit:cover !important;
    }


    /*
     * Diensten/contentafbeeldingen.
     */

    .vokk-services-page
    .vokk-service-image img,

    .vokk-detail-page
    :is(
        .vokk-detail-intro-image,
        .vokk-detail-image
    )
    img,

    body.pb-template-front-page
    .pb-vokk-service-card
    > img.pb-service-bg {
        object-fit:cover !important;
    }
}


/* ------------------------------------------------------------
   TABLET PORTRAIT

   Losse foto onder de hero mag volledig zichtbaar blijven.
   Dit is een layoutkeuze, geen focus-hardlock.
   ------------------------------------------------------------ */

@media screen
and (min-width:651px)
and (max-width:900px)
and (orientation:portrait) {

    :is(
        .vokk-services-page,
        .vokk-projects-page,
        .vokk-about-page,
        .vokk-reviews-page,
        .vokk-contact-page,
        .vokk-detail-page
    )
    .pb-mobile-hero-after {
        transform:revert;
        transform-origin:revert;
    }
}


/* ============================================================
   VOKK RESPONSIVE V1.2
   DIENSTEN HERO - TABLET LANDSCAPE

   Bronfoto blijft intact.
   Rechter hero-vlak toont effectief de rechterhelft.
   Desktop, mobiel, portrait, kleuren en typografie onaangeraakt.
   ============================================================ */

@media screen
and (min-width:901px)
and (max-width:1180px)
and (orientation:landscape) {

    .vokk-services-page .pb-content-hero {
        grid-template-columns:
            minmax(0,50%)
            minmax(0,50%) !important;

        overflow:hidden !important;
    }

    /*
     * Rechterkolom is het masker.
     *
     * De afbeelding zelf wordt 200% van de rechterkolom breed.
     * Daarna schuiven we haar één volledige kolombreedte naar links.
     *
     * Resultaat:
     * alleen de RECHTERHELFT van de oorspronkelijke foto
     * bevindt zich in het zichtbare rechter hero-vlak.
     */

    .vokk-services-page
    .pb-content-hero > .pb-content-hero-image {
        grid-column:2 !important;
        grid-row:1 !important;

        position:relative !important;

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

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

        left:-100% !important;

        object-fit:cover !important;

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

    .vokk-services-page
    .pb-content-hero
    .vokk-services-container {
        grid-column:1 !important;
        grid-row:1 !important;

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


/* ============================================================
   VOKK RESPONSIVE V1.3
   DIENSTEN - TABLET LANDSCAPE FRAMING TEST

   Alleen horizontale uitsnede.
   Layout blijft exact zoals hij is.
   ============================================================ */

@media screen
and (min-width:901px)
and (max-width:1180px)
and (orientation:landscape) {

    .vokk-services-page
    .pb-content-hero
    > .pb-content-hero-image {

        /*
         * V1.2 maakte de bron 200% breed.
         *
         * -100% liet te veel van de rechterzijde zien.
         * We halen nu meer van de LINKERKANT van de bron
         * het zichtbare rechtervlak in.
         */

        left:-72% !important;
    }
}


/* ============================================================
   VOKK V1.4 - CLEAN HERO FRAMING TEST
   DIENSTEN / TABLET LANDSCAPE ONLY
   ============================================================ */

@media screen
and (min-width:901px)
and (max-width:1180px)
and (orientation:landscape) {

    .vokk-services-page .pb-content-hero {
        grid-template-columns:50% 50% !important;
        overflow:hidden !important;
    }

    .vokk-services-page
    .pb-content-hero
    > img.pb-content-hero-image {

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

        position:relative !important;

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

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

        height:100% !important;
        min-height:100% !important;
        max-height:none !important;

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

        object-fit:cover !important;

        /*
         * TEST:
         * onderwerp meer vanuit LINKS van bronfoto halen.
         */
        object-position:25% 50% !important;

        transform:none !important;
        transform-origin:center center !important;
        translate:none !important;
        scale:none !important;
    }
}


/* ============================================================
   VOKK RESPONSIVE - CANONICAL HERO LANDSCAPE

   Geldt voor:
   - Diensten
   - Projecten
   - Waardering
   - Over ons
   - Contact
   - Detailpagina's

   VERANTWOORDELIJKHEID:
   CSS = layout
   PB Image Framing = zoom / X / Y

   GEEN typografie
   GEEN kleuren
   GEEN backgrounds
   GEEN content-layout onder hero
   ============================================================ */

@media screen
and (min-width:901px)
and (max-width:1180px)
and (orientation:landscape) {

    /* --------------------------------------------------------
       HOOFDPAGINA HERO
       -------------------------------------------------------- */

    :is(
        .vokk-services-page,
        .vokk-projects-page,
        .vokk-reviews-page,
        .vokk-about-page,
        .vokk-contact-page
    )
    .pb-content-hero {

        display:grid !important;

        grid-template-columns:
            minmax(0,60%)
            minmax(0,60%) !important;

        align-items:stretch !important;

        width:100% !important;

        overflow:hidden !important;
    }


    /* --------------------------------------------------------
       HERO IMAGE

       BELANGRIJK:
       GEEN object-position.
       GEEN transform.
       GEEN translate.
       GEEN scale.

       PB Image Framing blijft daarvan eigenaar.
       -------------------------------------------------------- */

    :is(
        .vokk-services-page,
        .vokk-projects-page,
        .vokk-reviews-page,
        .vokk-about-page,
        .vokk-contact-page
    )
    .pb-content-hero
    > .pb-content-hero-image {

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

        position:relative !important;

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

        height:100% !important;
        min-height:100% !important;
        max-height:none !important;

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

        object-fit:cover !important;
    }


    /* --------------------------------------------------------
       DETAILPAGINA'S

       Bestaande detail-layout behouden.
       Alleen beeldvlak technisch begrenzen.
       -------------------------------------------------------- */

    .vokk-detail-page
    :is(
        .vokk-detail-hero,
        .pb-content-hero
    ) {

        overflow:hidden !important;
    }


    .vokk-detail-page
    :is(
        .vokk-detail-hero,
        .pb-content-hero
    )
    :is(
        .pb-content-hero-image,
        .vokk-detail-hero-image,
        img
    ) {

        max-width:none !important;

        object-fit:cover !important;
    }

}


/* ============================================================
   VOKK RESPONSIVE - TABLET PORTRAIT IMAGE SAFETY

   Layout wordt NIET gewijzigd.
   Alleen voorkomen dat afbeeldingen buiten hun eigen
   bestaande container lopen.

   Framing blijft bij PB Image Framing.
   ============================================================ */

@media screen
and (min-width:651px)
and (max-width:900px)
and (orientation:portrait) {

    :is(
        .vokk-services-page,
        .vokk-projects-page,
        .vokk-reviews-page,
        .vokk-about-page,
        .vokk-contact-page,
        .vokk-detail-page
    )
    :is(
        .pb-content-hero,
        .vokk-detail-hero
    ) {

        overflow:hidden !important;
    }


    :is(
        .vokk-services-page,
        .vokk-projects-page,
        .vokk-reviews-page,
        .vokk-about-page,
        .vokk-contact-page,
        .vokk-detail-page
    )
    :is(
        .pb-content-hero-image,
        .vokk-detail-hero-image
    ) {

        max-width:none !important;
        object-fit:cover !important;
    }

}

/* ============================================================
   PROJECTEN - TABLET LANDSCAPE DEFINITIEF
   Browser bewezen: tekstkolom werkelijk 460px
   ============================================================ */

@media screen
and (min-width:901px)
and (max-width:1180px)
and (orientation:landscape) {

    .vokk-projects-page .pb-content-hero {
        grid-template-columns:60% 40% !important;
    }

    .vokk-projects-page
    .pb-content-hero
    > .vokk-projects-container {
        width:100% !important;
        max-width:none !important;
        padding-left:42px !important;
        padding-right:42px !important;
    }

    .vokk-projects-page
    .vokk-projects-hero-content {
        width:460px !important;
        min-width:460px !important;
        max-width:460px !important;

        flex:0 0 460px !important;
        flex-shrink:0 !important;

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

    .vokk-projects-page
    .vokk-projects-hero-content > h1,

    .vokk-projects-page
    .vokk-projects-hero-content > p {
        width:460px !important;
        min-width:460px !important;
        max-width:460px !important;

        flex:none !important;
    }
}

/* PROJECTEN - TABLET LANDSCAPE DEFINITIEF END */



/* ==========================================================
   PB WEBSITE STARTER - SITEWIDE MOBILE CONTENT STACK

   Alleen telefoon <=650px.
   Echte detail image/text-layouts:
   afbeelding boven, tekst onder, beide volle breedte.

   Tablet en desktop blijven ongemoeid.
   ========================================================== */

@media (max-width: 650px) {

    .vokk-detail-intro-grid,
    .vokk-detail-section-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .vokk-detail-intro-image,
    .vokk-detail-section-grid .vokk-detail-image {
        order: -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        align-self: stretch !important;
    }

    .vokk-detail-intro-content,
    .vokk-detail-section-content {
        order: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}