/* ==========================================================================
   METTA — camada responsiva (mobile/tablet)
   O design exportado e desktop-only: hero em 2 colunas de 50%, grids de 3-5
   colunas, linhas flex sem wrap e nav em linha unica. Tudo aqui esta dentro de
   @media, entao o desktop (>900px) fica exatamente como o design original.
   Os seletores casam o style inline (o export inteiro e estilizado inline) e
   usam !important porque regra !important de folha vence style inline normal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MENU (regras globais, valem em qualquer largura)
   O dropdown "Bairros" era controlado por estado JS (onMouseEnter -> setState).
   Agora ele fica sempre no DOM e a abertura e por CSS: :hover/:focus-within no
   desktop, e lista aberta dentro do painel no mobile. Isso permite alcançar os
   bairros pelo hamburguer (em toque nao existe hover).
   -------------------------------------------------------------------------- */
.mt-nav-toggle { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; pointer-events: none !important; }
.mt-burger { display: none; }              /* so aparece no mobile */
.mt-drop { display: none; }
.mt-bairros:hover > .mt-drop,
.mt-bairros:focus-within > .mt-drop { display: block; }


@media (max-width: 900px) {

  body img { max-width: 100% !important; }

  /* ---------- HEADER ----------
     linha 1: [logo ......... Login] [hamburguer]
     linha 2: painel do menu, aberto/fechado pelo checkbox (CSS puro, sem JS). */
  body header {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    padding: 12px 16px !important;
    gap: 10px !important;
  }
  body header > a img { height: 34px !important; }

  .mt-burger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    order: 3;
    cursor: pointer;
    color: #fff;
    padding: 6px;
    -webkit-tap-highlight-color: transparent;
  }
  .mt-burger .mt-ico-x { display: none; }
  #mt-nav:checked ~ .mt-burger .mt-ico-bars { display: none; }
  #mt-nav:checked ~ .mt-burger .mt-ico-x { display: inline-block; }

  body header > div:last-child {
    order: 2;
    margin-left: auto !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  /* "Sao Paulo, SP" sai no mobile; o botao Login fica */
  body header > div:last-child > div:first-child { display: none !important; }

  /* painel do menu */
  body header > nav[style] {
    display: none !important;
    order: 4;
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    font-size: 16px !important;
    padding: 4px 0 8px !important;
    margin-top: 4px !important;
    border-top: 1px solid rgba(255, 255, 255, .12) !important;
  }
  #mt-nav:checked ~ nav { display: flex !important; }

  /* itens com area de toque confortavel */
  body header > nav > a,
  body header .mt-bairros > span {
    display: block !important;
    width: 100% !important;
    padding: 13px 2px !important;
  }
  body header .mt-bairros { width: 100% !important; }

  /* "Bairros" vira sublista sempre visivel dentro do menu */
  body header .mt-drop {
    display: block !important;
    position: static !important;
    padding-top: 0 !important;
    min-width: 0 !important;
  }
  body header .mt-drop-inner {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 6px 16px !important;
  }

  /* ---------- HERO / SECOES EM 2 COLUNAS ---------- */
  body section[style*="display: flex"],
  body section[style*="display:flex"] {
    flex-direction: column !important;
    min-height: 0 !important;
  }
  /* a imagem do hero (div absoluto de 50%) vira faixa no topo */
  body section > div[style*="position: absolute"][style*="width: 50%"],
  body section > div[style*="position:absolute"][style*="width:50%"] {
    position: relative !important;
    width: 100% !important;
    height: 220px !important;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  }
  body div[style*="width: 50%"], body div[style*="width:50%"] { width: 100% !important; }

  /* ---------- GRIDS ----------
     minmax(0,1fr) e essencial: com "1fr" puro o track nao encolhe abaixo do
     min-content do card (padding + palavra longa) e o grid estoura a tela. */
  body [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  body [style*="repeat(4, 1fr)"], body [style*="repeat(4,1fr)"],
  body [style*="repeat(5, 1fr)"], body [style*="repeat(5,1fr)"],
  body [style*="repeat(6, 1fr)"], body [style*="repeat(6,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* ---------- LINHAS FLEX ----------
     botoes/cards lado a lado quebram em vez de empurrar a pagina. */
  body section [style*="display: flex"], body section [style*="display:flex"],
  body footer [style*="display: flex"], body footer [style*="display:flex"] {
    flex-wrap: wrap !important;
  }
  body [style*="flex-shrink: 0"], body [style*="flex-shrink:0"] { flex-shrink: 1 !important; }

  /* decoracoes posicionadas fora do fluxo (setas entre etapas) somem */
  body [style*="left: 100%"], body [style*="left:100%"] { display: none !important; }

  /* ---------- ESPACAMENTO ---------- */
  body section { padding-left: 18px !important; padding-right: 18px !important; }
  body footer { padding-left: 18px !important; padding-right: 18px !important; }
  body section[style*="padding: 92px"], body section[style*="padding:92px"],
  body [style*="padding: 92px 40px 92px 88px"] { padding: 44px 18px !important; }
  /* caixas internas com padding lateral grande */
  body [style*="padding: 40px"], body [style*="padding:40px"] { padding: 24px 20px !important; }

  /* ---------- TIPOGRAFIA ---------- */
  body h1 { font-size: clamp(28px, 7.6vw, 38px) !important; line-height: 1.15 !important; }
  body h2 { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.2 !important; }
  body h3 { font-size: clamp(17px, 4.6vw, 21px) !important; }

  /* ---------- CARROSSEL HORIZONTAL ----------
     "Destaques da regiao" usa grid-auto-columns: calc(25% - 12px) — 25% da
     largura do celular espremeria o card a ~76px. Vira 1 card + espiada. */
  body [style*="grid-auto-columns"] {
    grid-auto-columns: 82% !important;
    gap: 14px !important;
  }

  /* ---------- LARGURAS FIXAS ---------- */
  body [style*="min-width: 5"], body [style*="min-width: 6"],
  body [style*="min-width: 7"], body [style*="min-width: 8"],
  body [style*="min-width: 9"] { min-width: 0 !important; }
}

/* faixa 901-1022px: o layout "conteudo + coluna fixa de 380/400px" (Perfil
   Destaque) nao cabe e gera scroll horizontal. Empilha antes de estourar. */
@media (max-width: 1022px) {
  body [style*="grid-template-columns: 1fr 3"], body [style*="grid-template-columns:1fr 3"],
  body [style*="grid-template-columns: 1fr 4"], body [style*="grid-template-columns:1fr 4"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* celular: uma coluna em tudo, inclusive rodape e cards */
@media (max-width: 620px) {
  body [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  body footer [style*="grid-template-columns"] { gap: 26px !important; }
}