/* ─── Cover Art ─── */
.mp-cover-wrap {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-cover {
  /* Largest square that fits BOTH the viewport width and the height the flex
     column leaves for the cover. `max-height: 100%` ties the image to its
     (shrinkable) wrap, so on a short window it scales down instead of growing
     past its slot and overlapping the title (zunoz, RC2 small-window report).
     `width/height: auto` + `aspect-ratio` keep it square while it shrinks. */
  max-width: min(calc(100vw - 28px), 440px);
  max-height: 100%;
  width: auto;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 16px 52px rgba(0, 0, 0, 0.7), 0 4px 16px rgba(0, 0, 0, 0.4);
}

.mp-cover-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  color: var(--text-muted);
}

/* ─── Circular cover utility ───
   Shared round-cover treatment so circular cover art (single-track cards today,
   reusable elsewhere) is defined once instead of re-rolling border-radius:50% per
   component. Carries the paint-stability hints round image clipping needs on
   WebKitGTK/Wayland — mirrors the artist-card avatar (see artist-card-grid-view.css). */
.cover-circle {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--bg-hover);
  contain: paint;
  isolation: isolate;
  transform: translateZ(0);
}

.cover-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

