////
///
/// Page Layout Skeleton Classes
/// ===========================================================================
///
/// CSS classes for complete page layout patterns and templates.
///
/// @group Classes.BodySkeletons
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

// ============================================================================
// Use
// ============================================================================

@use "../../dev" as *;
@use "../../mixins" as *;

// ============================================================================
// Base Page Layouts
// ============================================================================

/// Standard page layout (header, main, footer)
.page--standard {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;

    > header {
        flex-shrink: 0;
    }

    > main {
        flex-grow: 1;
    }

    > footer {
        flex-shrink: 0;
    }
}

/// Fixed header page layout
.page--fixed-header {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;

    > header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }

    > main {
        flex-grow: 1;
        padding-top: q(64); // Offset for fixed header
    }

    > footer {
        flex-shrink: 0;
    }
}

/// Sticky header page layout
.page--sticky-header {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;

    > header {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    > main {
        flex-grow: 1;
    }

    > footer {
        flex-shrink: 0;
    }
}

// ============================================================================
// Sidebar Layouts
// ============================================================================

/// Page with left sidebar
.page--sidebar-left {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;

    > .page__body {
        display: flex;
        flex-grow: 1;

        > aside {
            flex-shrink: 0;
            width: q(280);
            order: -1;
        }

        > main {
            flex-grow: 1;
            min-width: 0;
        }
    }
}

/// Page with right sidebar
.page--sidebar-right {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;

    > .page__body {
        display: flex;
        flex-grow: 1;

        > aside {
            flex-shrink: 0;
            width: q(280);
        }

        > main {
            flex-grow: 1;
            min-width: 0;
        }
    }
}

/// Page with both sidebars
.page--sidebar-both {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;

    > .page__body {
        display: flex;
        flex-grow: 1;

        > aside:first-of-type {
            flex-shrink: 0;
            width: q(240);
            order: -1;
        }

        > aside:last-of-type {
            flex-shrink: 0;
            width: q(240);
        }

        > main {
            flex-grow: 1;
            min-width: 0;
        }
    }
}

// ============================================================================
// Dashboard Layout
// ============================================================================

/// Dashboard layout with fixed sidebar
.page--dashboard {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;

    > nav {
        flex-shrink: 0;
        width: q(240);
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        overflow-y: auto;
    }

    > .page__content {
        flex-grow: 1;
        margin-left: q(240);
        display: flex;
        flex-direction: column;

        > header {
            flex-shrink: 0;
            position: sticky;
            top: 0;
            z-index: 50;
        }

        > main {
            flex-grow: 1;
            padding: q(24);
        }
    }
}

// ============================================================================
// Holy Grail Layout
// ============================================================================

/// Classic "Holy Grail" layout
.page--holy-grail {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav    main   aside"
        "footer footer footer";
    grid-template-columns: q(200) 1fr q(200);
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    min-height: 100dvh;

    > header {
        grid-area: header;
    }

    > nav {
        grid-area: nav;
    }

    > main {
        grid-area: main;
        min-width: 0;
    }

    > aside {
        grid-area: aside;
    }

    > footer {
        grid-area: footer;
    }

    @media (max-width: q(768)) {
        grid-template-areas:
            "header"
            "nav"
            "main"
            "aside"
            "footer";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto auto;
    }
}

// ============================================================================
// Landing Page Layout
// ============================================================================

/// Full-width landing page layout
.page--landing {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;

    > header {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }

    > main {
        flex-grow: 1;

        > section:first-child {
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    > footer {
        flex-shrink: 0;
    }
}