/*
  This is your main CSS style sheet file, its content and the content generated by visual-override.js and the Custom CSS tool are merged into one, the style.css file.
  Therefore, attach only the style.css file to the head section.
*/
@import url("preflight.css");
@import url("fonts.css");

:root {
    --primary-color: #4F80FF;
    --secondary-color: #000000;
    --tertiary-color: #000000;
    --background-color: #FFFFFF;
    --text-color: #121212;
    --tekio-font-family:
        "Tekio Grotesk", ui-sans-serif, system-ui, sans-serif;
    --default-font-family:
        "Softcore", ui-sans-serif, system-ui, sans-serif;
    --default-font-family-headings:
        "Softcore", ui-sans-serif, system-ui, sans-serif;
    --space: 1.2rem;
    --space-md: calc(var(--space) * 2);
    --gap: var(--space-md);
}

/*** Layout ***/
html {
    width: 100%;
    height: 100%;
    background-color: var(--background-color);
    scroll-behavior: smooth;
}

body {
    width: 100%;
    height: 100%;
    color: var(--text-color);
    font-weight: 400;
    font-size: clamp(1.067rem, 1.0072rem + 0.1473vw, 1.125rem);
    line-height: 1.5;
    letter-spacing: 0;
}

/* Mobile-first headings */
h1 {
    font-family: var(--default-font-family-headings);
    font-size: clamp(2.03rem, 0.9879rem + 2.5651vw, 3.04rem);
    line-height: 1.5;
    letter-spacing: 0;
}

h2 {
    font-family: var(--default-font-family-headings);
    font-size: clamp(1.8rem, 0.8714rem + 2.2857vw, 2.7rem);
    line-height: 1.5;
    letter-spacing: 0;
}

h3 {
    font-family: var(--default-font-family-headings);
    font-size: clamp(1.6rem, 0.7746rem + 2.0317vw, 2.4rem);
    line-height: 1.5;
    letter-spacing: 0;
}

h4 {
    font-family: var(--default-font-family-headings);
    font-size: clamp(1.42rem, 0.6771rem + 1.8286vw, 2.14rem);
    line-height: 1.5;
    letter-spacing: 0;
}

h5 {
    font-family: var(--default-font-family-headings);
    font-size: clamp(1.27rem, 0.62rem + 1.6vw, 1.9rem);
    line-height: 1.5;
    letter-spacing: 0;
}

h6 {
    font-family: var(--default-font-family-headings);
    font-size: clamp(1.13rem, 0.5522rem + 1.4222vw, 1.69rem);
    line-height: 1.5;
    letter-spacing: 0;
}

small {
    font-size: clamp(0.96rem, 0.9187rem + 0.1016vw, 1rem);
    line-height: 1.5;
    letter-spacing: 0;
}

