/*
Theme Name:   Bwebs Child
Theme URI:    https://bwebs.be
Description:  Child theme van Hello Elementor voor bwebs.be. Bevat het Bwebs-designsysteem en de eigen componenten die anders een add-on-plugin zouden vragen.
Author:       Erwin Bonné — Bwebs
Author URI:   https://bwebs.be
Template:     hello-elementor
Version:      1.0.0
Text Domain:  bwebs-child
*/

/*
   Laat dit bestand leeg.
   Alle styling staat in assets/bwebs.css zodat je die apart kunt cachen
   en versioneren. Alleen echte losse overrides horen hieronder.
*/

/* =========================================================
   BWEBS PROJECT SHOWCASE
   ========================================================= */

.bwebs-showcase {
    --bwebs-purple: #262161;
    --bwebs-green: #42997b;

    position: relative;
    width: 100%;
    overflow: hidden;

    padding: 8px 0 22px;

    font-family: "Poppins", Arial, sans-serif;

    touch-action: pan-y;
    user-select: none;
}


/* =========================================================
   STAGE
   ========================================================= */

.bwebs-showcase-stage {
    position: relative;

    width: 100%;
    height: 390px;
}


/* =========================================================
   PROJECT CARD
   ========================================================= */

.bwebs-project {
    position: absolute;

    top: 0;
    left: 50%;

    width: 82vw;
    max-width: 390px;
    height: 370px;

    background: #fff;

    border: 1px solid rgba(38, 33, 97, .09);
    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 24px 55px rgba(20, 20, 35, .11),
        0 6px 18px rgba(20, 20, 35, .05);

    transition:
        transform .65s cubic-bezier(.22, .61, .36, 1),
        opacity .45s ease,
        filter .45s ease,
        box-shadow .45s ease,
        width .45s ease;

    will-change: transform;

    backface-visibility: hidden;
}


/* =========================================================
   MOBILE POSITIONS
   ========================================================= */

.bwebs-project.is-active {
    z-index: 10;

    transform:
        translateX(-50%)
        scale(1);

    opacity: 1;
}


.bwebs-project.is-left {
    z-index: 4;

    transform:
        translateX(-143%)
        scale(.91);

    opacity: .42;
}


.bwebs-project.is-right {
    z-index: 5;

    transform:
        translateX(43%)
        scale(.91);

    opacity: .55;
}


/* =========================================================
   BROWSER BAR
   ========================================================= */

.bwebs-browser-bar {
    position: relative;

    width: 100%;
    height: 27px;

    display: flex;
    align-items: center;

    padding: 0 11px;

    gap: 5px;

    box-sizing: border-box;

    background:
        linear-gradient(
            180deg,
            #202225 0%,
            #17191b 100%
        );

    border-radius: 13px 13px 0 0;

    overflow: hidden;

    z-index: 5;
}


/* =========================================================
   BROWSER DOTS
   ========================================================= */

.bwebs-browser-dot {
    display: block;

    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;
}


.bwebs-browser-dot:nth-child(1) {
    background: #ff655c;
}


.bwebs-browser-dot:nth-child(2) {
    background: #f4bd4f;
}


.bwebs-browser-dot:nth-child(3) {
    background: #52c978;
}


/* =========================================================
   BROWSER ADDRESS
   ========================================================= */

.bwebs-browser-address {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 34%;
    height: 7px;

    border-radius: 20px;

    background: rgba(255, 255, 255, .09);

    border: 1px solid rgba(255, 255, 255, .025);
}


/* =========================================================
   SCREENSHOT CONTAINER
   ========================================================= */

.bwebs-project-image {
    position: relative;

    width: 100%;
    height: calc(100% - 27px);

    overflow: hidden;

    background: #fff;

    border-radius: 0 0 13px 13px;
}


/* =========================================================
   SCREENSHOT
   ========================================================= */

.bwebs-project-image img {
    position: absolute;

    top: 0;
    left: 0;

    display: block;

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

    height: auto !important;

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

    object-position: top center;

    pointer-events: none;

    user-select: none;
    -webkit-user-drag: none;

    image-rendering: auto;

    backface-visibility: hidden;

    transform: translateZ(0);
}


