/**
 * Layout System
 * Defines structural patterns and responsive behaviors
 */
 :root {
    /* Layout Containers */
    --container-max: 1200px;
    --container-narrow: 800px;
    
    /* Spacing Scale */
    --space-xs: 0.25rem;   /*  4px */
    --space-sm: 0.5rem;    /*  8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 2rem;      /* 32px */
    --space-xl: 4rem;      /* 64px */
    --space-2xl: 6rem;     /* 96px */
    
    /* Grid Gaps */
    --gap-sm: 1rem;
    --gap-md: 2rem;
    --gap-lg: 4rem;
    
    /* Breakpoints */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}

/* ---- Container Layouts ---- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
}

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

/* ---- Section Layouts ---- */
.section {
    padding: var(--space-xl) 0;
}

.section-lg {
    padding: var(--space-2xl) 0;
}

/* ---- Hero Layouts ---- */
.hero {
    position: relative;
    padding: calc(var(--space-2xl) + var(--nav-height)) 0 var(--space-2xl);
    overflow: hidden;
}

.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-lg);
    align-items: center;
}

.hero-centered {
    text-align: center;
    max-width: var(--container-narrow);
    margin: 0 auto;
}

/* ---- Grid Layouts ---- */
.grid {
    display: grid;
    gap: var(--gap-md);
}

.grid-2cols {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3cols {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4cols {
    grid-template-columns: repeat(4, 1fr);
}

/* ---- Flex Layouts ---- */
.flex {
    display: flex;
    gap: var(--gap-md);
}

.flex-between {
    justify-content: space-between;
    align-items: center;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

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

/* ---- Card Layouts ---- */
.cards-grid {
    display: grid;
    gap: var(--gap-md);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ---- Spacing Utilities ---- */
.gap-sm { gap: var(--gap-sm); }
.gap-md { gap: var(--gap-md); }
.gap-lg { gap: var(--gap-lg); }

.margin-top-lg { margin-top: var(--space-lg); }
.margin-bottom-lg { margin-bottom: var(--space-lg); }

/* ---- Background Utilities ---- */
.bg-gradient {
    position: relative;
    overflow: hidden;
}

.bg-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    pointer-events: none;
}

/* ---- Responsive Design ---- */
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 720px;
    }
    
    .grid-4cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    :root {
        --space-xl: 3rem;
        --space-2xl: 4rem;
    }

    .container {
        max-width: 540px;
    }
    
    .hero-split {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .grid-3cols,
    .grid-2cols {
        grid-template-columns: 1fr;
    }
    
    .flex {
        flex-direction: column;
    }
    
    .cards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    :root {
        --space-lg: 1.5rem;
        --space-xl: 2rem;
        --space-2xl: 3rem;
    }

    .container {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }
    
    .section {
        padding: var(--space-lg) 0;
    }
}

/* ---- Special Layouts ---- */
/* Home Page Split Hero */
.hero-background {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-bg-left,
.hero-bg-right {
    position: absolute;
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.hero-bg-left {
    left: 0;
}

.hero-bg-right {
    right: 0;
}

/* Pricing Page Layout */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-lg);
    align-items: stretch;
}

@media (max-width: 992px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-bg-left,
    .hero-bg-right {
        position: relative;
        width: 100%;
        height: 200px;
    }
}