/* ========================================
   WESPI IN DE PRAKTIJK
======================================== */

.projecten {
    position: relative;

    margin: 0;

    /*
       Iets extra ruimte bovenaan omdat
       Waarom Wespi 28px over dit blok valt.
    */
    padding: 123px 0 92px;

    overflow: hidden;

    background: #e9eaec;

    color: var(--wespi-zwart);

    /*
       Waarom Wespi staat op z-index 4.
       Projecten ligt daar netjes achter.
    */
    z-index: 2;
}


/* ========================================
   GEEN EIGEN BOVENGOLF

   De bolling wordt volledig bepaald
   door Waarom Wespi.
======================================== */

.projecten::before {
    display: none;
}


/* ========================================
   INHOUD
======================================== */

.projecten > .container {
    position: relative;

    z-index: 2;
}


/* ========================================
   KOP
======================================== */

.projecten-kop {
    display: grid;

    grid-template-columns:
        1.08fr 0.92fr;

    gap: 80px;

    align-items: end;

    margin-bottom: 48px;
}

.projecten .sectie-bovenkop {
    display: block;

    margin-bottom: 12px;

    color: #222222;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1.4px;
}

.projecten-kop h2 {
    margin: 0;

    color: var(--wespi-zwart);

    font-size:
        clamp(42px, 4.5vw, 56px);

    line-height: 0.98;

    letter-spacing: -2px;
}

.projecten-kop h2 span {
    color: var(--wespi-zwart);
}


/* ========================================
   INTRO
======================================== */

.projecten-intro {
    max-width: 480px;

    padding-bottom: 3px;
}

.projecten-intro strong {
    display: block;

    margin-bottom: 9px;

    color: var(--wespi-zwart);

    font-size: 17px;
    line-height: 1.35;
}

.projecten-intro p {
    margin: 0;

    color: #606266;

    font-size: 14px;
    line-height: 1.7;
}


/* ========================================
   GRID
======================================== */

.projecten-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.14fr)
        minmax(0, 0.86fr);

    grid-template-rows:
        repeat(2, 300px);

    gap: 16px;
}


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

.project {
    position: relative;

    display: block;

    min-width: 0;

    overflow: hidden;

    border-radius: 15px;

    background: #d9dadd;

    color: #ffffff;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.075);
}

.project-groot {
    grid-row: 1 / 3;

    display: grid;
    grid-template-rows: minmax(160px, 1fr) auto;

    /* De witte foto-ondergrond loopt door achter de oorspronkelijke gradient. */
    background: #ffffff;
}

.project-groot img {
    min-height: 0;
    object-position: center 55%;
}

.project.project-groot:hover img {
    transform: none;
}

.project img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.6s ease;
}

.project:hover img {
    transform:
        scale(1.035);
}


/* ========================================
   BASIS OVERLAY
======================================== */

.project-overlay {
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 28px;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.50) 35%,
            rgba(0, 0, 0, 0.15) 62%,
            rgba(0, 0, 0, 0) 80%
        );

    transition:
        background 0.3s ease;
}


/* ========================================
   PRODUCTFOTOGRAFIE
======================================== */

.project-groot .project-overlay {
    position: relative;
    inset: auto;
    z-index: 1;

    padding: 38px;
    background: none;
}

/* De bestaande gradient blijft over de volledige kaart liggen. */
.project-groot::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.48) 32%,
            rgba(0, 0, 0, 0.12) 58%,
            rgba(0, 0, 0, 0) 78%
        );
}


/* ========================================
   DATA
======================================== */

.project-data .project-overlay {
    background:
        linear-gradient(
            to top,
            rgba(10, 12, 14, 0.92) 0%,
            rgba(10, 12, 14, 0.82) 28%,
            rgba(10, 12, 14, 0.58) 48%,
            rgba(10, 12, 14, 0.24) 68%,
            rgba(10, 12, 14, 0.04) 84%,
            rgba(10, 12, 14, 0) 100%
        );
}


/* ========================================
   SLIMMER WERKEN
======================================== */

.project-digitaal .project-overlay {
    background:
        linear-gradient(
            to top,
            rgba(10, 12, 14, 0.94) 0%,
            rgba(10, 12, 14, 0.84) 30%,
            rgba(10, 12, 14, 0.60) 50%,
            rgba(10, 12, 14, 0.25) 70%,
            rgba(10, 12, 14, 0.04) 86%,
            rgba(10, 12, 14, 0) 100%
        );
}


/* ========================================
   HOVER OVERLAYS
======================================== */

.project-groot:hover::before {
    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.52) 34%,
            rgba(0, 0, 0, 0.14) 60%,
            rgba(0, 0, 0, 0) 80%
        );
}

