/* ============================================================
   responsive.css — PLAY MY v8.5.0
   Media queries. Deve ser o ÚLTIMO CSS a carregar.
   ============================================================ */

/* ============ TABLET / DESKTOP ============ */

@media(min-width:768px){ .spotify-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media(min-width:992px){ .spotify-grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media(min-width:1200px){ .spotify-grid{grid-template-columns:repeat(6,minmax(0,1fr))} }
@media(min-width:1400px){ .spotify-grid{grid-template-columns:repeat(7,minmax(0,1fr))} }

/* ============ MOBILE ============ */
@media (max-width: 768px) {
  :root { --player-height: 220px; }
  body { padding-bottom: calc(220px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
  .player-miv { height: auto; min-height: var(--player-height); padding: 12px 16px; }
  .player-bar { flex-direction: column; height: auto; padding: 8px 0; gap: 12px; }
  .player-track-info, .player-controls-center, .player-controls-right { width: 100%; justify-content: center; }
  .sidebar { width: 85vw; left: -85vw; }
  .sidebar.open { left: 0; }
  .search-container { order: 3; max-width: 100%; margin: 10px 0 0 0; width: 100%; }
  .expanded-title { font-size: 28px; }
  .expanded-album-art { width: 200px; height: 200px; }
}

/* ============ MOBILE PEQUENO ============ */
@media (max-width: 480px) {
  .expanded-title { font-size: 22px; }
  .expanded-album-art { width: 150px; height: 150px; }
  .info-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 28px 22px; }
}