/*
 * ==========================================================================
 * PORTFOLIO ANDRÉ TORRES - ARQUIVO RESPONSIVO DETALHADO
 * ==========================================================================
 * Foco: Ajustes graduais em múltiplos breakpoints (LG, MD, SM, XS)
 * para uma experiência de usuário mais fluida.
 */

/* * ==========================================================================
 * BREAKPOINT EXTRA: ATIVAR MENU HAMBÚRGUER (1025px a 1440px)
 * ==========================================================================
 */
@media (min-width: 1025px) and (max-width: 1440px) {

    /* --- 1. DESATIVAR MENU DESKTOP (regras do portfolio.css) --- */
    
    /* Esconde os itens de menu desktop */
    ul.menuPortfolio li:not(.menu-logo-item) {
        display: none;
    }

    /* Esconde o logo do menu desktop */
    ul.menuPortfolio li.menu-logo-item {
        display: none;
    }
    
    /* --- 2. ATIVAR MENU MOBILE (regras copiadas do @1024px do portfolio.css) --- */
    
    .HeaderPortfolio { 
        justify-content: space-between; 
        padding: 0 20px; 
    }
    
    /* Mostra o logo mobile */
    .HeaderPortfolio .LogoMobile { 
        display: block; 
        flex-shrink: 0; 
        max-width: 280px; 
    }
    
    .HeaderPortfolio .Navegacao { 
        margin-left: auto; 
        width: auto; 
    }
    
    /* Mostra o <nav> que contém os botões */
    .Navegacao nav { 
        display: block; 
        position: relative; 
        z-index: 101; 
    }

    /* Regras dos botões */
    .Navegacao nav button { 
        background: none; 
        border: none; 
        font-size: 52px; 
        color: var(--cyan-claro); 
        cursor: pointer; 
        padding: 8px; 
        margin-left: 5px; 
        display: none; 
        line-height: 1; 
    }
    .Navegacao nav .open-btn { 
        display: inline-block; 
    }
    .Navegacao.menu-aberto nav .open-btn { 
        display: none; 
    }
    .Navegacao nav .close-btn { 
        display: none; 
    }
    .Navegacao.menu-aberto nav .close-btn { 
        display: block; 
    }
    
    /* Re-declara o ul.menuPortfolio como o flyout (sobrescreve o display: flex do desktop) */
    .Navegacao ul.menuPortfolio { 
        display: flex; /* Sobrescreve o 'display: flex' do desktop */
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 100%; 
        height: 100vh; 
        background-color: var(--petroleo); 
        flex-direction: column; 
        align-items: stretch; 
        justify-content: flex-start; 
        gap: 0; 
        padding: 0; 
        overflow-y: auto; 
        z-index: 100; 
        transform: translateX(-100%); 
        transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); 
    }
    
    .Navegacao.menu-aberto ul.menuPortfolio { 
        transform: translateX(0); 
    }
    
    /* Mostra o logo dentro do flyout (sobrescreve o display: none acima) */
    ul.menuPortfolio li.menu-logo-item { 
        display: flex; /* Sobrescreve o 'display: none' */
        order: -1; 
        padding: 20px 25px; 
        border-bottom: 1px solid #2a2440; 
        margin-right: 0; 
        text-align: left; 
    }
    ul.menuPortfolio li.menu-logo-item a.site-logo-link img.actual-logo-img { 
        max-height: 35px; 
    }
    
    /* Regras dos 'li' dentro do flyout */
    ul.menuPortfolio li:not(.menu-logo-item) { 
        display: flex; /* Sobrescreve o 'display: none' */
        width: 100%; 
        border-bottom: 1px solid #2a2440; 
        /* Reset de regras do desktop que podem vazar */
        padding: 0;
        margin: 0;
        border-right: 0;
        height: auto;
    }
    
    /* Regras dos 'a' dentro do flyout */
    ul.menuPortfolio li:not(.menu-logo-item) a { 
        font-size: 16px; 
        font-weight: 500; 
        text-transform: none; 
        color: #e0e0e0 !important; 
        text-align: left; 
        letter-spacing: normal; 
        overflow: visible;
        display: block;
        position: relative;
        width: 100%;
        padding: 18px 25px !important; /* Força o override do padding de desktop */
    }
    ul.menuPortfolio li:not(.menu-logo-item) a::after { 
        left: 25px; 
        bottom: 8px; 
        width: calc(100% - 50px); 
        height: 2px; 
        background-color: var(--cyan-claro); 
        transform: scaleX(0); 
        transform-origin: left; 
        transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    }
    ul.menuPortfolio li:not(.menu-logo-item) a:hover { 
        color: var(--cyan-claro) !important; 
        background-color: #1c172b; 
    }
    ul.menuPortfolio li:not(.menu-logo-item) a:hover::after { 
        transform: scaleX(1); 
    }
}


