/* ================================================================
   REVY MOTORS — Listing card

   The card only. Extracted from dashboard.css because
   layout/profile-layout.html renders fragments/listing-element and was
   reaching into the dashboard's stylesheet for it — every change to the
   dashboard shell risked the profile pages.

   Consumers: search/dashboard.html, layout/profile-layout.html.
   Both must link design-system.css before this file.

   The list-view rules key off `.is-list`, which the dashboard script puts
   on the grid container. On the profile pages that class never appears, so
   those rules are inert there and the card always renders in grid form.
   ================================================================ */

/* ── RESULT CARD ────────────────────────────────────────────── */
.listing-card {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: 10px;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--t3) var(--ease), transform var(--t2) var(--ease), border-color var(--t2) var(--ease);
}

.card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  color: inherit;
}

.card-img {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  aspect-ratio: 4 / 3;
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t3) var(--ease);
}

.card-year {
  position: absolute;
  left: 10px;
  bottom: 10px;
  font-size: 11.5px;
  font-weight: 640;
  color: var(--color-ink);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgba(22,19,15,0.14);
}

/* Outside .card-link — a save control inside the link would navigate on click. */
.card-save-btn {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-ink-mid);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 3px rgba(22,19,15,0.14);
  transition: color var(--t2) var(--ease), transform var(--t1) var(--spring);
}

.card-save-btn:active { transform: scale(0.9); }
.card-save-btn.saved { color: var(--color-red); }
.card-save-btn.saved .heart-path { fill: currentcolor; }

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 13px 6px 4px;
}

/* In grid view the identity block is not a box at all — `display: contents`
   drops it out of the layout so make / model / specs stay direct children of
   the column flex. List view turns it back on as the left column. */
.card-main { display: contents; }

.card-make {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--color-ink-dim);
}

.card-model {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.28;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-specs {
  font-size: 12.5px;
  color: var(--color-ink-mid);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.card-specs .sep { color: var(--color-ink-xdim); margin: 0 5px; }

/* The mileage is the fact people scan a results page for; it earns the weight
   its own line and a heavier stroke give it. */
.mileage-spec { font-weight: 620; color: var(--color-ink); }

/* Not in the POC, whose sample data had no tags. ListingPreviewResponse.tags is
   real listing data already rendered today, so it stays — as a quiet line, not
   a second spec row competing with the one above it. */
.card-tags {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-ink-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sinks the price/location line to the bottom edge, so cards whose model name
   wraps to two lines still align their footers with those that don't. In list
   view this same element becomes the right-hand column. */
.card-tail { margin-top: auto; }

.card-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--color-rule);
}

.card-location {
  font-size: 12.5px;
  color: var(--color-ink-mid);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-price {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* em-relative, so it tracks the card's price size through both view modes. */
.card-price-cur {
  font-size: 0.62em;
  font-weight: 600;
  color: var(--color-ink-mid);
  margin-left: 4px;
  letter-spacing: 0;
}

/* The list-view spec table. Same markup in every card, hidden in grid view —
   the two views are two presentations of one set of facts, not two datasets. */
.lst-specs { display: none; }


/* ── LIST VIEW ──────────────────────────────────────────────────
   The comparison read: photo, a real spec table, price. The spec table
   reuses the landing's .spec-list idiom (1px gap over a rule-coloured
   background, so the dividers are the grid itself).
─────────────────────────────────────────────────────────────── */
.is-list .listing-card { flex-direction: row; gap: 18px; }
.is-list .card-link { flex-direction: row; gap: 18px; align-items: stretch; }
.is-list .card-img { flex: 0 0 258px; aspect-ratio: 4 / 3; align-self: center; }

/* Bottom-right, not top-right: at the top it lands beside the price and the
   two read as one cluster. */
.is-list .card-save-btn { right: 18px; top: auto; bottom: 18px; }

/* Flex, not grid. A grid item spanning every row (the tail) distributes its
   height back across those rows, which pushes make / model / specs apart into
   a column of drifting fragments. */
.is-list .card-body {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 26px;
  padding: 10px 8px 10px 0;
}

.is-list .card-main { display: block; flex: 1; min-width: 0; }
.is-list .card-model { font-size: 1.22rem; }
.is-list .card-specs { display: none; }

.is-list .lst-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 13px;
  background: var(--color-rule);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.lst-spec {
  background: var(--color-bg);
  padding: 9px 13px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.lst-spec .k { font-size: 12.5px; color: var(--color-ink-mid); flex-shrink: 0; }
/* min-width: 0 — a nowrap flex item's min-width:auto refuses to shrink, so the ellipsis never fires. */
.lst-spec .v { font-size: 12.5px; font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.is-list .card-tail {
  flex: 0 0 208px;
  margin-top: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--color-rule);
  padding-left: 26px;
}

.is-list .card-footer {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 3px;
}

.is-list .card-price { font-size: 1.4rem; }


/* ── FOCUS ──────────────────────────────────────────────────── */
.card-save-btn:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

.card-link:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}


/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1120px) {
  .is-list .card-img { flex: 0 0 210px; }
  .is-list .card-body { gap: 20px; }
  .is-list .card-tail { flex-basis: 180px; padding-left: 20px; }
}

@media (max-width: 960px) {
  .is-list .card-img { flex: 0 0 200px; }
  .is-list .card-body { flex-direction: column; align-items: stretch; gap: 0; }
  .is-list .card-main { flex: none; }
  .is-list .card-save-btn { top: 18px; bottom: auto; }
  .is-list .card-tail {
    flex: none;
    align-self: auto;
    border-left: none;
    padding-left: 0;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--color-rule);
  }
  .is-list .card-footer { flex-direction: row; align-items: baseline; justify-content: space-between; }
  .is-list .card-price { font-size: 1.15rem; }
}

@media (max-width: 760px) {
  /* Photo-left rows stop working once the photo is narrower than its own
     detail; the row becomes a stacked card that keeps the spec table. */
  .is-list .listing-card, .is-list .card-link { flex-direction: column; gap: 0; }
  .is-list .card-img { flex: none; width: 100%; }
  .is-list .card-model { font-size: 1.02rem; }
  .is-list .lst-specs { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .card-model { -webkit-line-clamp: 3; }
}


/* ── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .listing-card:hover { transform: none !important; }
  .listing-card:hover .card-img img { transform: none !important; }
}


/* ── HOVER ──────────────────────────────────────────────────────
   Gated behind a real pointer: on touch, :hover sticks after a tap and
   leaves a card visibly "held" until the user taps elsewhere.
─────────────────────────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .listing-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-rule-mid);
    transform: translateY(-2px);
  }
  .listing-card:hover .card-img img { transform: scale(1.035); }
  .card-save-btn:hover { color: var(--color-red); }
}