/* 
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, padding 1000ms;
}
.home_p-project:not(.--active) {opacity: .4;}

.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 .--details {
    height: fit-content;
    transition: margin 500ms;
}
.home_p-project:not(.--active) .--details {margin: auto 0;}

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


@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; 
    margin-bottom: var(--size-l);
    row-gap: var(--size-l);
}

.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 .--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 .--carousel {margin-top: auto;}

    .home_p-project--overlay .--carousel nav {margin-bottom: var(--size);}
    .home_p-project--overlay .--carousel .--prev,
    .home_p-project--overlay .--carousel .--next {opacity: .4; height: 1.7rem; width: auto;}

    .home_p-project--overlay .--images {
        column-gap: var(--size-s);
        overflow-x: auto;
        overflow-y: hidden;
    }
    .home_p-project--overlay .--carousel-image {height: 12rem; width: auto;}
}

@media only screen and (min-width: 1096px) {
    .home_p-project--overlay .--carousel-image {height: 18rem;}
}

@media (hover: hover) {
    .home_p-project--overlay .--carousel .--prev,
    .home_p-project--overlay .--carousel .--next {transition: opacity 500ms;}

    .home_p-project--overlay .--carousel .--prev:hover,
    .home_p-project--overlay .--carousel .--next:hover {opacity: 1 !important;}
}