/* =========================================================
   ACTIVE IMAGE
   ========================================================= */

.bwebs-project.is-active
.bwebs-project-image img {
    opacity: 1;

    filter: none;
}


/* =========================================================
   SIDE IMAGES
   Zelfde beeldweergave als midden
   ========================================================= */

.bwebs-project.is-left
.bwebs-project-image img,

.bwebs-project.is-right
.bwebs-project-image img {
    filter: none;
}


/* =========================================================
   SUBTLE INNER BORDER
   ========================================================= */

.bwebs-project-image::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .025);

    z-index: 2;
}


/* =========================================================
   PROJECT INFO
   ========================================================= */

.bwebs-project-info {
    position: relative;

    text-align: center;

    padding: 7px 20px 0;

    min-height: 86px;
}


/* =========================================================
   COUNTER
   ========================================================= */

.bwebs-counter {
    margin-bottom: 5px;

    font-size: 11px;
    line-height: 1.4;

    letter-spacing: .09em;

    color: #8b8c92;
}


/* =========================================================
   TITLE
   ========================================================= */

.bwebs-project-title {
    margin: 0;

    font-family:
        "Inter",
        "Poppins",
        Arial,
        sans-serif;

    font-size: 17px;
    line-height: 1.3;

    font-weight: 600;

    letter-spacing: -.015em;

    color: var(--bwebs-purple);
}


/* =========================================================
   META
   ========================================================= */

.bwebs-project-meta {
    margin-top: 4px;

    font-size: 12px;
    line-height: 1.5;

    color: #73747a;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.bwebs-progress {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 6px;

    margin-top: 12px;
}


.bwebs-progress-item {
    display: block;

    width: 22px;
    height: 3px;

    padding: 0;
    margin: 0;

    border: 0;

    border-radius: 20px;

    background: #d8d8dd;

    cursor: pointer;

    transition:
        width .35s ease,
        background .35s ease;
}


.bwebs-progress-item:hover {
    background: #aaa9b6;
}


.bwebs-progress-item.is-active {
    width: 42px;

    background: var(--bwebs-purple);
}


/* =========================================================
   MOBILE SWIPE HINT
   ========================================================= */

.bwebs-swipe-hint {
    margin-top: 10px;

    text-align: center;

    font-size: 10px;
    line-height: 1;

    color: #9a9a9f;

    letter-spacing: .04em;

    transition: opacity .3s ease;
}


.bwebs-showcase.has-interacted
.bwebs-swipe-hint {
    opacity: 0;
}


/* =========================================================
   ARROWS
   MOBILE OFF
   ========================================================= */

