/* ==================================================================
   De Spotify-playlists

   Eén speler bovenaan en daaronder een overzicht van alle playlists.
   De kaartjes lijken op de videokaartjes, maar dan vierkant: dat is de
   vorm die Spotify zelf ook aan een playlist geeft.
   ================================================================== */

/* ------------------------------------------------- de speler bovenaan */
.pk-pl-speler { margin: 0 0 clamp(1.4rem, 4vw, 2.2rem); }
.pk-pl-speler iframe {
  display: block; width: 100%; border: 0; border-radius: 18px;
  background: var(--pk-licht);
  box-shadow: 0 12px 30px rgba(7, 26, 67, .14);
}
.pk-pl-speler__melding {
  margin: .6rem 0 0; color: var(--pk-grijs); font-size: .88rem;
}

/* ------------------------------------------------------- het overzicht */
/* Op een telefoon twee naast elkaar: vier vierkanten onder elkaar maakt de
   pagina eindeloos lang. Vanaf een tablet mogen ze groter. */
.pk-playlists {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: grid; gap: clamp(.9rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}
@media (min-width: 700px) {
  .pk-playlists { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
}

.pk-playlist__link {
  display: grid; gap: .8rem;
  color: inherit; text-decoration: none;
  height: 100%;
}

.pk-playlist__beeld {
  position: relative; display: block;
  aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 18px; background: var(--pk-licht);
  box-shadow: 0 10px 24px rgba(7, 26, 67, .14);
}
.pk-playlist__beeld img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.pk-playlist__link:hover .pk-playlist__beeld img,
.pk-playlist__link:focus-visible .pk-playlist__beeld img { transform: scale(1.04); }

/* Geen plaatje? Dan een muzieknootje op een vrolijk vlak, zodat het
   overzicht niet uit elkaar valt. */
.pk-playlist__leeg {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: linear-gradient(150deg, var(--pk-rood) 0%, #8C1410 100%);
  color: var(--pk-wit);
}
.pk-playlist__leeg svg { width: 38%; height: 38%; }

/* Het ronde knopje rechtsonder, zoals je het bij Spotify gewend bent. */
.pk-playlist__play {
  position: absolute; right: .7rem; bottom: .7rem;
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: var(--pk-goud); color: var(--pk-nacht);
  box-shadow: 0 6px 16px rgba(7, 26, 67, .3);
  transform: translateY(.4rem); opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.pk-playlist__play svg { width: 20px; height: 20px; }
.pk-playlist__link:hover .pk-playlist__play,
.pk-playlist__link:focus-visible .pk-playlist__play { transform: translateY(0); opacity: 1; }

/* Op een touchscreen is er geen hover; daar staat het knopje er gewoon. */
@media (hover: none) {
  .pk-playlist__play { transform: translateY(0); opacity: 1; }
}

.pk-playlist__tekst { display: grid; gap: .2rem; }
.pk-playlist__naam {
  font-family: var(--pk-kop); font-size: 1.1rem; line-height: 1.25;
  color: var(--pk-nacht);
}
.pk-playlist__link:hover .pk-playlist__naam { color: var(--pk-rood); }
.pk-playlist__intro { color: var(--pk-grijs); font-size: .92rem; }
.pk-playlist__bij {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .15rem; color: var(--pk-rood);
  font-family: var(--pk-knop); font-weight: 700; font-size: .85rem;
}
.pk-playlist__bij svg { width: 15px; height: 15px; }

.pk-playlist__link:focus-visible {
  outline: 3px solid var(--pk-goud); outline-offset: 4px; border-radius: 20px;
}