/* ============================================================================
   home-tablet.css — home de computador entre 768 e 1.280 px (iPad, janela estreita)
   ----------------------------------------------------------------------------
   - Só regras dentro de @media (max-width: 1280px): acima de 1.280 px nada muda.
     (Era até 1.200 px; de 1.201 a 1.280 o menu, o bloco de notícias e as setas dos
     carrosséis ainda passavam até 73 px da tela.)
   - Complementa o home-responsive.css (que cuida do conteúdo até 820 px).
   - Cabeçalho: banner, faixa preta (logo, busca, clima) e barra do menu cabem na
     tela, sem cortar e sem rolagem lateral; o menu quebra em duas linhas se precisar.
   ============================================================================ */

@media (max-width: 1280px) {

    /* ---- banner do topo (750 x 90; o #super-banner é flutuante, a altura fica a original) ---- */
    #topo-banner,
    #topo-banner #super-banner {
        max-width: 100%;
    }
    #topo-banner #super-banner img,
    #topo-banner #super-banner iframe {
        max-width: 100%;
    }

    /* ---- faixa preta: logo, busca e clima numa linha (quebra se faltar espaço) ---- */
    #nav { height: auto; }             /* era 175 px fixos: a busca saía da faixa preta */
    #nav .linha1 {
        width: auto;
        max-width: 1190px;
        margin: 0 auto;
        padding: 12px 12px 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        column-gap: 24px;
        box-sizing: border-box;
    }
    #nav .linha1 .container-nav { float: none; }
    #nav .linha1 .container-nav.busca {
        order: 0;
        flex: 1 1 360px;
        width: auto;
        max-width: 640px;
        margin: 0;
    }
    #nav .container-nav .box-busca {
        width: auto;
        height: auto;
        margin: 12px 0;
        box-sizing: border-box;
    }
    #nav .container-nav .box-busca form {
        display: flex;
        align-items: center;
    }
    #nav .container-nav .input-busca {
        float: none;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
    #nav .container-nav .box-busca button {
        float: none;
        flex: 0 0 auto;
        margin-top: 0;
    }
    #nav .container-nav.temperatura {
        width: auto;
        margin-top: 0;
    }
    #nav .container-nav .box-valores { display: flow-root; }

    /* ---- barra do menu: largura da tela; os itens quebram em duas linhas se precisar ---- */
    #nav .linha2 {
        width: auto;
        padding: 6px 0 0;
    }
    #nav #bloco-menu {
        width: auto;
        height: auto;
        margin-left: 0;
    }
    #nav .menu {
        width: auto;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #nav .menu > li { float: none; }
    #nav .menu > li > a {
        padding-left: 14px;
        padding-right: 14px;
    }
    /* submenus: fechados não ocupam espaço (antes, invisíveis, alargavam a página);
       a partir do 3º item abrem para a esquerda, para não passar da borda */
    #nav .menu ul {
        display: none;
        max-width: calc(100vw - 16px);
        box-sizing: border-box;
        z-index: 5;                    /* por cima da 2ª linha do menu */
    }
    #nav .menu li:hover > ul { display: block; }
    #nav .menu > li:nth-child(n+3) > ul {
        left: auto;
        right: 0;
    }

    /* ---- faixa de banner abaixo do menu (1190 px): alinhada à esquerda, sem passar da tela ---- */
    #barra-superior {
        float: none;
        width: auto;
        max-width: 100%;
        height: auto;
        overflow: hidden;
    }
    #barra-superior img,
    #barra-superior iframe {
        max-width: 100%;
    }
    #barra-superior img { height: auto; }

    /* ---- carrosséis de banners: setas dentro da largura (eram 30 px para fora) ---- */
    #tudo .carousel-container { left: 0; }
    #tudo .carousel1 .tns-controls,
    #tudo .carousel2 .tns-controls {
        left: 0;
        width: 100%;
    }

    /* ---- notícias e eventos: o padding somava 30 px à largura ---- */
    .news-block-container { box-sizing: border-box; }

    /* ---- lista do autocomplete da busca do topo (550 px fixos): nunca passa da tela.
       A posição logo abaixo do campo fica num script do index.php (o top:248px do
       estilo_topo_novo.css é !important). ---- */
    .ui-autocomplete.ui-widget-content { max-width: calc(100vw - 24px); }
}

/* ---- busca de vagas: os selects com 16 px em tela de toque (com 14 px o iPhone/iPad dá zoom ao tocar);
   com mouse nada muda ---- */
@media (pointer: coarse) and (max-width: 1199px) {
    .search-row .input-group select { font-size: 16px; }
}

/* ---- conteúdo de 821 a 1.280 px (até 820 o home-responsive.css já deixa fluido) ---- */
@media (min-width: 821px) and (max-width: 1280px) {
    #tudo,
    #geral {
        width: auto;
        max-width: 1190px;
    }
    #tudo {
        padding: 0 8px;
        box-sizing: border-box;
    }
    /* cards de empresa: 3 colunas só quando cabem (o card não encolhe abaixo de ~360 px) */
    .business-container {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    }
}

/* ---- imóveis de 768 a 1.280 px: cards do mesmo tamanho (o último esticava e ocupava a linha toda) ---- */
@media (min-width: 768px) and (max-width: 1280px) {
    #tudo .properties-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
    #tudo .property-card {
        width: auto;
        min-width: 0;
    }
    #tudo .property-card .property-image {
        width: 100%;
        height: 140px;                 /* o home-responsive punha height:auto e os cards ficavam desiguais */
    }
}