/* ============================================================================
   music.css — Music index page (redesign)
   Index-style lists per discipline section. Sage (music) discipline color.
   All themable colors come from redesign.css tokens so the toggle works.
   Page-scoped with the .music-page / .music-* prefixes.
   ========================================================================== */

.music-page {
  padding: 56px 0 24px;
}

/* ---------------------------------------------------------------- Header -- */
.music-eyebrow-row {
  color: var(--muted-2);
  margin-bottom: 14px;
}

.music-bubble {
  /* .rd-bubble.music supplies background + display typography; tune size/pad
     to match prototype's smaller inline pill (8px 16px, 15px, radius 11). */
  font-size: 15px;
  padding: 8px 16px;
  border-radius: 11px;
  margin-bottom: 22px;
}

.music-title {
  font-size: 52px;
  line-height: 1;
  margin: 0 0 16px;
}

.music-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  max-width: 560px;
}

/* --------------------------------------------------------------- Section -- */
.music-section {
  margin-top: 40px;
}

.music-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.music-section-desc {
  font-size: 14px;
  color: var(--muted-2);
  margin: 0 0 6px;
}

/* ------------------------------------------------------------------ List -- */
.music-list {
  display: flex;
  flex-direction: column;
}

.music-row {
  display: grid;
  grid-template-columns: 1fr 360px 84px;
  align-items: baseline;
  gap: 20px;
  padding: 15px 16px;
  margin: 0 -16px;
  border-top: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color .15s ease, padding-left .15s ease;
}

/* Bottom hairline closes the list */
.music-list .music-row:last-child {
  border-bottom: 1px solid var(--hairline);
}

.music-row-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: transform .15s ease;
}

.music-row-meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--contact-chip);
  align-self: baseline;
}

.music-row-chip {
  justify-self: end;
  opacity: 0;
  transition: opacity .15s ease;
  color: var(--music-chip);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- Hover -- */
.music-row:hover {
  background: var(--music-wash);
  text-decoration: none;
  padding-left: 24px;
}

.music-row:hover .music-row-chip {
  opacity: 1;
}

/* ------------------------------------------------------------ Responsive -- */
@media (max-width: 720px) {
  .music-page {
    padding: 36px 0 16px;
  }

  .music-title {
    font-size: 40px;
  }

  .music-row {
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    padding: 14px 12px;
    margin: 0 -12px;
  }

  .music-row-title {
    font-size: 19px;
    grid-column: 1 / -1;
  }

  .music-row-meta {
    grid-column: 1;
  }

  .music-row-chip {
    grid-column: 2;
    align-self: center;
    opacity: 1; /* no hover on touch — always show affordance */
  }

  .music-row:hover {
    padding-left: 12px;
  }
}