/* =======================================================================================================
   DVK v3.00 // Portfolio
   =======================================================================================================
    THE LOOP
   ------------------------------------------------------------------------------------------------------- */
.dvk-portfolio-loop .bde-loop {
    display: flex; flex-wrap: wrap;
    flex-direction: row; justify-content: center;
    column-gap: 0px;
    row-gap: calc(3 * var(--local-spacing-ver));

    @media (max-width: 500px) {
        flex-direction: column; flex-wrap: nowrap; align-items: flex-end;
        & > :nth-child(2n) {
            align-self: flex-start;
        }
    }
}
.dvk-portfolio-loop .bde-loop-item {
    flex-direction: row;
    min-width: 480px;
    justify-content: center;
    padding: unset;
}
@media (min-width: 1100px) {
    .dvk-portfolio-loop .bde-loop {
        row-gap: calc( 4 * var(--local-spacing-ver) );
    }
}
/* -------------------------------------------------------------------------------------------------------
    LAPTOP & MOBIEL
   ------------------------------------------------------------------------------------------------------- */
.dvk-pf-laptop .txw-ar-16-9,
.dvk-pf-mobiel .txw-brick-innr {
    background-size: cover;
    background-position: top;
}
.dvk-brick-bg {
    position: absolute;
    width: 100%; height: 100%;
    background-position: top center;
    background-size: cover;
}
.dvk-pf-laptop {
    --brick-padding: 4%;
    width: 75%;

    &::before {
        position: relative; order: 1;
        width: 120%; height: auto;
        aspect-ratio: 40 / 1;
        clip-path: polygon(00% 0%, 100% 0%, 98% 100%, 2% 100%);
        left: 50%; transform: translateX(-50%);
        border: unset !important;
        background: linear-gradient(0deg, #818181 0, #AAA 100%);
    }
    & .txw-post-card-info {
        display: none;
        opacity: 0;
    }
    & .txw-brick-innr {
        pointer-events: none;
        > * { pointer-events: all;}
    }
}
/* -------------------------------------------------------------------------------------------------------
    LAPTOP & MOBIEL: LARGE SCREEN EFFECTS
   ------------------------------------------------------------------------------------------------------- */

@media (min-width: 1100px) {
    body.home {
        & .dvk-pf-laptop {
            --hvr-step-1: 200ms;
            --hvr-step-2: 300ms;

            > .txw-ar-16-9 {
                transform-origin: bottom;
                transform: perspective(700px);
                transition: transform var(--hvr-step-1) ease-in;
            }
            &:not(:hover) > .txw-ar-16-9 {
                transform: perspective(700px) rotateX(18deg);

                transition-delay: var(--hvr-step-1);
                transition-duration: 1000ms;
                transition-timing-function: ease-in-out;
            }
            > .txw-ar-16-9::before { /* dims the screen background */
                opacity: 1;
                background-image: linear-gradient(90deg, rgb(0 0 0 / .3) 0, rgb(0 0 0 / .6) 100%);

                transition: opacity 1000ms ease-in-out;
            }
            &:not(:hover) > .txw-ar-16-9::before {
                opacity: 0;
            }
            > .txw-ar-16-9::after { /* reflections */
                z-index: 1;
                transform: translateX(100%);
                clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 28% 100%);
                background-color: rgba(255, 255, 255, 0.5);
                background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2));

                transition: transform var(--hvr-step-1) ease-in;
            }
            &:not(:hover) > .txw-ar-16-9::after {
                transform: translateX(55%);

                transition-delay: var(--hvr-step-1);
                transition-duration: 1000ms;
                transition-timing-function: ease-in-out;
            }
            & .txw-post-card-info {
                display: flex; opacity: 1;
                width: 75%; flex-grow: 1;
                padding: 7%;
                
                filter: var(--shp-flt-shadow-def);

                transform-origin: bottom right;

                transition: 100ms 300ms ease-out;
                transition-property: transform, opacity;

                > * {
                    flex-grow: 1;
                    align-items: flex-start; justify-content: space-between;
                }
                &::before {
                    background-color: var(--clr-bckg-02);
                    opacity: .96;
                }
            }
            &:not(:hover) .txw-post-card-info {
                transform: translateY(40%) scale(.5);
                opacity: 0;
                transition-delay: 0s;
                transition-duration: 300ms;
            }
        }
    }
}
/* -------------------------------------------------------------------------------------------------------
    SINGLE PROJECT
   ------------------------------------------------------------------------------------------------------- */

