/* ============================================================
   tuzama — Listing cards
   The borderless, photo-first card used on the home page rows, the
   browse page, the "Similar listings" rows on listing pages, profile
   pages and favourites. Loaded by index.html, browse.html, listing-detail.html,
   profile.html and favourites.html.
   Markup: .browse-card-link > .browse-card > .browse-card-thumb
           + .browse-card-body (price, title, meta, updated).
   ============================================================ */

:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) {
  --lc-radius: 14px;
  --lc-ease:   cubic-bezier(0.2, 0.7, 0.2, 1);
}

:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card {
  background: none;
  border: 0;
  border-radius: var(--lc-radius);
  box-shadow: none;
  overflow: visible;
}
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card:hover { box-shadow: none; transform: none; }
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 6px;
  border-radius: var(--lc-radius);
}

:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-thumb {
  border-radius: var(--lc-radius);
  overflow: hidden;
}
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-thumb img,
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-thumb video {
  transition: transform 600ms var(--lc-ease);
}
@media (hover: hover) and (pointer: fine) {
  :is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-link:hover .browse-card-thumb img,
  :is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-link:hover .browse-card-thumb video { transform: scale(1.04); }
  :is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-link:hover .browse-card-title { color: var(--color-primary); }
}

:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-badges {
  top: 10px;
  left: 10px;
  gap: 6px;
  flex-wrap: wrap;
  max-width: calc(100% - 100px); /* leave room for the save + compare buttons */
}
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-badge {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgb(250 247 242 / 0.94);
  backdrop-filter: none;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
}
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-badge-type {
  background: var(--color-primary);
  color: #fff;
}
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-badge-furnished {
  background: rgb(250 247 242 / 0.94);
  color: var(--color-primary);
}

:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-body {
  gap: 4px;
  padding: 14px 0 0;
}
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-price {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-price-unit {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-title {
  margin: 0;
  height: auto;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
  transition: color var(--transition-fast);
}
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--color-text-secondary);
}
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-loc {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-facts { flex-shrink: 0; white-space: nowrap; }
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-updated {
  display: block;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Save + compare: a quiet pair in the photo's top-right corner */
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-fav-btn,
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-compe-btn {
  top: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);
}
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-fav-btn {
  right: 10px;
  background: rgb(255 255 255 / 0.94);
  backdrop-filter: none;
  color: var(--color-text);
}
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-fav-btn:hover { transform: scale(1.06); }
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-fav-btn svg { width: 15px; height: 15px; }
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-compe-btn {
  right: 50px;
  overflow: hidden;
}

/* Skeletons match the new card shape */
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .skeleton-card {
  border: 0;
  background: none;
  box-shadow: none;
}
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .skeleton-thumb { border-radius: var(--lc-radius); }
:is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .skeleton-body { padding: 14px 0 0; }

@media (prefers-reduced-motion: reduce) {
  :is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-thumb img,
  :is(.browse-page, .detail-page, .profile-page, .fav-page, .home-page) .browse-card-thumb video { transition: none; }
}