/* ==========================================================================
   Activity Element — Web Participation wrappers
   ==========================================================================

   The Activity Element composes existing DS primitives (.avatar, .form-select,
   .btn, .empty-state) + new DS feed primitives (.ds-feed-divider,
   .ds-feed-row, .ds-section-heading) inside a .participation-element shell.
   This file holds only the Activity-specific wrapper classes that lay out
   those parts — filter bar, group rhythm, load-more button.

   Mobile-first: filter bar stacks at <640px; flex row at ≥640px with per-
   field max-width 22rem so it never sprawls regardless of viewport width.
   ========================================================================== */

.participation-activity {
  display: block;
}

/* ── Filter bar ────────────────────────────────────────────────────── */

.participation-activity__filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.participation-activity__filter__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  flex: 0 0 auto;
}

.participation-activity__filter__label .material-symbols-rounded {
  font-size: 18px;
  color: var(--text-tertiary);
}

.participation-activity__filter__field {
  /* Mobile-first: each field is a full-width row of its own */
  flex: 1 1 100%;
  min-width: 0;
}

.participation-activity__filter__field .form-select {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 640px) {
  /* Tablet+: label + selects inline. Each select sized to a sensible max —
     wraps to next row if there isn't room. Never balloons past ~352px
     even at 1440px+ widths. */
  .participation-activity__filter__field {
    flex: 1 1 14rem;
    max-width: 22rem;
  }
}

/* ── Day groups + categories ───────────────────────────────────────── */

.participation-activity__list {
  display: flex;
  flex-direction: column;
}

.participation-activity__group + .participation-activity__group {
  margin-top: var(--space-6);
}

.participation-activity__category + .participation-activity__category {
  margin-top: var(--space-5);
}

/* ── Load more button ──────────────────────────────────────────────── */

.participation-activity__load-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-6) auto 0;
}

.participation-activity__load-more .material-symbols-rounded {
  font-size: 16px;
}

/* Center the button on its own row (anchor has natural width — wrap a
   block container so we can center it). The id-wrapper around the button
   in the partial is text-align: center via this rule. */
#activity-feed-load-more-,
[id^="activity-feed-load-more-"] {
  text-align: center;
}