/* ============================================================
   LAYOUT.CSS
   Estrutura/posicionamento do site: grid principal, navbar,
   responsividade (media queries) e os ajustes que evitam
   "vazamento" de altura entre as seções.

   Este arquivo é carregado ANTES de style.css e carrossel.css.
   Por isso, quando duas regras têm a MESMA especificidade,
   as definições em style.css e carrossel.css "ganham" por
   virem depois na ordem de carregamento - exceto onde este
   arquivo usa "!important" (ver explicação mais abaixo, na
   seção de media queries).
   ============================================================ */

/* ------------------------------------------------------------
   RESET BÁSICO
   ------------------------------------------------------------ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
}

/* ============================================================
   GRID PRINCIPAL DA PÁGINA
   Cada seção ocupa as 3 colunas (grid-column: 1/4), então na
   prática o layout funciona como uma coluna única empilhada.
   A grade de 3 colunas foi mantida para permitir, no futuro,
   layouts que aproveitem colunas laterais (ex.: barras
   laterais) sem precisar reestruturar o HTML.
   ============================================================ */

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: repeat(6, auto);
}

.header {
    grid-column: 1/4;
    grid-row: 1;
    padding: 0 60px;
}

.logo {
    display: flex;
    flex-direction: row;
}

.eventos {
    grid-column: 1/4;
    grid-row: 2;
    padding: 40px;
}

.sobre {
    grid-column: 1/4;
    grid-row: 3;
    padding: 40px;
}

.atividades {
    grid-column: 1/4;
    grid-row: 4;
    padding: 40px;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.ajuda {
    grid-column: 1/4;
    grid-row: 5;
    padding: 40px;
    text-align: center;
}

.footer {
    grid-column: 1/4;
    grid-row: 6;
    padding: 40px;
}

/* ============================================================
   BARRA DE NAVEGAÇÃO (NAVBAR)
   ============================================================ */

/* Faz o header "colar" no topo da tela ao rolar a página */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 20px;
    position: relative;
}

.logo img {
    width: 150px;
    height: auto;
}

.menu {
    display: flex;
    gap: 30px;
}

/* Botão "hambúrguer" do menu mobile (visível só em telas pequenas).
   No HTML este elemento é um <button>; os resets abaixo (background,
   border, padding) removem a aparência padrão de botão do navegador,
   mantendo a aparência original de "ícone clicável". */
