/* dncg-group: the group news listing ([dncg_group_news], the group site's
   news page and its home page strip).

   LAYOUT ONLY, as dncg-group.css. The look is the theme's own components,
   which the markup already carries: the news cards (.card.feature-card in
   .row-cards.news-cards.news-cards-<layout>, card.css and
   pagebuilder/news/news.css, which loads on every page), the label over a
   card title (.event-card-cat), the byline (.card__by, uppercase inside
   .news, as on the theme's News block), .field-group / .field-label,
   .btn--primary / .btn--outline and .pagination.

   No colour of its own: every value is a theme token (base-theme
   css/tokens.css), so each brand's child theme sets it. Nothing is smaller
   than --fs-min (1.1rem).

   Loaded after dncg-group.css (a dependency), so the list reset there
   (.dncg-group .dncg-group-list) already applies. */

.dncg-group-news__title {
  margin-bottom: var(--gap-grid);
}

/* ------------------------------------------------------- the filter form */

/* The form sits on the alternate surface, as the course finder's and the
   events listing's do. */
.dncg-group-news__form {
  margin-bottom: var(--gap-grid-lg);
  padding: var(--pad-card);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

/* As many filter columns as fit, each at least 16rem (or the full width on
   a phone). */
.dncg-group-news__fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--gap-grid);
}

.dncg-group-news__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: var(--gap-grid);
}

/* ------------------------------------------------------------ the results */

/* The count is the fragment target after a search; it takes focus without
   being a control, so it keeps the theme's focus ring. */
.dncg-group-news__count {
  margin-bottom: .35rem;
  scroll-margin-top: var(--gap-grid-lg);
}

.dncg-group-news__range,
.dncg-group-news__empty {
  margin-bottom: var(--gap-grid);
  font-size: var(--fs-min);
  color: var(--muted);
}

/* The college label and the title: the card section's own gap spaces them,
   so the prose margin a content block gives every h3 is not added. */
.dncg-group-news__card h3 {
  margin-bottom: 0;
}

/* Page links: the theme's .pagination, given space above. Inside a content
   block's prose every li carries a bullet and an indent; page links are not
   a prose list. Two classes out-rank the prose rule. */
.dncg-group-news .dncg-group-news__pages {
  margin-top: var(--gap-grid-lg);
}
.dncg-group-news .dncg-group-news__pages li {
  padding-left: 0;
}
.dncg-group-news .dncg-group-news__pages li::before {
  content: none;
}

/* The compact view's "See all news". */
.dncg-group-news__more {
  margin-top: var(--gap-grid);
}

/* ------------------------------------------- news from each college */

/* A row of links that wraps, one a line on a phone. */
.dncg-group-news__colleges {
  margin-top: var(--gap-grid-lg);
  padding-top: var(--gap-grid-lg);
  border-top: 1px solid var(--line);
}
.dncg-group-news__colleges-title {
  margin-bottom: var(--gap-grid);
}
.dncg-group .dncg-group-news__college-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
}
.dncg-group .dncg-group-news__college-list > li {
  padding-left: 0;
}
.dncg-group .dncg-group-news__college-list > li::before {
  content: none;
}