@import "_fonts.css";
@import "_resets.css";

/* Definition of base styles. */
:root {
    /* colors */
    --color-white: #ffffff;
    --color-bg: #F4F5FB;
    --color-black: #000000;
    --color-text: #171719;
    --color-accent-primary: #038d29;
    --color-accent-secondary: #88ec29;
    /*gaps & sizes*/
    --width-page: 1416px; /* 1224px + (2 * 96px) */
    --width-text: 600px;
    --gap-page: 96px;
    --gap-module: 116px;
    --height-header: 96px;
    --height-hero-front: 620px;
    /* fonts */
    --font-h1: normal 64px/120% 'BBH Bartle', serif;
    --font-h2: normal 56px/120% 'BBH Bartle', serif;
    --font-h3: normal 48px/120% 'BBH Bartle', serif;
    --font-h4: 400 48px/120% 'STIX Two Text', sans-serif;
    --font-h5: 400 24px/120% 'STIX Two Text', sans-serif;
    --font-preline: 400 14px/120% 'STIX Two Text', sans-serif;
    --font-subline: 400 24px/120% 'STIX Two Text', sans-serif;
    --font-paragraph: 400 16px/140% 'STIX Two Text', sans-serif;
    --font-nav-header: 400 20px/120% 'STIX Two Text', sans-serif;
    --font-nav-footer: 400 16px/120% 'STIX Two Text', sans-serif;
    --font-tag: 400 12px/120% 'BBH Bartle', serif;
    --font-button: 400 12px/120% 'BBH Bartle', serif;
}

/* Styling of all available layout components. */
[data-layout="header"] {
    height: var(--height-header);
    width: 100%;
    background: var(--color-accent-secondary);
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 24px;
    padding-right: 48px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    .logo-container {
        height: 100%;
        padding: 16px 0;
        .logo {
            height: 100%;
            width: auto;
        }
    }
    .nav {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 48px;
        list-style: none;
        .nav-item {
            color: var(--color-white);
            font: var(--font-nav-header);
            a {
                color: var(--color-accent-primary);
                text-decoration: none;
                font-weight: bold;
            }
            &:hover {
                text-underline-offset: 4px;
                text-decoration: underline 0.8px;
            }
        }
    }
}
[data-layout="footer"] {
    width: 100%;
    background: var(--color-accent-secondary);
    padding-top: var(--gap-page);
    padding-bottom: var(--gap-page);
    .footer-container {
        position: relative;
        .logo {
            width: 100%;
        }
        .container {
            position: absolute;
            bottom: 0;
            right: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 12px;
            .copyright {
                color: var(--color-white);
                font: var(--font-nav-footer);
            }
            .socials {
                list-style: none;
                display: flex;
                gap: 12px;
                .social-item img {
                    width: 32px;
                    height: 32px;
                }
            }
            .nav {
                list-style: none;
                display: flex;
                gap: 12px;
                .nav-item {
                    color: var(--color-white);
                    font: var(--font-nav-footer);
                    a {
                        color: inherit;
                        text-decoration: none;
                    }
                    &:hover {
                        text-underline-offset: 4px;
                        text-decoration: underline 0.8px;
                    }
                }
            }
        }
    }
}

/* Styling of all available page components. */
[data-page] {
    width: 100%;
    height: 100%;
}
[data-page="project"] {
    & > .hero {
        background-color: var(--color-accent-primary);
        padding: 170px 0 80px 0;
        & > .container {
            display: flex;
            flex-direction: column;
            gap: 12px;
            & > .preline {
                color: var(--color-white);
                font-weight: var(--font-preline);
                :not(:last-child)::after {
                    content: ', ';
                }
            }
            & > .type {
                color: var(--color-white);
                font: var(--font-h1);
            }
            & > .title {
                color: var(--color-white);
                font: var(--font-h4);
                max-width: 850px;
            }
        }
    }
    & > .content {
        background: var(--color-bg);
        background: linear-gradient(180deg,var(--color-accent-primary) 0%, var(--color-accent-primary) 52px, var(--color-bg) 52px, var(--color-bg) 100%);
        padding: 0 0 var(--gap-module) 0;
        & > .container {
            display: flex;
            flex-direction: column;
            gap: 64px;
            & > .image {
                width: 100%;
                height: 100%;
                max-height: 600px;
                object-fit: cover;
                object-position: center;
            }
            & > .lead {
                color: var(--color-text);
                font: var(--font-subline);
                max-width: var(--width-text);
            }
            & > .text {
                color: var(--color-text);
                font: var(--font-paragraph);
                max-width: var(--width-text);
                img {
                    width: 100%;
                    height: auto;
                    margin: 16px 0;
                    transform: translateX(15%);
                }
            }
        }
    }
}

