/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
  .site-nav { padding: 0.6rem 1rem; flex-wrap: wrap; gap: 0.25rem 1rem; }
  .site-nav__links { gap: 1rem; }
  .site-nav__link { font-size: 0.65rem; }

  .catalog { padding: 1.5rem 1rem; }
  .catalog__search { font-size: 1.2rem; }
  .catalog__filters { flex-direction: column; gap: 0.5rem; }
  .catalog__filter-group { flex-direction: row; align-items: center; gap: 0.5rem; }
  .catalog__filters select { min-width: auto; flex: 1; }
  .catalog__toolbar { }
  .catalog__row { flex-direction: column; gap: 0.25rem; }
  .catalog__row-main { flex-direction: column; gap: 0.25rem; }
  .catalog__row-duration { margin-left: 0; }
  .catalog__row-actions { align-self: flex-start; }

  .perf { padding: 1.5rem 1rem; }
  .perf__header { flex-direction: column; gap: 1rem; }
  .perf__thumbnail { width: 100%; }
  .perf__details { grid-template-columns: 6rem 1fr; }

  .persistent-player__volume { display: none; }

  .listeners { padding: 1.5rem 1rem; }
  .listeners__row { flex-wrap: wrap; gap: 0.25rem; }
  .listeners__row-since { margin-left: 0; width: 100%; }

  .profile { padding: 1.5rem 1rem; }
  .profile__row { flex-wrap: wrap; gap: 0.25rem; }
  .profile__row-time { margin-left: 0; }
}