/* CategoryPage/ArticleIndexPage's own layout/positioning -- the grids
that hold subcategories/articles/tools/unions, and the union-group row.
Page identity (typography, section headings/dividers, the accent-color h1
underline) lives in category_page.css instead -- kept separate so "how
this page is laid out" and "what it looks like" each read as one thing
per file. */

/* a "row" of union groups (StudentUnionCategoryPage.union_groups, "row"
block type, see studentunion_category_page.html/union_group.html) --
several titled groups side by side instead of each stacking full-width.
flex-wrap so it still degrades to stacked on a narrow viewport rather than
squeezing every group down to nothing; min-width on each item is what
actually triggers that wrap once there's no room left, same "flex-basis
big, min-width small" combo .newsbar-layout's own grid uses for the same
reason. */
.union-group-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 1.5rem;
}

.union-group-row-item {
  flex: 1 1 18rem;
  min-width: 0;
}

/* each item's own .section-heading (see union_group.html) shouldn't add
yet another top margin on top of the row's own gap above. */
.union-group-row .section-heading {
  margin-top: 0;
}

.category-page .category-grid,
.article-index-page .category-grid,
.category-page .newsbar-layout,
.article-index-page .newsbar-layout,
.category-page .tool-grid,
.article-index-page .tool-grid,
.category-page .union-grid,
.article-index-page .union-grid {
  justify-content: center;
}


.category-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1.25rem;
  margin-top: 1.5rem;
}