/* assets/css/song.css */
/* Page-only styling for song.html (matches reference layout) */

.songPage{
  background:#000;
  min-height:100vh;
}

.songShell{
  padding: 78px 0 110px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.songShell__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}

/* TOP layout */
.songTop{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: 64px;
  align-items:start;
}

/* Cover */
.songCoverWrap{
  aspect-ratio: 1 / 1;
  background:#050505;
  border: 2px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.70);
  overflow:hidden;
}

.songCover{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.01);
}

/* Details */
.songPills{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-bottom: 16px;
}

.songPill{
  display:inline-block;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.45);
  color:#fff;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.songPill--ghost{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.85);
}

.songTitle{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.02;
  font-size: clamp(34px, 4vw, 54px);
  color: rgba(255,255,255,.92);
  margin-bottom: 12px;
}

.songDesc{
  max-width: 58ch;
  color: rgba(255,255,255,.55);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.55;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.songListenNow{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: rgba(255,255,255,.70);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 26px;
}

.songListenNow:hover{
  color:#fff;
}

.songArrow{
  font-size: 11px;
  opacity: .9;
}

/* Info table */
.songInfoTable{
  border-top: 1px solid rgba(255,255,255,.10);
  margin-top: 10px;
  max-width: 560px;
}

.songInfoRow{
  display:grid;
  grid-template-columns: 180px 1fr;
  align-items:center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.songInfoKey{
  color: rgba(255,255,255,.35);
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 10px;
}

.songInfoVal{
  text-align:right;
  color: rgba(255,255,255,.75);
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 11px;
}

/* BOTTOM section */
.songBottom{
  margin-top: 70px;
}

/* AVAILABLE ON title */
.songAvailableTitleWrap{
  margin-bottom: 24px;
}

.songAvailableTitle{
  display:inline-block;
  padding: 10px 16px;
  border: 2px solid rgba(255,255,255,.45);
  color:#fff;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 14px;
}

/* Platform buttons grid (3x2) */
.songPlatforms{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 860px;
}

/* Button style like reference */
.platformBtn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 16px;
  text-decoration:none;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  transition: background .2s ease, border-color .2s ease;
}

.platformBtn:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
}

.platformBtn__text{
  color: rgba(255,255,255,.70);
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 10px;
}

/* make icons visible on dark */
.platformBtn__icon{
  width: 16px;
  height: 16px;
  display:block;
  filter: invert(1);
  opacity: .85;
}

/* Responsive */
@media (max-width: 980px){
  .songTop{
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .songCoverWrap{
    max-width: 520px;
  }

  .songInfoVal{
    text-align:left;
  }

  .songInfoRow{
    grid-template-columns: 140px 1fr;
  }

  .songPlatforms{
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}