@charset "UTF-8";

/* ==========================================
   LAYOUT CSS
   Noah Lab
========================================== */


/* ==========================================
   Site Main
========================================== */

.site-main {
    width: 100%;
    flex: 1;
}


/* ==========================================
   Main Container
========================================== */

.main-container {
    width: 100%;
    max-width: var(--container-width);

    margin-inline: auto;
    padding-inline: var(--container-padding);
}


/* ==========================================
   Single Column Layout
========================================== */

.layout-single {
    width: 100%;
}


/* ==========================================
   Content + Sidebar Layout
========================================== */

.layout-with-sidebar {
    display: flex;
    flex-direction: column;

    width: 100%;
}


/* ==========================================
   Main Content
========================================== */

.main-content {
    width: 100%;
    min-width: 0;
}


/* ==========================================
   Sidebar Area
========================================== */

.sidebar-area {
    width: 100%;

    margin-top: var(--space-8);
}


/* ==========================================
   Content Section
========================================== */

.content-section {
    width: 100%;
}


/* ==========================================
   Full Width Section
========================================== */

.full-width {
    width: 100%;
}


/* ==========================================
   Narrow Content
========================================== */

.content-narrow {
    width: 100%;
    max-width: var(--container-narrow);

    margin-inline: auto;
}


/* ==========================================
   Page Wrapper
========================================== */

.page-wrapper {
    width: 100%;
}


/* ==========================================
   Section Wrapper
========================================== */

.section-wrapper {
    width: 100%;
}


/* ==========================================
   Site Wrapper
========================================== */

.site-wrapper {
    display: flex;
    flex-direction: column;

    min-height: 100vh;
}


/* ==========================================
   Tablet / PC
========================================== */

@media (min-width: 768px) {

    /* ======================================
       Main Container
    ====================================== */

    .main-container {
        padding-inline: var(--container-padding);
    }


    /* ======================================
       Content + Sidebar
    ====================================== */

    .layout-with-sidebar {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            var(--sidebar-width);

        gap: var(--content-gap);

        align-items: start;
    }


    /* ======================================
       Main Content
    ====================================== */

    .main-content {
        min-width: 0;
    }


    /* ======================================
       Sidebar
    ====================================== */

    .sidebar-area {
        width: var(--sidebar-width);

        margin-top: 0;

        position: sticky;
        top: calc(
            var(--header-height) +
            var(--space-5)
        );
    }


    /* ======================================
       Narrow Content
    ====================================== */

    .content-narrow {
        max-width: var(--container-narrow);
    }

}