body.single-project #dvk-top-layout {
    & main {
        padding-top: unset;
        padding-inline: 4%;
    }

    & .txw-page-hdr > section {

        & .txw-page-hdr-inner {
            align-items: center; 
            margin-block: max(calc(0.072 * var(--page-width)), 9svh) max(calc(0.08 * var(--page-width)), 10svh);

            > * { width: 85%; }
            & h1 { padding-inline: var(--pdd-inline-responsive); }
        }
        @media (min-width: 1100px) {
            padding-inline: calc( 0.1 * var(--page-width) );

            & .txw-page-hdr-inner {
                flex-direction: row-reverse;

                & .dvk-pf-laptop { width: 35%; }
                & .dvk-pf-laptop + div { width: 65%; }
                & .txw-post-card-header {
                    flex-shrink: 99;
                }
            }
        }
    }
    .txw-post-nav-container {
        padding-inline: 4%;

        &.txw-entrance-group {
        --distance-x: 20vw;
        --duration: 200ms;
        }

        @media (min-width: 1100px) {
            max-width: var(--page-max-width);
            left: 50%;
            transform: translateX(-50%);
        }
    }
    [class*="txw-nav-arrow-"] {
        transform-origin: center;
        transform: translate(50%, 50%) scale(1);
        &:hover { transform: translate(50%, 50%) scale(1.4); }
        &::before {
            background-color: var(--clr-brand-04);
            background-image: linear-gradient(var(--clr-brand-04), hsl(32 97% 48% / 1));
            border-radius: 50%;
        }
        &::after {
            width: 36%;
            border: unset;
            transform: translate(-50%, -50%);
            background-color: var(--clr-off-white);
            clip-path: polygon(0% 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%);
            clip-path: polygon(30% 0, 55% 0, 95% 50%, 55% 100%, 31% 100%, 35% 50%);
        }
        &.txw-nav-arrow-left {
            transform: translate(-50%, 50%) scale(1);
            &:hover { transform: translate(-50%, 50%) scale(1.4); }
            &::after {
                transform: translate(-50%, -50%) rotate(180deg);
            }
        }
    }
    #sec-details {
        background-color: var(--clr-bckg-02);
        padding-inline: calc( 2 * var(--pdd-inline-responsive) );
        margin-bottom: calc( 2 * var(--local-spacing-ver-l) );

        & .txw-has-aside {
            > * { justify-content: center; }

            > .txw-not-aside { padding-block: var(--local-spacing-ver-l); }
            > .txw-aside { align-content: flex-end; }
        }
        & .dvk-pf-mobiel-wrapper {
            min-inline-size: unset;
            flex-basis: min(80%, 25rem); flex-grow: unset;
            margin-block-end: calc(-0.8 * var(--local-spacing-ver-l));
        }
        & .dvk-pf-mobiel {
            transform: perspective(1000px);
            transition: transform 500ms ease-in-out;
            > [class*='txw-ar'] { transition: inherit; }
            > [class*='txw-ar']::after {
                z-index: 1;
                transform: translateY(100%);
                clip-path: polygon(0% 0, 100% 28%, 100% 100%, 0% 100%);
                background-color: rgba(255, 255, 255, .5);
                background: linear-gradient(to left, rgba(255, 255, 255, .7), rgba(255, 255, 255, .2));
                transition: inherit;
            }
            &:not(:hover) {
                transform: perspective(1000px) rotateY(-18deg) rotateX(10deg);
                transition-delay: 500ms;
            }
            &:not(:hover) > [class*='txw-ar']::after {
                transform: translateY(55%);
                transition-delay: inherit;
                transition-timing-function: ease-in-out;
            }
        }
        @media (min-width: 1100px) {
            padding-inline: calc( 0.15 * var(--page-width) );
            
            & .txw-has-aside {
                
                > .txw-not-aside { align-items: flex-start; min-width: 40%; }
                > .txw-aside { justify-content: flex-end; > * { margin-inline: unset; } }
            }
/*            & .dvk-pf-mobiel-wrapper {
                margin-block-start: var(--local-spacing-ver-l);
            }*/
        }
    }
}

/*

#sec-details .dvk-pf-mobiel-wrapper {
    min-inline-size: unset;
    flex-basis: min(80%, 25rem); flex-grow: unset;
    margin-block-start: var(--local-spacing-ver-l);
    margin-block-end: calc(-1 * var(--local-spacing-ver-l));
}

#sec-details .dvk-pf-mobiel { transform: perspective(800px) rotateY(-15deg) rotateX(3deg); }

@media (max-width: 500px) {
    body.single-project .dvk-pf-laptop {
        width: 85%;
    }
}
@media (min-width: 1100px) {

    body.single-project .txw-page-hdr-inner {

    }
}

*/