/* ===========================================
   Bangs Music Distro — Mobile UX Polish
   File: /assets/css/mobile-polish.css
   Safe: only improves spacing, touch targets, layout
=========================================== */

/* Design tokens (mobile-first) */
:root{
  --radius: 16px;
  --radius-sm: 12px;

  --pad: 14px;          /* mobile outer padding */
  --gap: 12px;          /* spacing between cards/items */
  --line: rgba(255,255,255,.08);

  --tap: 46px;          /* minimum touch target height */
  --font: 15px;
  --font-sm: 13px;

  --player-h: 76px;     /* reserved space for sticky player */
  --player-gap: 14px;   /* extra breathing room above player */

  --shadow-soft: 0 10px 25px rgba(0,0,0,.28);
}

/* Good baseline for mobile */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body{
  font-size: var(--font);
  line-height: 1.45;
}

/* Make all images behave nicely */
img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Container: consistent padding for all pages */
.container,
.wrap,
.page,
main{
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
}

/* Sticky player must NOT block content */
main{
  padding-bottom: calc(var(--player-h) + var(--player-gap) + env(safe-area-inset-bottom));
}

/* -------------------------------------------
   Buttons: bigger + premium feel
------------------------------------------- */
button,
.btn,
a.btn,
input[type="submit"],
input[type="button"]{
  min-height: var(--tap);
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Make icon-only buttons tap-friendly */
.icon-btn,
.play-btn,
.like-btn,
.more-btn,
.share-btn{
  min-width: var(--tap);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
}

/* -------------------------------------------
   Inputs: bigger and cleaner
------------------------------------------- */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea{
  min-height: var(--tap);
  padding: 12px 12px;
  border-radius: 14px;
  font-size: 16px; /* important: stops iOS zoom on focus */
}

/* -------------------------------------------
   Cards: consistent alignment + spacing
------------------------------------------- */
.card,
.song-card,
.artist-card,
.release-card,
.list-card{
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

/* Many templates have card padding inconsistent. Normalize it */
.card .card-body,
.song-card .body,
.artist-card .body,
.release-card .body,
.card-body{
  padding: 12px 12px;
}

/* Card spacing for vertical lists */
.card,
.song-card,
.artist-card,
.release-card,
.list-card{
  margin-bottom: var(--gap);
}

/* -------------------------------------------
   Grids: clean on small screens
------------------------------------------- */
.grid,
.cards,
.song-grid,
.artist-grid,
.release-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

/* If screen is wide enough, allow 2 columns */
@media (min-width: 520px){
  .grid,
  .cards,
  .song-grid,
  .artist-grid,
  .release-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* -------------------------------------------
   Make titles readable (no tiny text)
------------------------------------------- */
h1{ font-size: 20px; line-height: 1.2; }
h2{ font-size: 18px; line-height: 1.25; }
h3{ font-size: 16px; line-height: 1.25; }

small,
.muted,
.meta,
.subtext{
  font-size: var(--font-sm);
}

/* -------------------------------------------
   Improve tap spacing in rows (like song list)
------------------------------------------- */
.row,
.song-row,
.list-row{
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

/* Make items not feel cramped */
.song-row .left,
.song-row .right,
.list-row .left,
.list-row .right{
  gap: 10px;
}

/* -------------------------------------------
   Fix "buttons too close" on mobile
------------------------------------------- */
.actions,
.song-actions,
.controls,
.btn-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* -------------------------------------------
   Sticky Player: safe area + clean height
------------------------------------------- */
.sticky-player,
#stickyPlayer,
.bmd-sticky-player{
  padding-bottom: env(safe-area-inset-bottom);
}

/* If your sticky player is fixed bottom */
.sticky-player,
#stickyPlayer,
.bmd-sticky-player{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

/* Ensure player never covers content visually */
.sticky-player::before,
#stickyPlayer::before,
.bmd-sticky-player::before{
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0));
}

/* -------------------------------------------
   Optional: remove horizontal overflow bugs
------------------------------------------- */
body{
  overflow-x: hidden;
}