/* ═══════════════════════════════════════════════════════════
   SEW Groups — Mobile-first card design
   ═══════════════════════════════════════════════════════════ */

/* ─── Group list grid — full width cards ─────────────────── */
#groups-list,
.groups-list.bp-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  padding: 0 8px !important;
  list-style: none !important;
  margin: 0 !important;
}
#groups-list > li {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  flex: 1 1 100% !important;
}
/* Kill BB grid width constraints */
#groups-list.grid > li {
  width: 100% !important;
  flex-basis: 100% !important;
}

/* Kill BB cover-related width constraints */
#groups-list > li .bs-group-cover,
#groups-list > li .list-wrap,
#groups-list > li .item {
  max-width: none !important;
}

/* ─── Card wrapper ───────────────────────────────────────── */
#groups-list .list-wrap {
  width: 100% !important;
  background: #fff !important;
  border: 1px solid #eee !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
  transition: box-shadow 0.15s !important;
}
#groups-list .list-wrap:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* ─── Cover image ────────────────────────────────────────── */
#groups-list .bs-group-cover {
  height: 120px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #FF6A70 0%, #CC3640 100%) !important;
}
#groups-list .bs-group-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* Hide default placeholder cover */
#groups-list .bs-group-cover.has-default img {
  opacity: 0.15 !important;
}

/* ─── Content area ───────────────────────────────────────── */
#groups-list .item {
  padding: 0.75rem 1rem !important;
}
#groups-list .group-item-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
}

/* ─── Title ──────────────────────────────────────────────── */
#groups-list .groups-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
#groups-list .groups-title a {
  color: var(--sew-dark-600, #1A1A1A) !important;
  text-decoration: none !important;
}
#groups-list .groups-title a:hover {
  color: var(--sew-primary-500, #FF6A70) !important;
}

/* ─── Meta (Private • Active 3 years ago) ────────────────── */
#groups-list .item-meta-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.3rem 0.5rem !important;
  align-items: center !important;
}
#groups-list .item-meta {
  font-size: 0.75rem !important;
  color: #888 !important;
  margin: 0 !important;
}
#groups-list .group-visibility {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  padding: 0.1rem 0.4rem !important;
  border-radius: 4px !important;
  background: #f0f0f0 !important;
  color: #666 !important;
}
#groups-list .group-visibility.public {
  background: rgba(59, 165, 92, 0.1) !important;
  color: #3BA55C !important;
}
#groups-list .group-visibility.private {
  background: rgba(255, 106, 112, 0.1) !important;
  color: #FF6A70 !important;
}
#groups-list .group-type {
  display: none !important;
}

/* ─── Members avatars row ────────────────────────────────── */
#groups-list .group-footer-wrap {
  padding: 0.5rem 1rem 0.75rem !important;
  border-top: 1px solid #f5f5f5 !important;
}
#groups-list .group-members-wrap {
  display: flex !important;
  align-items: center !important;
}
#groups-list .bs-group-members {
  display: flex !important;
  gap: 0 !important;
}
#groups-list .bs-group-member {
  margin-left: -6px !important;
}
#groups-list .bs-group-member:first-child {
  margin-left: 0 !important;
}
#groups-list .bs-group-member img {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 2px solid #fff !important;
  object-fit: cover !important;
}

/* ─── Header controls ────────────────────────────────────── */
.groups .dir-component-heading {
  display: none !important;
}

/* Filter bar — clean up */
.groups .subnav-filters {
  padding: 0.5rem 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: #fff !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
.groups .grid-filters,
.groups .dir-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.4rem 8px !important;
}

/* All Groups pill */
.groups .component-navigation .bp-navs li a {
  font-size: 0.78rem !important;
  padding: 0.3rem 0.7rem !important;
  border-radius: 16px !important;
}

/* Pagination */
.groups .bp-pagination {
  padding: 0.3rem 8px !important;
}
.groups .pag-data {
  font-size: 0.72rem !important;
  color: #999 !important;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (min-width: 768px) {
  #groups-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (min-width: 1024px) {
  #groups-list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}