/* 
 * Layout CSS
 * Contains all container and structural layout styles
 */

/* Main Container and Overlay */
/* First, ensure the body and html take full height */
* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

/* In layout.css */
.container {
    width: 100%;
    padding: 1rem;
    margin: 0 auto;
    position: relative;
}

.container > * {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.container::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: -1;
}

/* Overlay specific styles */
.container.overlay {
    position: fixed; /* Back to fixed position */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw; /* Use viewport width */
    height: 100vh;
    padding: 1rem;
    overflow-y: auto;
    background-color: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Center the content */
.container.overlay > * {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    position: relative; /* For proper stacking */
}

/* Remove any margin/padding from direct children of overlay */
.container.overlay > *:first-child {
    margin-top: 0;
}

.container.overlay > *:last-child {
    margin-bottom: 0;
}


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

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

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

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

.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Flex Layouts */
.flex {
    display: flex;
}

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

.flex-wrap {
    flex-wrap: wrap;
}

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

.justify-center {
    justify-content: center;
}

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

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

.gap-lg {
    gap: var(--spacing-lg);
}

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

.section-sm {
    padding: var(--spacing-md) 0;
}

.section-lg {
    padding: var(--spacing-xxl) 0;
}

/* Card Layouts */
.card {
    background: var(--bg-blur);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
}

.card-sm {
    padding: var(--spacing-md);
}

.card-lg {
    padding: var(--spacing-xl);
}

/* Content Wrappers */
/* Add this to layout.css */
.content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
    width: 100%;
}

.content-narrow {
    max-width: 800px;
    margin: 0 auto;
}

.content-wide {
    max-width: 1600px;
    margin: 0 auto;
}

/* Spacing Utilities */
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

.m-0 { margin: 0; }
.p-0 { padding: 0; }

/* Responsive Layout Adjustments */
@media (max-width: 1200px) {
    .container {
        padding: var(--spacing-sm);
    }
    
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .section {
        padding: var(--spacing-md) 0;
    }
}

@media (max-width: 768px) {
    .container.overlay {
        padding: var(--spacing-xs);
    }
    
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .card {
        padding: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .container {
        padding: var(--spacing-xs);
    }
    
    .section {
        padding: var(--spacing-sm) 0;
    }
    
    .card {
        padding: var(--spacing-sm);
    }
}

/* Visibility Classes */
.hidden {
    display: none;
}

.visible {
    display: block;
}

@media (max-width: 768px) {
    .hidden-mobile {
        display: none;
    }
}

@media (min-width: 769px) {
    .hidden-desktop {
        display: none;
    }
}

/* Position Utilities */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
    top: 0;
}

/* Z-index Utilities */
.z-back { z-index: var(--z-back); }
.z-normal { z-index: var(--z-normal); }
.z-overlay { z-index: var(--z-overlay); }
.z-modal { z-index: var(--z-modal); }

/* Container Shape Modifiers */
.rounded {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-full {
    border-radius: var(--radius-full);
}