html {
    container-type: inline-size;
    max-width: 1440px;
    margin: 0 auto;

    overflow-x: hidden;

    background-color: var(--light);
    scroll-behavior: smooth;
}

.website_base {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    align-items: stretch;

    padding: var(--space-sm);
    margin: 0em;

    color: var(--dark);
    background-color: var(--white);
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    font-family: 'Poppins', sans-serif;
    line-height: normal;
    
    #mobile-header { display: none; }
    #desktop-header { display: block; }

    @container (max-width: 850px) {
        #desktop-header { display: none; }
        #mobile-header { display: block; }
    }

    @container (max-width: 450px) {
        padding: 0;
    }

    > header {
        container-type: inline-size;

        z-index: 2;
        margin-bottom: -80px;
        position: sticky;
        top: 0;

        width: 100%;
        text-align: center;
        filter: drop-shadow(2px 5px 5px rgba(0,0,0,0.2));

        > main {
            height: 80px;
            display: flex;
            align-items: center;

            color: var(--white);
            font-size: var(--size-sm);
            border-radius: var(--curve-md);

            transition-duration: var(--pace-normal);

            svg {
                fill: var(--white);
                transition-duration: var(--pace-normal);
            }
            
            > a {
                padding: 0 var(--space-xs);
            }
            > nav {
                flex: 1;
                display: flex;
                justify-content: center;
                gap: var(--space-md);

                white-space: nowrap;
            }
            > section {
                display: flex;
                gap: var(--space-xs);
                
                padding: 0 var(--space-xs);
            }
            
            &.scrolled {
                color: var(--low);
                background-color: var(--white);
                border-radius: 0px 0px var(--curve-md) var(--curve-md);

                svg { fill: var(--low); }
            }

            &.scrolled.language {
                .languages {
                    z-index: 1;
                }
                .languages::before {
                    content: "";
                    display: block;           /* or inline-block depending on layout */
                    position: absolute;       /* allows layering */
                    top: 0px;
                    right: 28px;
                    width: 40px;
                    height: 180px;
                    background: var(--white); /* example background */
                    border-radius: var(--curve-sm);
                    z-index: -1;   
                }
            }

            @media screen and (max-width: 1000px) {
                &.scrolled.language {
                    .languages {
                        z-index: 1;
                    }
                    .languages::before {
                        content: "";
                        display: block;           /* or inline-block depending on layout */
                        position: absolute;       /* allows layering */
                        top: 0px;
                        right: 20px;
                        width: 35px;
                        height: 180px;
                        background: var(--white); /* example background */
                        border-radius: var(--curve-sm);
                        z-index: -1;   
                    }
                }
            }
        }

        > footer {
            z-index: -2;
            position: absolute;  
            right: 50%;
            
            width: 500px;
            
            display: flex;
            
            font-size: var(--size-sm);
            border: 2px solid var(--white);
            border-radius: 0px 0px var(--curve-md) var(--curve-md);

            transform: translate(50%, 0%);
            transition-duration: var(--pace-normal);
            
            background-color: var(--white);
            overflow: hidden;

            svg { fill: var(--low); }

            > main {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: var(--space-xs);
                
                padding: var(--space-md);

                > label {
                    flex: 1;
                    text-align: start;
                    font-weight: 700;
                }

                > section {
                    display: flex;
                    align-items: center;

                    > span, a { 
                        color: var(--dark); 
                        text-align: start; 
                        flex: 1; 
                    }
                }
            }

            > img {
                width: 200px;
                object-fit: cover;
            }
        }

        @container (max-width: 850px) {
            > footer { 
                width: 100%; 
                margin-top: -15px;

                > main {
                    align-items: flex-start;
                    font-size: var(--size-md);
                    font-weight: 600;
                    color: var(--low);
                    > div {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;

                        font-weight: 400;
                        color: var(--dark);
                    }
                }
            }
        }
    }

    > main { 
        container-type: inline-size;
        z-index: 0;

        flex: 1;
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        scroll-behavior: smooth;
    }

    > footer { 
        container-type: inline-size;
        z-index: 1;
        
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-md);

        margin-top: calc(var(--space-xl) + var(--space-xl));
        padding: var(--space-md);
        border-radius: var(--curve-md);

        font-weight: 200;
        color: var(--white);
        background-color: var(--low);

        > main {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: var(--space-md);

            > header {
                display: flex;
                flex: 1;
                flex-direction: column;
                gap: var(--space-md);

                > section {
                    display: flex;
                    flex-direction: column;
                }
            }

            > nav {
                display: flex;
                flex: 1;
                justify-content: space-around;
                gap: var(--space-sm);

                > section {
                    display: flex;
                    flex-direction: column;
                    gap: var(--space-xs);

                    white-space: nowrap;
                }
            }
        }

        > footer {
            container-type: inline-size;
            display: flex;
            flex-direction: column;
            
            border-top: 1px solid var(--primary); 
            border-color: var(--white);

            > header {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                padding: var(--space-xs) 0em;
                white-space: nowrap;
            }

            > main {
                font-size: var(--size-xs);
            }
        }
    }
}

