/* 
    Header
*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    transition: background 200ms ease-in-out;
}

.header.page {
    background: var(--primaryColor);
    background: linear-gradient(0deg, rgba(176, 181, 180, 0) 0%, rgba(176, 181, 180, 1) 100%);
}

.header.project {
    background: var(--trecearyColor);
    background: linear-gradient(0deg, rgba(32, 30, 28, 0) 0%, rgba(32, 30, 28, 1) 100%);
}

.header-nav {
    display: none;
    margin: -1rem -14px 0;
    transition: background 200ms ease-in-out;
}

.header-logo {
    grid-column: 1/-3;
    position: relative;
    grid-row: 1;
    width: 100%;
}

.header-logo object {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 200ms ease-in-out;
}

.header-logo .dark {
    opacity: 0;
}

.header.page .light,
.header.project .dark {
    opacity: 0;
}

.header.page .dark,
.header.project .light {
    opacity: 1;
}

/* Desktop Media Query */
@media screen and (min-width: 52rem) {
    .header.page .header-nav a {
        color: var(--trecearyColor) !important;
    }

    .header.project .header-nav a {
        color: var(--secondaryColor) !important;
    }

    .header-logo {
        grid-column: 1/4;
    }

    .header-nav {
        display: block;
        grid-column: 7/-1;
    }

    .header-nav li {
        grid-column: span 2;
    }
}

/* 
    Backdrop
*/
.page-backdrop {
    position: relative;
    min-height: 100vh;
    padding: 0 14px;
    background-color: var(--trecearyColor);
}

.page-backdrop img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    object-fit: cover;
}

.page-backdrop h2,
.page-backdrop ul,
.page-backdrop li {
    grid-column: 1/-1;
}

.page-backdrop h2 {
    margin-top: 8rem;
}

.page-bottom ul {
    margin-bottom: 6rem;
}

.page-backdrop li {
    margin-bottom: 1em;
}

/* Desktop Media Query */
@media screen and (min-width: 52rem) {
    .page-backdrop h2 {
        grid-column: 7/-2;
        margin-top: 12rem;
    }

    .page-backdrop ul {
        grid-column: 7/-1;
    }

    .page-backdrop li {
        grid-column: span 4;
        margin-bottom: 2em;
    }
}

/* 
    Intro
*/
.page-intro > *,
.page-intro h3,
.page-intro p,
.page-intro ul {
    grid-column: 1/-1;
}

.page-intro h3,
.page-intro p,
.page-intro ul {
    margin-bottom: 2rem;
}

.page-intro ul {
    margin: 4rem 0 1rem;
}

.page-intro li {
    grid-column: span 3;
    margin-bottom: 4rem;
}

/* Desktop Media Query */
@media screen and (min-width: 52rem) {
    .page-intro h3 {
        grid-column: 7/-2;
    }

    .page-intro p {
        grid-column: 7/-2;
    }

    .page-intro ul {
        grid-column: 7/-1;
        margin: 0 0 2rem;
    }

    .page-intro li {
        grid-column: span 4;
        margin: 3rem 0;
    }

}

/* 
    Comparison Section 
*/

.comparison-section {
    position: relative;
    padding-bottom: 40%;
    margin-bottom: 3rem;
    /* to maintain aspect ratio (responsive!) */
}

.comparison-image {
    width: 100%;
    height: 100%;
}

.after-image {
    position: absolute;
    overflow: hidden;
    top: 0;
    transform: translate(100%, 0px);
}

.after-image img {
    transform: translate(-100%, 0px);
}

.comparison-image img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    object-fit: contain;
}

/* Desktop Media Query */
@media screen and (min-width: 52rem) {
    .comparison-section {
        padding-left: calc(35vw + 2rem);
    }
    
    .comparison-image img {
        object-position: 0% 0%;
    }
}

/* 
    Project
*/

/* 
    Backdrop 
*/
.project-backdrop {
    background-image: url(../img/project/backdrop.png);
    background-size: cover;
    background-position: center;
    padding: 0 14px;
}

.project-backdrop > * {
    grid-column: 1/-1;
}

.project-backdrop > h2 {
    margin-top: 1em;
}

.project-backdrop_details {
    margin: 2rem 0;
}

.project-backdrop_details a {
    opacity: .7;
}

.text-wrapper {
    display: flex;
    margin: 4rem 0 6rem;
}

.slotmachine span {
    display: block;
    opacity: 0.5;
    transition: 200ms ease;
    white-space: nowrap;
}

.slotmachine span.active {
    opacity: 1;
}

/* Desktop Media Query */
@media screen and (min-width: 52rem) {
    .project-backdrop h2 {
        grid-column: 7/-1;
        grid-row: 1;
        margin-bottom: 1em;
    }

    .project-backdrop_details {
        grid-column: 2/7;
        grid-row: 2;
        margin: 0;
    }

    .project-backdrop > p {
        grid-column: 7/-3;
        grid-row: 2;
    }

    .project-backdrop .text-wrapper {
        grid-column: 7/-1;
        grid-row: 3;
    }
}

/* Content */
.project-content {
    background-color: var(--trecearyColor);
    padding-bottom: 0 !important;
}

.project-content > * {
    grid-column: 1/-1;
}