/* * ==========================================================================
 * BREAKPOINT 0: CORREÇÃO "SQUEEZE POINT" (TAILWIND)
 * (Entre 768px e 1023px)
 * ==========================================================================
 */
@media (min-width: 768px) and (max-width: 1023px) {
    /*
     * DIAGNÓSTICO: O container do Tailwind está em max-width: 768px,
     * mas o md:grid-cols-3 está ativo, espremendo 3 colunas.
     * * SOLUÇÃO: Forçamos o grid de serviços para 1 coluna
     * apenas nesta faixa de viewport e limitamos sua largura
     * para melhor legibilidade.
     */
    #services .grid {
        grid-template-columns: repeat(1, 1fr);
        max-width: 500px; /* Controla a largura da linha para leitura */
        margin-left: auto;
        margin-right: auto;
    }

    /* O grid de "Quem Sou" (md:grid-cols-2) também pode apertar.
       Vamos forçá-lo para 1 coluna também. */
    #sou .grid {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* * ==========================================================================
 * BREAKPOINT 1: TABLETS (LANDSCAPE) E DESKTOPS PEQUENOS
 * (max-width: 1024px) - O breakpoint 'lg' do Tailwind
 * ==========================================================================
 */
@media (max-width: 1024px) {
    /* * O seu menu já muda para 'hambúrguer' aqui (via portfolio.css).
     * Nota: A regra acima (max-width: 1023px) já cuidou
     * do grid de serviços.
     */

    /* --- 1.1 Portfólio Grids --- */
    /* O HTML tem 'md:grid-cols-6' (6 cols acima de 768px).
       Vamos reduzir para 5 colunas em telas de tablet. */
    #portfolio-dev .grid,
    #portfolio-criacao .grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.5rem;
    }

    /* --- 1.2 Tipografia Hero --- */
    /* Reduz levemente a tipografia principal */
    #hero h1.text-4xl {
        font-size: 3.25rem; /* ~52px */
    }
    #hero h2, #hero p {
        font-size: 1.1rem; /* ~17px */
    }

    /* --- 1.3 Seção 'Quem Sou' --- */
    /* Reduz a altura da imagem de 'about' */
    #sou .h-\[40vh\] {
        height: 35vh;
    }
}


/* * ==========================================================================
 * BREAKPOINT 2: TABLETS (PORTRAIT)
 * (max-width: 768px) - O breakpoint 'md' do Tailwind
 * ==========================================================================
 */
@media (max-width: 768px) {
    /* * A partir daqui, as classes 'md:' do Tailwind param de funcionar.
     * O grid de serviços e 'Quem Sou' vira 1 coluna (corretamente).
     */

    /* --- 2.1 Tipografia Geral --- */
    h3.text-3xl {
        font-size: 2rem; /* 32px */
        line-height: 2.5rem;
    }

    /* --- 2.2 Layout de Seções --- */
    /* Reduz o padding vertical (py-24) para economizar espaço */
    main section[id] {
        padding-top: 4.5rem; /* ~py-18 */
        padding-bottom: 4.5rem; /* ~py-18 */
    }

    /* --- 2.3 Seção Hero --- */
    #hero {
        height: auto;
        min-height: 80vh;
        padding-top: 10rem; /* Mais espaço para o header fixo */
        padding-bottom: 5rem;
        text-align: center; 
    }
    #hero h1.text-4xl {
        font-size: 2.5rem; /* 40px */
        line-height: 1.1;
    }
    #hero h2, #hero p {
        font-size: 1rem;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    /* --- 2.4 Portfólio Grids --- */
    /* Abaixo de 768px, o 'md:grid-cols-6' para de funcionar.
       Em vez de 1 coluna (padrão), definimos 4 colunas. */
    #portfolio-dev .grid,
    #portfolio-criacao .grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* --- 2.5 Seção 'Quem Sou' (#sou) --- */
    /* Ajusta o link do LinkedIn (que usa 'display: flex' inline).
       Força o texto e o ícone a empilharem verticalmente. */
    #sou div[style*="display: flex"] {
        flex-direction: column;
        align-items: flex-start !important; /* Sobrescreve o 'align-items: center' */
    }
    #sou div[style*="display: flex"] p {
         margin-right: 0 !important;
         margin-bottom: 1rem;
    }

    /* --- 2.6 Seção Contato (#contato) --- */
    /* Força os campos "Telefone" e "Serviço Desejado" (LabelDuplo)
       a empilharem verticalmente. */
    .LabelDuplo {
        flex-direction: column;
        gap: 0;
    }
    /* Reduz a altura mínima da imagem do astronauta */
    #contato .min-h-\[400px\] {
        min-height: 300px;
    }
}