.icon {
    cursor: pointer;
    transition-duration: var(--pace-fast);
    &:hover {
        color: var(--primary);
    }

    &.circle {
        width: 28px;
        height: 28px;

        position: relative;
        user-select: none;
        border-radius: 100%;
        overflow: hidden;

        i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }
    }
}

.link {
    text-decoration: none;
    cursor: pointer;

    i { text-align: center; }

    &:hover {
        text-decoration-line: underline;
        text-decoration-color: inherit;
        text-decoration-thickness: 1px;
        &:is(i) { text-decoration: none; }        

        &.grow-lg { transform: scale(1.18); }
        &.grow-md { transform: scale(1.1); }
        &.grow-sm { transform: scale(1.02); }
    }
}

.hero {
    height: clamp(650px, 60vw, 800px);
    position: relative;
    border-radius: 20px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: flex-start;

    > header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);

        padding: var(--space-lg);
        color: var(--white);


        > label {
            display: flex;
            flex-direction: column;

            line-height: 1.2;
            font-family: 'Barlow';
            font-size: var(--size-xl);
            font-weight: 600;
            text-shadow: 0px 4px 10px #000000;
        }
    }

    @container (max-width: 850px) {
        height: clamp(450px, 60vw, 600px);
    }
}

.hero-card {
    min-width: 200px;
    height: 350px;
    position: relative;
    transition-duration: var(--pace-normal);

    display: flex;
    flex-direction: column;

    border-radius: 20px;
    border: 2px solid transparent;
    overflow: hidden;

    &:hover {
        background: var(--white);
        border: 2px solid var(--light);

        > header { flex: 0; }

        > main { 
            visibility: visible; 
            opacity: 1; 
            max-height: 100%;
            padding: var(--space-sm) var(--space-md); 
        }
    }

    > header {
        transition: var(--pace-slow);

        flex: 1;
        display: flex;
        flex-direction: column;
        align-content: end;
        justify-content: end;
        gap: var(--space-sm);

        padding: var(--space-sm) var(--space-md);
        color: var(--low);

        font-size: var(--size-sm); 
        font-weight: 700;

        > i {
            font-size: calc(var(--size-sm) + var(--size-sm));
        }
    }

    > main {
        transition: var(--pace-normal);

        max-height: 0px;
        visibility: hidden;
        opacity: 0;

        padding: 0 var(--space-md);
    }

    @container (max-width: 800px) {
        min-width: 100%;
        height: auto;
        background: var(--white);
        border: 2px solid var(--light);

        > header { flex: 0; }

        > main { 
            visibility: visible; 
            opacity: 1; 
            max-height: 100%;
            padding: var(--space-sm) var(--space-md); 
        }
    }
}

.card {
    display: block;
    width: 100%;
    min-height: 350px;

    overflow: hidden;
    padding: var(--space-sm);

    border-radius: 20px;
    border: 2px solid var(--light);

    @container (max-width: 800px) {
        min-height: auto;
        > header {
            > a {
                height: 150px !important;
            }
        } 
    }
}

.dropdown {   
    overflow: hidden;
    padding: var(--space-sm);

    border-radius: 20px;
    border: 1px solid var(--dark);
    transition-duration: var(--pace-normal);
    * { transition-duration: var(--pace-normal); }

    > main > :first-child { padding-top: 10px; }
}

