/* THE vehicle listing card (templates/common/listing-card.html). Loaded by all three buyer
   headers. Every class is lc-*, so nothing here can reach another component, and the old
   card CSS can't reach this card. Colors are the "Vehicle Card Redesign" canvas tokens;
   text and fills meet WCAG AA (4.5:1). */

/* 12px between cards, across and down, in every card grid. The row's Bootstrap gutter is the
   gap across; its vertical gutter is off, so each card's bottom margin is the only gap down. */
.lc-item {
  display: flex;
  margin-bottom: 12px;
}

.row:has(> .lc-item) { --bs-gutter-x: 12px; --bs-gutter-y: 0px; }

/* A CSS grid (the /cars/ page bands) spaces its cards with its own gap. */
.sv-grid > .lc-item { margin-bottom: 0; }

/* A watched car that isn't in an auction yet: greyed out, only the heart still works. */
.lc-item--inactive .lc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(229, 229, 229, 0.65);
}

/* A slide in a slick carousel (the homepage popular slider, a vehicle page's similar cars). */
.lc-item.lc-slide {
  margin-bottom: 0;
  padding: 4px 6px 12px;
}

/* slick's `.slick-initialized .slick-slide { display: block }` would stop the card stretching to
   the tallest slide, so cards in a carousel would differ in height. */
.slick-initialized .lc-item.lc-slide { display: flex; }

.lc-card {
  --lc-navy: #19284A;
  --lc-body: #4A5468;
  --lc-muted: #5B6478;
  --lc-border: #E3E6EC;
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--lc-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 6px 16px rgba(16, 24, 40, 0.06);
  font-family: var(--ff-primary);
  color: var(--lc-navy);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.08), 0 12px 24px rgba(16, 24, 40, 0.10);
}

@media (prefers-reduced-motion: reduce) {
  .lc-card, .lc-card:hover { transition: none; transform: none; }
}

/* --- photo, badge, watchlist heart --- */

.lc-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #E9ECF1;
}

.lc-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lc-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #FFFFFF;
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.lc-badge[hidden] { display: none; }
.lc-badge--left { background: #19284A; }
.lc-badge--ending { background: #C2410C; }
.lc-badge--live { background: #D21F3C; }
.lc-badge--soon { background: #1A62C9; }
.lc-badge--sold { background: #FFC83D; color: #19284A; letter-spacing: 0.06em; text-transform: uppercase; }

.lc-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #FFFFFF; }
.lc-badge-lead::after { content: " \00B7"; }
.lc-badge:not(.lc-badge--live) .lc-badge-dot,
.lc-badge:not(.lc-badge--live) .lc-badge-lead { display: none; }
.lc-badge--live .lc-badge-clock,
.lc-badge--sold .lc-badge-clock { display: none; }
.lc-badge-time:empty { display: none; }

/* The heart sits above the stretched title link, so tapping it never opens the car. The button
   is the 44px tap target; the 32px circle inside it sits 10px from the photo's corner, level
   with the badge. */
.lc-watch {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.lc-watch-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #19284A;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.lc-watch svg { fill: none; }
.lc-watch[aria-pressed="true"] svg { fill: currentColor; }
/* Hovered or watched: the heart turns red (4.8:1 on the white circle); watched also fills it. */
.lc-watch:hover .lc-watch-circle,
.lc-watch[aria-pressed="true"] .lc-watch-circle { color: #D92D20; }
.lc-watch:focus-visible .lc-watch-circle { outline: 3px solid #19284A; outline-offset: 2px; }

/* --- body --- */

/* Every card in a row is as tall as the tallest; the body takes the extra height and .lc-foot
   sits at its bottom, so prices line up across the row. */
.lc-body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 16px;
}

.lc-title {
  margin: 0;
  font-family: var(--ff-primary);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--lc-navy);
  /* One line, so chips start at the same height in every card of a row. Not positioned, so
     this doesn't clip the link's card-wide ::after (its containing block is .lc-card). */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lc-link,
.lc-link:hover,
.lc-link:focus {
  color: inherit;
  font-weight: inherit; /* a site-wide link rule sets 500, a weight General Sans doesn't ship */
  text-decoration: none;
}

/* The whole card is the link (no button inside a link: the heart is a sibling). */
.lc-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.lc-link:focus-visible::after { outline: 3px solid #19284A; outline-offset: -3px; border-radius: 14px; }

/* Always rendered, empty when the car has no trim, for the same reason as the one-line title. */
.lc-trim {
  margin: -8px 0 0;
  min-height: 18px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: 18px;
  color: var(--lc-muted);
}

.lc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.lc-chip--good { background: #E7F6EE; color: #0F6B3E; }
.lc-chip--caution { background: #FFF1D1; color: #7A4D00; }
.lc-chip--problem { background: #FDE7EA; color: #A3122A; }
.lc-chip--unknown { background: #EEF1F6; color: #33415C; }

.lc-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 18px;
  color: var(--lc-body);
}

.lc-meta li {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.lc-meta svg { flex-shrink: 0; }
.lc-sep { margin: 0 -2px; }

/* --- price --- */

/* The No reserve pill and the price block, held at the bottom of the card. */
.lc-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.lc-pricing {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid #EEF0F4;
}

/* Both are as tall as a price row with Buy Now (label + big price), so the divider above them
   lines up across a row whether a card has Buy Now, only a bid, or "Bidding opens soon". */
.lc-opens {
  margin: 0;
  min-height: 44px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: var(--lc-body);
}

.lc-price {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  min-height: 44px;
}

.lc-price[hidden],
.lc-opens[hidden],
.lc-price-col[hidden],
.lc-bid-status[hidden] { display: none; }

.lc-price-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lc-price-col--end { align-items: flex-end; }

.lc-price-label {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lc-muted);
  white-space: nowrap;
}

.lc-price-value {
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--lc-navy);
  white-space: nowrap;
}

.lc-price-value--primary {
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
}

.lc-no-bids {
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: var(--lc-body);
}

/* The pill line just above the price: No reserve, and the signed-in bidder's Winning / Outbid!
   Every listed prod car is No reserve, so the bid status usually costs no height. The line
   collapses when nothing in it is showing. */
.lc-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.lc-pills:not(:has(> :not([hidden]))) { display: none; }

.lc-bid-status { display: inline-flex; }

.lc-winning,
.lc-outbid {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lc-winning { background: #E7F6EE; color: #0F6B3E; }
.lc-outbid { background: #FDE7EA; color: #A3122A; }
.lc-bid-status:not(.is-winning) .lc-winning,
.lc-bid-status.is-winning .lc-outbid { display: none; }

.lc-no-reserve {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  background: #0F6B3E;
  color: #FFFFFF;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}