/* Light music player — designed for the new Serve Hermans visual style. */

.music-player-page {
  --green: #4f7d3b;
  --green-soft: #dce7d6;
  --ink: #171713;
  --muted: #6f7068;
  --line: #d7d8d0;
  --paper: #fbfaf6;
  color: var(--ink);
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 8rem;
}

.music-back {
  color: var(--green);
  text-decoration: none;
  font-size: .9rem;
}

.music-player-release {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.5rem;
  margin-top: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line);
}

.music-player-release-info {
  align-self: center;
  max-width: 650px;
}

.music-eyebrow {
  color: var(--green);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: lowercase;
}

.music-player-release h1 {
  margin: .35rem 0 .75rem;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 500;
}

.music-player-release-info > p {
  max-width: 55ch;
  color: var(--muted);
  line-height: 1.65;
}

.music-track-list {
  margin-top: 2rem;
  border-top: 1px solid var(--line);
}

.music-track {
  width: 100%;
  display: grid;
  grid-template-columns: 2.4rem 1.5rem 1fr auto;
  gap: .6rem;
  align-items: center;
  padding: .8rem .2rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.music-track:hover,
.music-track.is-active {
  color: var(--green);
}

.music-track-number,
.music-track-duration {
  color: var(--muted);
  font-size: .8rem;
}

.music-track-play {
  color: var(--green);
  opacity: 0;
}

.music-track:hover .music-track-play,
.music-track.is-active .music-track-play {
  opacity: 1;
}

/* Fixed player */

.music-player {
  z-index: 100;
  display: grid;
  grid-template-columns: 58px minmax(140px, 230px) auto minmax(180px, 1fr) auto auto auto auto;
  gap: .8rem;
  align-items: center;
  padding: .65rem .9rem;
  border: 1px solid #cfd0c8;
  border-radius: 6px;
  background: rgba(251,250,246,.96);
  box-shadow: 0 5px 24px rgba(20,25,15,.10);
  backdrop-filter: blur(10px);
  margin-top:3rem;
}

.music-player-art {
  /* width: 58px;
  height: 58px; */
  background: var(--green-soft) center/cover no-repeat;
}

.music-player-title {
  min-width: 0;
  display: grid;
  gap: .2rem;
}

.music-player-title strong,
.music-player-title span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.music-player-title strong {
  font-size: .95rem;
  font-weight: 500;
}

.music-player-title span {
  color: var(--muted);
  font-size: .78rem;
}

.music-player-controls {
  display: flex;
  gap: .25rem;
}

.music-player-controls button,
.music-player-volume,
.music-player-more {
  min-width: 2.45rem;
  height: 2.45rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.music-player-controls button:hover,
.music-player-controls .is-primary {
  border-color: var(--green);
  color: var(--green);
}

.music-player-progress-wrap {
  min-width: 100px;
  cursor: pointer;
  padding: .7rem 0;
}

.music-player-progress-track {
  height: 4px;
  border-radius: 5px;
  background: #dedfd9;
  overflow: hidden;
}

.music-player-progress {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--green);
}

.music-player-time {
  display: grid;
  grid-template-columns: auto auto;
  gap: .5rem;
  color: var(--muted);
  font-size: .72rem;
}

.music-player-volume {
  color: var(--green);
  min-width: 2.8rem;
}

.music-player input[type="range"] {
  width: 75px;
  accent-color: var(--green);
}

.music-player-more {
  font-size: 1.15rem;
}

.music-player audio {
  display: none;
}

@media (max-width: 760px) {
  .music-player-release {
    grid-template-columns: 110px 1fr;
    gap: 1.2rem;
    margin-top: 2rem;
  }

  .music-player {
    left: .5rem;
    right: .5rem;
    bottom: .5rem;
    grid-template-columns: 44px 1fr auto;
    gap: .5rem;
  }

  .music-player-art {
    width: 44px;
    height: 44px;
  }

  .music-player-progress-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .music-player-time,
  .music-player-volume,
  .music-player input[type="range"],
  .music-player-more {
    display: none;
  }
}