#music { background: var(--surface); position: relative; overflow: hidden; }

/* 3 column grid desktop, 1 column mobile */
.music-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

/* Card */
.music-card {
  background: #0f1527;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.music-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.player-card {
  background: linear-gradient(160deg, #0f1527, #0a0e1a);
  border: 1px solid var(--border); padding: 2rem;
  position: sticky; top: 120px;
}
/* Album art */
.music-card-art {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
}
.music-card-art img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.4s;
  opacity: 0.9;
}
.music-card:hover .music-card-art img { transform: scale(1.04); }
.music-card-art-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,6,8,0.6) 0%, transparent 50%);
}
.music-card-badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--gold); color: var(--bg);
  font-size: 0.52rem; letter-spacing: 0.2em;
  text-transform: uppercase; padding: 3px 8px;
  border-radius: 2px; font-weight: 600;
}

/* Card body */
.music-card-body {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1rem 0.6rem;
  background: #0f1527;
}
.music-card-embed { background: #0f1527; }
.music-card-spotify-icon { color: #1DB954; flex-shrink: 0; }
.music-card-info { flex: 1; min-width: 0; }
.music-card-title {
  font-size: 0.9rem; font-weight: 500;
  color: var(--cream); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.music-card-title span { opacity: 0.5; font-weight: 300; }
.music-card-artist {
  font-size: 0.7rem; color: var(--muted);
  margin-top: 0.15rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.music-card-save {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.62rem; color: #1DB954;
  text-decoration: none; margin-top: 0.35rem;
  letter-spacing: 0.06em;
  transition: opacity 0.2s;
}
.music-card-save:hover { opacity: 0.7; }

/* Embed sits flush at bottom */
.music-card-embed { background: var(--bg); }

/* View all */
.view-all-btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 2rem;
  border: 1px solid rgba(29,185,84,0.3);
  color: #1DB954; text-decoration: none;
  font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s;
  border-radius: 2px; cursor: none;
  font-family: 'Montserrat', sans-serif;
}
.view-all-btn:hover {
  background: rgba(29,185,84,0.08);
  border-color: #1DB954;
}

/* Mobile — single column */
@media (max-width: 900px) {
  .music-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .music-card-art { aspect-ratio: 16/9; }
}