/* ==========================================================================
   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;
  margin-bottom: var(--space-5);
}

/* ── 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;
}