/* responsive.css - Redesign v2.0 */

/* Tablets grandes e desktops pequenos (1200px -> 992px) */
@media screen and (max-width: 1199.98px) {
    .container { max-width: 960px; }
    html { font-size: 15.5px; } /* Slightly smaller base */
    .banner-content h1 { font-size: clamp(2.6rem, 5.5vw, 3.2rem); } /* Adjust clamp */
    .banner-content h2 { font-size: clamp(2.3rem, 4.5vw, 2.8rem); }
    .page-header h1 { font-size: 2.6rem; }
    .estrutura-grid { grid-template-columns: repeat(2, 1fr); } /* 2 columns earlier */
}

/* Tablets (992px -> 768px) */
@media screen and (max-width: 991.98px) {
    .container { max-width: 720px; }
    html { font-size: 15px; }
    /* Adjust Font Sizes */
    h1 { font-size: clamp(2.2rem, 5vw, 2.6rem); }
    h2, .section-title { font-size: clamp(1.8rem, 4vw, 2.1rem); }
    h3 { font-size: clamp(1.3rem, 3vw, 1.5rem); }
    h4 { font-size: clamp(1.1rem, 2.5vw, 1.2rem); }
    .page-header h1 { font-size: 2.4rem; }
    .page-header p { font-size: 1.05rem; }
    .intro-text { font-size: 1.05rem; }
    .section { padding: var(--space-lg) 0; } /* Adjust section padding */

    /* Header */
    #header nav .menu li { margin-left: var(--space-sm); }
    #header nav .menu a { font-size: 0.85rem; }

    /* Banner */
    .banner-container { min-height: 400px; height: 75vh; max-height: 550px; } /* Adjust height */
    .banner-content { max-width: 85%; margin-left: 5%; padding: var(--space-md); } /* More centered */
    .banner-content h1 { font-size: clamp(2.2rem, 5.5vw, 2.8rem); }
    .banner-content h2 { font-size: clamp(2rem, 5vw, 2.6rem); }
    .banner-content p { font-size: 1.05rem; }

    /* Grids */
    .services-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .missao-visao-valores-grid { grid-template-columns: 1fr; } /* Stack MVV */
    .diretoria-grid { grid-template-columns: 1fr; max-width: 450px; }
    .relatorios-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .contato-grid { grid-template-columns: 1fr; } /* Stack contact */
    .mapa-container { grid-column: auto; } /* Reset map span */
    .parceiros-logos-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-md); }

    /* Specific Components */
    .counter-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
    .counter-number { font-size: 2.8rem; }
    .quem-somos-content { grid-template-columns: 1fr; text-align: center; gap: var(--space-lg); }
    .quem-somos-text { order: 1; }
    .quem-somos-image { order: -1; margin: 0 auto var(--space-lg); max-width: 500px; }
    .projeto-content-wrapper { grid-template-columns: 1fr !important; gap: var(--space-lg); } /* Force 1 column */
    #projeto-itaborai .project-gallery { order: 0; } /* Reset gallery order */
    .project-gallery { margin-top: var(--space-md); }
    .gallery-images { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } /* Smaller gallery items */

    /* Rodapé */
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
    #footer h3 { font-size: 1rem; }
}