tiny {
    font-size: clamp(0.85rem, 0.8087rem + 0.1016vw, 0.89rem);
    line-height: 1.5;
    letter-spacing: 0;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 74px;
    display: flex;
    align-items: center;
    padding: 0 1.6rem;
    margin: 0 auto;
    border-bottom: 1px solid var(--background-color);
    z-index: 1;

    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--background-color);
        z-index: 1;
    }

    nav.navigation {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: -100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transition:
            left 0s 500ms,
            transform 0s 500ms;
        z-index: 2;

        &::before {
            content: "";
            background-color: var(--background-color);
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            position: absolute;
            transform: translateX(-110%);
            transform-origin: 0 50%;
            transition:
                transform 500ms 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
            z-index: -100;
        }

        ul.menu {
            position: relative;
            text-align: center;

            li {
                display: block;
                position: relative;
                opacity: 0;
                transform: translateX(-1rem);
                text-transform: uppercase;
                transition:
                    opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1),
                    transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1);

                a {
                    color: var(--primary-color);
                    display: inline-block;
                    font-family: var(--tekio-font-family);
                    font-style: italic;
                    font-weight: bold;
                    font-size: clamp(2.25rem, 0.9603rem + 3.1746vw, 3.5rem);
                    line-height: 1;
                    overflow: hidden;
                    padding: 0.75rem 1.5rem 0.75rem;
                    position: relative;
                    text-decoration: none;
                }
            }
        }

        &[aria-hidden="false"] {
            left: 0;
            transition: transform 0s;

            &::before {
                transform: translateX(0);
                transition-delay: 0s;
            }

            ul.menu li {
                opacity: 1;
                transform: translateX(0);
                transition:
                    opacity 500ms cubic-bezier(0.215, 0.61, 0.355, 1),
                    transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1);

                &:nth-child(1) {
                    transition-delay: 125ms;
                }

                &:nth-child(2) {
                    transition-delay: 250ms;
                }

                &:nth-child(3) {
                    transition-delay: 375ms;
                }

                &:nth-child(4) {
                    transition-delay: 500ms;
                }

                &:nth-child(5) {
                    transition-delay: 625ms;
                }

                &:nth-child(6) {
                    transition-delay: 750ms;
                }

                &:nth-child(7) {
                    transition-delay: 875ms;
                }
            }
        }
    }

    .slogan {
        display: none;
        position: absolute;
        top: 50%;
        left: 1.6rem;
        color: var(--primary-color);
        font-size: 1.5rem;
        transition-delay: 450ms;
        transition-property: color;
        transform: translateY(-50%);
        z-index: 3;
    }

    .burger[aria-expanded="true"] ~ .slogan {
        transition-delay: 0s;
        transition-property: color;
        color: var(--primary-color);
    }

    #logo {
        position: absolute;
        top: 52%;
        left: 50%;
        font-family: var(--tekio-font-family);
        line-height: 1;
        font-size: 1.5rem;
        transition-delay: 300ms;
        transition-property: color;
        transform: translate(-50%, -50%);
        z-index: 3;
    }

    .burger[aria-expanded="true"] ~ #logo {
        transition-delay: 100ms;
        transition-property: color;
        color: var(--text-color);
    }

    .burger {
        position: absolute;
        top: 50%;
        right: 1.6rem;
        width: 24px;
        height: 24px;
        padding: 0;
        border: none;
        background-color: transparent;
        cursor: pointer;
        transform: translateY(-50%);
        z-index: 3;

        .burger__bar {
            width: 100%;
            transition:
                transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
                background-color 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
            height: 4px;
            background-color: var(--primary-color);
            position: absolute;
            right: 0;
            left: 0;
            margin: 0 auto;
            transform: rotate(0);

            &:nth-child(1) {
                top: 0;
            }

            &:nth-child(2) {
                top: 10px;
            }

            &:nth-child(3) {
                bottom: 0;
            }
        }

        &[aria-expanded="true"] {
            .burger__bar {
                background-color: var(--primary-color);
                transition-delay: 250ms, 0s;
                transition-property: background-color, transform;

                &:nth-child(1) {
                    top: 10px;
                    transform: rotate(-45deg);
                }

                &:nth-child(2) {
                    width: 0%;
                }

                &:nth-child(3) {
                    bottom: 10px;
                    transform: rotate(45deg);
                }
            }
        }
    }
}