.menu-btn {
    display: none;
    font-size: 30px;
    color: rgb(18, 255, 243);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

/* ============================================================
   SEÇÃO: ATIVIDADES
   ============================================================ */

.cards {
    display: flex;
    justify-content: space-around;
    width: 100%;
    max-width: 1200px;
}

/* ============================================================
   SEÇÃO: COMO AJUDAR (Apadrinhamento)
   ============================================================ */

.apadrinhamento {
    display: flex;
    justify-content: center;
    gap: 100px;
    flex-wrap: wrap;
}

.ap {
    flex: 1;
    min-width: 200px;
    max-width: 400px;
    height: 400px;
    padding: 30px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

/* ============================================================
   FOOTER E INFORMAÇÕES DE CONTATO
   ============================================================ */

.infos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    gap: 15px;
}

.info {
    padding: 20px;
}

.map {
    padding: 20px;
}

.map iframe {
    width: 100%;
    height: 400px;
    border-radius: 20px;
}

/* ============================================================
   "ANTIVAZAMENTO"
   Regras compartilhadas pelas 4 seções principais de conteúdo
   (.eventos, .sobre, .atividades, .ajuda): garantem que cada
   seção ocupe pelo menos a altura da tela (menos a navbar) e
   centralizem seu conteúdo, além de servir de "âncora" de
   posicionamento (position: relative) para os elementos
   decorativos (.brinquedos, .pipas) que usam position: absolute.
   ============================================================ */

.eventos,
.sobre,
.atividades,
.ajuda {
    min-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    gap: 40px;
}

/* ============================================================
   RESPONSIVIDADE (RPD)
   ============================================================ */

@media (max-width: 768px) {

    body,
    html {
        overflow-x: hidden;
        width: 100%;
    }

    .container {
        width: 100%;
        overflow-x: hidden;
    }

    .apadrinhamento {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .infos {
        grid-template-columns: 1fr;
    }

    .eventos,
    .sobre,
    .atividades,
    .ajuda {
        min-height: auto;
        padding: 60px 20px;
    }

    .navbar {
        position: static;
        gap: 15px;
    }

    .logo img {
        width: 120px;
    }

    .menu {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .menu-btn {
        display: block !important;
    }

    /* Menu mobile: vira um painel "sanfona" que aparece abaixo da navbar */
    .menu {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: rgb(0, 0, 115);
        text-align: center;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
        z-index: 1000;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    }

    .dark-mode .menu {
        background-color: #000033;
    }

    /* Classe adicionada via main.js ao clicar no botão hambúrguer */
    .menu.ativo {
        max-height: 400px;
        padding: 20px 0;
    }

    .menu div {
        justify-content: center;
    }

    .sobre-container {
        flex-direction: column;
        text-align: center;
    }

    .sobre-img img {
        width: 100%;
        max-width: 320px;
    }

    .sobre-texto {
        max-width: 100%;
        text-align: center;
    }

    .cards {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .cards img {
        width: 90%;
        /* Ajustado para ocupar melhor a tela mobile */
        max-width: 300px;
    }

    .pipa {
        width: 150px;
        opacity: 0.5;
    }

    .footer {
        padding: 40px 20px;
        /* Reduz o padding lateral do footer */
    }

    .infos {
        grid-template-columns: 1fr;
        margin: 0 !important;
        /* Força a remoção dos 35px de margem vindos do style.css */
    }

    .info {
        padding: 20px 0;
        /* Remove o padding lateral do texto */
    }

    .map {
        padding: 20px 0;
        /* Remove o padding lateral do mapa */
    }

    .map iframe {
        width: 100%;
        /* Garante que o iframe respeite o limite da tela */
        height: 300px;
        /* Reduz um pouco a altura para ficar melhor no celular */
    }
}

/*
   Por que este bloco usa "!important":

   As regras abaixo (.eventos, .sobre, .atividades, .ajuda) também
   recebem "padding" e "min-height" vindos de style.css e de
   carrossel.css - arquivos que são carregados DEPOIS deste e,
   por isso, normalmente "ganhariam" a disputa de cascata mesmo
   com a mesma especificidade.

   Para garantir que o layout responsivo (telas até 1024px)
   sempre prevaleça sobre os valores "de desktop" definidos
   nesses outros arquivos, usamos "!important" aqui. Caso esses
   valores sejam alterados em style.css/carrossel.css no futuro,
   este bloco continuará controlando o comportamento em telas
   menores.
*/
@media (max-width: 1024px) {

    /* 1. Remove a altura forçada e reduz os paddings internos de todas as seções */
    .eventos,
    .sobre,
    .atividades,
    .ajuda {
        min-height: auto !important;
        padding: 40px 20px !important;
        /* 40px em cima/embaixo. Reduza para 20px se quiser ainda mais junto */
        gap: 20px !important;
        /* Diminui o espaço entre os elementos dentro da própria seção */
        margin: 0 !important;
    }

    /* 2. Garante que as linhas do Grid principal não deixem buracos vazios */
    .container {
        grid-template-rows: repeat(6, max-content) !important;
    }

    /* 3. Ajuste do Carrossel de Eventos para não empurrar os itens para baixo */
    .eventos {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    /* 4. Aproxima os cards de atividades e os quadros de ajuda */
    .cards {
        gap: 15px !important;
    }

    .ap {
        height: auto !important;
        /* Permite que o card de apadrinhamento encolha se tiver pouco texto */
        padding: 20px !important;
    }
}