/* Tablets pequenos e celulares grandes (768px -> 576px) */
@media screen and (max-width: 767.98px) {
    .container { max-width: 540px; padding: 0 var(--space-sm); }
    html { font-size: 14.5px; } /* Further adjust base */
    body { font-size: 1rem; line-height: 1.65; }
    p { font-size: 1rem; }
    h1 { font-size: clamp(1.9rem, 6vw, 2.3rem); }
    h2, .section-title { font-size: clamp(1.6rem, 5vw, 1.9rem); }
    h3 { font-size: clamp(1.25rem, 4vw, 1.4rem); }
    .intro-text { font-size: 1rem; margin-bottom: var(--space-md); }
    .section { padding: var(--space-lg) 0; } /* Revert to slightly larger section padding */

    /* Header e menu mobile */
    :root { --header-height-initial: 65px; --header-height-sticky: 60px; } /* Smaller header */
    #header .container { height: var(--header-height-initial); }
    #header.sticky .container { height: var(--header-height-sticky); }
    #header .logo img { max-height: calc(var(--header-height-initial) - 25px); }
    #header.sticky .logo img { max-height: calc(var(--header-height-sticky) - 20px); }
    #header nav .menu { display: none; } /* Esconde menu desktop */
    #header nav .mobile-menu-btn { display: block; } /* Mostra botão mobile */

    /* Estilos do Menu Mobile Lateral (quando ativo via JS) */
    #header nav .menu.active {
        display: flex; position: fixed; top: 0; right: -100%; /* Start off-screen */ width: 80%; max-width: 280px; height: 100vh;
        background-color: var(--clr-white); flex-direction: column; justify-content: flex-start;
        padding-top: var(--header-height-sticky); /* Align with sticky header */
        transition: right var(--transition-normal);
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); z-index: 1050; overflow-y: auto;
    }
    #header nav .menu.active.show { right: 0; /* Slide in */ }
    #header nav .menu li { margin: 0; width: 100%; border-bottom: 1px solid var(--clr-border); }
    #header nav .menu li:first-child { border-top: 1px solid var(--clr-border); }
    #header nav .menu a {
        display: block !important; padding: var(--space-sm) var(--space-md) !important;
        font-size: 1rem !important; font-weight: 600 !important; color: var(--clr-text) !important;
        text-align: left !important;
        border: none; background: none; text-transform: none; letter-spacing: normal;
    }
    #header nav .menu a::after { display: none !important; } /* No underline */
    #header nav .menu a.active { background-color: var(--clr-primary-light) !important; color: var(--clr-accent) !important; }
    #header nav .menu a:hover { background-color: var(--clr-bg-light) !important; color: var(--clr-accent) !important; }

    /* Botão Hamburguer (X) Ativo */
    #header nav .mobile-menu-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    #header nav .mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
    #header nav .mobile-menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }

    /* Overlay ativado via JS */
    /* body.menu-open .menu-overlay { opacity: 1; visibility: visible; } */
    /* body.menu-open { overflow: hidden; } */

    /* Banner */
    .banner-container { min-height: 350px; height: 65vh; max-height: 480px; }
    .banner-content { max-width: 90%; padding: var(--space-md); text-align: center; margin-left: auto; margin-right: auto; }
    .banner-content h1 { font-size: clamp(1.8rem, 6vw, 2.1rem); }
    .banner-content h2 { font-size: clamp(1.6rem, 5vw, 1.9rem); }
    .banner-content p { font-size: 0.95rem; }
    .banner-content .btn { font-size: 0.85rem; padding: 0.7rem 1.5rem; }
    .banner-controls { bottom: var(--space-sm); }
    .prev-btn, .next-btn { width: 35px; height: 35px; font-size: 1.4rem; }
    .dot { width: 8px; height: 8px; margin: 0 4px; }
    .dot.active { width: 10px; height: 10px;}

    /* Page Header */
    .page-header { padding: var(--space-md) 0; margin-top: var(--header-height-initial); }
    #header.sticky + .page-header { margin-top: var(--header-height-sticky); }
    .page-header h1 { font-size: 2rem; }
    .page-header p { font-size: 1rem; }

    /* Grids pass to 1 column */
    .services-grid, .estrutura-grid, .relatorios-grid { grid-template-columns: 1fr; }
    .card-base { padding: var(--space-md); }
    .card-base h3 { font-size: 1.2rem; }
    .card-base p { font-size: 0.95rem; }
    .diretor-img { width: 140px; height: 140px;}

    /* Contador */
    .counter-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); } /* Keep 2 cols */
    .counter-item { padding: var(--space-sm) 0; }
    .counter-number { font-size: 2.2rem; }
    .counter-label { font-size: 0.8rem; }

    /* CTA Buttons */
    .contato-cta { flex-direction: column; gap: var(--space-sm); align-items: center; }
    .contato-cta .btn { width: 100%; max-width: 300px; font-size: 0.95rem;}

    /* Projetos */
    .gallery-images { grid-template-columns: repeat(2, 1fr); } /* Back to 2 columns if space allows */
    .gallery-images img { height: 160px; }
    .parceiros-logos-grid { grid-template-columns: repeat(2, 1fr); }

    /* Contato */
    .contato-info h2, .whatsapp-contact h2, .mapa-container h2 { font-size: 1.4rem; }
    .info-item { gap: var(--space-sm); }
    .info-content h3 { font-size: 1rem; }
    .info-content p { font-size: 0.9rem; }
    .whatsapp-contact p { font-size: 0.95rem;}
    .whatsapp-contact .btn { font-size: 0.9rem;}
    .social-icons a { width: 36px; height: 36px; font-size: 0.9rem;}
    .mapa iframe { height: 280px; }
    .form-grid { grid-template-columns: 1fr; } /* Stack form fields */

    /* Rodapé */
    .footer-grid { grid-template-columns: 1fr; text-align: center; gap: var(--space-md); }
    .footer-info .footer-logo { margin: 0 auto var(--space-md); }
    #footer h3 { font-size: 1rem; margin-bottom: var(--space-sm);}
    #footer p, #footer a { font-size: 0.9rem; }
    .footer-social .social-icons { justify-content: center; margin-bottom: var(--space-md);}
    .footer-bottom { font-size: 0.8rem; margin-top: var(--space-md); padding-top: var(--space-sm);}
}

/* Celulares Pequenos (Optional - Fine tuning) */
@media screen and (max-width: 420px) {
    html { font-size: 14px; }
    h1 { font-size: clamp(1.7rem, 6vw, 1.9rem); }
    h2, .section-title { font-size: clamp(1.4rem, 5vw, 1.7rem); }
    h3 { font-size: clamp(1.15rem, 4vw, 1.3rem); }
    .btn { padding: 0.65rem 1.3rem; font-size: 0.8rem; }
    .gallery-images { grid-template-columns: 1fr; } /* Stack gallery */
    .gallery-images img { height: 180px; }
    .diretor-img { width: 130px; height: 130px;}
    .page-header h1 { font-size: 1.8rem;}
    .banner-content h1 { font-size: clamp(1.7rem, 6vw, 2rem); }
    .banner-content h2 { font-size: clamp(1.5rem, 5vw, 1.8rem); }
    .counter-grid { grid-template-columns: 1fr; } /* Stack counter */
}