/* O CARTÃO DE ANÚNCIO — uma regra só para o site inteiro (padrão: processo/design/padrao-cartao-anuncio.md).
   Usado pela lista do mapa (partials/listing-grid, Alpine) e pelo componente Blade <x-listing-card> das páginas
   server-side (Mercado: vendidos* e alugados*, bairro). Saiu de explore.css em 2026-10-17 (reunião @marketing
   @design @dev). Mudou aqui, muda em todo lugar; o painel de grupo e o layout "folha" do mapa só sobrescrevem. */
/* border-left-width bumped to 4px (from the shared 1px) — its color is set inline per card
   from dealColor(pin/l) (user feedback 2026-09-08: "color the columns of imóveis accordingly
   with the price colors... about the preço por m²"), same 5-band scale the map already colors
   markers/clusters by. padding-left compensates so the card's content doesn't shift right
   relative to the other three, now-thinner sides. */
.listing-card {
    display: flex; gap: .85rem; text-decoration: none; color: inherit; cursor: pointer;
    border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px;
    padding: .75rem .75rem .75rem calc(.75rem - 3px); background: var(--bg);
}
.listing-card:hover {
    border-top-color: var(--accent);
    border-right-color: var(--accent);
    border-bottom-color: var(--accent);
}
/* Keyboard-operable (tabindex+role=button, see the HTML) — a plain <article> gets no default
   focus ring at all, so without this, Tab-ing to a card would be completely invisible. */
.listing-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.listing-card__thumb { width: 100px; height: 100px; }
/* Miniatura do cartão da lista do mapa: 56 px no celular; na mesa 96 px, para a foto ter
   resolução de verdade (dono, 2026-10-12: "a little bigger… better resolution"). */
.listing-card__thumb--side { width: 56px; height: 56px; }
@media (min-width: 901px) { .listing-card__thumb--side { width: 96px; height: 96px; } .listing-card__thumb { width: 120px; height: 120px; } }
/* A lista de imóveis (partials/listing-grid) — a lateral e a que sobe de baixo ("Só o mapa").
   No celular, foto ao lado do texto. Em tela larga (901px+), foto EM CIMA, na largura do cartão:
   dono, 2026-10-12, "a foto ainda está muito pequena… diminuir a quantidade de colunas" (era
   120×120 na lateral e 92×92 na de baixo). 16:9 e não 3:2: com 3:2 o cartão da lateral ficou
   "um pouco grande demais" (o mesmo dia). Vale para as duas listas — a primeira versão só
   pegava a lateral (`:not(.layout-folha)`) e a de baixo continuava com a foto miúda. */
.listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(300px, 24%), 1fr)); gap: .65rem; }
.listing-grid .listing-card__thumbwrap { position: relative; flex-shrink: 0; align-self: flex-start; }
@media (min-width: 901px) {
    .listing-grid .listing-card { flex-direction: column; gap: .55rem; }
    .listing-grid .listing-card__thumbwrap { align-self: stretch; }
    .listing-grid .listing-card__thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; }
}
.listing-card__price { font-weight: 700; font-size: 1.05rem; }
.listing-card__meta { font-size: .82rem; color: var(--muted); line-height: 1.4; }
/* Favoritos/visitados (2026-09-16). Espelha .source-badge (canto superior esquerdo do
   thumb, mesmo z-index): o coração fica no canto oposto (superior direito) para não colidir,
   e o ponto de "visitado" no inferior direito, onde nenhum dos dois disputa espaço. */
/* Coração no canto INFERIOR direito da miniatura (dono, 2026-10-11): no superior ele cobria o
   selo do portal quando o nome é longo (QUINTOANDAR, CASAMINEIRA ≈ 80 px numa foto de 92). */