.project-content a {
    margin: 0 auto 3rem;
    height: fit-content;
}

.project-content p {
    margin: 1rem 0 3rem;
}

/* Desktop Media Query */
@media screen and (min-width: 52rem) {
    .project-content {
        padding-bottom: 1rem !important;
    }

    .project-content a {
        grid-column: 2/7;
        grid-row: 1;
        margin: 0 auto 0 0;
    }

    .project-content article {
        grid-column: 7/-3;
    }
}

/* Gallery */
.project-gallery {
    grid-column: 1/-1;
    background-color: var(--trecearyColor);
}

.project-gallery img {
    grid-column: span 3;
    height: calc(50vw - 1.5rem);
    object-fit: cover;
    margin-bottom: 1rem;
}

/* Picture */
.page-project > img {
    width: 100%;
    height: 75vw;
    object-fit: cover;
}

/* Desktop Media Query */
@media screen and (min-width: 52rem) {
    .project-gallery {
        grid-column: 1/-1;
        width: 100%;
    }

    .project-gallery img {
        grid-column: span 4;
        margin: 0;
        height: 25vw;
    }

    .page-project > img {
        height: auto;
    }
}


/* 
    Mission
*/
.page-mission > * {
    grid-column: 1/-1;
}

.page-mission_list {
    margin: 2rem 0;
    padding-left: 0;
}

.page-mission_list li {
    grid-column: 1/-1;
    margin-bottom: 1em;
    list-style-position: inside;
    padding-left: 1.1em;
    text-indent: calc(1.1em * -1);
}

/* 
    Desktop Media Query 
*/
@media screen and (min-width: 52rem) {
    .page-mission {
        padding: 3rem 0 5rem;
    }

    .page-mission > * {
        grid-column: 7/-3;
    }
}

/* 
    Team
*/
.page-team h2,
.page-team ul {
    grid-column: 1/-1;
    margin-bottom: 2rem;
}

.page-team_person {
    padding-top: .5rem;
    border-top: 1px solid black;
    margin-bottom: 2rem;
}

.page-team_person img {
    grid-column: 1/2;
    grid-row: 1/5;
    width: var(--columnMobile);
    height: var(--columnMobile);
    mix-blend-mode: multiply;
}

.page-team_person h3,
.page-team_person p,
.page-team_person div {
    grid-column: 2/-1;
}

.page-team_person p {
    opacity: .5;
    margin-bottom: 1rem;
}

.page-team_person a {
    display: inline;
    margin-right: 1rem;
    opacity: .5;
}

.page-team_person a:first-of-type {
    margin-bottom: .25em;
}

/* Desktop Media Query */
@media screen and (min-width: 52rem) {
    .page-team {
        padding-top: 2rem;
    }

    .page-team > h2 {
        grid-column: 7/-2;
    }

    .page-team > ul {
        grid-column: 7/-1;
    }

    .page-team_person img {
        width: calc(var(--columnDesktop) * 2);
        height: calc(var(--columnDesktop) * 2);
    }

    .page-team_person h3 {
        grid-row: 1;
    }

    .page-team_person > p {
        margin-bottom: auto;
        grid-row: 2;
    }

    .page-team_person > div {
        grid-row: 4;
    }
}


/* 
    Footer
*/
#footer {
    background-color: black;
    padding-bottom: 1rem;
}

#footer > * {
    grid-column: 1/-1;
}

/* Contacts */
.footer-contacts {
    margin-bottom: 2rem;
}

.footer-contacts a {
    display: block;
}

.footer-contacts a:first-of-type {
    margin-top: 2em;
}

/* Partners */
.footer-partners ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.footer-partners ul li:first-of-type {
    min-width: 100%;
    max-width: 100%;
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--primaryColor);
    margin-bottom: 1.5rem;
}

.footer-partners img {
    width: auto;
    height: fit-content;
    max-height: 1.5rem;
    max-width: 40vw;
    margin: 0 2rem 2.5rem 0;
}

/* Footnotes */
.footer-footnotes {
    margin-top: 4rem;
}

.footer-footnotes > p {
    grid-column: 1/-1;
    margin-bottom: 1em;
}

/* Desktop Media Query */
@media screen and (min-width: 52rem) {
    #footer {
        padding-top: 3rem;
    }
    
    .footer-contacts {
        grid-column: 2/6 !important;
    }

    .footer-partners {
        grid-column: 7/-1 !important;
    }

    .footer-partners ul {
        margin: 0 0 2rem;
        justify-content: flex-start;
    }

    .footer-partners img {
        margin: .5rem 3rem 2.5rem 0;
        max-height: 1.8rem;
        max-width: 50vw;
    }

    .footer-footnotes {
        margin-top: 0;
    }

    .footer-footnotes p:nth-of-type(1) {
        grid-column: 2/6;
    }

    .footer-footnotes p:nth-of-type(2) {
        grid-column: 7/-2;
    }
}


/* Hover */
@media (hover: hover) {
    .header-nav a,
    .project-backdrop_details a {
        transition: 300ms;
    }

    .header-nav ul:hover a {
        opacity: .25;
    }

    .header-nav a:hover,
    .project-backdrop_details a:hover {
        opacity: 1 !important;
    }

    .page-team_person a:hover {
        text-decoration: underline;
    }
}