/* Styling of all available module components. */
[data-module] {
    overflow: clip;
    position: relative;
    width: 100%;
}
[data-module="hero-front"] {
    height: var(--height-hero-front);
    background-color: var(--color-accent-primary);
    & > .image {
        position: absolute;
        top: 0;
        right: 0;
        width: 60%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    & > .content {
        position: relative;
        z-index: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
        justify-content: center;
        & > .title {
            color: var(--color-white);
            font: var(--font-h1);
            width: min-content;
        }
        & > .subline {
            color: var(--color-white);
            font: var(--font-subline);
            max-width: 320px;
        }
    }
}
[data-module="hero-default"] {
    background-color: var(--color-accent-primary);
    padding: 170px 0 80px 0;
    & > .content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        & > .title {
            color: var(--color-white);
            font: var(--font-h3);
            width: min-content;
        }
        & > .subline {
            color: var(--color-white);
            font: var(--font-subline);
            max-width: 320px;
        }
    }
}
[data-module="text"] {
    padding: var(--gap-module) 0;
    background-color: var(--color-bg);
    & > .container {
        display: flex;
        flex-direction: column;
        gap: 52px;
        & > .headline {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 24px;
            & > .title {
                color: var(--color-text);
                font: var(--font-h2);
                width: min-content;
                text-align: right;
            }
        }
        & > .text {
            font: var(--font-paragraph);
            color: var(--color-text);
            max-width: var(--width-text);
        }
    }
}
[data-module="images"] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    & > .image {
        width: 100%;
        height: 100%;
        max-height: 760px;
        object-fit: cover;
        object-position: center;
    }
}
[data-module="overview-projects"] {
    padding: var(--gap-module) 0;
    background-color: var(--color-accent-primary);
    & > .container {
        display: flex;
        flex-direction: column;
        gap: 72px;
        & > .title {
            color: var(--color-white);
            font: var(--font-h2);
            width: min-content;
        }
        & > .projects {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 24px;
        }
    }
}

/* Styling of all available teaser components. */
[data-teaser="project"] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-decoration: none;
    color: inherit;
    & > .graphic {
        position: relative;
        & > .image {
            width: 100%;
            height: 100%;
            aspect-ratio: 391 / 263;
            object-fit: cover;
            object-position: center;
        }
        & > .tag {
            position: absolute;
            top: 0;
            left: 24px;
            :not(:last-child)::after {
                content: ', ';
            }
        }
    }
    & > .content {
        display: flex;
        flex-direction: column;
        gap: 12px;
        & > .title {
            color: var(--color-white);
            font: var(--font-h5);
        }
        & > .description {
            color: var(--color-white);
            font: var(--font-paragraph);
        }
    }
}

/* Styling of utility classes, can be added anywhere in the project. */
[data-utility="wrap-page"] {
    max-width: var(--width-page);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--gap-page);
}
[data-utility="tag"] {
    background-color: var(--color-accent-secondary);
    height: 32px;
    padding: 0 24px;
    font: var(--font-tag);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
[data-utility="wysiwyg"] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    strong {
        font-weight: bold;
    }
    a {
        color: var(--color-text);
        text-decoration: underline;
    }
    ul, ol {
        padding-left: 24px;
    }
}

/*BREAKPOINT: 3xl*/
@media (max-width: 1514px) {

}

/*BREAKPOINT: xl*/
@media (max-width: 1280px) {
    :root {
        /*gaps & sizes*/
        --gap-page: 80px;
        --gap-module: 100px;
        /* fonts */
        --font-h1: normal 60px/120% 'BBH Bartle', serif;
        --font-h2: normal 52px/120% 'BBH Bartle', serif;
        --font-h3: normal 44px/120% 'BBH Bartle', serif;
        --font-h4: 400 44px/120% 'STIX Two Text', sans-serif;
        --font-h5: 400 22px/120% 'STIX Two Text', sans-serif;
    }
}

