/* ===========================================================================
   Listing card — the one MLS property card.

   Rendered two ways from the same class contract:

     server  shared/_listing_card.html.erb   home, find, agent profiles
     client  utils/card_html_builder.js      /properties list + split view

   Both emit the same DOM, so this file is the single place the card is styled.
   Nothing here may be duplicated as an inline style in either renderer — that
   is exactly how the three earlier variants drifted apart.

   Load it anywhere a .listing-tile is rendered. It has no page-level
   dependencies: no @import, no CSS variables from another sheet.

   History worth keeping: these rules used to live in find.css, purely because
   the pages that needed them happened to load it. Rewriting find.css for the
   redesign stripped the cards off both the home page and /properties.
   =========================================================================== */

.listing-tile {
  --lc-height: 380px;
  --lc-counter-bottom: 6rem;

  position: relative;
  height: var(--lc-height);
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Split view: shorter card, and the counter rides up with the content block. */
.listing-tile--compact {
  --lc-height: 340px;
  --lc-counter-bottom: 5rem;
}

.listing-tile:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* ------------------------------- photo ------------------------------- */

/* The photo carousel swaps the <img> inside this box; photo_carousel_controller
   finds it by id, so the id stays on the container, not on the image. */
.listing-tile-media {
  position: absolute;
  inset: 0;
}

.listing-tile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.listing-tile:hover .listing-tile-image {
  transform: scale(1.08);
}

.listing-tile-image--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: #9ca3af;
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
}

.listing-tile--compact .listing-tile-image--empty {
  font-size: 40px;
}

/* Shown by the <img> onerror handler when a photo URL 404s. */
.listing-tile-image--fallback {
  display: none;
}

.listing-tile-gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.4) 30%,
    rgba(0, 0, 0, 0.1) 60%,
    transparent 100%
  );
}

/* ------------------------------ content ------------------------------ */

.listing-tile-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  color: white;
  pointer-events: none;
}

.listing-tile-price {
  margin-bottom: 4px;
  font-size: 1.75rem;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.listing-tile--compact .listing-tile-price {
  font-size: 1.5rem;
}

.listing-tile-address {
  margin-bottom: 8px;
  font-size: 0.95rem;
  opacity: 0.9;
}

.listing-tile-city {
  margin-bottom: 8px;
  font-size: 0.85rem;
  opacity: 0.75;
}

.listing-tile-stats {
  display: flex;
  gap: 16px;
  font-size: 0.875rem;
  opacity: 0.85;
}

.listing-tile-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ------------------------------- badges ------------------------------- */

.status-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
  background: #2563eb; /* solid: the old rgba(59,130,246,.9) metered 3.2:1 over photos */
  border-radius: 4px;
  pointer-events: none;
}

.status-badge.status-active {
  background: #2563eb;
  color: white;
}

.status-badge.status-pending {
  background: rgba(234, 179, 8, 0.9);
  color: #1e293b;
}

.status-badge.status-coming-soon {
  background: rgba(139, 92, 246, 0.9);
  color: white;
}

.status-badge.status-active-under-contract {
  background: rgba(249, 115, 22, 0.9);
  color: white;
}

.status-badge.status-sold,
.status-badge.status-closed {
  background: rgba(239, 68, 68, 0.9);
  color: white;
}

/* Our own listings. Sits under the save button, which owns the top-right. */
.listing-tile-flag {
  position: absolute;
  top: 56px;
  right: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: white;
  background: #ff4f00;
  border-radius: 4px;
  pointer-events: none;
}

.listing-tile-flag i,
.listing-tile-flag svg {
  font-size: 9px;
}

/* ------------------------------ controls ------------------------------ */

.listing-tile-save {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
}

.listing-tile-save-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: background 0.2s ease;
}

.listing-tile-save-button:hover {
  background: rgba(255, 255, 255, 1);
}

.listing-tile-nav {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; /* 44px touch-target floor */
  height: 44px;
  color: white;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.2s ease;
}

.listing-tile-nav:hover {
  background: rgba(0, 0, 0, 0.8);
}

.listing-tile-nav--prev {
  left: 8px;
}

.listing-tile-nav--next {
  right: 8px;
}

.listing-tile-counter {
  position: absolute;
  right: 16px;
  bottom: var(--lc-counter-bottom);
  z-index: 10;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* Covers the whole card so the tile is a real link — keyboard reachable, and
   right-click / open-in-new-tab work. Sits below the badges and buttons, which
   is why those carry a higher z-index. */
.listing-tile-link {
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* ---------------------------- on the map ----------------------------
   The popup built by unified_map_optimized_controller is the same card. Only
   what is specific to hanging off a marker belongs here. */

.map-property-card {
  --lc-height: 340px;
  --lc-counter-bottom: 5.5rem;

  width: 320px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* No hover lift: the card is anchored to a marker, and a card that slides away
   from its pin reads as a glitch rather than as a response. */
.map-property-card:hover {
  transform: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.map-property-card .listing-tile-price {
  font-size: 1.5rem;
}