/* =====================================================================
   MDLBEAST RADIO - release card component (template-parts/music-card.php).
   Used by the Featured music box, the Music release block and the
   [music_release] shortcode, anywhere on the site. The cover sits in a
   sleeve; the record slides out as the card moves up the screen and back in
   when the page goes the other way, turning with the scroll (js/app.js
   initMusicCards sets --mc-out 0..1 and --mc-turn). The card sizes to its own
   container, so it works full width or inside article text. Solid card, no
   shadows, colors from the page's combo tokens.
   ===================================================================== */
.mc-wrap{container-type:inline-size;margin-top:clamp(40px,7vh,72px)}
.prose .mc-wrap{margin:clamp(28px,5vh,48px) 0}
.music-card{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,4cqi,56px);align-items:center;
  padding:clamp(22px,5cqi,52px);border-radius:24px;background:var(--surface);color:var(--surface-ink);overflow:hidden}
/* The sleeve column leaves room for the record at its furthest slide, so it
   never covers the title or buttons. */
@container (min-width:620px){.music-card{grid-template-columns:minmax(0,42%) minmax(0,1fr)}}
.mc-sleeve{position:relative;width:min(66%,290px);aspect-ratio:1/1}
.mc-body{position:relative;z-index:3;min-width:0}
.mc-wrap .mc-cover{position:relative;z-index:2;display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;border-radius:6px}
.mc-cover-empty{display:grid;place-items:center;background:var(--accent);color:var(--on-accent)}
.mc-cover-empty svg{width:40%;opacity:.4}
.mc-disc{position:absolute;z-index:1;top:3%;left:3%;width:94%;height:94%;border-radius:50%;background:var(--black-noise,#000);color:var(--white-noise,#fff);
  transform:translateX(calc(4% + var(--mc-out,0) * 32%));transition:transform .15s linear}
.mc-disc svg{display:block;width:100%;height:100%;transform:rotate(var(--mc-turn,0deg))}
.mc-disc .mc-label{fill:var(--accent)}
.mc-disc .mc-hole{fill:var(--surface)}
.mc-wrap .mc-kicker{margin:0;color:inherit;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;opacity:.72}
.mc-wrap .mc-title{margin:10px 0 0;color:inherit;font-family:var(--f-black);text-transform:uppercase;letter-spacing:-.02em;line-height:.9;font-size:clamp(2rem,8cqi,4.4rem);overflow-wrap:anywhere}
.mc-wrap .mc-artist{margin:10px 0 0;color:inherit;font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;opacity:.85}
.mc-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,3.5vh,32px)}
.mc-wrap a.mc-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 20px 14px 15px;border-radius:999px;background:var(--surface-ink);color:var(--surface);text-decoration:none;
  font-family:var(--f-heavy);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;line-height:1;transition:background .15s,color .15s,transform .15s}
.mc-wrap a.mc-btn svg{flex:0 0 20px;width:20px;height:20px}
.mc-wrap a.mc-btn:hover{background:var(--accent);color:var(--on-accent);transform:translateY(-2px)}
.mc-wrap a.mc-btn:focus-visible{outline-offset:3px}
@media(prefers-reduced-motion:reduce){.mc-disc{transition:none}.mc-wrap a.mc-btn:hover{transform:none}}