.bwebs-arrow {
    display: none;
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

    .bwebs-showcase-stage {
        height: 350px;
    }


    .bwebs-project {
        width: 84vw;
        height: 330px;

        border-radius: 12px;
    }


    .bwebs-browser-bar {
        border-radius: 11px 11px 0 0;
    }


    .bwebs-project-image {
        border-radius: 0 0 11px 11px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) {

    .bwebs-showcase {
        padding-top: 15px;
        padding-bottom: 30px;
    }


    .bwebs-showcase-stage {
        height: 490px;

        perspective: 1300px;
    }


    .bwebs-project {
        width: 430px;
        max-width: none;

        height: 445px;

        border-radius: 15px;
    }


    .bwebs-browser-bar {
        border-radius: 14px 14px 0 0;
    }


    .bwebs-project-image {
        border-radius: 0 0 14px 14px;
    }


    /* ACTIVE */

    .bwebs-project.is-active {
        transform:
            translateX(-50%)
            translateZ(40px)
            scale(1);

        opacity: 1;
    }


    /* LEFT */

    .bwebs-project.is-left {
        transform:
            translateX(-123%)
            translateZ(-100px)
            scale(.88);

        opacity: .50;

        filter: none;
    }


    /* RIGHT */

    .bwebs-project.is-right {
        transform:
            translateX(23%)
            translateZ(-100px)
            scale(.88);

        opacity: .50;

        filter: none;
    }


    .bwebs-project-title {
        font-size: 18px;
    }


    .bwebs-swipe-hint {
        display: none;
    }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1025px) {

    .bwebs-showcase {
        padding-top: 25px;
        padding-bottom: 35px;
    }


    /*
     * Meer ruimte dan vroeger.
     * Zo wordt de actieve kaart niet afgesneden.
     */

    .bwebs-showcase-stage {
        height: 540px;

        perspective: 1600px;

        overflow: visible;
    }


    /* =====================================================
       BASIS CARD
       ===================================================== */

    .bwebs-project {
        width: min(37vw, 540px);
        max-width: none;

        height: 475px;

        border-radius: 16px;

        overflow: hidden;

        box-shadow:
            0 30px 70px rgba(20, 20, 35, .10),
            0 8px 25px rgba(20, 20, 35, .05);
    }


    /* =====================================================
       BROWSER
       ===================================================== */

    .bwebs-browser-bar {
        border-radius: 15px 15px 0 0;
    }


    .bwebs-project-image {
        border-radius: 0 0 15px 15px;
    }


    /* =====================================================
       ACTIVE
       Breder dan de zijprojecten
       ===================================================== */

    .bwebs-project.is-active {
        width: min(43vw, 620px);

        transform:
            translateX(-50%)
            translateZ(40px)
            scale(1);

        opacity: 1;

        z-index: 20;

        border-radius: 16px;

        overflow: hidden;

        filter: none;

        box-shadow:
            0 38px 85px rgba(20, 20, 35, .14),
            0 10px 30px rgba(20, 20, 35, .06);
    }


    /* =====================================================
       LEFT
       ===================================================== */

    .bwebs-project.is-left {
        width: min(37vw, 540px);

        transform:
            translateX(-118%)
            translateZ(-100px)
            scale(.90);

        opacity: .48;

        filter: none;

        z-index: 5;
    }


    /* =====================================================
       RIGHT
       ===================================================== */

    .bwebs-project.is-right {
        width: min(37vw, 540px);

        transform:
            translateX(18%)
            translateZ(-100px)
            scale(.90);

        opacity: .48;

        filter: none;

        z-index: 5;
    }


    /* =====================================================
       SIDE HOVER
       ===================================================== */

    .bwebs-project.is-left:hover,
    .bwebs-project.is-right:hover {
        opacity: .72;

        cursor: pointer;
    }


    /* =====================================================
       ARROWS
       ===================================================== */

    .bwebs-arrow {
        position: absolute;

        display: flex;

        align-items: center;
        justify-content: center;

        top: 235px;

        width: 46px;
        height: 46px;

        padding: 0;

        border: 1px solid rgba(38, 33, 97, .10);

        border-radius: 50%;

        background: rgba(255, 255, 255, .97);

        color: var(--bwebs-purple);

        font-family: Arial, sans-serif;

        font-size: 25px;
        line-height: 1;

        font-weight: 300;

        cursor: pointer;

        z-index: 50;

        box-shadow:
            0 8px 28px rgba(20, 20, 35, .07);

        transition:
            transform .25s ease,
            box-shadow .25s ease,
            border-color .25s ease;
    }


    .bwebs-arrow:hover {
        transform: scale(1.08);

        border-color: rgba(38, 33, 97, .20);

        box-shadow:
            0 12px 35px rgba(20, 20, 35, .11);
    }


    .bwebs-arrow-prev {
        left: 5%;
    }


    .bwebs-arrow-next {
        right: 5%;
    }


    /* =====================================================
       INFO
       ===================================================== */

    .bwebs-project-info {
        padding-top: 4px;
    }


    .bwebs-project-title {
        font-size: 19px;
    }


    .bwebs-project-meta {
        font-size: 13px;
    }

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    /*
     * Midden maximaal 620px.
     * Zijkaarten maximaal 550px.
     */

    .bwebs-project.is-active {
        width: 620px;
    }


    .bwebs-project.is-left {
        width: 550px;

        transform:
            translateX(-119%)
            translateZ(-100px)
            scale(.90);
    }


    .bwebs-project.is-right {
        width: 550px;

        transform:
            translateX(19%)
            translateZ(-100px)
            scale(.90);
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .bwebs-project {
        transition: opacity .2s ease;
    }

}