/* app-card.css — app tile used in grids, menus and posts (12 §5). Use with .card (+ .card--link).
   Tagline uses .card__text (2-line clamp); title link uses .card__link. */

.app-card { align-items: flex-start; }

.app-card__icon {
  width: var(--app-icon);
  height: var(--app-icon);
  border-radius: var(--r-md);
  object-fit: cover;
}

.app-card__meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
}

.app-card__rating { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.app-card__rating .bi { color: var(--warning); }

.app-card--featured { border-color: var(--primary); }

/* Compact horizontal variant: inline in posts, menus, related lists. */
.app-card--row { flex-direction: row; align-items: center; gap: var(--sp-4); padding: var(--sp-4); }
.app-card--row .app-card__icon { width: calc(var(--app-icon) * .75); height: calc(var(--app-icon) * .75); }
.app-card--row .card__title { font-size: var(--fs-h4); }
.app-card__body { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
