/* 
    Index Page 
*/
.index-page {
    width: 100vw;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}

.index-page > .large {
    width: calc(100vw - 1rem);
    min-width: calc(100vw - 1rem);
    padding-top: 3rem;
    min-height: 100vh;
    scroll-snap-align: start;
    position: sticky;
    left: 0;
    background-color: white;
}

.index-page > .large:not(:first-of-type) {
    -webkit-box-shadow: -4px 0px 16px 0px rgba(0, 0, 0, 0.20);
    -moz-box-shadow: -4px 0px 16px 0px rgba(0, 0, 0, 0.20);
    box-shadow: -4px 0px 16px 0px rgba(0, 0, 0, 0.20);
}

.index-page > .small {
    display: none;
}

.section-header {
    width: 100%;
    color: black;
}

@media only screen and (min-width: 768px) {
    .index-page > .large {
        width: calc(100% / 14 * 4);
        min-height: auto;
        height: fit-content;
        min-width: auto;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }

    .index-page > .small {
        padding-top: 3rem;
        display: block;
        width: calc(100% / 14 * 2);
        min-width: unset;
    }


    .section-header span {
        opacity: 0;
        transition: 500ms;
        padding: 0 0 0.25rem 3rem;
    }

    .section-header h2 {
        padding-bottom: 0.25rem;
    }

    .section-header:hover span {
        opacity: 1;
    }

    .section-header:hover span:hover {
        color: black;
    }
}


/* Project Sub-Project */

.project.expand h3,
.sub-project.expand h4 {
    margin-bottom: 0.25rem;
}

.project .project__thumbnail,
.sub-project .project__thumbnail {
    display: none;
    margin-bottom: 0.5rem;
    max-width: 90%;
    object-fit: contain;
    object-position: top left;
}

.project.expand .project__thumbnail,
.sub-project.expand .project__thumbnail {
    display: block;
}

.sub-project {
    padding-left: 0.75rem;
}

.project__thumbnail img {
    width: 100%;
    height: 100%;
    max-height: 30vh;
    object-fit: contain;
    object-position: left top;
}


/* Writing */
.writing {
    margin-bottom: 0;
}

.writing .writing__description {
    display: none;
}

.writing.expand {
    margin-bottom: 0.75rem;
}

.writing.expand .writing__description {
    display: block;
    position: static;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    width: 100%;
    font-family: Gerstner Programm, Arial, Helvetica, sans-serif;
}

/* Institution */
.institution.expand {
    margin-bottom: 0.75rem;
}

.institution > div {
    display: none;
}

.institution > div > img {
    margin-bottom: 0.25rem;
    max-width: 90%;
    max-height: 30vh;
    object-fit: contain;
    object-position: top left;
}

.institution.expand > div {
    display: block;
    position: static;
    font-family: Gerstner Programm, Arial, Helvetica, sans-serif !important;
    font-size: 14px !important;
}

.institution.expand > div > div {
    font-family: Gerstner Programm, Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400;
}

.institution > div > div a {
    text-decoration: none !important;
}

.institution.expand > div > div a {
    text-decoration: underline !important;
}

.relational > button {
    display: none;
}

/* .year > button {
    display: block;
} */

.index-page__close {
    display: none;
}


@media only screen and (min-width: 768px) {
    section {
        max-height: calc(100vh);
        overflow-y: auto;
    }

    .project {
        width: 100%;
    }
    
    .project h3,
    .sub-project h4,
    .writing h3,
    .institution h3 {
        margin-bottom: 0;
        padding-right: 3rem;
    }
    
    .project .project__thumbnail,
    .sub-project .project__thumbnail {
        max-width: calc(100vw / 14 * 4 - 2rem);
        max-height: calc(100vh/3);
    }

    .project .project__thumbnail img,
    .sub-project .project__thumbnail img {
        max-width: calc(100vw / 14 * 4 - 2rem);
        max-height: calc(100vh/3);
    }

    @media only screen and (min-height: 512px) {
        .project:hover .project__thumbnail,
        .sub-project:hover .project__thumbnail {
            display: block;
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: white;
            padding: 1rem 0.5rem 0;
        }

        .project.expand:hover .project__thumbnail {
            padding: 0;
        }

        .sub-project.expand:hover .project__thumbnail {
            padding: 0;
            padding-right: 0.75rem;
        }
    }


    .entry-expanded .project:hover .project__thumbnail,
    .entry-expanded .sub-project:hover .project__thumbnail {
        display: none;
    }

    .project.expand .project__thumbnail,
    .sub-project.expand .project__thumbnail {
        display: block !important;
        padding-left: 0;
    }

    .project.expand:hover .project__thumbnail,
    .sub-project.expand:hover .project__thumbnail {
        position: static;
    }
    
    .project.expand h3,
    .sub-project.expand h4 {
        margin-bottom: 0.25rem;
    }

    @media only screen and (min-height: 512px) {
        .writing:hover .writing__description {
            display: block;
            position: fixed;
            bottom: 0;
            left: calc(100vw / 14 * 4 + 0.5rem);
            width: calc(100vw / 14 * 4);
            padding: 1rem 0.5rem 0.5rem;
        }

        .writing.expand:hover .writing__description {
            padding: 0;
        }
    }

    .entry-expanded .writing:hover .writing__description {
        display: none;
    }

    .writing.expand:hover .writing__description {
        position: static;
        width: 100%;
    }
    
    .writing.expand .writing__description {
        display: block !important;
    }

    /* Institution */
    @media only screen and (min-height: 512px) {
        .institution:hover > div {
            display: block;
            position: fixed;
            bottom: 0;
            left: calc(100vw / 14 * 8 + 0.5rem);
            width: calc(100vw / 14 * 4);
            padding: 1rem 0.5rem 0;
        }

        .institution:hover > div {
            padding: 0;
        }
    }

    .entry-expanded .institution:hover>div {
        display: none;
    }

    .institution.expand:hover > div {
        position: static;
        width: 100%;
    }

    .entry-expanded .expand > div {
        display: block !important;
    }

    .institution.expand>div {
        font-size: 12.5px !important;
        letter-spacing: 0.25px;
    }

    /* 
        Relational 
    */
    .relational {
        position: relative;
        transition: opacity 300ms 50ms;
    }

    /* Relations */
    .relational.hover {
        opacity: 0.2;
    }

    /* Relations Expand */
    .relational.expand,
    .relational:hover {
        opacity: 1 !important;
    }

    .relational:hover h3,
    .relational:hover h4 {
        font-style: italic;
    }

    .relational.active {
        opacity: 1 !important;
    }
    
    .relational > button {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        padding: 0.25rem 0 0.5rem 2rem;
    }

    .relational > button[data-state="expanded"],
    .relational:hover > button {
        display: block;
    }

    /* Close Relations */
    .index-page__close {
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }
}