.container {
    container-type: inline-size;

    display: grid;
    grid-template-areas: 
        "header     header      aside"
        "nav        main        aside"
        "nav        footer      aside";
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: min-content 1fr 450px;
    column-gap: var(--space-md);

    border-radius: 20px;

    &:not(:has(> header)):not(:has(> footer)) {
        grid-template-areas: 
            "nav        main        aside";
        grid-template-rows: 1fr;

        &:not(:has(> aside)) {
            grid-template-areas: 
                "nav        main";
            grid-template-columns: min-content 1fr;
        }

        &:not(:has(> nav)) {
            grid-template-areas: 
                "main        aside";
            grid-template-columns: 1fr 450px;
        }
    }

    &:not(:has(> header)) {
        grid-template-areas: 
            "nav        main        aside"
            "nav        footer      aside";
        grid-template-rows: 1fr 1fr;

        &:not(:has(> aside)) {
            grid-template-areas: 
                "nav        main"
                "nav        footer";
            grid-template-columns: min-content 1fr;

            &:not(:has(> nav)) {
                grid-template-areas: 
                    "main"
                    "footer";
                grid-template-columns: 1fr;
            }
        }
    }

    &:not(:has(> footer)) {
        grid-template-areas: 
            "header     header      aside"
            "nav        main        aside";
        grid-template-rows: 1fr 1fr;

        &:not(:has(> aside)) {
            grid-template-areas: 
                "nav        header"
                "nav        main";
            grid-template-columns: min-content 1fr;

            &:not(:has(> nav)) {
                grid-template-areas: 
                    "header"
                    "main";
                grid-template-columns: 1fr;
            }
        }
    }

    @container (max-width: 850px) {
        grid-template-columns: min-content 1fr 350px;
        &:not(:has(> header)):not(:has(> footer)) {
            &:not(:has(> aside)) {
                grid-template-columns: min-content 1fr;
            }
            &:not(:has(> nav)) {
                grid-template-columns: 1fr 350px;
            }
        }
        &:not(:has(> header)) {
            &:not(:has(> aside)) {
                grid-template-columns: min-content 1fr;
                &:not(:has(> nav)) {
                    grid-template-columns: 1fr;
                }
            }
        }
        &:not(:has(> footer)) {
            &:not(:has(> aside)) {
                grid-template-columns: min-content 1fr;
                &:not(:has(> nav)) {
                    grid-template-columns: 1fr;
                }
            }
        }
    }

    @container (max-width: 750px) {
        grid-template-columns: min-content 1fr 300px;
        &:not(:has(> header)):not(:has(> footer)) {
            &:not(:has(> aside)) {
                grid-template-columns: min-content 1fr;
            }
            &:not(:has(> nav)) {
                grid-template-columns: 1fr 300px;
            }
        }
        &:not(:has(> header)) {
            &:not(:has(> aside)) {
                grid-template-columns: min-content 1fr;
                &:not(:has(> nav)) {
                    grid-template-columns: 1fr;
                }
            }
        }
        &:not(:has(> footer)) {
            &:not(:has(> aside)) {
                grid-template-columns: min-content 1fr;
                &:not(:has(> nav)) {
                    grid-template-columns: 1fr;
                }
            }
        }
    }

    @container (max-width: 650px) {
        grid-template-areas: 
            "header     header"
            "nav        main"
            "nav        footer"
            "aside      aside";
        grid-template-rows: min-content 1fr min-content 450px;
        grid-template-columns: min-content 1fr;

        &:not(:has(> header)):not(:has(> footer)) {
            grid-template-areas: 
                "nav"
                "main"
                "aside";
            grid-template-rows: min-content 1fr 450px;
            grid-template-columns: 1fr;
            
            > aside { margin-top: var(--size-sm); }

            &:not(:has(> aside)) {
                grid-template-areas: 
                    "nav"
                    "main";
                grid-template-rows: min-content 450px;
                grid-template-columns: 1fr;
            }

            &:not(:has(> nav)) {
                grid-template-areas: 
                    "main"
                    "aside";
                grid-template-rows: 1fr 450px;
                grid-template-columns: 1fr;
            }
        }

        &:not(:has(> header)) {
            grid-template-areas: 
                "nav        main"
                "nav        footer"
                "aside      aside";
            grid-template-rows: 1fr min-content 450px;
            grid-template-columns: min-content 1fr;

            &:not(:has(> aside)) {
                grid-template-areas: 
                    "nav        main"
                    "nav        footer";
                grid-template-rows: 1fr min-content;
                grid-template-columns: min-content 1fr;

                &:not(:has(> nav)) {
                    grid-template-areas: 
                        "main"
                        "footer";
                    grid-template-rows: 1fr min-content;
                    grid-template-columns: 1fr;
                }
            }
        }

        &:not(:has(> footer)) {
            grid-template-areas: 
                "header     header"
                "nav        main"
                "aside      aside";
            grid-template-rows: min-content 1fr 450px;
            grid-template-columns: min-content 1fr;

            &:not(:has(> aside)) {
                grid-template-areas: 
                    "nav        header"
                    "nav        main";
                grid-template-rows: min-content 1fr;
                grid-template-columns: min-content 1fr;

                &:not(:has(> nav)) {
                    grid-template-areas: 
                        "header"
                        "main";
                    grid-template-rows: min-content 1fr;
                    grid-template-columns: 1fr;
                }
            }
        }
    }

    > header {
        grid-area: header;
        container-type: inline-size;
    }

    > main {
        grid-area: main;
        container-type: inline-size;
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);

        padding: var(--space-lg);
        &.floating { padding: 0 var(--space-lg); }
        border-radius: 20px;

        /* > label {} */

        > header {
            display: flex;
            flex-direction: column;

            line-height: 1.2;
            font-family: 'Barlow';
            font-size: var(--size-lg);
            font-weight: 600;
        }

        > main {
            flex: 1;
            font-size: var(--size-sm);
        }
    }

    > footer {
        grid-area: footer;
        container-type: inline-size;
    }

    > aside {
        grid-area: aside;
        container-type: inline-size;
        max-height: 520px;
        &.lg { max-height: 780px; }
        > img {
            width: 100%;
            height: 100%;

            object-fit: cover;
            object-position: bottom;
            border-radius: 20px;
        }
    }

    > nav {
        grid-area: nav;
        container-type: inline-size;
    }
}

