/**
 * Layout Components CSS
 */

/* Container Classes */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.container-sm {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem;
}

.container-xs {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Main Content */
.main-content {
    margin-top: 80px;
    min-height: calc(100vh - 80px);
}

/* Grid System */
.grid {
    display: grid;
    gap: 2rem;
}

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

/* Responsive adjustments */
@media (max-width: 1200px) {
    .container {
        max-width: 100%;
        padding: 0 2rem;
    }
}

@media (max-width: 1024px) {
    .container {
        padding: 0 1.5rem;
    }
    
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .main-content {
        margin-top: 70px;
        min-height: calc(100vh - 70px);
    }
}

@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
    
    .container {
        padding: 0 1rem;
    }
    
    .main-content {
        margin-top: 60px;
        min-height: calc(100vh - 60px);
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 0.75rem;
    }
    
    .container-sm {
        max-width: 100%;
        padding: 0 0.75rem;
    }
}