/**
 * Author Website Templates - Layout & Grid System
 */

@use 'variables' as *;
@use 'mixins' as *;

// --- Scoped Container ---
.awt-container {
    @include awt-container-styles;
    box-sizing: border-box;

    &--fluid {
        max-width: 100% !important;
    }

    &--wide {
        max-width: 1600px !important;
    }

    &--narrow {
        max-width: 900px !important;
    }
}

// --- Scoped Grid System ---
.awt-grid {
    display: grid;
    grid-template-columns: repeat(var(--awt-grid-cols, 1), minmax(0, 1fr));
    gap: var(--awt-grid-gap, 1.5rem);
    box-sizing: border-box;

    // Direct Column Modifiers
    &--1-col {
        --awt-grid-cols: 1;
    }

    &--2-cols {
        --awt-grid-cols: 1;
        @include md {
            --awt-grid-cols: 2;
        }
    }

    &--3-cols {
        --awt-grid-cols: 1;
        @include sm {
            --awt-grid-cols: 2;
        }
        @include lg {
            --awt-grid-cols: 3;
        }
    }

    &--4-cols {
        --awt-grid-cols: 1;
        @include sm {
            --awt-grid-cols: 2;
        }
        @include lg {
            --awt-grid-cols: 4;
        }
    }

    // Auto fit responsive
    &--auto-fit {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--awt-grid-min-col, 280px)), 1fr));
    }

    // Gap Modifiers
    &--gap-sm {
        --awt-grid-gap: 0.75rem;
    }

    &--gap-md {
        --awt-grid-gap: 1.5rem;
    }

    &--gap-lg {
        --awt-grid-gap: 2.5rem;
    }

    &--gap-xl {
        --awt-grid-gap: 4rem;
    }

    // Alignment
    &--items-center {
        align-items: center;
    }

    &--items-start {
        align-items: flex-start;
    }

    &--items-end {
        align-items: flex-end;
    }
}

// --- Scoped Flexbox Utilities ---
.awt-flex {
    display: flex;
    gap: var(--awt-flex-gap, 1rem);
    box-sizing: border-box;

    &--center {
        align-items: center;
        justify-content: center;
    }

    &--align-center {
        align-items: center;
    }

    &--between {
        justify-content: space-between;
    }

    &--wrap {
        flex-wrap: wrap;
    }

    &--column {
        flex-direction: column;
    }

    &--md-row {
        flex-direction: column;
        @include md {
            flex-direction: row;
        }
    }

    // Gap Modifiers
    &--gap-xs {
        --awt-flex-gap: 0.5rem;
    }

    &--gap-sm {
        --awt-flex-gap: 0.75rem;
    }

    &--gap-md {
        --awt-flex-gap: 1.5rem;
    }

    &--gap-lg {
        --awt-flex-gap: 2rem;
    }
}

// --- Section Headings & Badges ---
.awt-heading-badge {
    display: inline-block;
    font-family: $awt-font-sans;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: $awt-color-accent;
    margin-bottom: 0.5rem;
}

.awt-section-heading {
    font-family: $awt-font-serif;
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1.2;
    color: $awt-color-navy;
    text-align: center;
    margin-top: 0;
    margin-bottom: 3rem;

    @include md {
        font-size: 3rem;
    }
}