////
///
/// Layout Skeleton Mixins
/// ===========================================================================
///
/// Layout-level skeleton patterns for content organization within pages.
///
/// @group Body Skeletons
/// @author Scape Agency
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

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

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

// ============================================================================
// Mixins
// ============================================================================

/// Two-column layout skeleton
/// @param {String} $ratio [1fr 1fr] - Column ratio
/// @param {Length} $gap [q(24)] - Gap between columns
@mixin layout--two-column($ratio: 1fr 1fr, $gap: q(24)) {
    display: grid;
    grid-template-columns: $ratio;
    gap: $gap;
}

/// Three-column layout skeleton
/// @param {Length} $gap [q(24)] - Gap between columns
@mixin layout--three-column($gap: q(24)) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: $gap;
}

/// Holy grail layout (header, footer, main with sidebars)
/// @param {Length} $left-width [q(200)] - Left sidebar width
/// @param {Length} $right-width [q(200)] - Right sidebar width
/// @param {Length} $gap [q(24)] - Gap between elements
@mixin layout--holy-grail(
    $left-width: q(200),
    $right-width: q(200),
    $gap: q(24)
) {
    display: grid;
    grid-template-columns: $left-width 1fr $right-width;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "left main right"
        "footer footer footer";
    gap: $gap;
    min-height: 100vh;
}

/// Masonry-style layout skeleton
/// @param {Number} $columns [3] - Number of columns
/// @param {Length} $gap [q(16)] - Gap between items
@mixin layout--masonry($columns: 3, $gap: q(16)) {
    columns: $columns;
    column-gap: $gap;

    > * {
        break-inside: avoid;
        margin-bottom: $gap;
    }
}

/// Card grid layout skeleton
/// @param {Length} $min-card-width [q(280)] - Minimum card width
/// @param {Length} $gap [q(24)] - Gap between cards
@mixin layout--card-grid($min-card-width: q(280), $gap: q(24)) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax($min-card-width, 1fr));
    gap: $gap;
}

/// Split layout (two equal halves)
/// @param {String} $direction [horizontal] - Split direction
@mixin layout--split($direction: horizontal) {
    display: grid;

    @if $direction == horizontal {
        grid-template-columns: 1fr 1fr;
    } @else {
        grid-template-rows: 1fr 1fr;
    }
}