/* ============================================
   PLAYLISTY — Mobile Zoom-Out & Layout Fixes
   ============================================
   
   Loads AFTER layout.css & components.css.
   Desktop styles are untouched — only @media here.
   ============================================ */

@media (max-width: 640px) {
  /* ─────────────────────────────────────────────
     HOME PAGE — zoomed-out desktop feel
     ───────────────────────────────────────────── */
  .page-content:has(.logo-text) {
    zoom: 0.88;
  }

  /* ─────────────────────────────────────────────
     RESULTS PAGE — zoomed-out desktop feel
     ───────────────────────────────────────────── */
  .page-content:has(.results-header) {
    zoom: 0.88;
  }

  /* ─────────────────────────────────────────────
     RESULTS — layout refinements
     ───────────────────────────────────────────── */

  /* Section header: stack label and controls */
  .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-2) !important;
  }

  /* ─────────────────────────────────────────────
     PLANNER — playlist grid single column
     ───────────────────────────────────────────── */
  .card div[style*="repeat(auto-fill, minmax(250px"] {
    grid-template-columns: 1fr !important;
  }

  /* ─────────────────────────────────────────────
     LIBRARY — cards stack vertically
     ───────────────────────────────────────────── */
  .lib-card > div[style*="display:flex"][style*="align-items:center"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: var(--space-3) !important;
  }

  .lib-card div[style*="text-align:right"] {
    text-align: left !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
  }

  /* ─────────────────────────────────────────────
     SETTINGS — full width on mobile
     ───────────────────────────────────────────── */
  .animate-fade-in[style*="max-width:600px"] {
    max-width: 100% !important;
  }
}

/* ── Very small phones — deeper zoom ── */
@media (max-width: 380px) {
  .page-content:has(.logo-text) {
    zoom: 0.78 !important;
  }
  .page-content:has(.results-header) {
    zoom: 0.78 !important;
  }
}