/* ============================================================
   CAMADA DE LAYOUT — criada em 21/08/2026.

   Existe uma camada de MARCA (marca.css: fonte, cor, logo, botão)
   e faltava esta: o LAYOUT. Era por isso que o Levi dizia que as
   páginas internas "não estão no mesmo layout, não está tão fluido"
   mesmo depois de ganharem a identidade certa — vestiram a roupa
   da home, mas continuaram com a estrutura antiga.

   O que esta camada porta da home (showcase/src/App.css) para o
   catálogo e para as três páginas de cidade:

     1. o card de imóvel (.listing-card): foto que dá zoom, véu
        navy no hover com o botão "Ver imóvel", corpo com rótulo,
        título serifado e preço tabular
     2. a grade assimétrica — o "quadradinho pulado" que ele viu em
        "Imóveis recentes": o primeiro card ocupa a largura inteira
        e o ritmo se repete a cada sete
     3. a busca em pílula, no lugar dos cantos retos
     4. o reveal ao rolar (a entrada suave que dá o "fluido")

   Entra DEPOIS de marca.css: aquele resolve a identidade, este
   resolve a estrutura. Cada página mantém o seu HTML — a mudança
   é só de apresentação, então nada de lógica ou de filtro quebra.

   ANIMAÇÃO: nada aqui está dentro de prefers-reduced-motion. O
   Windows do Levi tem "reduzir movimento" ligado, e respeitar isso
   apagaria a animação justamente na tela dele.
   ============================================================ */

/* ------------------------------------------------------------
   1. REVEAL — a entrada suave ao rolar.
   Idêntico ao da home. O layout.js põe .visible quando o
   elemento entra na tela.
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }
.reveal-d5 { transition-delay: .40s; }
.reveal-d6 { transition-delay: .48s; }

/* ------------------------------------------------------------
   2. A GRADE ASSIMÉTRICA.

   Catálogo usa .grid-imoveis, as páginas de cidade usam .grid.
   Os dois viram a mesma coisa: três colunas com um card largo
   abrindo o bloco e voltando a cada sete.

   grid-auto-flow: dense é o que impede o card largo de deixar
   buraco atrás de si — sem isso a grade fica com vão branco.
   ------------------------------------------------------------ */
.grid-imoveis,
.pagina-cidade .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: dense;
  gap: 26px;
  max-width: 1240px;
  margin-inline: auto;
}

/* o card largo: primeiro do bloco e depois a cada sete */
.grid-imoveis > .card:first-child,
.grid-imoveis > .card:nth-child(7n + 1),
.pagina-cidade .grid > .c:first-child,
.pagina-cidade .grid > .c:nth-child(7n + 1) {
  grid-column: span 2;
}
.grid-imoveis > .card:first-child .card-foto,
.grid-imoveis > .card:nth-child(7n + 1) .card-foto {
  aspect-ratio: 16 / 7;
}
.pagina-cidade .grid > .c:first-child > img,
.pagina-cidade .grid > .c:nth-child(7n + 1) > img {
  aspect-ratio: 16 / 7;
}

@media (max-width: 1080px) {
  .grid-imoveis,
  .pagina-cidade .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .grid-imoveis,
  .pagina-cidade .grid { grid-template-columns: 1fr; gap: 20px; }
  /* no celular ninguém ocupa duas colunas: só existe uma */
  .grid-imoveis > .card:first-child,
  .grid-imoveis > .card:nth-child(7n + 1),
  .pagina-cidade .grid > .c:first-child,
  .pagina-cidade .grid > .c:nth-child(7n + 1) { grid-column: 1; }
  .grid-imoveis > .card:first-child .card-foto,
  .grid-imoveis > .card:nth-child(7n + 1) .card-foto { aspect-ratio: 3 / 2; }
  .pagina-cidade .grid > .c:first-child > img,
  .pagina-cidade .grid > .c:nth-child(7n + 1) > img { aspect-ratio: 3 / 2; }
}

/* ------------------------------------------------------------
   3. O CARD, igual ao da home.
   ------------------------------------------------------------ */
