/* ============================================================
   MUSIC — COVER GRID (Figma 66:7247 card, 66:7273 hover).
   Cards are generated by _archive/gen_music_cards.rb.
   Behaviour (play preview, filters): js/music-grid.js

   Card (Figma 67:7377) = cover, then text aligned to the BOTTOM so the
   lines of every card in a row sit at the same height (CSS subgrid):
     Artist
     Title ........ Year
   On the cover: ▶ bottom-left, "Spotify ↗" / "YouTube ↗" bottom-right.
     ───────────────────── (1px, like every other line on the site)
     Roles
     ─────────────────────
   ============================================================ */

.music-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* 4 per row */
  column-gap: 1rem;                     /* + 8px card padding each side = 32px between covers */
  row-gap: 1.5rem;
}

/* Collapsed: only the first 2 rows (4 per row → 8 cards).
   "See more" (js/music-grid.js) adds .is-expanded to show the rest. */
.music-grid:not(.is-expanded) .music-card:nth-child(n + 9) { display: none; }
.music-grid.is-expanded .music-card:nth-child(n + 9) { animation: card-in 0.6s var(--ease-out) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  .music-grid.is-expanded .music-card { animation: none; }
}

/* "See more" — aligned with the left edge of the covers; same underline
   and hover animation as "Full credits" */
.music-more {
  all: unset;
  display: inline-block;
  margin: 1.5rem 0 0 0.5rem;            /* 0.5rem = card padding → lines up with the covers */
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease;
}
.music-more:hover { color: var(--color-accent); }
.music-more:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.music-more span {
  padding-bottom: 1px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}
.music-more:hover span { animation: underline-redraw 0.7s var(--ease-out); }

/* Card — 8px padding, 1px frame on hover (Figma 66:7273).
   3 rows (cover / artist+title / roles) shared with the other cards of the
   same grid row, so texts and lines align at the bottom. */
.music-card {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 0.5rem 0.5rem 0.625rem;
  border: var(--line);
  border-color: transparent;
  font-size: var(--fs-small);           /* 16px Book */
  line-height: var(--lh-body);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.music-card:hover,
.music-card:focus-within,
.music-card.is-playing { border-color: var(--color-line); }

.music-card p { margin: 0; }

/* Cover */
.music-card__cover {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-muted);
}
.music-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Play / pause — square in the bottom-left corner of the cover.
   Shows on hover, keyboard focus and while playing. */
.music-card__play {
  position: absolute;
  left: 0;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.3s var(--ease-out), color 0.15s ease;
}
.music-card:hover .music-card__play,
.music-card:hover .music-card__link,
.music-card__link:focus-visible,
.music-card__play:focus-visible,
.music-card.is-playing .music-card__play { opacity: 1; transform: none; }
.music-card__play:hover { color: var(--color-accent); }
.music-card__play:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.music-card__icon { width: 0.7rem; height: 0.7rem; fill: currentColor; }
.music-card__icon--pause,
.music-card.is-playing .music-card__icon--play { display: none; }
.music-card.is-playing .music-card__icon--pause { display: block; }
.music-card__play--out .glyph { font-size: 1.25rem; line-height: 1; }

/* Preview progress — thin blue line along the bottom of the cover */
.music-card__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Title | Year  /  Artist | Spotify ↗ */
.music-card__meta {
  /* Two fixed columns shared by both lines: left text never runs under
     the right column (Spotify ↗ / year), 24px between them */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.5rem;
  row-gap: 2px;
  align-content: end;                   /* bottom-aligned (Figma 67:7377) */
  align-items: end;
  padding: 1rem 0 0.5rem;               /* 16px below the cover, 8px above the line */
  border-bottom: var(--line);
}
.music-card__row { display: contents; }
.music-card__artist { grid-column: 1 / -1; }
.music-card__artist,
.music-card__title { min-width: 0; overflow-wrap: break-word; }
/* at most 2 lines; the full title is in the tooltip */
.music-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.music-card__year  { text-align: right; }
.nowrap { white-space: nowrap; }
.music-card__artist { color: inherit; }
.music-card__roles {
  align-self: stretch;                  /* text stays under the top line; the bottom line aligns across the row */
  padding: 0.5rem 0;
  border-bottom: var(--line);
}

/* "Spotify ↗" — white tag in the cover's bottom-right corner, shows with
   the play button; same underline-grow as the other ↗ links */
.music-card__link {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 2.25rem;
  padding: 0 0.625rem;
  background: var(--color-bg);
  color: var(--color-text);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.3s var(--ease-out), color 0.15s ease;
  gap: 0.25em;
  font-size: var(--fs-small);
  white-space: nowrap;
}
.music-card__link span:first-child {
  padding-bottom: 1px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s var(--ease-out);
}
.music-card__link:hover span:first-child { background-size: 100% 1px; }

/* Filtered out: dimmed gray, like the old list (not hidden) */
.music-card.is-dimmed { color: var(--color-muted); }
.music-card.is-dimmed .music-card__meta,
.music-card.is-dimmed .music-card__roles { border-color: var(--color-muted); }
.music-card.is-dimmed img { filter: grayscale(1); opacity: 0.25; }

/* Filters follow you down while you scroll through Music (desktop only,
   where they sit in their own column on the left). Sticky inside .projects,
   so they stop at the end of the section. */
@media (min-width: 1024px) {
  #music .filters {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-stack));
    align-self: start;
  }
}

/* Touch screens: no hover, so the play button is always there */
@media (hover: none) {
  .music-card__play,
  .music-card__link { opacity: 1; transform: none; }
}

@media (max-width: 1023px) {
  .music-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .music-grid:not(.is-expanded) .music-card:nth-child(n + 7) { display: none; }   /* 2 rows of 3 */
}
@media (max-width: 767px) {
  .music-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.5rem; row-gap: 1rem; }
  .music-grid:not(.is-expanded) .music-card:nth-child(n + 5) { display: none; }   /* 2 rows of 2 */
  .music-more { margin-left: 0.375rem; }
  .music-card { padding: 0.375rem 0.375rem 0.5rem; }
}