/* ==========================================================================
   WREN — pages/music.css
   Catalog grid + filters + featured album block.
   ========================================================================== */

.music-catalog {
  padding-block: var(--space-6);
}

/* ---- Filters -------------------------------------------------------------- */
.filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.filters__btn {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--concrete);
  border: 1px solid var(--concrete-dim);
  padding: var(--space-1) var(--space-3);
  transition: color 0.25s var(--ease-house), border-color 0.25s var(--ease-house),
    background-color 0.25s var(--ease-house);
}

.filters__btn:hover,
.filters__btn:focus-visible {
  color: var(--tile);
  border-color: var(--concrete);
}

.filters__btn[aria-pressed="true"] {
  background: var(--sodium);
  border-color: var(--sodium);
  color: var(--tunnel);
  font-weight: 700;
}

.filters__count {
  margin-left: auto;
  font-size: var(--text-xs);
}

/* ---- Catalog grid ------------------------------------------------------------ */
.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-4);
}

.song-card {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.song-card__art {
  transition: transform 0.35s var(--ease-house);
}

.song-card:hover .song-card__art {
  transform: scale(1.02);
}

.song-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
}

.song-card__title {
  font-size: var(--text-base);
  letter-spacing: 0.05em;
}

.song-card__tag {
  color: var(--transit-text); /* --transit fails AA at this size on dark */
  font-size: var(--text-xs);
}

.song-card__tag--cover { color: var(--concrete); }
.song-card__tag--live { color: var(--sodium); }

.song-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.song-card__links a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: var(--concrete);
}

.song-card__links a:hover,
.song-card__links a:focus-visible {
  color: var(--sodium);
}

.song-card__expand {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--sodium);
  text-align: left;
  width: fit-content;
  padding-block: var(--space-1);
}

/* Expandable player slot — stub; real phase drops the embed in here */
.song-card__player {
  display: none;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--concrete-dim);
  background: var(--tunnel-lift);
  padding: var(--space-2);
}

.song-card__player.is-open {
  display: flex;
}

.song-card__player-line {
  flex: 1;
  height: 12px;
  /* thin idle line + a 3px sodium fill that grows with --progress (0–1, set by the player) */
  background:
    linear-gradient(var(--sodium), var(--sodium)) left center / calc(var(--progress, 0) * 100%) 3px no-repeat,
    linear-gradient(var(--sodium), var(--sodium)) center / 100% 1px no-repeat;
}

.song-card.is-hidden {
  display: none;
}

/* ---- Featured album ------------------------------------------------------------- */
.album {
  padding-block: var(--space-5) var(--space-7);
}

.album__grid {
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  gap: var(--space-5);
  align-items: start;
}

.album__promo {
  grid-column: 1 / -1;
}

.album__blurb {
  margin-bottom: var(--space-4);
}

.album__tracklist {
  columns: 2;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  counter-reset: track;
}

.album__tracklist li {
  counter-increment: track;
  padding-block: var(--space-1);
  border-bottom: 1px solid var(--concrete-dim);
  break-inside: avoid;
}

.album__tracklist li::before {
  content: counter(track, decimal-leading-zero) " ";
  color: var(--sodium);
  margin-right: var(--space-2);
}

@media (max-width: 820px) {
  .album__grid {
    grid-template-columns: 1fr;
  }

  .album__tracklist {
    columns: 1;
  }
}