/* Bangs Music Distro - Song page ALL PHONES FIT v21
   Purpose: make song.php fit every phone width without touching backend/player logic. */

html,
body{
  width:100% !important;
  max-width:100% !important;
  overflow-x:hidden !important;
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
}

body{
  min-width:0 !important;
}

.sp-page,
.sp-page *,
.sp-page *::before,
.sp-page *::after{
  box-sizing:border-box !important;
}

.sp-page{
  width:100% !important;
  max-width:100vw !important;
  overflow-x:hidden !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.sp-wrap{
  width:100% !important;
  max-width:1180px !important;
  min-width:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:clamp(12px, 3.7vw, 24px) !important;
  padding-right:clamp(12px, 3.7vw, 24px) !important;
  overflow-x:clip !important;
}

.sp-page img,
.sp-page video,
.sp-page iframe,
.sp-page audio{
  max-width:100% !important;
}

.sp-page a,
.sp-page button,
.sp-page span,
.sp-page p,
.sp-page div,
.sp-page h1,
.sp-page h2,
.sp-page h3{
  min-width:0 !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}

.sp-topnav{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  gap:8px !important;
  padding:8px 0 10px !important;
  margin:0 0 12px !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
}
.sp-topnav::-webkit-scrollbar{ display:none !important; }
.sp-topnav .sp-chip,
.sp-chip{
  flex:0 0 auto !important;
  white-space:nowrap !important;
  max-width:none !important;
}

.sp-alert{
  width:100% !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
}

.sp-hero{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
}

.sp-hero__cover,
.sp-hero__body,
.sp-main,
.sp-side,
.sp-panel,
.sp-side-card{
  min-width:0 !important;
  max-width:100% !important;
}

.sp-hero__cover img,
.sp-song-cover img,
.sp-rank img,
.sp-side-card img{
  object-fit:cover !important;
}

.sp-title{
  width:100% !important;
  max-width:100% !important;
  line-height:1.05 !important;
  letter-spacing:-.035em !important;
  overflow-wrap:anywhere !important;
}

.sp-artistline{
  width:100% !important;
  max-width:100% !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  line-height:1.35 !important;
}

.sp-meta,
.sp-actions,
.sp-share-grid,
.sp-card-grid,
.sp-stat-grid{
  max-width:100% !important;
}

.sp-pill{
  min-width:0 !important;
  max-width:100% !important;
  overflow-wrap:anywhere !important;
}

.sp-actions .sp-btn,
.sp-share,
.sp-btn{
  min-height:44px !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent !important;
}

.sp-grid{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
}

.sp-prose,
.sp-lyrics,
.sp-empty,
.sp-credit-val{
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  white-space:normal !important;
}

.sp-rank,
.sp-song-card{
  min-width:0 !important;
  max-width:100% !important;
}

.sp-mini-player{
  max-width:calc(100vw - 18px) !important;
  left:9px !important;
  right:9px !important;
  width:auto !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

/* Tablets and small laptops */
@media (max-width: 900px){
  .sp-wrap{
    max-width:100% !important;
  }

  .sp-grid{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:16px !important;
  }

  .sp-main,
  .sp-side{
    width:100% !important;
    max-width:100% !important;
  }

  .sp-side{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px !important;
  }
}

/* Normal phones */
@media (max-width: 680px){
  .sp-page{
    padding-bottom:92px !important;
  }

  .sp-wrap{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .sp-hero{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:14px !important;
    padding:14px !important;
    border-radius:20px !important;
  }

  .sp-hero__glow{
    display:none !important;
  }

  .sp-hero__cover{
    width:min(72vw, 270px) !important;
    height:min(72vw, 270px) !important;
    max-width:270px !important;
    max-height:270px !important;
    margin:0 auto !important;
    border-radius:20px !important;
  }

  .sp-hero__cover img{
    width:100% !important;
    height:100% !important;
    display:block !important;
  }

  .sp-hero__body{
    width:100% !important;
    text-align:left !important;
  }

  .sp-kicker{
    font-size:12px !important;
    margin-bottom:8px !important;
  }

  .sp-title{
    font-size:clamp(28px, 8.4vw, 40px) !important;
    margin-bottom:8px !important;
  }

  .sp-artistline{
    font-size:14px !important;
    margin-bottom:10px !important;
  }

  .sp-meta{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:7px !important;
    margin:10px 0 12px !important;
  }

  .sp-pill{
    font-size:12px !important;
    padding:7px 9px !important;
    border-radius:999px !important;
  }

  .sp-actions{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:9px !important;
    width:100% !important;
  }

  .sp-actions .sp-btn,
  .sp-actions a.sp-btn,
  .sp-actions button.sp-btn{
    width:100% !important;
    max-width:100% !important;
    justify-content:center !important;
    text-align:center !important;
    padding:11px 10px !important;
    font-size:13px !important;
    border-radius:14px !important;
    white-space:normal !important;
    line-height:1.15 !important;
  }

  .sp-panel,
  .sp-side-card{
    border-radius:18px !important;
    padding:14px !important;
  }

  .sp-tabs{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:7px !important;
    width:100% !important;
  }

  .sp-tab{
    width:100% !important;
    min-height:42px !important;
    padding:10px 7px !important;
    text-align:center !important;
    font-size:13px !important;
    white-space:nowrap !important;
  }

  .sp-head{
    gap:8px !important;
    align-items:flex-start !important;
  }

  .sp-head h2,
  .sp-side-title{
    font-size:18px !important;
    line-height:1.15 !important;
  }

  .sp-head p{
    font-size:13px !important;
    line-height:1.35 !important;
  }

  .sp-prose{
    font-size:14px !important;
    line-height:1.65 !important;
  }

  .sp-share-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:9px !important;
  }

  .sp-share{
    width:100% !important;
    text-align:center !important;
    justify-content:center !important;
    padding:12px 10px !important;
    font-size:13px !important;
  }

  .sp-card-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }

  .sp-song-card{
    padding:10px !important;
    border-radius:16px !important;
  }

  .sp-song-cover{
    border-radius:14px !important;
  }

  .sp-song-title{
    font-size:13px !important;
    line-height:1.25 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  .sp-song-sub,
  .sp-song-meta{
    font-size:12px !important;
    line-height:1.25 !important;
  }

  .sp-side{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:12px !important;
  }

  .sp-stat-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:9px !important;
  }

  .sp-stat{
    min-width:0 !important;
    padding:11px 9px !important;
  }

  .sp-sale-box .sp-btn,
  .sp-side-card .sp-btn{
    width:100% !important;
    justify-content:center !important;
  }

  .sp-rank-list{
    display:grid !important;
    gap:8px !important;
  }

  .sp-rank{
    display:grid !important;
    grid-template-columns:28px 48px minmax(0, 1fr) 38px !important;
    gap:8px !important;
    align-items:center !important;
    padding:8px !important;
    border-radius:14px !important;
  }

  .sp-rank img{
    width:48px !important;
    height:48px !important;
    border-radius:10px !important;
  }

  .sp-rank-title,
  .sp-rank-artist{
    display:block !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    overflow-wrap:normal !important;
  }

  .sp-rank-title{ font-size:13px !important; }
  .sp-rank-artist{ font-size:12px !important; }

  .sp-rank-play,
  .sp-card-play{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }

  .sp-mini-player{
    bottom:max(10px, env(safe-area-inset-bottom)) !important;
    grid-template-columns:44px minmax(0, 1fr) auto !important;
    gap:9px !important;
    padding:9px !important;
    border-radius:16px !important;
  }

  .sp-mini-player img{
    width:44px !important;
    height:44px !important;
    border-radius:11px !important;
  }

  .sp-mini-title,
  .sp-mini-artist{
    display:block !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    overflow-wrap:normal !important;
  }
}

/* Small phones: iPhone SE, 320-360px Android */
@media (max-width: 380px){
  .sp-wrap{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  .sp-hero{
    padding:12px !important;
    border-radius:18px !important;
  }

  .sp-hero__cover{
    width:min(78vw, 238px) !important;
    height:min(78vw, 238px) !important;
  }

  .sp-title{
    font-size:clamp(25px, 8.8vw, 34px) !important;
  }

  .sp-actions{
    grid-template-columns:minmax(0, 1fr) !important;
  }

  .sp-card-grid{
    grid-template-columns:minmax(0, 1fr) !important;
  }

  .sp-share-grid{
    grid-template-columns:minmax(0, 1fr) !important;
  }

  .sp-stat-grid{
    grid-template-columns:minmax(0, 1fr) !important;
  }

  .sp-rank{
    grid-template-columns:24px 44px minmax(0, 1fr) 34px !important;
    gap:7px !important;
  }

  .sp-rank img{
    width:44px !important;
    height:44px !important;
  }

  .sp-rank-play,
  .sp-card-play{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }

  .sp-topnav{
    margin-left:-2px !important;
    margin-right:-2px !important;
  }
}

/* Very narrow embedded browsers */
@media (max-width: 330px){
  .sp-wrap{ padding-left:8px !important; padding-right:8px !important; }
  .sp-hero{ padding:10px !important; }
  .sp-title{ font-size:24px !important; }
  .sp-tabs{ grid-template-columns:minmax(0, 1fr) !important; }
  .sp-pill{ font-size:11px !important; padding:6px 8px !important; }
  .sp-actions .sp-btn{ font-size:12px !important; }
}

/* Landscape phones */
@media (max-width: 920px) and (orientation: landscape){
  .sp-hero{
    display:grid !important;
    grid-template-columns:minmax(150px, 220px) minmax(0, 1fr) !important;
    align-items:center !important;
  }
  .sp-hero__cover{
    width:min(32vw, 220px) !important;
    height:min(32vw, 220px) !important;
  }
}