/* Base values extracted from inline styles so media queries can override without !important */
.ha-dir-avatar        { width: 60px; height: 60px; }
.ha-dir-wrap          { padding: 48px 32px; }
.ha-dir-filters       { flex-wrap: nowrap; gap: 10px; }
.ha-dir-filter-search { flex: 1; min-width: 0; }
.ha-dir-filter-genre  { max-width: 130px; }
.ha-dir-filter-sort   { max-width: 110px; }
.ha-dir-filter-count  { margin-left: 6px; }
.ha-dir-grid          { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 760px) {
  .ha-dir-wrap { padding: 28px 20px; }

  /* Filter bar: search full-width row 1; genre + sort + count row 2 */
  .ha-dir-filters       { flex-wrap: wrap; gap: 8px; }
  .ha-dir-filter-search { flex: 0 0 100%; }
  .ha-dir-filter-genre,
  .ha-dir-filter-sort   { flex: 1; max-width: none; }
  .ha-dir-filter-count  { flex-shrink: 0; margin-left: 0; }

  /* Card grid: 1 column */
  .ha-dir-grid { grid-template-columns: 1fr; }

  /* Avatar: 60px → 56px */
  .ha-dir-avatar { width: 56px; height: 56px; }

  /* Footer: indent to align with text column (56px avatar + 14px gap) */
  .ha-dir-card-footer { margin-left: 70px; }

  /* Pagination: scroll horizontally rather than overflow */
  .ha-dir-pagination { overflow-x: auto; }
}