/* =========================================================================
   RESPONSIVE.CSS
   Centralização e ajustes finos da responsividade (Tablet e Mobile).
========================================================================= */

/* --- CORREÇÕES GLOBAIS --- */
html,
body {
    overflow-x: hidden;
    /* Evita vazamento horizontal */
    max-width: 100vw;
}

img,
svg {
    max-width: 100%;
    /* Segurança pra quebra de grids */
}

/* Touch Targets Mínimos (44px da Apple Human Interface Guidelines) */
button,
a.btn-primary,
a.btn-outline,
a.btn-phone,
a.social-badge,
.testimonials-selector {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Legibilidade nativa mínima */
p,
span,
li,
a {
    font-size: max(14px, var(--text-body));
}


/* =========================================================================
   TABLET (810px a 1199px)
========================================================================= */
@media screen and (min-width: 810px) and (max-width: 1199px) {

    /* Containers e Espaçamentos */
    .container {
        padding: 0 32px;
    }

    section {
        padding: 60px 0;
    }

    /* Tipografia */
    .hero-title {
        font-size: 64px !important;
    }

    h2,
    .section-title,
    .cta-title,
    .footer-slogan {
        font-size: 40px !important;
    }

    .service-item-title {
        font-size: 28px !important;
    }

    /* Navbar (Esconde links textuais e exibe hambúrguer - já coberto em navbar.css) */

    /* Serviços */
    .services-image {
        height: 517px !important;
    }

    /* Grids - Transformar 3 colunas em 2 colunas quando necessário */
    .about-grid,
    .footer-right,
    .location-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Alturas Bento Grid - proporcionalmente menores */
    .about-img-wrap {
        height: auto;
        min-height: 250px;
    }

    /* Galeria */
    .gallery-grid {
        gap: 32px;
    }
}


/* =========================================================================
   MOBILE (Max-width 809px)
========================================================================= */
@media screen and (max-width: 809px) {

    /* Containers e Espaçamentos */
    .container {
        padding: 0 16px !important;
    }

    section {
        padding: 40px 0 !important;
    }

    /* Tipografia */
    .hero-title {
        font-size: 40px !important;
    }

    h2,
    .section-title,
    .cta-title,
    .footer-slogan {
        font-size: 30px !important;
    }

    .service-item-title {
        font-size: 24px !important;
    }

    /* Transformar TUDO em coluna única */
    .hero-bottom-bar,
    .services-layout,
    .about-grid,
    .location-grid,
    .footer-middle,
    .footer-top {
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    /* Botões Largura Máxima */
    .btn-primary,
    .btn-outline,
    .btn-phone,
    .location-btn,
    .cta-btn-main {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Header / Hero Section */
    .hero {
        min-height: 800px !important;
        padding-top: 160px !important;
    }

    /* Serviços */
    .services-image {
        position: static !important;
        height: 398px !important;
    }

    /* Galeria */
    .gallery-grid {
        display: flex !important;
        /* Retira o Grid */
        flex-direction: column !important;
        gap: 24px !important;
    }

    .gallery-col {
        gap: 24px !important;
        padding-top: 0 !important;
    }

    .gallery-img-wrap {
        height: 350px !important;
        width: 100% !important;
    }

    /* Footer */
    .footer-right {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 32px !important;
    }

    .footer-links-col {
        width: 100%;
    }

    .social-badges {
        flex-wrap: wrap;
    }

    /* Testimonials */
    .testimonials-viewport {
        /* Reforça o swipe snap do nativo css */
        scroll-snap-type: x mandatory;
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        /* Suavidade no iOS */
    }

    .testimonial-item {
        scroll-snap-align: center;
        flex: 0 0 100%;
    }

    /* CTA */
    .cta-card {
        padding: 40px 16px !important;
    }

    .cta-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 16px !important;
    }

    /* Ticker */
    .ticker-text {
        font-size: 80px !important;
    }
}