/* 
SLIDESHOW
*/
#home_p-slideshow {z-index: 5;}
#home_p-slideshow .--active {z-index: 5;}
#home_p-slideshow .--preview {z-index: 2;}

#home_p-slideshow[data-view="full"] video {object-fit: cover !important;}
#home_p-slideshow[data-view="fit"] video {object-fit: contain !important;}




/* 
NAV
*/
#home_p-nav {
    right: 0;
    bottom: 0;
    left: 0;
    row-gap: var(--size);
    padding-top: var(--size-l);
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);;
    z-index: 20;
}


/* 
CONTROLS
*/
#home_p-controls .--view {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

#home_p-controls .--view img {height: 1.7rem; width: auto; opacity: .4;}

@media (hover: hover) {
    #home_p-controls button {transition: color 500ms;}
    #home_p-controls img {transition: opacity 500ms;}

    #home_p-controls button:hover {color: var(--c-light) !important;}
    #home_p-controls img:hover {opacity: 1 !important;}
}


/* 
PROJECTS
*/
#home_p-projects {
    min-width: 100vw;
    max-width: 100vw;
    padding-bottom: var(--size);
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    overflow-y: hidden;
}

.home_p-project {
    scroll-snap-align: start;
    padding: 0 var(--size) 2.5rem;
    height: auto;
    transition: opacity 500ms, margin 1000ms;
}
.home_p-project:not(.--active) {opacity: .4;}
.home_p-project.--active {margin-right: var(--size-l);}

.home_p-project button {row-gap: var(--size-s);}
.home_p-project .--thumbnail {
    min-height: var(--size-xl);
    max-height: var(--size-xl);
}

.home_p-project.--active .--details {height: fit-content;}

.home_p-project .--more {
    bottom: 0;
    left: var(--size);
    transition: opacity 1000ms;
}
.home_p-project:not(.--active) .--more {opacity: 0;}

.home_p-project .--more img {height: 1rem; width: auto;}


@media only screen and (min-width: 768px) {
    #home_p-projects {column-gap: var(--size);}

    .home_p-project {padding-bottom: 0;}
    
    .home_p-project button {column-gap: var(--size);}
    .home_p-project .--thumbnail {
        min-width: 10rem;
        max-width: 10rem;
        min-height: unset;
        max-height: unset;
    }
    .home_p-project .--details {min-width: 12rem;}

    .home_p-project .--more {
        left: 12rem;
    }
}

@media only screen and (min-width: 1096px) {
    .home_p-project .--thumbnail {
        min-width: 13rem;
        max-width: 13rem;
    }

    .home_p-project .--more {
        left: 15rem;
    }
}

@media (hover: hover) {
    .home_p-project .--more {transition: opacity 500ms;}

    .home_p-project:hover {opacity: 1 !important;}
    .home_p-project .--more:hover {opacity: .4 !important;}
}




/* 
OVERLAY 
*/
.home_p-project--overlay {
    padding-top: var(--size-l);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 160;
}
.home_p-project--overlay[data-status="hide"] {opacity: 0; visibility: hidden;}



.home_p-project--overlay .--info-container {
    padding-top: 0; 
    padding-bottom: var(--size-l);
    row-gap: var(--size-l);
    height: fit-content;
}

.home_p-project--overlay .--title {grid-column: 1/-1; grid-row: 1;}
.home_p-project--overlay .--description {grid-column: 1/-1; grid-row: 2;}
.home_p-project--overlay .--collaborators {grid-column: 1/2; grid-row: 3;}
.home_p-project--overlay .--services {grid-column: 2/-1; grid-row: 3;}

.home_p-project--overlay .--close {
    top: 0;
    right: var(--size);
    column-gap: 6px;
}
.home_p-project--overlay .--close img {height: 1rem; width: auto;}
.home_p-project--overlay .--close * {opacity: .4;}

.home_p-project--overlay dt {margin-bottom: var(--size-s);}

@media only screen and (min-width: 768px) {
    .home_p-project--overlay {
        min-height: 100dvh;
        max-height: 100dvh;
        overflow: hidden !important;
    }

    .home_p-project--overlay .--title {grid-column: 1/5;}
    .home_p-project--overlay .--collaborators {grid-column: 5/7; grid-row: 1;}
    .home_p-project--overlay .--services {grid-column: 7/9; grid-row: 1;}
    .home_p-project--overlay .--description {grid-column: 1/7;}
}

@media only screen and (min-width: 1096px) {
    .home_p-project--overlay .--title {grid-column: 1/6;}
    .home_p-project--overlay .--collaborators {grid-column: 9/10;}
    .home_p-project--overlay .--services {grid-column: 11/12; }
    .home_p-project--overlay .--description {grid-column: 1/6;}
}

@media (hover: hover) {
    .home_p-project--overlay .--close * {transition: opacity 500ms;}
    .home_p-project--overlay .--close:hover * {opacity: 1 !important;}
}



.home_p-project--overlay .--slideshow {
    margin: auto 0 var(--size);
    row-gap: var(--size);
}

.home_p-project--overlay .--slideshow > figure {padding: 0 var(--size);}

.home_p-project--overlay .--thumbs {column-gap: var(--size-s);}

.home_p-project--overlay .--thumbs button {transition: opacity 1000ms;}
.home_p-project--overlay .--thumbs button:not(.--active) {opacity: .4;}
.home_p-project--overlay .--thumbs button:first-of-type {padding-left: var(--size);}
.home_p-project--overlay .--thumbs button:last-of-type {padding-right: var(--size);}

.home_p-project--overlay .--thumbs img {height: var(--size-l); width: auto;}

@media only screen and (min-width: 768px) {
    .home_p-project--overlay .--slideshow {
        flex-grow: 1;
        column-gap: var(--size);
        margin: var(--size-xl) var(--size) var(--size);
    }

    .home_p-project--overlay .--slideshow > figure {
        width: 50%;
        order: 2;
        padding: 0;
        height: auto;
    }

    .home_p-project--overlay .--slideshow-active {
        object-position: top right;
    }

    .home_p-project--overlay .--thumbs {
        width: 50%;
        order: 1;
        row-gap: var(--size-s);
        align-self: flex-start;
    }

    .home_p-project--overlay .--thumbs button:first-of-type,
    .home_p-project--overlay .--thumbs button:last-of-type {padding: 0 !important;}
}

@media only screen and (min-width: 1096px) {
    .home_p-project--overlay .--thumbs {
        width: 30%;
        margin-right: auto;
    }
}