/* ============================================
   LANDING PAGE — MOBILE RESPONSIVO v5
   Arquivo separado do landing.css para melhor
   organização e manutenção.
   ============================================ */

/* Previne scroll horizontal que faz o layout parecer quebrado no mobile */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ---- Tablets e Mobile (max-width: 768px) ---- */
@media (max-width: 768px) {
    /* Tipografia */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.2rem; }

    /* Reduz padding das seções no mobile */
    section {
        padding: 3.5rem 0;
    }

    #about {
        padding: 2.5rem 0;
    }

    /* Container com safe-area para notch/Dynamic Island */
    .container {
        padding: 0 1rem;
        padding-left: max(1rem, env(safe-area-inset-left, 1rem));
        padding-right: max(1rem, env(safe-area-inset-right, 1rem));
    }

    /* Header: mostrar botão hamburguer */
    .menu-toggle {
        display: flex;
        flex-direction: column;
        background: none;
        border: none;
        padding: 6px;
        border-radius: 6px;
        cursor: pointer;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }

    /* Header: safe-area para iPhone */
    #main-header {
        padding-top: max(1rem, env(safe-area-inset-top, 1rem));
    }

    /* Nav mobile: dropdown que aparece ao clicar no hamburguer */
    #main-header nav {
        position: absolute;
        top: 100%;
        right: 0;
        background: rgba(26, 26, 46, 0.98);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        width: 100%;
        flex-direction: column;
        align-items: center;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
        border-bottom: 1px solid rgba(37, 117, 252, 0.2);
    }

    #main-header nav.active {
        max-height: 320px;
        padding: 1rem 0;
    }

    #main-header nav ul {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    #main-header nav ul li {
        width: 100%;
        text-align: center;
    }

    #main-header nav ul li a {
        display: block;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        font-size: 1rem;
    }

    .btn-outline {
        margin-left: 0;
    }

    /* Hero: título glitch menor */
    .glitch-text {
        font-size: 2rem;
        gap: 4px;
        letter-spacing: 1px;
    }

    .typing-container {
        font-size: 1rem;
        height: 36px;
    }

    /*
     * Hero: empurra conteúdo abaixo do header fixo.
     * O header tem: padding-top = env(safe-area-inset-top) + padding base (~45px).
     * max() garante que funcione tanto em telas normais quanto com notch/Dynamic Island.
     */
    #hero {
        height: 100vh;   /* fallback para browsers sem suporte a svh */
        height: 100svh;
        padding-top: max(80px, calc(env(safe-area-inset-top, 0px) + 70px));
    }

    /* Projetos: 1 coluna */
    .project-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .project-card-modern {
        padding: 1.5rem;
    }

    /* Desabilitar hover pesado no mobile (sem mouse) */
    .project-card-modern:hover,
    .diferencial-item:hover,
    .about-card:hover {
        transform: none;
        box-shadow: none;
    }

    .section-title-glow {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }

    /* About */
    .about-card {
        padding: 1.5rem;
        margin: 1rem auto 0;
    }

    .about-card p {
        font-size: 0.95rem;
    }

    .about-icon {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
        margin-bottom: 1.2rem;
    }

    /* Diferenciais */
    .diferenciais-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .diferencial-item {
        padding: 1.5rem;
    }

    .diferencial-icon {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }

    /* Contact */
    .contact-item {
        min-width: auto;
        width: 100%;
        font-size: 1rem;
        padding: 15px 20px;
        flex-direction: column;
        text-align: center;
    }

    .contact-item i {
        font-size: 1.5rem;
    }

    .linkedin-links {
        flex-direction: column;
        gap: 5px;
    }

    .linkedin-links .separator {
        display: none;
    }

    .contact-card {
        padding: 1.5rem;
        margin: 1rem auto 0;
    }

    .contact-icon-large {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }

    /* Footer */
    .footer-content {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    .footer-brand {
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-text {
        font-size: 1.2rem;
    }

    .footer-logo i {
        font-size: 1.6rem;
    }
}

/* ---- Smartphones pequenos (max-width: 480px) ---- */
@media (max-width: 480px) {
    h1 { font-size: 1.7rem; }
    h2 { font-size: 1.5rem; }

    section {
        padding: 2.5rem 0;
    }

    .glitch-text {
        font-size: 1.5rem;
        letter-spacing: 0.5px;
    }

    .typing-container {
        font-size: 0.85rem;
        height: 32px;
    }

    .project-card-modern {
        padding: 1.25rem;
    }

    .project-icon {
        width: 56px;
        height: 56px;
        font-size: 1.4rem;
        margin-bottom: 1.2rem;
    }

    /* Matrix canvas: reduz partículas para melhorar performance */
    #matrix-canvas {
        opacity: 0.08;
    }
}

/* ---- iPhone SE e telas muito pequenas (max-width: 375px) ---- */
@media (max-width: 375px) {
    h1 { font-size: 1.4rem; }

    .glitch-text {
        font-size: 1.25rem;
    }

    .typing-container {
        font-size: 0.75rem;
    }

    .project-card-modern {
        padding: 1rem;
    }
}