/* Sistema de Grid e Layout - Nossa Casa Cultural */

/* Container Base */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

@media (max-width: 768px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
}

/* Grid System - 12 colunas desktop / 4 colunas mobile */
.grid {
    display: grid;
    gap: var(--spacing-lg);
    width: 100%;
}

/* Desktop Grid - 12 colunas */
@media (min-width: 769px) {
    .grid {
        grid-template-columns: repeat(12, 1fr);
    }
    
    .col-1 { grid-column: span 1; }
    .col-2 { grid-column: span 2; }
    .col-3 { grid-column: span 3; }
    .col-4 { grid-column: span 4; }
    .col-5 { grid-column: span 5; }
    .col-6 { grid-column: span 6; }
    .col-7 { grid-column: span 7; }
    .col-8 { grid-column: span 8; }
    .col-9 { grid-column: span 9; }
    .col-10 { grid-column: span 10; }
    .col-11 { grid-column: span 11; }
    .col-12 { grid-column: span 12; }
}

/* Mobile Grid - 4 colunas */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-md);
    }
    
    .col-mobile-1 { grid-column: span 1; }
    .col-mobile-2 { grid-column: span 2; }
    .col-mobile-3 { grid-column: span 3; }
    .col-mobile-4 { grid-column: span 4; }
    
    /* No mobile, colunas ocupam largura total por padrão */
    [class*="col-"] {
        grid-column: span 4;
    }
}

/* Seções */
section {
    padding: var(--spacing-section-desktop) 0;
}

@media (max-width: 768px) {
    section {
        padding: var(--spacing-section-mobile) 0;
    }
}

/* Utilidades de Layout */
.flex {
    display: flex;
}

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

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

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

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

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

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* Espaçamentos Utilitários */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.pt-xs { padding-top: var(--spacing-xs); }
.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }
.pt-xl { padding-top: var(--spacing-xl); }

.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }
.pb-xl { padding-bottom: var(--spacing-xl); }