/* * ==========================================================================
 * BREAKPOINT 3: CELULARES GRANDES
 * (max-width: 640px) - O breakpoint 'sm' do Tailwind
 * ==========================================================================
 */
@media (max-width: 640px) {

    /* --- 3.1 Portfólio Grids --- */
    /* Reduzindo de 4 para 3 colunas */
    #portfolio-dev .grid,
    #portfolio-criacao .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.25rem; /* 4px */
    }

    /* --- 3.2 Tipografia --- */
    h3.text-3xl {
        font-size: 1.8rem; /* ~29px */
        line-height: 2.2rem;
    }
    #hero h1.text-4xl {
        font-size: 2.1rem; /* ~34px */
        line-height: 2.3rem;
    }
    #hero h2, #hero p {
        font-size: 0.9rem; /* ~14px */
    }
    
    /* --- 3.3 Botões Flutuantes --- */
    /* Seu 'portfolio.css' já move o WhatsApp para 'bottom: 70px'
       em '@media (max-width: 667px)'. Vamos padronizar para 640px
       e ajustar ambos os botões. */
    .whatsapp-float {
        bottom: 70px;
        width: 45px;
        height: 45px;
        font-size: 25px;
    }
    
    /* a#voltar-topo {
        bottom: 70px;  
        right: 75px; 
        width: 45px;
        height: 45px;
        font-size: 22px;
        padding: 8px 10px;
    } */

    #contato .p-8{
        padding: 0;
    }
    
    /* --- 3.4 Lightbox Responsivo --- */
    #lightbox-img {
        max-width: 90vw;
        max-height: 70vh;
        width: auto;
        height: auto;
    }
    
    #lightbox-prev,
    #lightbox-next {
        font-size: 2rem;
        padding: 10px;
    }
    
    #lightbox-close {
        font-size: 2rem;
        top: 10px;
        right: 10px;
    }
    
}


/* * ==========================================================================
 * BREAKPOINT 4: CELULARES PEQUENOS
 * (max-width: 480px) - Breakpoint comum (ex: iPhone SE)
 * ==========================================================================
 */
@media (max-width: 480px) {

    /* --- 4.1 Portfólio Grids --- */
    /* Reduzindo de 3 para 2 colunas, o mínimo ideal. */
    #portfolio-dev .grid,
    #portfolio-criacao .grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- 4.2 Grid de Ferramentas --- */
    /* O HTML usa 'grid-cols-3' como base. Em telas muito estreitas,
       vamos adicionar mais espaço entre os itens. */
    #tools-grid {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 1rem;
        row-gap: 2rem;
    }

    /* --- 4.3 Tipografia --- */
    #hero h1.text-4xl {
        font-size: 1.9rem; /* ~30px */
    }

    /* --- 4.4 Lightbox Mobile --- */
    #lightbox-img {
        max-width: 95vw;
        max-height: 60vh;
    }
    
    #lightbox-prev,
    #lightbox-next {
        font-size: 1.5rem;
        left: 5px;
        right: 5px;
    }
    
    #lightbox-close {
        font-size: 1.8rem;
        top: 5px;
        right: 5px;
    }

    /* --- 4.5 Footer --- */
    /* Empilha os elementos do rodapé */
    .FooterPortfolio .row {
        /* Inverte a ordem para links sociais virem primeiro */
        flex-direction: column-reverse; 
        gap: 1.5rem;
    }
    .FooterPortfolio .copyright, 
    .FooterPortfolio .footer-social-links {
        /* Centraliza tudo */
        text-align: center;
        justify-content: center;
    }
}