.listing-card__fav {
    position: absolute; bottom: .35rem; right: .35rem; z-index: 2;
    width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 999px; background: rgba(15,23,42,.55); color: #fff;
    cursor: pointer; padding: 0; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
/* hover só em ponteiro de verdade: no toque ele gruda depois do tap e, sendo vermelho, lia-se como "ainda favoritado" (2026-10-11) */
@media (hover: hover) and (pointer: fine) { .listing-card__fav:hover { background: rgba(15,23,42,.85); } }
.listing-card__fav--active { background: #dc2626; color: #fff; }
.listing-card__visited-dot {
    position: absolute; bottom: .35rem; left: .35rem; z-index: 2; /* o coração ficou com o canto direito */
    /* visitado = FORMA, não cor (padrão do cartão, 2026-10-17): o verde lia-se como "barato" */
    width: 10px; height: 10px; border-radius: 999px; background: #fff; border-color: #0f172a !important;
    border: 2px solid var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,.35);
}

.listing-card__m2 { font-size: .78rem; font-weight: 700; margin-top: .1rem; font-variant-numeric: tabular-nums; }
.listing-card__facts { display: flex; flex-wrap: wrap; gap: .25rem .7rem; margin-top: .25rem; font-size: .8rem; color: var(--text); }
.listing-card__facts .fact { display: inline-flex; align-items: center; gap: .25rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.listing-card__facts svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }

/* "no mapa": o imóvel está com a pílula de preço no mapa. Sem cor (cor no site é só barato↔caro):
   a forma de pílula com borda escura lembra a própria pílula do mapa. */
.badge-featured { background: #fff; color: var(--text); border: 1px solid var(--text); }

/* Cartão da lista no CELULAR (dono, 2026-10-16: "a imagem do anúncio na lista está muito pequena"). Equipe
   design × jornalista × dev (processo/pesquisa/lista-celular/proposta.md): a lista principal tinha 92 px e a do
   grupo 56 px; ficam 128 px (112 px abaixo de 400 px) AO LADO do texto. Foto em cima 16:9 foi descartada: dobra
   o cartão (136 → 326 px, 4,6 → 2 por tela) e as miniaturas dos sites são de ~300 px, esticadas 2–3× ficariam
   mais borradas, não melhores. Também: selo do portal não passa da largura da foto (cobria o "R$" do preço no
   grupo) e coração com 32 px e área de toque de 44 px. O desktop não muda. */
@media (max-width: 900px) {
  .listing-grid { grid-template-columns: 1fr; gap: .6rem; }
  .listing-grid .listing-card { gap: .75rem; padding: .6rem .65rem .6rem calc(.6rem - 3px); }
  .listing-grid .listing-card__thumb { width: 128px; height: 128px; }
  .listing-card__thumbwrap .source-badge { max-width: calc(100% - 8px); overflow: hidden; }
  .listing-card__fav { width: 32px; height: 32px; bottom: .25rem; right: .25rem; }
  .listing-card__fav::after { content: ""; position: absolute; inset: -6px; }
  .listing-card__fav svg { width: 17px; height: 17px; }
  .listing-card__visited-dot { width: 12px; height: 12px; }
  .listing-card__m2 { font-size: .82rem; line-height: 1.3; }
  .listing-card__facts { font-size: .84rem; }
  .listing-card__meta { font-size: .82rem; line-height: 1.35; }
}
@media (max-width: 399px) {
  .listing-grid .listing-card__thumb { width: 112px; height: 112px; }
}
/* Padrão v3 (reunião 2026-10-19-cartao-oportunidades): no celular a foto ao lado sobe para 144 px (128 abaixo de 400 px), em
   todas as listas — +12% de área sem mudar o cartão de lugar. Ver processo/design/padrao-cartao-anuncio.md. */
@media (max-width: 900px) {
  .listing-grid .listing-card__thumb { width: 144px; height: 144px; }
}
@media (max-width: 399px) {
  .listing-grid .listing-card__thumb { width: 128px; height: 128px; }
}

/* As linhas de valor do padrão v3: L1 preço + R$/m² em cinza (neutro); L2 a frase da relação com o bairro, a ÚNICA na cor da
   escala (texto do campo `cartao` de price-scale.json), e o selo do pago, neutro, sem número. A frase não quebra; o selo é que
   desce (flex-wrap). Cinza #475569, não o #64748b da escala ("na média"). */
.listing-card__ppm2 { font-size: .8rem; font-weight: 600; color: #475569; margin-left: .35rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.listing-card__rel { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; margin-top: .15rem; }
.listing-card__frase { font-size: .8rem; font-weight: 700; line-height: 1.35; white-space: nowrap; font-variant-numeric: tabular-nums; }
.badge-pago { background: transparent; color: #475569; border: 1px solid #94a3b8; line-height: 1.35; white-space: nowrap; }
@media (max-width: 900px) {
  .listing-card__frase { font-size: .82rem; }
}

/* A foto que não passa do arquivo (variante oportunidade): --nw/--nh vêm do onload do componente. Na mesa a caixa 16:9 fica no
   máximo do tamanho natural (cover: largura ≤ nw e altura ≤ nh); no retrato, `contain` sobre fundo claro (sem cortar nem
   ampliar). No celular o quadrado de 144 encolhe se o arquivo for menor. */
.listing-card__thumb--natural { margin: 0 auto; }
.listing-card__thumb--natural.is-retrato { object-fit: contain; background: #f1f5f9; }
@media (min-width: 901px) {
    .listing-grid .listing-card__thumb--natural { max-width: min(100%, var(--nw, 100%), calc(var(--nh, 10000px) * 16 / 9)); }
    .listing-grid .listing-card__thumb--natural.is-retrato { max-width: min(100%, max(var(--nw, 100%), calc(var(--nh, 10000px) * 16 / 9))); }
}
@media (max-width: 900px) {
    .listing-grid .listing-card__thumb--natural { width: min(144px, var(--nw, 144px), var(--nh, 144px)); height: min(144px, var(--nw, 144px), var(--nh, 144px)); }
    .listing-grid .listing-card__thumb--natural.is-retrato { width: min(144px, var(--nh, 144px)); height: min(144px, var(--nh, 144px)); }
}
@media (max-width: 399px) {
    .listing-grid .listing-card__thumb--natural { width: min(128px, var(--nw, 128px), var(--nh, 128px)); height: min(128px, var(--nw, 128px), var(--nh, 128px)); }
    .listing-grid .listing-card__thumb--natural.is-retrato { width: min(128px, var(--nh, 128px)); height: min(128px, var(--nh, 128px)); }
}
/* /bons-precos: 3 colunas iguais na mesa (cartão ~340 px, foto 16:9 ~315×177, menor que o arquivo na maioria); 1 coluna com a
   foto ao lado no celular (a regra geral acima). */
@media (min-width: 901px) {
    .listing-grid.op__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
}

/* Server-side (componente <x-listing-card>, 2026-10-17): a foto não traz os estilos inline do mapa. */
.listing-card__thumb { object-fit: cover; border-radius: 8px; background: #e2e8f0; display: block; }
a.listing-card { text-decoration: none; color: inherit; }
/* "+N sites": o mesmo imóvel saiu de mais de um site (um cartão só). Forma, não cor. */
.listing-card__mais {
    position: absolute; top: 1.55rem; left: .35rem; z-index: 2;
    font-size: .62rem; font-weight: 800; line-height: 1.5; padding: 0 .35rem; border-radius: 999px;
    background: #fff; color: #0f172a; border: 1px solid #0f172a;
}
/* "Mostrar todos" (partials/lista-com-mais): 12 na tela larga, 8 no celular, até a pessoa pedir. */
.lc-mais:not(.is-todos) .listing-grid > .listing-card:nth-child(n+13) { display: none; }
@media (max-width: 900px) { .lc-mais:not(.is-todos) .listing-grid > .listing-card:nth-child(n+9) { display: none; } }
.lc-mais__btn { display: block; width: 100%; max-width: 360px; min-height: 44px; margin: .8rem auto 1.4rem; border-radius: 10px;
    border: 1px solid var(--text); background: var(--panel); color: var(--text); font: inherit; font-weight: 750; cursor: pointer; }
@media (min-width: 901px) { .lc-mais__btn--so-celular { display: none !important; } }
/* Estado por FORMA (uma cor, um significado): pílula de contorno, nunca verde/vermelho. */
.badge-saida { background: transparent; color: var(--muted); border: 1px solid var(--muted); }
.badge-escritura { background: #fff; color: #0f172a; border: 1px solid #0f172a; }

/* "Outros anúncios para comparar" — o último bloco do detalhe (reuniões 2026-10-18-recomendacao e -detalhe-rodada3). Faixa de
   fundo neutro: nunca a cor da escala no fundo; os cartões mantêm a cor barato↔caro na borda e o selo do site. */
.rec { background: #f1f5f9; border-top: 1px solid #e2e8f0; border-radius: 12px; padding: .9rem .85rem 1rem; margin-top: 1.5rem; min-width: 0; }
.rec h2 { font-size: 1rem; font-weight: 750; margin: 0 0 .15rem; }
.rec__sub { font-size: .8rem; color: #475569; margin: 0 0 .6rem; }
.rec__linha { font-size: .86rem; font-weight: 700; margin: .8rem 0 .4rem; color: #1e293b; }
.rec__linha-cab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .8rem 0 .4rem; }
.rec__linha-cab .rec__linha { margin: 0; }
/* Setas ‹ › do carrossel (public/js/detalhe-grade.js rola uma tela de cartões). Só na mesa; o dedo rola sozinho. */
.rec__setas { display: none; gap: .35rem; flex: none; }
.rec__seta { width: 40px; height: 40px; border-radius: 999px; border: 1px solid #94a3b8; background: #fff; color: #0f172a;
    font: inherit; font-size: 1.45rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 0 3px; }
.rec__seta:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .rec__seta:not(:disabled):hover { border-color: #0f172a; } }
/* Mesa: cada linha é um carrossel lateral — cartões de 300 px (foto 16:9 em cima), 10 px entre eles: 3 inteiros + a ponta do
   4º num contêiner de ~1.000 px. Até 8 por linha (Recomendados::POR_LINHA). */
@media (min-width: 901px) {
    .rec__setas { display: inline-flex; }
    .rec .listing-grid.rec__grid { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
        padding-bottom: .45rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
    .rec .rec__grid > .listing-card { flex: 0 0 300px; width: 300px; min-width: 0; scroll-snap-align: start; }
}
/* Celular: lista de 1 coluna (foto 128 ao lado), os 3 primeiros de cada linha (Recomendados::POR_LINHA_CELULAR). */
@media (max-width: 900px) {
    .rec .rec__grid > .listing-card:nth-child(n+4) { display: none; }
}

/* Parecidos do /imovel (reunião 2026-10-18-detalhe-rodada3 T8): o MESMO cartão. Mesa: 3 colunas iguais com teto de 360 px (a
   foto da fonte tem 600–614 px; mais que isso amplia). Celular: foto 128 ao lado, 4 à vista + "Ver os 6". */
@media (min-width: 901px) {
    .listing-grid.par__grid { grid-template-columns: repeat(3, minmax(0, 360px)); gap: .75rem; }
    .par__mais { display: none !important; }
}
@media (max-width: 900px) {
    .par:not(.is-todos) .par__grid > .listing-card:nth-child(n+5) { display: none; }
}
.par.is-todos .par__mais { display: none; }
.rec .listing-card { background: #fff; }
.rec__mapa { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: .9rem; }
.rec__alerta { margin: .55rem 0 0; font-size: .8rem; text-align: center; }
/* A linha da troca: ganho na 1ª, custo na 2ª; sem pílula, sem cor, até 2 linhas, nunca reticências (c1 @design). */
.listing-card__troca { display: flex; flex-direction: column; margin-top: .25rem; font-size: .78rem; color: #334155; line-height: 1.35; }

/* Resposta da assinatura do resumo (public/js/assinar.js): aparece logo abaixo de qualquer formulário de alerta. */
.assinar-status { margin: .5rem 0 0; padding: .5rem .7rem; border-radius: 8px; font-size: .85rem; line-height: 1.4; }
.assinar-status--ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.assinar-status--erro { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* "+N anúncios" (só no dev, fontes extras — explore.blade.php): o mesmo imóvel em outros anúncios. Neutro de propósito —
   contorno cinza e texto apagado: cor no site é preço (barato↔caro) e a fonte já tem o selo. */
.listing-card__repetidos { display: inline-block; margin-top: .2rem; padding: 0 .4rem; font-size: .72rem; line-height: 1.5;
  color: var(--muted); border: 1px solid currentColor; border-radius: 999px; white-space: nowrap; }