////
///
/// Frame Container Classes
/// ===========================================================================
///
/// CSS classes for structural containers and application shell layouts.
/// All functionality is defined in mixins - classes only include them.
///
/// @group Classes.HeadFrame
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

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

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

// ============================================================================
// Viewport Frames
// ============================================================================

/// Full viewport frame
.frame--viewport {
    @include frame--viewport;
}

/// Dynamic viewport frame (mobile-safe)
.frame--viewport--dynamic {
    @include frame--viewport--dynamic;
}

/// Small viewport frame
.frame--viewport--small {
    @include frame--viewport--small;
}

/// Large viewport frame
.frame--viewport--large {
    @include frame--viewport--large;
}

// ============================================================================
// Container Frames
// ============================================================================

/// Full-width container
.frame--full {
    @include frame--full;
}

/// Centered container with max-width
.frame--container {
    @include frame--container;
}

/// Small container
.frame--container--sm {
    @include frame--container--sm;
}

/// Medium container
.frame--container--md {
    @include frame--container--md;
}

/// Large container
.frame--container--lg {
    @include frame--container--lg;
}

/// Extra large container
.frame--container--xl {
    @include frame--container--xl;
}

/// 2XL container
.frame--container--2xl {
    @include frame--container--2xl;
}

// ============================================================================
// App Shell Frames
// ============================================================================

/// App wrapper (flex column, full height)
.frame--app {
    @include frame--app;
}

/// App header frame
.frame--header {
    @include frame--header;
}

/// App main content frame (grows to fill)
.frame--main {
    @include frame--main;
}

/// App footer frame
.frame--footer {
    @include frame--footer;
}

/// Sidebar frame
.frame--sidebar {
    @include frame--sidebar;
}

// ============================================================================
// Aspect Ratio Frames
// ============================================================================

/// Square aspect ratio
.frame--square {
    @include frame--square;
}

/// Video aspect ratio (16:9)
.frame--video {
    @include frame--video;
}

/// Portrait aspect ratio (3:4)
.frame--portrait {
    @include frame--portrait;
}

/// Landscape aspect ratio (4:3)
.frame--landscape {
    @include frame--landscape;
}

/// Widescreen aspect ratio (21:9)
.frame--widescreen {
    @include frame--widescreen;
}

/// Auto aspect ratio
.frame--aspect--auto {
    @include frame--aspect--auto;
}