@import url('./00_globals.css');

/* ========================================
   BODY - CONTEÚDO PRINCIPAL DA PÁGINA
   Seções e componentes do corpo da página
   ======================================== */

/* ==========================================
   SEÇÃO SOBRE - SOBRE O USUÁRIO
   Apresentação pessoal e descrição
   ========================================== */

/* Sobre - Container Principal
   Seção para apresentação pessoal
   - border-top: 1px solid #333 separador visual superior
   - padding-top: 30px espaçamento interno superior
   - Elemento base para toda seção
*/
.sobre {
    border-top: 1px solid #333;
    padding-top: 30px;
}

/* Texto Sobre - Conteúdo de Texto
   Texto principal da seção sobre
   - line-height: 1.6 espaçamento entre linhas para legibilidade
   - max-height: 200px altura máxima inicial (antes de expandir)
   - overflow: hidden corta o texto quando atinge altura máxima
   - transition: max-height 0.4s ease-out anima a expansão suave
   - Conteúdo ocultado inicialmente com possibilidade de expandir
*/
.texto-sobre {
    line-height: 1.6;
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

/* Texto Sobre - Estado Expandido
   Quando texto é expandido pelo usuário
   - max-height: 2000px permite visualizar todo conteúdo
   - Transição suave (definida em .texto-sobre)
   - Ativado via JavaScript/classe
*/
.texto-sobre.expandido {
    max-height: 2000px;
}

/* ==========================================
   CONTACT WRAPPER - LAYOUT DE CONTATO
   Grid com formulários, WhatsApp e Google Agenda
   ========================================== */

/* Contact Wrapper - Container Principal
   Layout em grid para seção de contato
   - display: grid ativa layout em grid
   - grid-template-columns: 1fr 1fr 1fr três colunas iguais
   - column-gap: 20px espaçamento entre colunas
   - row-gap: 0 sem espaço entre linhas (definido por elementos)
   - border-top: 1px solid #333 separador visual
   - padding-top: 30px espaçamento interno
   - margin-top: 30px espaçamento externo superior
   - margin-bottom: 30px espaçamento externo inferior
*/
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 20px;
    row-gap: 0;
    border-top: 1px solid #333;
    padding-top: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Contact Wrapper - Coluna Esquerda (Formulário Assuntos)
   Primeira caixa de formulário
   - grid-column: 1 primeira coluna
   - grid-row: 1 / 3 ocupa duas linhas (topo até fim)
   - display: flex ativa flexbox
   - flex-direction: column empilha elementos verticalmente
   - min-height: 450px altura mínima
   - margin-bottom: 0 sem espaço inferior (grid controla)
*/
.contact-wrapper .caixa-conteudo.formularios:first-child {
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    min-height: 450px;
    margin-bottom: 0;
}

/* Contact Wrapper - Coluna Central Linha 1 (WhatsApp)
   Caixa de WhatsApp
   - grid-column: 2 coluna central
   - grid-row: 1 primeira linha
   - display: flex ativa flexbox
   - flex-direction: column empilha elementos verticalmente
   - margin-bottom: 0 sem espaço inferior (grid controla)
*/
.contact-wrapper .caixa-conteudo.whatsapp {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

/* Contact Wrapper - Coluna Central Linha 2 (Google Agenda)
   Caixa de agendamento Google Calendar
   - grid-column: 2 coluna central
   - grid-row: 2 segunda linha (abaixo de WhatsApp)
   - display: flex ativa flexbox
   - flex-direction: column empilha elementos verticalmente
   - margin-bottom: 0 sem espaço inferior (grid controla)
   - background-color: cor secundária para destaque
   - border-radius: cantos arredondados padrão
   - border-left/right/bottom: bordas azuis estilo (#0066cc)
   - padding: 20px espaçamento interno
*/
.contact-wrapper .caixa-conteudo.googleAgenda {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    background-color: var(--backg-Sub-cor);
    border-radius: var(--borderRadius-padrao);
    border-left: 1px solid #0066cc;
    border-right: 1px solid #0066cc;
    border-bottom: 1px solid #0066cc;
    padding: 20px;
}

/* Contact Wrapper - Coluna Direita (Formulário)
   Segunda caixa de formulário (lado direito)
   - grid-column: 3 terceira coluna (direita)
   - grid-row: 1 / 3 ocupa duas linhas (topo até fim)
   - display: flex ativa flexbox
   - flex-direction: column empilha elementos verticalmente
   - margin-bottom: 0 sem espaço inferior (grid controla)
   - min-height: 450px altura mínima
*/
.contact-wrapper .caixa-conteudo.formularios:last-child {
    grid-column: 3;
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    min-height: 450px;
}

/* Contact Wrapper - Article Filho
   Elemento article dentro de caixa-conteudo
   - display: flex ativa flexbox
   - flex-direction: column empilha elementos verticalmente
   - height: 100% ocupa altura total do pai
*/
.contact-wrapper .caixa-conteudo article {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Contact Wrapper - Form Filho
   Elemento form dentro de caixa-conteudo
   - display: flex ativa flexbox
   - flex-direction: column empilha elementos verticalmente
   - gap: 12px espaçamento entre inputs/elementos do formulário
*/
.contact-wrapper .caixa-conteudo form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ==========================================
   SEÇÃO SOBRE, PROJETOS, WHATSAPP
   Estilos compartilhados entre seções
   ========================================== */

/* Seções Principais - Estilos Comuns
   Aplicado a .projetos, .sobre, .contWhats (e Google Agenda)
   - background-color: cor secundária para destaque
   - border-radius: cantos arredondados padrão
   - margin-bottom: 20px espaçamento inferior
   - border-left/right/bottom: bordas azuis estilo (#0066cc)
   - Define visual padrão de caixas de seção
*/
.projetos,
.sobre,
.contWhats {
    background-color: var(--backg-Sub-cor);
    border-radius: var(--borderRadius-padrao);
    margin-bottom: 20px;
    border-left: 1px solid #0066cc;
    border-right: 1px solid #0066cc;
    border-bottom: 1px solid #0066cc;
}

/* Seções Sobre e Projetos - Estilos Adicionais
   Aplicado a .sobre, .projetos
   - border-top: 1px solid #333 separador visual superior
   - padding-top: 20px espaçamento interno superior
   - margin-top: 30px espaçamento externo superior
   - Diferencia essas seções de contWhats
*/
.sobre, .projetos {
    border-top: 1px solid #333;
    padding-top: 20px;
    margin-top: 30px;
}

/* Títulos H2 em Seções Principais
   Aplicado a h2 dentro de .projetos, .sobre, .contWhats, .contGoogleAgenda
   - padding-left: 20px espaçamento à esquerda
   - padding-top: 10px espaçamento superior
   - font-size: tamanho principal
   - color: cor padrão de texto
   - Estilo visual consistente para títulos
*/
.projetos h2,
.sobre h2,
.contWhats h2,
.contGoogleAgenda h2 {
    padding-left: 20px;
    padding-top: 10px;
    font-size: var(--texto-Tamanho-Prin);
    color: var(--texto-cor-padrao);
}

/* Parágrafos em Seções Principais
   Aplicado a p dentro de .projetos, .sobre, .contWhats, .contGoogleAgenda
   - font-size: tamanho secundário
   - padding-left: 20px espaçamento à esquerda
   - margin-top: 10px espaçamento superior
   - margin-bottom: 8px espaçamento inferior
   - Estilo visual consistente para texto
*/
.projetos p,
.sobre p,
.contWhats p,
.contGoogleAgenda p {
    font-size: var(--texto-Tamanho-Sub);
    padding-left: 20px;
    margin-top: 10px;
    margin-bottom: 8px;
}

/* ==========================================
   SEÇÃO PROJETOS - PORTFÓLIO
   Cards e grid de projetos
   ========================================== */

/* Cards Projetos - Container
   Container para grid de cards de projeto
   - display: flex ativa flexbox
   - justify-content: space-between distribui espaço
   - flex-wrap: wrap quebra em múltiplas linhas
   - gap: 20px espaçamento entre cards
   - padding: 0 20px 20px espaçamento interno (lateral e inferior)
   - Agrupa todos os cards em grid responsivo
*/
.cards-projetos { 
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 20px 20px;
}

/* Card Projeto - Card Individual
   Card para exibição de um projeto
   - flex: 0 1 200px tamanho mínimo/máximo (200px base)
   - border-radius: cantos arredondados padrão
   - padding: 10px espaçamento interno
   - text-align: center centraliza conteúdo
   - transition: transição suave ao hover
   - display: flex ativa flexbox
   - flex-direction: column empilha elementos verticalmente
   - align-items: center centraliza elementos filhos
   - Elemento clicável com efeito hover
*/
.card-projeto {
    flex: 0 1 200px;
    border-radius: var(--borderRadius-padrao);
    padding: 60px 10px 25px 10px;
    text-align: center;
    transition: var(--transicao-padrao);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Card Projeto - Estado Hover
   Efeito ao passar o mouse
   - background-color: #1a1a1a darkifica o card
   - opacity: 0.85 reduz opacidade para feedback visual
   - Indica card clicável/interativo
*/
.card-projeto:hover {
    background-color: #1a1a1a;
    opacity: 0.85;
}

/* Card Projeto - Ícone
   Imagem do ícone dentro do card
   - width: 200px largura da imagem do projeto
   - height: 200px altura da imagem do projeto
   - margin-bottom: 10px espaço entre imagem e texto
   - object-fit: cover garante proporção sem distorção
   - border-radius: cantos arredondados na imagem
*/
.card-projeto img {
    width: 200px;
    height: 200px;
    margin-bottom: 10px;
    object-fit: cover;
    border-radius: 8px;
}

/* ==========================================
   MEDIA QUERIES - RESPONSIVIDADE
   Breakpoints para diferentes tamanhos de tela
   ========================================== */

/* Media Query - Telas até 1024px
   Tablets e dispositivos menores
   - .contact-wrapper muda para 2 colunas
   - grid-template-columns: 1fr 1fr reduz colunas
   - Reorganiza cards para melhor visualização
   - .formularios:first-child volta a grid-column: 1
   - .formularios:last-child ocupa ambas colunas (1/3)
   - WhatsApp e Google Agenda comentados (ocultos em mobile)
*/
@media (max-width: 1024px) {
    .contact-wrapper {
        grid-template-columns: 1fr 1fr;
    }
    
    .contact-wrapper .caixa-conteudo.formularios:first-child {
        grid-column: 1;
        grid-row: 1;
    }
    
    /* .contact-wrapper .caixa-conteudo.whatsapp {
        grid-column: 2;
        grid-row: 1;
    }
    
    .contact-wrapper .caixa-conteudo.googleAgenda {
        grid-column: 2;
        grid-row: 2;
    } */
    
    .contact-wrapper .caixa-conteudo.formularios:last-child {
        grid-column: 1 / 3;
        grid-row: 3;
    }
}