/*
  Marketplace on the themed shell: the storefront, the strip on the home
  page and the listing page. Tokens come from iagd-theme.css.
*/

/* ---- The listing card ------------------------------------------------ */

/* Photo first, as in the app: the price rides the photo, then the title
   and one line of facts. Built on the theme's card (.iagd-card), which
   carries the surface, the hover and the plain text colour of a link that
   is a card. Nothing inside draws a border or a fill of its own. */
.iagd-card.mk-card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.mk-card__photo {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-layer-alt);
}
.mk-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease-fluent-out);
}
.mk-card:hover .mk-card__photo img { transform: scale(1.03); }

/* Words on the photo sit on a scrim, never in a box. */
.mk-card__mark,
.mk-card__price {
  position: absolute;
  left: 0;
  right: 0;
  padding-inline: 12px;
  color: #fff;
}
.mk-card__mark {
  top: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-top: 9px;
  padding-bottom: 22px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.62), transparent);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-gold);
}
.mk-card__mark svg { width: 13px; height: 13px; flex: 0 0 auto; }
.mk-card__price {
  bottom: 0;
  padding-top: 30px;
  padding-bottom: 9px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mk-card__body { display: block; min-width: 0; padding: 10px 12px 12px; }
.mk-card__title,
.mk-card__facts {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-card__title { font-size: 14px; font-weight: 700; line-height: 1.3; }
.mk-card__facts { margin-top: 2px; font-size: 12px; color: var(--color-dim-2); }
/* The registry number is an identifier, so it reads as plain text with a
   mark. */
.mk-card__iagd {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent-text);
}

/* ---- The storefront -------------------------------------------------- */

.mk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 720px) { .mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* One line of chips that scrolls sideways, so a long list of categories or
   breeds never stacks into a wall above the listings. */
.mk-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}
.mk-chips .iagd-pill { flex: 0 0 auto; }

/* ---- The strip on the home page -------------------------------------- */

/* A row that scrolls sideways on a phone and settles into a grid where the
   screen has room for it. */
.mk-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 42%);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.mk-strip .mk-card { scroll-snap-align: start; }
@media (min-width: 720px) {
  .mk-strip {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow-x: visible;
    padding-bottom: 0;
  }
  /* One row here: a second one pushed the rest of the home page a screen
     down, and the link above the strip leads to every listing. */
  .mk-strip > :nth-child(n + 5) { display: none; }
}