.project-data:hover .project-overlay {
    background:
        linear-gradient(
            to top,
            rgba(10, 12, 14, 0.95) 0%,
            rgba(10, 12, 14, 0.84) 30%,
            rgba(10, 12, 14, 0.60) 50%,
            rgba(10, 12, 14, 0.25) 70%,
            rgba(10, 12, 14, 0.04) 86%,
            rgba(10, 12, 14, 0) 100%
        );
}

.project-digitaal:hover .project-overlay {
    background:
        linear-gradient(
            to top,
            rgba(10, 12, 14, 0.96) 0%,
            rgba(10, 12, 14, 0.86) 32%,
            rgba(10, 12, 14, 0.62) 52%,
            rgba(10, 12, 14, 0.27) 72%,
            rgba(10, 12, 14, 0.05) 87%,
            rgba(10, 12, 14, 0) 100%
        );
}


/* ========================================
   TYPE
======================================== */

.project-type {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    margin-bottom: 9px;

    color: var(--wespi-goud);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.4px;
}


/* ========================================
   TITEL
======================================== */

.project h3 {
    max-width: 440px;

    margin: 0;

    color: #ffffff;

    font-size: 27px;
    font-weight: 800;
    line-height: 1.06;

    letter-spacing: -0.8px;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, 0.22);
}

.project-groot h3 {
    max-width: 520px;

    font-size:
        clamp(34px, 3.2vw, 44px);

    line-height: 1.02;

    letter-spacing: -1.3px;
}


/* ========================================
   BESCHRIJVING
======================================== */

.project-overlay p {
    max-width: 430px;

    margin: 11px 0 0;

    color:
        rgba(255, 255, 255, 0.91);

    font-size: 13px;
    line-height: 1.55;

    text-shadow:
        0 1px 8px rgba(0, 0, 0, 0.18);
}

.project-groot .project-overlay p {
    max-width: 500px;

    font-size: 14px;
    line-height: 1.6;
}


/* ========================================
   LINK
======================================== */

.project-link {
    display: inline-block;

    margin-top: 17px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 750;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.project:hover .project-link {
    color:
        var(--wespi-goud);

    transform:
        translateX(4px);
}


/* ========================================
   ACHTERGROND FALLBACK
======================================== */

.project-data,
.project-digitaal {
    background: #d8dadd;
}


/* ========================================
   ONDERKANT
======================================== */

.projecten-onderkant {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    margin-top: 38px;

    padding-top: 30px;

    border-top:
        1px solid rgba(0, 0, 0, 0.11);
}

.projecten-onderkant > div {
    max-width: 670px;
}

.projecten-onderkant strong {
    display: block;

    margin-bottom: 6px;

    color: var(--wespi-zwart);

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

.projecten-onderkant p {
    margin: 0;

    color: #606266;

    font-size: 14px;
    line-height: 1.6;
}


/* ========================================
   KNOP
======================================== */

.projecten-onderkant .knop {
    flex-shrink: 0;
}

.projecten .knop-geel {
    background:
        var(--wespi-goud);

    color:
        var(--wespi-zwart);
}

.projecten .knop-geel:hover {
    background:
        var(--wespi-goud-licht);

    filter: none;
}


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

@media (max-width: 900px) {

    .projecten {
        padding:
            82px 0 82px;
    }

    .projecten-kop {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .projecten-intro {
        max-width: 650px;
    }

    .projecten-grid {
        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            450px 320px;
    }

    .project-groot {
        grid-column: 1 / 3;
        grid-row: auto;
    }

    .projecten-onderkant {
        align-items: flex-start;
        flex-direction: column;

        gap: 22px;
    }

}


/* ========================================
   MOBIEL
======================================== */

@media (max-width: 600px) {

    .projecten {
        padding:
            64px 0 72px;
    }

    .projecten-kop {
        margin-bottom: 34px;
    }

    .projecten-kop h2 {
        font-size: 39px;
    }

    .projecten-intro strong {
        font-size: 16px;
    }

    .projecten-intro p {
        font-size: 14px;
    }

    .projecten-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-rows: 1fr;

        gap: 14px;
    }

    .project {
        grid-column: auto;
        grid-row: auto;
        min-height: 440px;
    }

    .project:not(.project-groot) img {
        position: absolute;
        inset: 0;
    }

    .project-groot {
        grid-template-rows: 190px auto;
    }

    .project-overlay,
    .project-groot .project-overlay {
        padding: 25px;
    }

    .project h3,
    .project-groot h3 {
        font-size: 29px;
    }

    .project-overlay p,
    .project-groot .project-overlay p {
        font-size: 13px;
    }

    .projecten-onderkant {
        margin-top: 30px;

        padding-top: 26px;
    }

    .projecten-onderkant .knop {
        width: 100%;
    }

}

/* Gerichte mobiele verfijning, fase 3. */

@media (max-width: 600px) {
    .projecten-grid { grid-auto-rows: auto; }
    .project { min-height: 360px; }
}