/* CSS Document */


/* =============== Main - Introduction Projects Section =============== */

#intro-projects {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px;
    margin-bottom: 120px;
    gap: 60px;
}

#projects-description {
    text-align: center;
    padding: 0 15px;
    max-width: 762px;
}


/* =============== Main - Leaves Section =============== */

#leaves {
    display: none;
    justify-content: center;
    margin: 120px 0;
}

#leaf-band {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1272px;
    padding: 0 24px;
}

.leaf-cluster {
    display: flex;
    gap: 24px;
}


/* =============== Main - Projects Section =============== */

#projects {
    display: flex;
    justify-content: center;
}

#projects-content {
    display: flex;
    flex-direction: column;
    padding: 0 15px;
    gap: 120px;
    align-items: center;
}

.projects-double-module {
    display: flex;
    flex-direction: column;
    gap: 120px;
    align-items: flex-start;
}

.project-box {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 762px;
}

.project-box-headline {
    display: flex;
    padding: 15px;
    color: #F2EFDE;
    justify-content: center;
    text-align: center;

    background-color: #093409;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.project-box-image {
    display: flex;
    justify-content: center;
    padding: 15px;
    background: #247022;
    aspect-ratio: 1 / 1; /* Same height and width */
}

.box-image {
    border-radius: 10px;
    width: 100%;
}

.box-bodytext {
    display: none;
    flex-direction: column;
    padding: 15px;
    gap: 15px;
    background-color: #DBD1AD;
}

.project-box-arrow-down {
    display: flex;
    padding: 15px 0;
    justify-content: center;

    background: #247022;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    cursor: pointer;
}

/* For Animation and MovingArt projects */
.project-box-image video {
    background-color: #F2EFDE;
    border-radius: 10px;
}

/* Active */
/* Here .box-bodytext gets targeted if .project-box and .active is on an element above */
.project-box.active .box-bodytext {
    display: flex;
}
.project-box.active .project-box-arrow-down img {
    transform: rotate(180deg);
}


/* =============== Main - CTA Button =============== */

/* The specific style on button is in base.css */
#projects-cta {
    display: flex;
    justify-content: center;
    padding: 60px 15px;
}


/* ======================================================================================================================== */
/* =============== Media Query ===============*/

@media only screen and (min-width: 1222px) /* New pixel size - fit better with contents */ {

    /* ---------- Main - Introduction Projects Section (desktop) ---------- */

    #intro-projects {
        margin-top: 280px;
        margin-bottom: unset;
        gap: 140px;
    }

    #projects-description {
        padding: 0 24px;
        max-width: 848px;
    }


    /* ---------- Main - Leaves Section (desktop) ---------- */

    #leaves {
        display: flex;
    }

    .leaf-cluster img {
        min-height: 30px;
    }


    /* ---------- Main - Projects Section (desktop) ---------- */

    #projects-content {
        padding: 0 24px;
        gap: 212px;
        width: 100%;
        max-width: 1320px;
    }

    .projects-double-module {
        flex-direction: row;
        gap: 24px;
        justify-content: space-between;
        width: 100%;
    }

    .project-box {
        max-width: 576px;
        min-width: 520px;
    }


    /* Relates to JavaScript - only this height when it is active */

    .project-box.active .box-bodytext {
        height: 504px;
    }


    /* ---------- Main - CTA Button (desktop) ---------- */

    #projects-cta {
        padding: 140px 24px;
    }
}