/*
 * Ajustes responsivos para notebooks e telas com pouca altura útil.
 * Mantido separado do CSS principal para facilitar atualizações em hospedagem.
 */

@media (min-width: 861px) {
    .header-inner {
        width: min(calc(100% - 32px), 1420px);
    }

    /*
     * Faz os filtros entrarem mais no banner e reduz o vazio entre
     * a chamada principal e a busca rápida.
     */
    .quick-search {
        position: relative;
        z-index: 4;
        margin-top: -140px;
    }

    .main-nav {
        gap: 18px;
    }

    .hero-copy {
        max-width: 760px;
    }

    .hero-copy h1 {
        font-size: clamp(2.4rem, 4.3vw, 4.25rem);
    }
}

/*
 * Antecipamos o menu em gaveta quando todos os links já não cabem
 * confortavelmente no cabeçalho.
 */
@media (min-width: 861px) and (max-width: 1180px) {
    .menu-toggle {
        display: block;
    }

    .main-nav {
        position: fixed;
        top: 76px;
        right: -100%;
        width: min(88vw, 380px);
        height: calc(100vh - 76px);
        background: #111;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 28px;
        gap: 0;
        transition: right .25s ease;
    }

    .main-nav.open {
        right: 0;
    }

    .main-nav > a {
        padding: 15px 0;
        border-bottom: 1px solid #292929;
        font-size: .82rem;
    }

    .main-nav .btn {
        margin-top: 20px;
    }
}

/*
 * Entre tablet horizontal e notebook compacto, os filtros passam a ocupar
 * duas linhas. A compensação mantém o início do conteúdo no mesmo ritmo.
 */
@media (min-width: 861px) and (max-width: 1100px) {
    .quick-search {
        margin-bottom: -83px;
    }
}

/*
 * Em telas largas, porém baixas, o conteúdo deixa de ser centralizado
 * verticalmente. Isso reserva uma faixa segura para a busca inferior.
 */
@media (min-width: 861px) and (max-height: 780px) {
    .hero {
        height: 100vh;
        min-height: 650px;
    }

    /*
     * Mantém os filtros logo abaixo dos botões mesmo quando a área útil
     * do navegador é baixa. O topo visual permanece estável em 458px.
     */
    .quick-search {
        margin-top: calc(470px - max(650px, 100vh));
        /*
         * Compensa o deslocamento visual para que a primeira seção de
         * conteúdo continue começando depois do banner, com seu respiro.
         */
        margin-bottom: calc(max(650px, 100vh) - 610px);
    }

    .hero-content {
        justify-content: flex-start;
        padding-top: 118px;
        padding-bottom: 140px;
    }

    .hero-copy h1 {
        font-size: clamp(2.8rem, 4vw, 3.75rem);
        line-height: 1.06;
        margin-bottom: 14px;
    }

    .hero-copy > p:not(.eyebrow) {
        max-width: 650px;
        font-size: 1rem;
    }

    .hero-actions {
        margin-top: 18px;
    }

    .hero-search {
        bottom: 28px;
    }
}

@media (min-width: 861px) and (max-width: 1100px) and (max-height: 780px) {
    .quick-search {
        margin-bottom: calc(max(650px, 100vh) - 693px);
    }
}