/* ============================================================
   RESPONSIVE
   Mobile-first overrides. Base component CSS targets desktop;
   breakpoints below adapt down to phones.
   ============================================================ */

/* ---- Large desktop refinement ---- */
@media (min-width: 1440px) {
  :root {
    --sidebar-w: 280px;
  }
}

/* ---- Tablet / small laptop ---- */
@media (max-width: 1024px) {
  :root {
    --sidebar-w: 224px;
  }

  .playlist-hero {
    gap: var(--sp-5);
    padding: var(--sp-7) var(--sp-6) var(--sp-5);
  }

  .playlist-art {
    width: 132px;
    height: 132px;
  }

  .page-header,
  .page-container,
  .toolbar,
  .track-list,
  .card-grid {
    padding-left: var(--sp-6);
    padding-right: var(--sp-6);
  }
}

/* ---- Mobile: collapse to single column app ---- */
@media (max-width: 860px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    display: none;
  }

  .mobile-header {
    display: flex;
  }

  .main-content {
    padding-bottom: calc(var(--player-h-mobile) + var(--bottomnav-h) + var(--sp-8));
  }

  .bottom-nav {
    display: flex;
  }

  .mini-player {
    display: flex;
  }

  .player-bar {
    display: none;
  }

  /* Hero adjustments */
  .hero-topbar {
    padding: var(--sp-4) var(--sp-4);
  }

  .hero {
    padding: var(--sp-5);
  }

  .hero h1 {
    font-size: clamp(2rem, 8vw, 2.6rem);
  }

  /* Playlist header stacks tighter, stays compact */
  .playlist-hero {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
  }

  .playlist-art {
    width: 92px;
    height: 92px;
    border-radius: var(--r-md);
  }

  .playlist-meta h1 {
    font-size: 1.2rem;
    -webkit-line-clamp: 2;
  }

  .playlist-meta .channel,
  .playlist-meta .stats {
    font-size: 0.8rem;
  }

  .playlist-actions {
    margin-top: var(--sp-1);
  }

  .fav-toggle span {
    display: none;
  }

  .fav-toggle {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
  }

  /* Toolbar wraps, search takes full width */
  .toolbar {
    padding: var(--sp-3) var(--sp-4);
  }

  .toolbar .input-search {
    max-width: none;
    flex-basis: 100%;
    order: -1;
  }

  /* Track list: hide duration column header noise, tighten grid */
  .track-list {
    padding: 0 var(--sp-2) var(--sp-6);
  }

  .track-list-headrow {
    display: none;
  }

/* Mobile: Track list adjustments */
  .track-row {
    grid-template-columns: 32px 1fr auto;
    padding: var(--sp-3) var(--sp-3);
    height: auto;
    min-height: 56px;
    align-items: flex-start; /* لضبط الأيقونات مع بداية النص في حالة كان سطرين */
  }

  .track-row .duration {
    display: none;
  }

  .track-row .row-actions {
    gap: var(--sp-2); /* إضافة مسافة لتجنب تداخل الأزرار */
  }

  .heart-btn {
    width: 40px;
    height: 40px;
  }

  /* Cards */
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4) var(--sp-6);
  }

  .page-header {
    padding: var(--sp-5) var(--sp-4) var(--sp-3);
  }

  .page-container {
    padding: 0 var(--sp-4);
  }

  /* Full screen player mobile spacing */
  .fs-body {
    gap: var(--sp-5);
    padding: var(--sp-4);
  }

  .fs-artwork {
    width: min(280px, 70vw);
    height: min(280px, 70vw);
  }

  .fs-controls {
    gap: var(--sp-4);
  }

  .fs-secondary-row {
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding-bottom: var(--sp-5);
  }

  .settings-section {
    padding: var(--sp-1) 0 var(--sp-6);
  }
}

/* ---- Small phones ---- */
@media (max-width: 380px) {
  .hero h1 {
    font-size: 1.8rem;
  }

  .hero p.sub {
    font-size: 0.95rem;
  }

  .playlist-art {
    width: 76px;
    height: 76px;
  }

  .fs-artwork {
    width: 78vw;
    height: 78vw;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- Large / desktop monitors: constrain and center further ---- */
@media (min-width: 1800px) {
  .content-max-wide {
    max-width: 1360px;
  }
}