.grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.cardLink{
  display:block;
  text-decoration:none;
  color: inherit;
}
.cardLink:hover{ text-decoration:none; }
@media (max-width: 980px){ .grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px){ .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ .grid{ grid-template-columns: repeat(1, minmax(0, 1fr)); } }

.card{
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,0.16);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transform: translateY(0px);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.cardLink:hover .card,
.cardLink:focus-visible .card{
  border-color: rgba(96,165,250,.55);
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.cardLink:focus-visible{ outline:none; }

.cardMedia{ position:relative; aspect-ratio: 16 / 9; overflow:hidden; }
.cardMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background: linear-gradient(135deg, rgba(96,165,250,.12), rgba(0,0,0,0.0));
}


.playOverlay{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding: 10px;
  opacity: 0;
  transition: opacity .14s ease;
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.18));
}

.playCircle{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(96,165,250,.20);
  border: 1px solid rgba(96,165,250,.55);
  backdrop-filter: blur(8px);
  transform: translateY(6px) scale(0.98);
  transition: transform .14s ease;
}

.playIcon{ transform: translateX(1px); font-weight: 900; }

.cardLink:hover .playOverlay,
.cardLink:focus-visible .playOverlay{ opacity: 1; }

.cardLink:hover .playCircle,
.cardLink:focus-visible .playCircle{ transform: translateY(0px) scale(1); }

.p{ padding: 12px; }

/* Playlists */
.plGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){ .plGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px){ .plGrid{ grid-template-columns: repeat(1, minmax(0, 1fr)); } }

.plCardLink{ display:block; text-decoration:none; color: inherit; }
.plCardLink:hover{ text-decoration:none; }

.plCard{
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,0.16);
  border-radius: 18px;
  overflow:hidden;
  padding: 12px;
  transform: translateY(0px);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.plCardLink:hover .plCard,
.plCardLink:focus-visible .plCard{
  border-color: rgba(96,165,250,.55);
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}

.plTop{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:flex-start;
  margin-bottom: 10px;
}

.plName{ font-weight: 900; letter-spacing: .2px; }

.plIcons{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.plIcon{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(96,165,250,.12), rgba(0,0,0,0.0));
}

.plCard.accentFav{
  border-color: rgba(250,204,21,.35);
  background: linear-gradient(135deg, rgba(250,204,21,.12), rgba(0,0,0,0.12));
}