/* =============================================================
   PLAYLISTS — Spotify embed grid section
   Three live Spotify iframe players in a responsive grid.
   Depends on: tokens.css, global.css
   ============================================================= */


/* -----------------------------------------------------------
   .playlists — section wrapper
----------------------------------------------------------- */
.playlists {
  background-color: var(--color-abyss);
  padding: var(--space-20) 0;
}


/* -----------------------------------------------------------
   .playlists__header — eyebrow only, no section heading
----------------------------------------------------------- */
.playlists__header {
  margin-bottom: var(--space-8);
}

.playlists__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-chai);
}


/* -----------------------------------------------------------
   .playlists__grid — three-column responsive grid
----------------------------------------------------------- */
.playlists__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}


/* -----------------------------------------------------------
   .playlists__item — individual playlist column
----------------------------------------------------------- */
.playlists__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}


/* -----------------------------------------------------------
   .playlists__meta — name + descriptor above the embed
----------------------------------------------------------- */
.playlists__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.playlists__name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-bone);
  letter-spacing: 0.04em;
}

.playlists__desc {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 300;
  color: var(--color-signal);
  letter-spacing: 0.08em;
}


/* -----------------------------------------------------------
   .playlists__embed — iframe wrapper
   border-radius clips the Spotify player to match site radius.
   No hover state — Spotify handles its own interactions.
----------------------------------------------------------- */
.playlists__embed {
  border-radius: 4px;
  overflow: hidden;
}

.playlists__embed iframe {
  display: block;
  width: 100%;
  border-radius: 4px;
}


/* -----------------------------------------------------------
   .playlists__submit-btn — text link below Indie Selects embed
----------------------------------------------------------- */
.playlists__submit-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-signal);
  text-decoration: none;
  border-bottom: 0.5px solid var(--color-slate);
  padding-bottom: 2px;
  margin-top: var(--space-3);
  transition: color var(--transition-base), border-color var(--transition-base);
}

.playlists__submit-btn:hover {
  color: var(--color-chai);
  border-bottom-color: var(--color-chai);
}


/* -----------------------------------------------------------
   RESPONSIVE — tablet: 2 columns
----------------------------------------------------------- */
@media (max-width: 1024px) and (min-width: 769px) {
  .playlists__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* -----------------------------------------------------------
   RESPONSIVE — mobile: 1 column
----------------------------------------------------------- */
@media (max-width: 768px) {
  .playlists__grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .playlists__embed iframe {
    width: 100%;
    height: 352px;
  }

  .playlists__name {
    font-size: var(--text-sm);
  }
}