/* =======================================================================
   Lista de Imóveis — Filtro, Grid e Paginação (StyleKit)
   ======================================================================= */

/* ---------- Faixa do filtro ---------- */
[data-el="imoveis.filter"] {
  --_bg: var(--imv-filter-bg, var(--surface, #ffffff));
  --_title: var(--imv-filter-title, var(--page-text, #0f172a));
  background: var(--_bg);
  border-bottom: 1px solid var(--border, #e5e7eb);
}
[data-el="imoveis.filter"] .wrap {
  max-width: 1200px; margin: 0 auto; padding: 28px 20px 24px; box-sizing: border-box;
}
[data-el="imoveis.filter"] .title {
  margin: 0 0 14px;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: var(--weight-bold, 700);
  color: var(--_title);
}

/* ---------- Formulário ---------- */
[data-el="imoveis.filter.form"] {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
}
[data-el="imoveis.filter.select"] {
  display: grid; gap: 6px; min-width: 210px;
}
[data-el="imoveis.filter.select"] .label {
  font-size: 12px;
  color: var(--muted, #6b7280);
  font-weight: var(--weight-semibold, 600);
}
[data-el="imoveis.filter.select"] select {
  appearance: none;
  background: var(--field-bg, var(--surface, #fff));
  color: var(--field-text, var(--page-text, #0f172a));
  border: 1px solid var(--field-border, var(--border, #e5e7eb));
  height: 44px; padding: 10px 40px 10px 12px;
  border-radius: var(--radius, 12px);
  font: inherit;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
    <polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: calc(100% - 12px) 50%;
}

/* Botão reset */
[data-el="imoveis.filter.reset"] {
  display: inline-block;
  margin-left: auto;
  height: 44px; line-height: 44px;
  padding: 0 14px;
  border-radius: var(--radius, 12px);
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--page-text, #0f172a);
  text-decoration: none;
  font-weight: var(--weight-semibold, 600);
}
[data-el="imoveis.filter.reset"]:hover { filter: brightness(.98); }

/* ---------- Grid ---------- */
[data-el="imoveis.grid"] {
  max-width: 1200px; margin: 0 auto; padding: 32px 20px 40px; box-sizing: border-box;
}
[data-el="imoveis.grid"] .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* ↑ mantém 3 colunas no desktop */
  column-gap: 24px;
  align-items: center;
  row-gap: 36px; /* ↑ mais respiro entre a linha de cima e a de baixo */
}
@media (max-width:1024px){
  [data-el="imoveis.grid"] .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width:640px){
  [data-el="imoveis.grid"] .grid{
    grid-template-columns: 1fr;
  }
}

[data-el="imoveis.grid"] .no-results {
  max-width: 1200px; margin: 24px auto; color: var(--muted, #6b7280);
}

/* ---------- Paginação ---------- */
[data-el="imoveis.pagination"] {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 44px; /* ↑ mais espaçamento entre os cards e o paginador */
}
[data-el="imoveis.pagination"] .page {
  display: inline-block; padding: 8px 12px;
  border-radius: var(--radius, 12px);
  text-decoration: none;
  border: 1px solid var(--border, #e5e7eb);
  color: var(--page-text, #0f172a);
  background: var(--surface, #fff);
  font-weight: var(--weight-semibold, 600);
}
[data-el="imoveis.pagination"] .page.current {
  border-color: var(--accent, #0a66ff);
  background: var(--accent, #0a66ff);
  color: #fff;
}
[data-el="imoveis.pagination"] .page:hover { filter: brightness(.98); }

[data-el="imoveis.pagination"] {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 28px;
}
[data-el="imoveis.pagination"] .page {
  display: inline-block; padding: 8px 12px;
  border-radius: var(--radius, 12px);
  text-decoration: none;
  border: 1px solid var(--border, #e5e7eb);
  color: var(--page-text, #0f172a);
  background: var(--surface, #fff);
  font-weight: var(--weight-semibold, 600);
}
[data-el="imoveis.pagination"] .page.current {
  border-color: var(--accent, #0a66ff);
  background: var(--accent, #0a66ff);
  color: #fff;
}
[data-el="imoveis.pagination"] .page:hover { filter: brightness(.98); }

/* ---------- Mobile ---------- */
@media (max-width: 640px){
  [data-el="imoveis.filter"] .wrap { padding: 22px 12px 20px; margin:0px; margin-left:10px;}
  [data-el="imoveis.filter.form"] { gap: 10px; }
  [data-el="imoveis.filter.select"] { min-width: 0; flex: 1 1 calc(33.33% - 8px); }
  [data-el="imoveis.filter.select"] select { height: 40px;font-size: 13px;width: 110px; }
  [data-el="imoveis.filter.reset"] { height: 40px; line-height: 40px; }
}