/* lots.css (platform) — a lot of the marketplace as a preview outside it (ui/_lot_card.html): under
   the map of a show page in the magazine (docs/SHOW_LOTS_AND_IMAGE_PLAN.md, Teil A). Loaded by the
   page that shows the cards, never by a layout.

   Built like the magazine's article tile: a square picture on top with the mark "Trending" in its
   corner, then the kind of sale in small capitals, the title in the serif, the locality, and at the
   foot what it costs. The page's grid makes the cards of a row equally high; the foot is pushed to
   the bottom of each. Colours are the preset's (var(--mn-…)), sizes are named once on `.lot-card`. */

.lot-card {
  --lot-pad: 12px;                      /* inside the card */
  --lot-mark: 10px;                     /* the mark from the top and the left of the picture */
  --lot-title-size: 18px;               /* the title, the serif — as the magazine's step 4 */
  --lot-title-line: 24px;
  --lot-text-size: 14px;                /* locality, price */
  --lot-text-line: 20px;
  --lot-small-size: 12px;               /* the kind, the label, the note */
  --lot-small-line: 18px;
  --lot-amount-size: 16px;              /* the amount */
  --lot-amount-line: 24px;

  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--mn-surface);
  border: 1px solid var(--mn-border-card);
  border-radius: var(--rounded-box, 10px);
  color: var(--mn-gray-900);
  text-decoration: none;
}
.lot-card:hover .lot-card__title { text-decoration: underline; text-underline-offset: 3px; }
.lot-card:focus-visible { outline: 2px solid var(--mn-green-600); outline-offset: 2px; }

.lot-card__picture { position: relative; flex: none; aspect-ratio: 1 / 1; background: var(--mn-gray-200); }
.lot-card__picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lot-card__mark {
  position: absolute;
  top: var(--lot-mark);
  left: var(--lot-mark);
  background: var(--mn-show-week-surface);
  color: var(--mn-show-week);
}

.lot-card__body { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; padding: var(--lot-pad); }
.lot-card__kind {
  margin: 0 0 6px;
  font-size: var(--lot-small-size);
  line-height: var(--lot-small-line);
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--mn-green-600);
}
.lot-card__title {
  margin: 0;
  font-size: var(--lot-title-size);
  line-height: var(--lot-title-line);
  font-weight: 400;
  overflow-wrap: break-word;
}
/* Two lines of the locality at most, as the catalogue's card has it: some run over seven names. */
.lot-card__place {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 6px 0 0;
  font-size: var(--lot-text-size);
  line-height: var(--lot-text-line);
  color: var(--mn-gray-700);
  overflow-wrap: break-word;
}
.lot-card__foot { margin-top: auto; padding-top: var(--lot-pad); }
.lot-card__label, .lot-card__note {
  margin: 0;
  font-size: var(--lot-small-size);
  line-height: var(--lot-small-line);
  color: var(--mn-gray-700);
}
.lot-card__amount {
  margin: 0;
  font-size: var(--lot-amount-size);
  line-height: var(--lot-amount-line);
  font-weight: 600;
  color: var(--mn-gray-900);
}