/* dncg-group: the group course finder, "also at our other colleges" and the
   group events listing.

   LAYOUT ONLY. The look is the theme's own components, which the markup
   already carries: .card / .feature-card / .event-card (css/components/card.css),
   .row-cards with .course-cards-3grid / -4grid and .events-cards-3grid / -4grid
   (css/components/card-grid.css), .field-group / .field-label (forms.css),
   .btn--primary / .btn--outline (buttons.css), .pagination
   (foundation-overrides.css), .event-card-cat for the label over a title.

   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). */

/* The shortcodes sit in the page builder's content block (.pull-out-content),
   whose list rules are for prose: markers and indents back on for every ul
   and li (typography.css), and an accent square before each li with a 1.7rem
   indent (.pull-out-content ul li::before, specificity 0,1,3). The card
   lists, the college links and the page links are not prose lists:
   .dncg-group plus a class (0,2,x) out-ranks those rules. */
.dncg-group .dncg-group-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.dncg-group .dncg-group-list > li {
  margin: 0;
  padding-left: 0;
}
.dncg-group .pagination li {
  padding-left: 0;
}
.dncg-group .dncg-group-list > li::before,
.dncg-group .pagination li::before {
  content: none;
}

/* ------------------------------ the finder and the full events listing */

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

/* The form sits on the alternate surface, like the theme's filter panel.
   The full events listing ([dncg_group_events view="full"]) has the same
   form, count and range as the finder, so they share these rules. */
.dncg-group-finder__form,
.dncg-group-events__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); the search box takes a whole row. */
.dncg-group-finder__fields,
.dncg-group-events__fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--gap-grid);
}
.dncg-group-finder__search {
  grid-column: 1 / -1;
}

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

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

.dncg-group-finder__range,
.dncg-group-finder__empty,
.dncg-group-events__range,
.dncg-group-events__empty {
  margin-bottom: var(--gap-grid);
  font-size: var(--fs-min);
  color: var(--muted);
}

/* ------------------------------------------- course cards (finder, also at) */

/* The facts stack under the title, as on the event card. */
.dncg-group-card .card-info {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.dncg-group-card__fact {
  display: inline-flex;
  align-items: flex-start;
  gap: .4rem;
}
.dncg-group-card__fact .icon {
  margin-top: .2em;
}

/* --------------------------------------------------------------- also at */

.dncg-group-also-at__title,
.dncg-group-also-at__intro {
  margin-bottom: var(--gap-grid);
}
.dncg-group-also-at__more {
  margin-top: var(--gap-grid);
  font-size: var(--fs-min);
}

/* ---------------------------------------------------------------- events */

/* The form, count, range and empty line are the finder's (above). */

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

/* An event booked on another organiser's site: a line under the time, laid
   out as the theme lays out the time and place (.event-card-time). */
.dncg-group-event__external {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

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

/* "See all events at <college>", under the full listing: a row of links
   that wraps, one per line on a phone. The list reset is .dncg-group-list's. */
.dncg-group-events__colleges {
  margin-top: var(--gap-grid-lg);
  padding-top: var(--gap-grid-lg);
  border-top: 1px solid var(--line);
}
.dncg-group-events__colleges-title {
  margin-bottom: var(--gap-grid);
}
.dncg-group .dncg-group-events__college-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
}