/* Reset básico e tipografia */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* 🎨 TEMA ESCURO: Usa a fonte Inter e as variáveis de cor */
    font-family: var(--font-family-primary);
    line-height: 1.6;
    background-color: var(--clr-bg-page);
    color: var(--clr-text-primary);
    
    /* 🌟 NOVO: Configuração do Sticky Footer */
    min-height: 100vh;      /* Garante que o body tenha no mínimo a altura total da tela */
    display: flex;          /* Ativa o Flexbox */
    flex-direction: column; /* Organiza os elementos (Navbar, Conteúdo, Footer) um embaixo do outro */
}

/* 1. CLASSE .section (Centralização do Container da Página) */
.section {
    width: 100%;
    /* 🌟 NOVO: Usando variáveis de espaçamento para paddings laterais e verticais */
    padding-left: var(--spacing-md); /* 1rem = 16px */
    padding-right: var(--spacing-md);
    padding-top: var(--spacing-xl); /* 2.5rem ≈ 32px */
    padding-bottom: var(--spacing-xl);
}

.hero-section {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Container de largura fixa/máxima para o conteúdo principal */
.section-container {
    max-width: 1600px; 
    margin: 0 auto; 
}


/* 2. CLASSE .row (Layout Flexbox e Grid de 5 Colunas) */
.row {
    display: flex;
    flex-wrap: wrap; 
    /* 🎨 USA VARIÁVEL: Gutter negativo */
    margin-left: calc(-1 * var(--spacing-gutter) / 2);
    margin-right: calc(-1 * var(--spacing-gutter) / 2);
    align-items: stretch; /* Garante que as colunas tenham a mesma altura */
}

/* Estilo Base para Colunas */
[class^="col-"] {
    /* 🎨 USA VARIÁVEL: Gutter */
    padding-left: calc(var(--spacing-gutter) / 2); 
    padding-right: calc(var(--spacing-gutter) / 2);
    margin-bottom: var(--spacing-gutter); 
    width: 100%; /* Default mobile */
}

/* Definições de Colunas para Desktop (Grid de 5) */
.col-1 { width: 20%; } 
.col-2 { width: 40%; } 
.col-3 { width: 60%; } 
.col-4 { width: 80%; } 
.col-5 { width: 100%; }

/* --- Responsividade (Tablet - 992px) --- */
@media (max-width: 992px) {
    .col-m-1 { width: 20%; }
    .col-m-2 { width: 40%; }
    .col-m-3 { width: 60%; }
    .col-m-4 { width: 80%; }
    .col-m-5 { width: 100%; }
    
    /* Para posts, por exemplo, o conteúdo sempre ocupa 100% da largura do container em telas médias/pequenas */
    .col-m-full { width: 100%; }
}

/* --- Responsividade (Mobile - 600px) --- */
@media (max-width: 600px) {
    /* Em mobile, as colunas voltam a ser 100% (definido no base) */
    .section {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }

    .hero-section{
        padding-inline: 0px !important;
    }
}