/*
=====================================================
1. Estilos Base (MOBILE-FIRST)
   - Aplicam-se a todos os dispositivos por padrão (celulares)
=====================================================
*/

/* Reset e Box-Sizing para facilitar o layout */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura/altura do elemento */
}

/* Tipografia e corpo da página */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    /* Usa unidades relativas para o texto se adaptar */
    font-size: 16px; 
}

/* Imagens Responsivas */
img {
    max-width: 100%; /* Garante que a imagem nunca ultrapasse a largura do seu container */
    height: auto;    /* Mantém a proporção da imagem */
    display: block;  /* Remove margens extras */
}

/* Container Principal - Use porcentagens e unidades relativas */
.container {
    width: 90%; /* Largura da maioria dos elementos no mobile */
    margin: 0 auto; /* Centraliza */
    padding: 15px;
}

/* Layout Mobile (Exemplo com Flexbox - Coluna única no mobile) */
.main-content {
    display: flex;
    flex-direction: column; /* Padrão: elementos empilhados verticalmente */
    gap: 20px;
}

/*
=====================================================
2. Media Queries (BREAKPOINTS)
   - Ajustes para telas maiores (tablets e desktops)
=====================================================
*/

/* -- BREAKPOINT para Tablets (e.g., a partir de 768px) -- */
@media screen and (min-width: 768px) {
    
    .container {
        width: 85%;
        padding: 20px;
    }

    /* Layout para Tablets (Exemplo: 2 Colunas) */
    .main-content {
        flex-direction: row; /* Altera para linha */
        flex-wrap: wrap;     /* Permite quebra de linha */
        justify-content: space-between;
    }

    .column {
        /* Metade da largura, descontando um pouco para o gap */
        width: calc(50% - 10px); 
    }
}

/* -- BREAKPOINT para Desktops (e.g., a partir de 1024px) -- */
@media screen and (min-width: 1024px) {
    
    .container {
        max-width: 1200px; /* Limita a largura máxima em telas muito grandes */
        width: 80%;
    }

    /* Layout para Desktops (Exemplo: 3 Colunas) */
    .main-content {
        gap: 30px;
    }
    
    .column {
        /* Um terço da largura, descontando um pouco para o gap */
        width: calc(33.33% - 20px); 
    }
    
    /* Exemplos de ajustes específicos para PC */
    .header h1 {
        font-size: 2.5em;
    }
}

/* -- BREAKPOINT para Impressão (Opcional, mas útil) -- */
@media print {
    body {
        font-size: 12pt;
        color: black;
    }
    nav, footer, aside {
        display: none; /* Oculta elementos não essenciais para impressão */
    }
}