/* ============================================================
   PORTAL DO VIDRO - CSS RESPONSIVO (responsive.css)
   Ajustes de responsividade e refinamentos mobile-first
   ============================================================ */

/* ============================================================
   MOBILE FIRST (base já no style.css)
   Ajustes adicionais para telas pequenas (até 576px)
   ============================================================ */

@media (max-width: 575.98px) {

    /* Ajuste da navbar ao scroll */
    .navbar {
        padding: 0.8rem 0;
    }

    /* Hero: melhor leitura no mobile */
    .hero h1,
    .hero-sobre h1,
    .hero-projetos h1,
    .hero-servicos h1,
    .hero-contato h1 {
        font-size: 1.9rem;
        line-height: 2.4rem;
    }

    .hero p {
        font-size: 1rem;
        padding: 0 10px;
    }

    /* Grid de serviços */
    .service-card,
    .service-box {
        text-align: center;
    }

    /* Galeria */
    .gallery-card img {
        width: 100%;
        height: auto;
    }

    /* Formulário */
    form .form-control {
        font-size: 0.95rem;
        padding: 10px;
    }

    /* WhatsApp flutuante menor */
    .whatsapp-float img {
        width: 50px;
        height: 50px;
    }
}

/* ============================================================
   BREAKPOINT SM (≥ 576px)
   ============================================================ */

@media (min-width: 576px) and (max-width: 767.98px) {

    .hero h1 {
        font-size: 2.2rem;
    }

    .gallery-card {
        margin-bottom: 20px;
    }
}

/* ============================================================
   BREAKPOINT MD (≥ 768px)
   ============================================================ */

@media (min-width: 768px) and (max-width: 991.98px) {

    /* Quem somos: texto primeiro em telas médias */
    .quem-somos .col-lg-6:first-child {
        order: 2;
    }

    .quem-somos .col-lg-6:last-child {
        order: 1;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .service-box p {
        font-size: 0.95rem;
    }
}

/* ============================================================
   BREAKPOINT LG (≥ 992px)
   ============================================================ */

@media (min-width: 992px) and (max-width: 1199.98px) {

    /* Ajuste de títulos */
    h1 {
        font-size: 2.7rem;
    }

    .gallery-card img {
        height: 260px;
        object-fit: cover;
    }
}

/* ============================================================
   BREAKPOINT XL (≥ 1200px)
   ============================================================ */

@media (min-width: 1200px) and (max-width: 1399.98px) {

    .hero {
        background-position: center 20%;
    }

    .gallery-card img {
        height: 300px;
    }
}

/* ============================================================
   BREAKPOINT XXL (≥ 1400px)
   ============================================================ */

@media (min-width: 1400px) {

    .hero {
        min-height: 80vh;
        background-position: center 10%;
    }

    .hero h1 {
        font-size: 3.4rem;
    }

    .gallery-card img {
        height: 340px;
        object-fit: cover;
    }
}

/* ============================================================
   AJUSTES ESPECÍFICOS PARA O SITE
   ============================================================ */

/* Melhor leitura do texto sobreposto no Hero */
@media (max-width: 991.98px) {
    .hero::before,
    .hero-sobre::before,
    .hero-projetos::before,
    .hero-servicos::before,
    .hero-contato::before {
        backdrop-filter: brightness(0.6);
    }
}

/* Cards de serviços mais confortáveis */
@media (max-width: 767.98px) {
    .service-box {
        padding: 18px;
    }

    .service-box img {
        max-width: 70%;
    }
}

/* Galeria — mantém o aspecto masonry em mobile */
@media (max-width: 767.98px) {
    .gallery-item {
        padding: 6px;
    }
}

/* CTA mais amigável */
@media (max-width: 575.98px) {
    .cta-section h2 {
        font-size: 1.6rem;
    }

    .cta-section .btn-lg {
        padding: 10px 28px;
        font-size: 1rem;
    }
}