@property --count_value {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

.counter {
    padding: 0 var(--space-sm);
    border-left: 2px solid var(--primary);

    &.lg {
        border-left: 4px solid var(--primary);

        > div { 
            margin-bottom: calc(var(--space-xs) / 2);

            color: var(--low); 
            font-size: var(--size-xl); 
        }
        > span { font-size: calc(var(--size-md)); }
    }

    > .count { display: block; }
    > .default { display: none; }

    &.count {
        > .count {
            --count_value: attr(data-count-value type(<integer>))
        }
    }

    @container (max-width: 750px) { 
        > .count { display: none; }
        > .default { display: block; }
    }

    > .count {
        transition: --count_value 3s;
        counter-set: count_value var(--count_value);
        &::before {
            content: counter(count_value);
        }
    }

    > div {
        font-family: 'Barlow';
        font-size: calc(var(--size-lg) - var(--size-xs));
        font-weight: 700;
    }

    > span {
        font-size: var(--size-sm);
        font-weight: 400;
    }
}

.timeline {
    width: none;
    height: none;
    overflow: none;

    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;

    counter-reset: item;
    
    &::before {
        content: "";

        position: absolute;
        top: 0;
        left: 1.1em;

        width: 4px;
        height: 100%;
        border-radius: 2.0em;

        background: var(--low);
    }

    > * { padding-left: 4em; }

    > ul { padding-left: 5em; margin-bottom: 2em; list-style-type: disc; }
    > ul:last-child {
        margin-bottom: 0;
    }

    > li {
        position: relative;
        margin: 0 0 1em 0;

        color: var(--low);
        font-size: var(--size-sm);
        font-weight: 700;
        
        &::before {
            counter-increment: item;
            content: counter(item);

            position: absolute;
            left: 0;
            top: -0.3em;

            width: 2em;
            height: 2em;
            
            font-weight: 700;
            color: var(--white);
            background-color: var(--low);

            border-radius: 100%;

            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    @container (max-width: 450px) { 
        &::before {
            left: 0.8em;
            width: 4px;
        }

        > * { padding-left: 2em; }
        > ul { padding-left: 2em; margin-bottom: 1em; }
        > li {
            margin: 0 0 1em 0;
            
            &::before {
                left: 0;
                top: 0;

                width: 1.5em;
                height: 1.5em;
            }
        }
    }
}

.alert {
    position: fixed;
    right: 20px;
    
    z-index: 4;
    width: auto;
    height: auto;
    
    padding: var(--size-md);

    color: var(--black);
    background: var(--white);
    filter: drop-shadow(2px 5px 5px rgba(0,0,0,0.2));
    border-radius: var(--curve-md);

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);

    > span {
        font-size: var(--size-md);
    }
}

table {
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;

    @container (max-width: 550px) {
        display: block;
    }

    > thead {
        th { 
            color: var(--dark);
            padding: 0 var(--space-xs);
            font-weight: 700;
            text-align: start;
            border-bottom: 2px solid var(--dark); 
            &.center { text-align: center; }
        }
    }

    > tbody {
        td {
            padding: var(--space-xs);
            text-align: start;
            &.center { text-align: center; }
        }
    }

    > tfoot {
        th { 
            color: var(--dark);
            padding: 0 var(--space-xs);
            font-weight: 700;
            text-align: start;
            border-top: 2px solid var(--dark); 
            &.center { text-align: center; }
        }
    }
}