/*BREAKPOINT: lg*/
@media (max-width: 1024px) {
    :root {
        /*gaps & sizes*/
        --gap-page: 48px;
        --gap-module: 72px;
        --height-header: 72px;
        /* fonts */
        --font-h1: normal 56px/120% 'BBH Bartle', serif;
        --font-h2: normal 48px/120% 'BBH Bartle', serif;
        --font-h3: normal 40px/120% 'BBH Bartle', serif;
        --font-h4: 400 32px/120% 'STIX Two Text', sans-serif;
        --font-subline: 400 22px/120% 'STIX Two Text', sans-serif;
        --font-nav-header: 400 18px/120% 'STIX Two Text', sans-serif;
    }
    [data-layout="header"] {
        padding-right: 24px;
        .nav {
            gap: 24px;
        }
    }
    [data-module="hero-front"] {
        & > .image {
            width: 50%;
        }
    }
    [data-module="text"] {
        & > .container {
            gap: 48px;
            & > .headline {
                align-items: flex-start;
                gap: 24px;
                & > .title {
                    text-align: left;
                }
            }
        }
    }
    [data-module="overview-projects"] {
        & > .container {
            gap: 48px;
            & > .projects {
                grid-template-columns: repeat(1, minmax(0, 1fr));
            }
        }
    }
    [data-teaser="project"] {
        flex-direction: row;
        & > .graphic {
            flex-shrink: 0;
            width: 320px;
        }
        & > .content {
            justify-content: center;
        }
    }
}

/*BREAKPOINT: md*/
@media (max-width: 768px) {
    :root {
        /*gaps & sizes*/
        --gap-page: 32px;
        --gap-module: 54px;
        --height-header: 64px;
        --height-hero-front: 560px;
        /* fonts */
        --font-h1: normal 48px/120% 'BBH Bartle', serif;
        --font-h2: normal 32px/120% 'BBH Bartle', serif;
        --font-h3: normal 32px/120% 'BBH Bartle', serif;
        --font-h4: 400 28px/120% 'STIX Two Text', sans-serif;
        --font-h5: 400 20px/120% 'STIX Two Text', sans-serif;
        --font-subline: 400 20px/120% 'STIX Two Text', sans-serif;
        --font-nav-header: 400 16px/120% 'STIX Two Text', sans-serif;
    }
    [data-page="project"] {
        & > .content {
            & > .container {
                gap: 32px;
                & > .image {
                    max-height: 400px;
                }
                & > .text {
                    img {
                        margin: 8px 0;
                        transform: translateX(0);
                    }
                }
            }
        }
    }
    [data-module="hero-front"] {
        height: auto;
        display: flex;
        flex-direction: column-reverse;
        & > .image {
            position: relative;
            top: unset;
            right: unset;
            width: 100%;
            aspect-ratio: 3 / 2;
        }
        & > .content {
            padding-top: 80px;
            padding-bottom: 48px;
        }
    }
    [data-module="overview-projects"] {
        & > .container {
            gap: 32px;
        }
    }
}

/*BREAKPOINT: sm*/
@media (max-width: 640px) {
    :root {
        /*gaps & sizes*/
        --gap-module: 48px;
        /* fonts */
        --font-h1: normal 32px/120% 'BBH Bartle', serif;
    }
    [data-layout="footer"] {
        .footer-container {
            .container {
                position: relative;
                padding-top: 32px;
            }
        }
    }
    [data-module="hero-front"] {
        & > .image {
            aspect-ratio: 1 / 1;
        }
    }
    [data-module="text"] {
        & > .container {
            gap: 40px;
            & > .headline {
                align-items: flex-start;
                gap: 16px;
            }
        }
    }
    [data-teaser="project"] {
        flex-direction: column;
        gap: 16px;
        & > .graphic {
            flex-shrink: 0;
            width: unset;
        }
        & > .content {
            justify-content: flex-start;
        }
    }
}

/*BREAKPOINT: xs*/
@media (max-width: 425px) {
    :root {
        /*gaps & sizes*/
        --gap-page: 24px;
        --height-header: 52px;
        /* fonts */
        --font-h1: normal 26px/120% 'BBH Bartle', serif;
        --font-h2: normal 26px/120% 'BBH Bartle', serif;
        --font-h3: normal 26px/120% 'BBH Bartle', serif;
    }
    [data-layout="header"] {
        padding-left: 12px;
        .logo-container {
            padding: 12px 0;
        }
        .nav {
            gap: 16px;
        }
    }
    [data-layout="footer"] {
        .footer-container {
            .container {
                padding-top: 24px;
            }
        }
    }
    [data-module="images"] {
        display: flex;
        flex-direction: column;
        & > .image {
            max-height: 250px;
            object-fit: cover;
            object-position: center;
        }
    }
}

/*BREAKPOINT: xxs*/
@media (max-width: 400px) {

}