/**
 * The property card.
 *
 * Its own sheet because it is a shared component: the homepage rail, the
 * listings grid and later the detail page all render it. It lived inside
 * listings.css and the homepage — which does not load that sheet — drew cards
 * with no styles at all.
 *
 * Reads only from tokens.css.
 */

/* ══ CARD ═════════════════════════════════════════════════════════════════
   The frame keeps the ratio the video was shot in. Two bands are spoken for by
   the burned-in caption (15–33%) and the DAVAR watermark (~80%), so every
   overlay here sits outside them: tags at the very top, play control at the
   bottom corner, and all text below the frame entirely.
   ═════════════════════════════════════════════════════════════════════════ */
.v2-card {
  display: grid; grid-template-rows: auto 1fr;
  background: var(--surface-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.v2-card:hover { border-color: var(--rule-strong); box-shadow: var(--lift-2); }

/**
 * The positioned wrapper the two controls hang off.
 *
 * The media itself is a link, and a button cannot live inside one — so the
 * save and compare controls are siblings of it, and this is what they are
 * positioned against.
 */
.v2-card-frame { position: relative; }

.v2-card-media {
  position: relative; display: block;
  aspect-ratio: 9 / 16;
  background: var(--surface-deep);
  overflow: hidden;
}
.v2-card-media img { width: 100%; height: 100%; object-fit: cover; }
/**
 * A photograph is letterboxed inside the same 9:16 frame, never cropped and
 * never given its own ratio.
 *
 * Two rules in tension: a photo is a room and cropping it to a portrait shows a
 * wall, but a card grid whose media boxes are different heights puts the price
 * of every card in a row at a different height, which reads as broken. Keeping
 * one frame and containing the photo inside it satisfies both — the bars are
 * the dark stage colour, so it reads as cinema rather than as a gap.
 *
 * It matters more over time than it looks today: one listing in 83 is photo-only
 * now, and owner-supplied photos are the growth area.
 */
.v2-card-media.is-photo img { object-fit: contain; background: var(--surface-deep); }

.v2-card-nomedia {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--surface-warm); color: var(--ink-faint);
  font-size: var(--t-xs); text-align: center; padding: var(--s-4);
}

.v2-card-play {
  position: absolute; inset-block-end: var(--s-2); inset-inline-start: var(--s-2);
  width: 30px; height: 30px; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: rgba(14, 31, 30, .62); color: var(--brand-mint);
  backdrop-filter: blur(3px);
}
[dir="rtl"] .v2-card-play svg { transform: scaleX(-1); }

.v2-card-tags {
  position: absolute; inset-block-start: var(--s-2); inset-inline: var(--s-2);
  display: flex; gap: var(--s-1); flex-wrap: wrap;
}
.v2-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  padding: 3px var(--s-2); border-radius: var(--radius-pill);
  white-space: nowrap;
}
.v2-tag.is-verified { background: var(--verified); color: var(--verified-on); }
.v2-tag.is-status {
  background: color-mix(in srgb, var(--surface-deep) 74%, transparent);
  color: var(--brand-mint); backdrop-filter: blur(3px);
  margin-inline-start: auto;
}

/**
 * Save and compare, over the media.
 *
 * At the bottom inline-end because that is the one part of this media with
 * nothing burned into it: the Kurdish caption sits in the top third of a reel
 * and the DAVAR watermark near four fifths of its height. The play chip holds
 * the opposite corner, so the two never meet.
 *
 * 34px targets, which is smaller than the 44 a finger wants — accepted here
 * only because the same two controls appear full size and labelled on the
 * detail page, and this is the shortcut rather than the only way through.
 */
.v2-card-acts {
  position: absolute; inset-block-end: var(--s-2); inset-inline-end: var(--s-2);
  display: flex; gap: var(--s-1);
}
.v2-chip-act {
  width: 34px; height: 34px; border-radius: var(--radius-pill);
  border: 1px solid rgba(247, 255, 254, .28);
  background: color-mix(in srgb, var(--surface-deep) 72%, transparent);
  color: var(--brand-mint); backdrop-filter: blur(3px);
  display: grid; place-items: center; cursor: pointer; padding: 0;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.v2-chip-act:hover { background: var(--surface-deep); }
/* Pressed is a fill, not a tint: at 34px a colour shift alone is not visible
   against a photograph of a room. */
.v2-chip-act[aria-pressed="true"] { background: var(--live); color: var(--live-on); border-color: var(--live); }
.v2-chip-act[aria-pressed="true"] svg { fill: currentColor; }

/**
 * A card unsaved from the saved page stays where it is and dims.
 *
 * Removing it under the cursor makes a mistaken tap unrecoverable — the
 * listing is gone and there is nothing left to press again. It is absent next
 * time the list is built.
 */
.v2-card[data-dropped="true"] { opacity: .45; }
.v2-card[data-dropped="true"]:hover { opacity: 1; }

/**
 * Denser, to the direction's numbers: 12px of padding rather than 16, and a
 * price at 18px rather than 22. A market card, not a poster.
 */
.v2-card-body { padding: var(--s-3); display: grid; gap: var(--s-1); align-content: start; }
.v2-card-price {
  font-family: var(--font-display); font-size: var(--t-lg);
  font-weight: 600; color: var(--ink); line-height: 1.15;
}
.v2-card-per { font-family: var(--font-ui); font-size: var(--t-sm); font-weight: 500; color: var(--ink-dim); }
.v2-card-ask { font-family: var(--font-ui); font-size: var(--t-base); font-weight: 500; color: var(--ink-dim); }
.v2-card-title { font-size: var(--t-sm); font-weight: 600; line-height: 1.4; }
.v2-card-title a { color: var(--ink); }
.v2-card-title a:hover { color: var(--accent); text-decoration: none; }
.v2-card-where { font-size: var(--t-xs); color: var(--ink-body); }
.v2-card-facts { font-size: var(--t-xs); color: var(--ink-dim); }
.v2-card-terms {
  font-size: var(--t-xs); color: var(--ink-dim);
  border-block-start: 1px solid var(--rule-faint);
  padding-block-start: var(--s-2); margin-block-start: var(--s-1);
  display: flex; gap: var(--s-3); flex-wrap: wrap;
}


/**
 * The grid the cards sit in.
 *
 * Here rather than in listings.css because the homepage rail, the listings page
 * and the similar-listings shelf all use it, and only the listings page loads
 * that sheet. It was there, so the live homepage rail rendered as a stack of
 * full-width cards from the moment P2 shipped.
 */
/**
 * Two on a phone, four from 700px, with 12px between them.
 *
 * It went two → three at 960 → four only at 1200, so a laptop at 1024 saw
 * three columns where the direction draws four, and every gap was 16px. This
 * is the single biggest reason the catalogue read as loose rather than dense.
 */
.v2-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .v2-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }