/* assets/css/music.css
   ==========================================================================
   MUSIC — ONLY
   - Preview button shows speaker icon when idle
   - When playing: shows PAUSE icon + red active style
   - YouTube icon stays as your PNG (bigger inner icon, same frame)
   ========================================================================== */

#music{
  position: relative;
  z-index: 3;
}

/* =========================
   Releases layout
   ========================= */
.release-inner{
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 24px;
  align-items: start;
}

.release .cover{
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  background: rgba(0,0,0,0.8);
}
.release .cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.release-details{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.release-title{
  margin: 0 0 10px 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
}

.release-year{
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  margin-left: 10px;
  white-space: nowrap;
  letter-spacing: 2px;
}

/* =========================
   Track list
   ========================= */
.tracklist{
  margin: 4px 0 0 0;
  padding-left: 16px;
  font-size: 16px;
  line-height: 1.14;
  letter-spacing: 0.3px;
}

.tracklist li{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  position: relative;
}

.track-name{
  transition: color 180ms ease, text-shadow 180ms ease;
  display: inline-block;
  padding-top: 1px;
}

/* Track hover highlight */
.tracklist li:has(.preview-btn:hover),
.tracklist li:has(.watch-btn-track:hover){
  --track-active: 1;
}

.tracklist li::before{
  content: "";
  position: absolute;
  left: -10px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.15), transparent);
  opacity: var(--track-active, 0);
  transition: opacity 160ms ease;
}

.tracklist li:has(.preview-btn:hover) .track-name,
.tracklist li:has(.watch-btn-track:hover) .track-name{
  color: #fff;
  text-shadow: 0 0 6px rgba(255,255,255,0.85);
}

/* Buttons grouped at the right edge */
.track-actions{
  display: inline-flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
}

/* ==========================================================================
   YouTube watch button (frame same, inner icon bigger)
   ========================================================================== */
.watch-btn-track{
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  border-radius: 10px;

  /* keep the same overall frame size */
  padding: 3px 3px;
  min-width: 30px;
  height: 26px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  transition: background 200ms ease, border-color 200ms ease, transform 120ms ease;
}

.watch-btn-track:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
}
.watch-btn-track:active{ transform: translateY(1px); }

.watch-btn-track .yt-icon{
  width: 25px;
  height: 18px;
  display: block;
  opacity: 0.95;
  filter: brightness(1.5) contrast(1.2);
  margin: 0 6px; 
}

.watch-btn-track:hover .yt-icon{
  filter: brightness(1.7) contrast(1.25)
          drop-shadow(0 0 6px rgba(138,0,0,.45));
}
/* "Watch" text styling */
.watch-btn-track .watch-text{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.7px;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  margin: 0 6px; /* ← adds space left & right */
min-width: 45px;
}

/* Slight emphasis on hover */
.watch-btn-track:hover .watch-text{
  color: #fff;
}



/* ==========================================================================
   Preview button (speaker idle -> pause when playing)
   NOTE: your HTML must include these inside the button:
   - <span class="btn-icon icon-play"><img class="audio-svg" ...></span>
   - <span class="btn-icon icon-pause" aria-hidden="true">⏸</span>
   ========================================================================== */
.preview-btn{
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.90);
  border-radius: 10px;

  padding: 6px 8px;
  min-width: 30px;
  height: 26px;

  font-weight: 800;
  letter-spacing: 0.7px;
  font-size: 12px;
  line-height: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  transition: background 200ms ease, border-color 200ms ease, transform 120ms ease;
}

.preview-btn:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
}
.preview-btn:active{ transform: translateY(1px); }

/* Active style */
.preview-btn.is-playing{
  background: rgba(138,0,0,0.20);
  border-color: rgba(138,0,0,0.55);
  box-shadow: 0 0 0 1px rgba(138,0,0,0.18) inset;
}

/* Icon sizing */
.preview-btn .btn-icon{
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Speaker svg visibility (idle) */
.preview-btn .audio-svg{
  width: 14px;
  height: 14px;
  display: block;
  opacity: 1;
  filter: brightness(2.1) contrast(1.45);
}

/* Hover pop */
.preview-btn:hover .audio-svg{
  filter: brightness(2.35) contrast(1.55)
          drop-shadow(0 0 6px rgba(255,255,255,0.25));
}

/* PAUSE icon styling (text character) */
.preview-btn .icon-pause{
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  opacity: 0.95;
  transform: translateY(-0.5px);
  filter: drop-shadow(0 0 8px rgba(138,0,0,0.45));
}

/* Toggle which icon shows */
.preview-btn .icon-pause{ display: none; }
.preview-btn.is-playing .icon-play{ display: none; }
.preview-btn.is-playing .icon-pause{ display: inline-flex; }

/* Stronger glow when playing */
.preview-btn.is-playing .icon-pause{
  filter: drop-shadow(0 0 10px rgba(138,0,0,0.70));
}
.preview-btn .btn-text{ 
min-width: 60px;
}
/* ==========================================================================
   Footer row: listen full + produced
   ========================================================================== */
.release-footer{
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.release-footer-right{
  font-size: 13.5px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.9px;
  white-space: nowrap;
}
.release-footer-right strong{
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}

/* Dropdown escape / stacking */
.release{ overflow: visible; }
.release.dropdown-open{ position: relative; z-index: 60; }

.listen-full{
  position: relative;
  width: fit-content;
  z-index: 61;
}

.listen-full-btn{
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.90);
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 900;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1;
  transition: background 200ms ease, border-color 200ms ease;
}

.listen-full-btn:hover{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
}

.listen-full-menu{
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  min-width: 210px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(0,0,0,0.72);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 36px rgba(0,0,0,0.55);
  backdrop-filter: blur(12px) saturate(90%);
  -webkit-backdrop-filter: blur(12px) saturate(90%);
  display: none;
  z-index: 62;
}

.listen-full.is-open .listen-full-menu{
  display: grid;
  gap: 8px;
}

.listen-full-menu a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;

  color: rgba(255,255,255,0.85);
  font-weight: 800;
  letter-spacing: 0.6px;
  font-size: 13px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;

  transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 120ms ease;
}

.listen-full-menu a:hover{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
  transform: translateY(-1px);
}

.listen-full-menu .lf-icon{
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  opacity: 0.85;
  filter: brightness(1.35) contrast(1.05);
}
.listen-full-menu a:hover .lf-icon{ opacity: 1; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 700px){
  .release-inner{ grid-template-columns: 1fr; }
  .release .cover{ max-width: 260px; margin: 0 auto; }
  .release-details{ text-align: left; width: 100%; }
  .release-title{ text-align: left; }
  .tracklist{ margin: 0; max-width: none; padding-left: 16px; }
  .track-actions{ justify-content: flex-start; }
}

@media (max-width: 520px){
  .tracklist li{
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
  }

  .track-name{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .track-actions{
    justify-content: flex-end;
    gap: 6px;
  }

  /* icon-only on small screens */
  .preview-btn .btn-text{ display: none; }
  .watch-btn-track .watch-text{
    display: none;
  }
.watch-btn-track .yt-icon{
  margin: 0 0px; 
}

}