/* ============================================================
   CASAPÊ — Carousel de cards com profundidade (fileira horizontal)
   Porte do "Carousel Cards" (KokonutUI · 21st.dev) p/ vanilla,
   tema Casapê, com escala/ângulo/fade nos cards afastados (o JS
   pinta o transform de cada card conforme a distância do centro).
   ============================================================ */

.listing{ width:100%; }

.cf{
  --cf-card: clamp(240px, 22vw, 286px);
  --cf-gap: 26px;
  width:100%;
  position:relative;
  padding:6px 0 20px;
}

/* cabeçalho: setas à direita (só no modo lista) */
.cf__head{
  display:flex; justify-content:flex-end; align-items:center; gap:8px;
  width:min(1240px, 100% - 48px); margin:0 auto 4px;
}
.cf__nav{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .3s var(--ez), color .3s var(--ez), background .3s var(--ez), transform .2s var(--ez);
}
.cf__nav:hover{ border-color:var(--gold); color:var(--gold-deep); }
.cf__nav:active{ transform:scale(.93); }
.cf__nav svg{ width:19px; height:19px; }

/* no modo lista o pill "Filtros" flutua no topo-direito → reserva espaço
   pra ele não cobrir as setas do carrossel */
.listing--map:not(.map-on) .cf__head{ padding-right:120px; }

/* fileira rolável — padding lateral = meia tela, pra qualquer card (inclusive
   o 1º e o último) poder ficar CENTRALIZADO; perspective dá a profundidade 3D */
.cf__row{
  display:flex; gap:var(--cf-gap);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; scroll-behavior:smooth;
  padding:34px calc(50% - var(--cf-card) / 2) 38px;
  perspective:1700px;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab;
}
.cf__row::-webkit-scrollbar{ display:none; }
.cf__row.is-grabbing{ cursor:grabbing; scroll-behavior:auto; scroll-snap-type:none; }

/* .cf-card = slot: recebe o transform 3D (escala/ângulo) e a opacidade do
   scroll, aplicados pelo JS. Sem transition no transform p/ acompanhar o scroll. */
.cf-card{
  flex:0 0 var(--cf-card); width:var(--cf-card);
  scroll-snap-align:center;
  text-decoration:none; color:var(--ink);
  transform-origin:center center;
  will-change:transform, opacity;
  -webkit-user-select:none; user-select:none;   /* arrastar rola, não seleciona texto */
  -webkit-user-drag:none;                        /* não dispara o drag nativo do link/imagem */
}
.cf-card__img{ -webkit-user-drag:none; }

/* .cf-card__inner = visual do card; recebe o scale do HOVER (independente do
   transform 3D do slot) */
.cf-card__inner{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line); border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 30px -22px rgba(41,33,16,.55);
  transition:transform .42s var(--ez), box-shadow .42s var(--ez);
}
.cf-card:hover{ z-index:300 !important; }
.cf-card:hover .cf-card__inner{ transform:scale(1.08); box-shadow:var(--shadow); }
.cf-card.is-center .cf-card__inner{ box-shadow:0 20px 44px -20px rgba(41,33,16,.5); }

.cf-card__ph{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:linear-gradient(135deg,var(--cream-2),#e6d9bd);
}
.cf-card__img{ width:100%; height:100%; object-fit:cover; }
.cf-card__noimg{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; color:var(--gold-deep); opacity:.6;
}
.cf-card__noimg svg{ width:40px; height:40px; }
.cf-card__noimg span{ font-size:11px; letter-spacing:.1em; }
/* tags dentro da foto: finalidade (esq) + tipo (dir), mesmo formato pill */
.cf-card__fin, .cf-card__tag{
  position:absolute; top:12px;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; backdrop-filter:blur(4px);
  max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cf-card__fin{ left:12px; background:rgba(26,22,14,.82); color:var(--cream); }
.cf-card__tag{ right:12px; background:rgba(255,253,248,.92); color:var(--gold-deep); }

/* corpo padronizado: bairro (destaque) · cidade (menor) · features · metragem+preço */
.cf-card__body{ padding:13px 16px 15px; display:flex; flex-direction:column; gap:2px; flex:1; }
.cf-card__bairro{ font-family:"Fraunces",serif; font-size:18px; font-weight:500; line-height:1.15; color:var(--ink); }
.cf-card__cidade{ font-size:12.5px; color:var(--ink-soft); }
.cf-card__feats{ display:flex; gap:13px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft); margin-top:7px; }
.cf-card__feats span{ display:inline-flex; align-items:center; gap:5px; }
.cf-card__feats svg{ width:15px; height:15px; }
.cf-card__price{ display:flex; align-items:baseline; gap:9px; margin-top:8px; }
.cf-card__area{ font-size:13px; font-weight:600; color:var(--ink-soft); white-space:nowrap; }
.cf-card__val{ font-size:19px; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.cf-card__val .mes{ font-size:13px; font-weight:600; color:var(--ink-soft); }

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .cf{ --cf-card: clamp(230px, 46vw, 300px); }
}
@media (max-width:640px){
  .cf{ --cf-card: clamp(220px, 74vw, 300px); --cf-gap:16px; }
  .cf__row{ padding:26px calc(50% - var(--cf-card) / 2) 30px; }
}
@media (prefers-reduced-motion: reduce){
  .cf__row{ scroll-behavior:auto; }
  .cf-card__inner{ transition:none; }
}