/*  LAYOUT: DEFAULT 
//////////////////////////////////////////////////////////////////////////////*/

@layer layout {
    .section {
        display: grid;
        grid-template-columns: 100%;
        grid-auto-rows: min-content;
        column-gap: var(--size-gap);
    }

    .section--footer {
        gap: var(--size-gap);
    }

    /*  LAYOUT: MOBILE ///////////////////////////////////////////////////////*/

    @media (max-width: 640px) {
        .page {
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: min-content;
            column-gap: var(--size-gap);
            min-height: 100dvh;
        }
        .section--header {
            padding: var(--spacing-m) var(--spacing-m) var(--spacing-s) var(--spacing-m);
            row-gap: var(--spacing-m);
        }
        .section--header .component--searchbar {
            display: none;
        }
        .area--main {
            display: flex;
            flex-direction: column;
        }
        .area--main > * {
            order: 2;
        }
        .area--main > * .nav-sidebar {
            order: 1;
        }
        .section--footer {
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            padding: var(--spacing-m);
        }
        .section--footer .component--assignment {
            grid-column: 1 /-1;
        }
    }

    /*  LAYOUT: TABLET & MOBILE /////////////////////////////////////////////*/

    @media (max-width: 980px) {
        .area--sidebar {
            margin-bottom: var(--spacing-m);
        }
    }

    /*  LAYOUT: TABLET ///////////////////////////////////////////////////////*/

    @media (min-width: 640px) and (max-width: 980px) {
        .page {
            display: grid;
            grid-template-columns: 100%;
            grid-template-rows: min-content;
            column-gap: var(--size-gap);
            min-height: 100dvh;
        }
        .section--header {
            grid-template-columns: max-content 1fr;
            padding: var(--spacing-m) var(--spacing-m) var(--spacing-l) var(--spacing-m);
            row-gap: var(--spacing-l);
        }

        .section--header .component--searchbar {
            display: block;
            grid-column: 2;
            place-self: end;
            margin-bottom: var(--spacing-xs);
        }
        .section--header .component--nav-main {
            grid-column: 1 / -1;
            grid-row: 2;
        }
        .section--header .component--nav-mobile-sub {
            display: none;
        }
        .area--main,
        .area--hero {
            display: flex;
            flex-direction: column;
            sgap: var(--size-gap);
        }

        .section--footer {
            padding: var(--spacing-m);
            grid-template-columns: 1fr 1fr min-content;
        }
        .section--footer .component--assignment {
            grid-column: 1 /-1;
        }
    }

    /*  LAYOUT: DESKTOP //////////////////////////////////////////////////////*/

    @media (min-width: 980px) {
        .page {
            display: grid;
            grid-template-columns: 1fr repeat(12, var(--size-column)) 1fr;
            grid-template-rows: min-content;
            column-gap: var(--size-gap);
            min-height: 100vh;
        }
        .section {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1fr repeat(12, var(--size-column)) 1fr;
            grid-template-rows: min-content;
            column-gap: var(--size-gap);
        }
        .component {
            grid-column: 2 / -2;
        }
        /*  SECTION HEADER ///////////////////////////////////////////////////*/

        .section--header {
            padding: var(--spacing-m) 0 calc(var(--spacing-l) + var(--spacing-xs)) 0;
            margin-bottom: calc(var(--spacing-xs) * -1);
            position: fixed;
            top: 0;
            width: 100%;
        }
        .section--header .component--branding {
            grid-column: 2 / 8;
            grid-row: 1;
            align-self: end;
        }
        .section--header .component--nav-main {
            grid-column: 4 / 14;
            grid-row: 1;
            justify-self: end;
            align-self: end;
            padding-bottom: 1.625rem;
            z-index: var(--z-index-nav-hamburger);
        }

        .section--header .component--nav-mobile-sub {
            display: none;
        }

        /*  SECTION MAIN /////////////////////////////////////////////////////*/

        .section--main {
            margin-top: 8.375rem;
            padding-bottom: var(--spacing-xl);
        }

        .area--main,
        .area--hero {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 1fr repeat(12, var(--size-column)) 1fr;
            column-gap: var(--size-gap);
            position: relative;
            z-index: 2;
        }
        .area--main,
        .area--sidebar {
            grid-row: 1;
        }
        .area--main > * {
            grid-column: 1/-1;
            display: grid;
            grid-template-columns: 1fr repeat(12, var(--size-column)) 1fr;
            gap: var(--size-gap);
        }
        .area--main > .component > * {
            grid-column: 2/-2;
        }
        .area--main .nav-sidebar {
        }
        .area--sidebar {
            display: flex;
            flex-direction: column;
            gap: var(--size-gap);
            position: relative;
            z-index: 1;
        }

        /*  SECTION FOOTER ///////////////////////////////////////////////////*/

        .section--footer {
            padding: var(--spacing-l) 0;
            grid-template-columns: 1fr repeat(12, calc(77.5rem / 12)) 1fr;
            grid-template-columns: 1fr repeat(12, var(--size-column)) 1fr;
            gap: var(--size-gap);
        }
        .section--footer .component--assignment {
            grid-column: 2 / 5;
        }
        .section--footer .component--openings {
            grid-column: 5 / 8;
        }
        .section--footer .component--contactbox {
            grid-column: 8 / 12;
        }
        .section--footer .component--nav-footer {
            grid-column: 12 / -2;
        }
    }
}