/* =====================================================================
   COMPONENT STYLES: <bk-listing-card>
   Same visual family as <bk-goat-card>; the photo is never cropped.
   ===================================================================== */

/* ---- 1. Card shell ------------------------------------------------ */
.bk-listing-card { display: block; }
.bk-listing-card__inner {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--bk-milk); border: 1px solid var(--bk-line); border-radius: var(--bk-radius-lg); box-shadow: var(--bk-shadow);
  transition: transform 320ms var(--bk-ease), box-shadow 320ms var(--bk-ease);
}
.bk-listing-card__inner:hover { transform: translateY(-4px); box-shadow: var(--bk-shadow-lift); }

/* ---- 2. Photo stage: whole photo visible inside a 4:3 frame -------- */
.bk-listing-card__stage {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3;
  background: radial-gradient(120% 90% at 50% 100%, var(--bk-cream), var(--bk-milk));
}
.bk-listing-card__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform 500ms var(--bk-ease); }
.bk-listing-card__inner:hover .bk-listing-card__stage img { transform: scale(1.02); }
.bk-listing-card__stage .bk-goat-art { max-width: 280px; padding: var(--bk-space-4); }
.bk-listing-card__mode { position: absolute; top: var(--bk-space-3); inset-inline-start: var(--bk-space-3); }

/* ---- 3. Text -------------------------------------------------------- */
.bk-listing-card__body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: var(--bk-space-4); }
.bk-listing-card__title { font-size: var(--bk-step-1); }
.bk-listing-card__title a { text-decoration: none; }
.bk-listing-card__title a:hover { color: var(--bk-henna); }
.bk-listing-card__place { color: var(--bk-ink-soft); }
.bk-listing-card__meta { color: var(--bk-ink-faint); font-size: var(--bk-step--1); }
.bk-listing-card__price { display: flex; align-items: baseline; gap: var(--bk-space-2); margin-top: var(--bk-space-1); }
.bk-listing-card__price span { color: var(--bk-ink-faint); font-size: var(--bk-step--1); }
.bk-listing-card__price strong { font-size: var(--bk-step-1); }
.bk-listing-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bk-space-3);
  margin-top: auto; padding-top: var(--bk-space-3); border-top: 1px dashed var(--bk-line);
}
.bk-listing-card__listed { color: var(--bk-ink-faint); font-size: var(--bk-step--1); }