.grid-imoveis > .card,
.pagina-cidade .grid > .c {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: none;
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .28s ease, box-shadow .28s ease;
}
.grid-imoveis > .card:hover,
.pagina-cidade .grid > .c:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 48px -16px rgba(15, 26, 60, .2);
}
.grid-imoveis > .card:active,
.pagina-cidade .grid > .c:active { transform: translateY(-2px); }

/* a foto e o zoom lento no hover */
.grid-imoveis .card-foto {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #1c1917;
}
.grid-imoveis .card-foto img,
.pagina-cidade .grid > .c > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s ease;
}
.pagina-cidade .grid > .c > img { aspect-ratio: 3 / 2; height: auto; }
.grid-imoveis .card:hover .card-foto img,
.pagina-cidade .grid > .c:hover > img { transform: scale(1.05); }

/* o véu navy com "Ver imóvel", que é o que dá o ar de catálogo
   caro. O layout.js injeta o elemento; aqui ele ganha o
   comportamento. */
.listing-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 26, 60, .48);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}
.grid-imoveis .card:hover .listing-overlay,
.pagina-cidade .grid > .c:hover .listing-overlay { opacity: 1; }
.listing-overlay-cta {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  border: 1px solid rgba(255, 255, 255, .6);
  padding: 10px 24px;
  border-radius: 999px;
}

/* o corpo do card */
.grid-imoveis .card-info,
.pagina-cidade .grid > .c > .c-i { padding: 22px 24px 26px; }

.grid-imoveis .card-info h3,
.pagina-cidade .grid > .c h3 {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 8px;
  min-height: 0;          /* o catálogo travava em 45px e desalinhava */
}

/* o rótulo em caixa alta acima do título */
.grid-imoveis .card-info .bairro,
.pagina-cidade .grid > .c .c-t {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent-dark);
  font-weight: 500;
  margin: 0 0 10px;
  display: block;
}
.pagina-cidade .grid > .c .c-b,
.pagina-cidade .grid > .c .c-s {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 300;
  margin: 0 0 6px;
}

/* o preço: navy e com algarismos de largura fixa, que é o que
   alinha coluna de preço sem dançar */
.grid-imoveis .card-info .preco,
.pagina-cidade .grid > .c .c-p {
  font-family: var(--sans);
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  margin: 14px 0 0;
}

/* ------------------------------------------------------------
   4. A BUSCA EM PÍLULA.
   Era um retângulo de cantos retos (raio 4px) com botão quadrado.
   ------------------------------------------------------------ */
.busca-rapida {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 8px 8px 10px;
  box-shadow: 0 10px 34px -18px rgba(15, 26, 60, .3);
  align-items: center;
}
.busca-rapida input,
.busca-rapida select {
  border: none;
  border-radius: 999px;
  padding: 13px 18px;
  background: transparent;
}
.busca-rapida input:focus,
.busca-rapida select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(201, 169, 97, .45);
}
.busca-rapida .btn-buscar {
  border-radius: 999px;
  padding: 14px 30px;
  background: var(--accent);
  color: #17130c;
  text-transform: none;
  letter-spacing: .01em;
  font-size: .95rem;
  font-weight: 500;
  transition: background .3s, transform .2s;
}
.busca-rapida .btn-buscar:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
}

/* os filtros seguem a mesma pílula, senão a página fica com duas
   linguagens de formulário na mesma tela */
.filtros {
  border-radius: 999px;
  padding: 12px 18px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.filtros select,
.filtros input {
  border: none;
  border-radius: 999px;
  padding: 11px 16px;
}
.filtros select:focus,
.filtros input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(201, 169, 97, .45);
}
@media (max-width: 900px) {
  .busca-rapida { border-radius: 22px; }
  .filtros { border-radius: 22px; }
}

/* ------------------------------------------------------------
   5. OS CONTADORES.
   Já existiam nas duas páginas e já vinham da API, com número
   real. Faltava a régua tipográfica da home.
   ------------------------------------------------------------ */
.hero-stat .num,
.pagina-cidade .stat .n {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -.02em;
}
.hero-stat .label,
.pagina-cidade .stat .l {
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-top: 8px;
  font-weight: 500;
}