/* Music Vault track cards. Colours come from portfolio.css tokens. */

.tracks{padding:8px 0 48px}
.tracks h2{font-size:1.5rem;margin:0 0 18px}
.track-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.track{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.track-play{display:block;position:relative;aspect-ratio:16/9;background:#05070c;color:#fff}
.track-play img{display:block;width:100%;height:100%;object-fit:cover}
.play-badge{position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;background:rgba(5,7,12,.62);
  border:2px solid rgba(255,255,255,.85);display:grid;place-items:center;transition:transform .18s var(--ease),background .18s}
.play-badge svg{width:24px;height:24px;margin-left:4px;fill:#fff}
.track-play:hover .play-badge,.track-play:focus-visible .play-badge{transform:scale(1.08);background:rgba(5,7,12,.8)}
.track-play:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.track-frame{display:block;width:100%;aspect-ratio:16/9;border:0;background:#05070c}
.track-meta{padding:14px 18px 18px}
.track-meta h3{margin:0 0 6px;font-size:1.12rem;color:var(--heading)}
.track-meta p{margin:0;color:var(--muted);line-height:1.55}
.track-len{font-variant-numeric:tabular-nums}
.track-credits{margin:22px 0 0;color:var(--muted);font-size:.92rem;line-height:1.65;max-width:75ch}
@media(prefers-reduced-motion:reduce){.play-badge{transition:none}}
@media(max-width:620px){.track-list{grid-template-columns:1fr;gap:18px}}