main.homepage {
    --slide-size: 100%;
    --slide-spacing: 0rem;
    position: relative;
    width: 100%;
    height: 100dvh;

    section.people {
        width: 100%;
        height: 100%;
        padding: 74px 0 0 0;

        .people__showcase {
            width: 100%;
            height: 100%;
            overflow: hidden;
            padding: 0 0.25rem;

            .people__showcase__viewport {
                overflow: hidden;
                width: 100%;
                height: 100%;
            }

            .people__showcase__track {
                display: flex;
                height: 100%;
                touch-action: pan-y pinch-zoom;
                gap: 0;
            }

            .people__showcase__slide {
                flex: 0 0 calc(var(--slide-size) - var(--slide-spacing));
                min-width: 0%;
                padding: 0 var(--slide-spacing);
                border-style: solid;
                border-left-width: 1px;
                border-color: var(--background-color);
            }

            .people__showcase__slide--person {
                display: flex;
                height: 100%;
                position: relative;
                overflow: hidden;
            }

            .people__showcase__slide--person:hover img {
                transform: scale(1.05);
            }

            .people__showcase__slide--person img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.4s ease;
            }

            .people__showcase__slide--description {
                display: block;
                z-index: 1;
                position: absolute;
                width: 100%;
                background-color: var(--background-color);
                padding: 1.5rem;
                bottom: 0;
                left: 0;

                h2 {
                    font-family: var(--tekio-font-family);
                    font-weight: bold;
                    line-height: 1;
                    color: var(--primary-color);
                }

                .faculty {
                    display: block;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-top: 4px;
                    color: var(--primary-color);
                    font-size: 1.5rem;
                }
            }

            .people__showcase__btn {
                position: absolute;
                top: 50%;
                background: var(--background-color);
                cursor: pointer;
            }

            .people__showcase__btn--prev {
                left: 0;
                transform: translateY(-50%) rotate(180deg);
                padding: 4px 0px 4px 4px;
                --r: 20px;
                border-block: var(--r) solid #0000;
                border-radius: var(--r) 1px 1px var(--r)/calc(2*var(--r));
                mask: radial-gradient(var(--r) at 0 var(--r), #0000 98%, #000 101%) 100% calc(-1*var(--r))/var(--r) 100% repeat-y,
                    conic-gradient(#000 0 0) padding-box;
            }

            .people__showcase__btn--next {
                right: 0;
                transform: translateY(-50%);
                padding: 4px 0px 4px 4px;
                --r: 20px;
                border-block: var(--r) solid #0000;
                border-radius: var(--r) 1px 1px var(--r)/calc(2*var(--r));
                mask: radial-gradient(var(--r) at 0 var(--r), #0000 98%, #000 101%) 100% calc(-1*var(--r))/var(--r) 100% repeat-y,
                    conic-gradient(#000 0 0) padding-box;
            }
        }
    }
}

main.page {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 100%;
    margin-top: 74px;
    padding: 1.6rem;

    .page__entry {
        grid-column: 1 / -1;

        p {
            margin-bottom: 1rem;
        }
    }
}

main.person {
    width: 100%;
    height: 100dvh;
    overflow: auto;

    &::-webkit-scrollbar {
        display: none;
    }

    &[data-active-panel="author"] .control__bar button[data-panel="author"] {
        anchor-name: --tab-button;
        color: var(--text-color);
    }

    &[data-active-panel="degree"] .control__bar button[data-panel="degree"] {
        anchor-name: --tab-button;
        color: var(--text-color);
    }

    &[data-active-panel="degree2"] .control__bar button[data-panel="degree2"] {
        anchor-name: --tab-button;
        color: var(--text-color);
    }

    &[data-active-panel="minor"] .control__bar button[data-panel="minor"] {
        anchor-name: --tab-button;
        color: var(--text-color);
    }

    &[data-active-panel="minor2"] .control__bar button[data-panel="minor2"] {
        anchor-name: --tab-button;
        color: var(--text-color);
    }

    .control__bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 74px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: 100%;
        column-gap: 0;
        font-family: var(--tekio-font-family);
        font-size: clamp(1.067rem, 1.0072rem + 0.1473vw, 1.125rem);
        border-top: 1px solid var(--background-color);

        .tab__buttons {
            display: flex;
            width: 100%;
            grid-column: 1 / -1;
            flex-direction: row;
            justify-content: center;
            background-color: var(--background-color);

            &::after {
                content: "";
                position: absolute;
                position-anchor: --tab-button;
                border-bottom: 2px solid var(--text-color);
                transition: inset 250ms cubic-bezier(0.4, 0, 0.2, 1);
                inset:
                    calc(anchor(start) + 15px) anchor(end) calc(anchor(end) + 15px) anchor(start);
            }

            button {
                position: relative;
                cursor: pointer;
                color: var(--text-color);
                padding: 0;
                margin: 0 25px;
                z-index: 1;
            }
        }
    }

    div.panel__wrapper {
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    section.panel {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100%;
        scroll-snap-align: center;

        .panel__content {
            width: 100%;
            height: calc(100dvh - 146px);
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: 100%;
            column-gap: 0;
            row-gap: 0;

            &.author {
                grid-template-rows: max-content 100% max-content;
                overflow-x: hidden;
                overflow-y: scroll;
            }

            &.degree, &.minor {
                grid-template-rows: 50% max-content;
                overflow-x: hidden;
                overflow-y: scroll;
            }

            .bio {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                padding: 1.6rem 1.6rem 0;
                grid-column: 1 / -1;
                text-align: left;

                h1#full-name {
                    margin-bottom: 1rem;
                    color: var(--text-color);
                    font-family: var(--tekio-font-family);
                    font-weight: bold;
                    line-height: 1;
                }
            }

            .photo {
                position: relative;
                display: block;
                grid-column: 1 / -1;

                figure.picture {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    padding: 1.6rem;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        /* crop to fill */
                        display: block;
                    }
                }
            }

            blockquote {
                position: relative;
                display: block;
                padding: 0 1.6rem 1.6rem;
                grid-column: 1 / -1;
                overflow-y: scroll;
            }

            .details {
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                padding: 0 1.6rem 1.6rem;
                grid-column: 1 / -1;

                h2.title {
                    font-size: 1.5rem;
                    font-style: normal;
                    line-height: 1.5;
                    color: var(--text-color);
                }

                ul {
                    margin-top: 0.5rem;

                    li.supervisor {
                        position: relative;
                    }

                    li.studio {
                        position: relative;
                    }
                }
            }

            .outer-gallery__wrapper {
                display: block;
                padding: 1.6rem;
                grid-column: 1 / -1;
            }

            .gallery-wrapper {
                position: relative;
                width: 100%;
                height: 100%;

                .gallery {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;

                    .gallery__track {
                        display: flex;
                        width: 100%;
                        height: 100%;
                        transition: transform 0.9s ease;
                    }

                    .gallery__item {
                        min-width: 100%;
                        min-height: 100%;
                        margin: 0;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            /* crop to fill */
                            display: block;
                        }
                    }

                    .gallery__nav {
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        background: var(--background-color);
                        color: var(--primary-color);
                        border: none;
                        cursor: pointer;
                    }

                    .gallery__prev {
                        left: -1px;
                        padding: 4px 4px 4px 0px;
                        --r: 20px;
                        border-block: var(--r) solid #0000;
                        border-radius: 1px var(--r) var(--r) 1px/calc(2*var(--r));
                        mask: radial-gradient(var(--r) at 100% var(--r), #0000 98%, #000 101%) 0 calc(-1*var(--r))/var(--r) 100% repeat-y,
                            conic-gradient(#000 0 0) padding-box;
                    }

                    .gallery__next {
                        right: -1px;
                        padding: 4px 0px 4px 4px;
                        --r: 20px;
                        border-block: var(--r) solid #0000;
                        border-radius: var(--r) 1px 1px var(--r)/calc(2*var(--r));
                        mask: radial-gradient(var(--r) at 0 var(--r), #0000 98%, #000 101%) 100% calc(-1*var(--r))/var(--r) 100% repeat-y,
                            conic-gradient(#000 0 0) padding-box;
                    }
                }
            }
        }

        .profile {
            width: 100%;
            height: calc(100vh - 4.5rem);
            display: grid;
            padding: 1.5rem;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: min-content 1fr;
            column-gap: 1.5rem;
            row-gap: 1.5rem;

            >.name {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                grid-column: 1 / -1;
            }

            >.details {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                grid-column: 1 / 6;

                .extra {
                    display: flex;
                    flex-direction: column;
                    row-gap: 1.5rem;

                    .description div {
                        display: block;
                        color: var(--primary-color);
                        content-visibility: hidden;
                        opacity: 0;
                        transform: translateX(-1rem);
                        transition:
                            opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1) allow-discrete,
                            transform 250ms cubic-bezier(0.215, 0.61, 0.355, 1) allow-discrete;

                        h2.title {
                            line-height: 1.15;
                        }

                    }

                    .controls {
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        width: 100%;
                        margin: 0 auto;
                    }


                }
            }

            .description[data-active-tab="w1"] div[data-tab="w1"],
            .description[data-active-tab="w2"] div[data-tab="w2"],
            .description[data-active-tab="w3"] div[data-tab="w3"] {
                display: block;
                content-visibility: visible;
                opacity: 1;
                transform: translateX(0);
            }

            >.tabs {
                grid-column: 6 / -1;
                position: relative;
                width: 100%;
                height: 100%;
                padding: 0.6rem;
                background-color: var(--primary-color);
                border-radius: 0.5rem;

                .tab__content {
                    display: none;

                    figure.picture {
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        top: 0;
                        left: 0;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            /* crop to fill */
                            display: block;
                            border-radius: 0.5rem;
                        }
                    }
                }
            }

            .tabs[data-active-tab="w1"] .tab__content[data-tab="w1"],
            .tabs[data-active-tab="w2"] .tab__content[data-tab="w2"],
            .tabs[data-active-tab="w3"] .tab__content[data-tab="w3"] {
                position: relative;
                display: block;
                width: 100%;
                height: 100%;
            }

        }
    }
}

img {
    height: auto;
    max-width: 100%;
}

/* >= 650px (replaces max-width: 649px -> larger sizes) */
@media screen and (min-width: 650px) {
    main.homepage {
        --slide-size: 40%;
        --slide-spacing: 0.125rem;

        section.people {

            .people__showcase {

                .people__showcase__slide--description {
                    padding: 1.5rem 0;
                }
            }
        }
    }

    main.person {

        section.panel {

            .panel__content {

                &.author, &.degree, &.minor {
                    grid-template-rows: 100%;
                    overflow: hidden;
                }

                .bio {
                    grid-column: 1 / 5;
                    padding: 0 1.6rem 0 1.6rem;
                }

                .photo {
                    border-style: solid;
                    border-left-width: 1px;
                    border-right-width: 1px;
                    border-color: var(--background-color);
                    grid-column: 5 / 9;

                    figure.picture {
                        padding: 0;
                    }
                }

                blockquote {
                    grid-column: 9 / -1;
                    padding: 0 1.6rem 0 1.6rem;
                }

                .details {
                    grid-column: 9 / -1;
                    padding: 0 1.6rem 0 0;
                }

                .outer-gallery__wrapper {
                    grid-column: 1 / 9;
                    border-style: solid;
                    border-right-width: 1px;
                    border-color: var(--background-color);
                    padding: 0 1.6rem 0 1.6rem;
                }
            }
        }
    }
}

/* >= 1024px (replaces max-width: 1023px) */
@media screen and (min-width: 1024px) {
    header {

        .slogan {
            display: inline;
        }
    }
    main.page {
        grid-template-columns: repeat(12, 1fr);

        .page__entry {
            grid-column: 3 / 11;
        }
    }
}

/* >= 1280px (replaces max-width: 1279px and default large styles) */
@media screen and (min-width: 1280px) {}

@media screen and (min-width: 1440px) {}

/*** CSS classes generated by Publii; a complete list of all CSS classes can be found at https://getpublii.com/dev/default-publii-classes-for-using-with-css/ ***/

/* Text alignment */
.align-left {
    text-align: left;
}

.align-right {
    text-align: right;
}

.align-center {
    text-align: center;
}

.align-justify {
    text-align: justify;
}

/* Post images */
.post__image--left {}

.post__image25pxight {}

.post__image--center {}

.post__image--wide {}

.post__image--full {}

/* Post video*/
.post__video {}

/* Post video*/
.post__iframe {}

/* Table of content*/
.post__toc {}

/* Separator - option represented by the <hr> element, available by all editors; additionally the block editor generates three classes for <hr> element to have a different look */
hr {}

.separator--dot {}

.separator--dots {}

.separator--long-line {}