/* ==================================================
   THREE BRANCHES LANDSCAPES
   PROJECTS PAGE
================================================== */


/* ==================================================
   GALLERY
================================================== */

.projects-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: var(--space-md);

    margin-top: var(--space-2xl);
}


/* ==================================================
   GALLERY ITEM
================================================== */

.project-gallery-item {
    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border: 0;
    border-radius: var(--radius);

    background: transparent;

    cursor: pointer;
}


/* ==================================================
   TOP 3 PROJECTS
================================================== */

.project-gallery-third {
    aspect-ratio: 1 / 1;
}


/* ==================================================
   FULL WIDTH PROJECT
================================================== */

.project-gallery-wide {
    grid-column: 1 / -1;

    aspect-ratio: 16 / 9;
}


/* ==================================================
   GALLERY IMAGE
================================================== */

.project-gallery-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform var(--transition),
        opacity var(--transition);
}

.project-gallery-item:hover img {
    transform: scale(1.025);
}


/* ==================================================
   LIGHTBOX
================================================== */

.project-lightbox {
    position: fixed;
    inset: 0;

    z-index: 9999;

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

    padding: var(--space-xl);

    background: rgba(0, 0, 0, 0.92);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity var(--transition),
        visibility var(--transition);
}

.project-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}


/* ==================================================
   LIGHTBOX CONTENT
================================================== */

.project-lightbox-content {
    display: flex;
    align-items: center;
    justify-content: center;

    width: min(
        1200px,
        calc(100vw - 160px)
    );

    height: calc(100vh - 100px);
}


/* ==================================================
   LIGHTBOX IMAGE
================================================== */

.project-lightbox-image {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    border-radius: var(--radius);

    object-fit: contain;
}


/* ==================================================
   LIGHTBOX CONTROLS
================================================== */

.project-lightbox-close,
.project-lightbox-prev,
.project-lightbox-next {
    position: absolute;

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

    margin: 0;
    padding: 0;

    border: 0;

    color: var(--white);
    background: transparent;

    cursor: pointer;

    transition: opacity var(--transition);
}

.project-lightbox-close:hover,
.project-lightbox-prev:hover,
.project-lightbox-next:hover {
    opacity: 0.7;
}


/* ==================================================
   CLOSE BUTTON
================================================== */

.project-lightbox-close {
    top: var(--space-lg);
    right: var(--space-xl);

    font-size: 48px;
    line-height: 1;
}


/* ==================================================
   PREV / NEXT
================================================== */

.project-lightbox-prev,
.project-lightbox-next {
    top: 50%;

    transform: translateY(-50%);

    font-size: 64px;
    line-height: 1;
}

.project-lightbox-prev {
    left: var(--space-xl);
}

.project-lightbox-next {
    right: var(--space-xl);
}


/* ==================================================
   LIGHTBOX BODY STATE
================================================== */

body.project-lightbox-open {
    overflow: hidden;
}


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

@media (max-width: 991px) {

    .projects-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-gallery-wide {
        grid-column: 1 / -1;
    }

    .project-lightbox-content {
        width: calc(100vw - 120px);
    }

}


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

@media (max-width: 767px) {

    .projects-gallery {
        grid-template-columns: 1fr;
    }

    .project-gallery-third,
    .project-gallery-wide {
        grid-column: auto;

        aspect-ratio: 4 / 3;
    }


    /* ==========================================
       MOBILE LIGHTBOX
    ========================================== */

    .project-lightbox {
        padding: var(--space-md);
    }

    .project-lightbox-content {
        width: calc(100vw - 50px);
        height: calc(100vh - 100px);
    }

    .project-lightbox-close {
        top: var(--space-md);
        right: var(--space-md);

        font-size: 40px;
    }


    /* Mobile uses swipe instead */

    .project-lightbox-prev,
    .project-lightbox-next {
        display: none;
    }

}