.team-with-photo,
.team-no-photo {
  clear: both;
}

/* Grid layout.
   At most 3 per row, with an incomplete final row centred. Flexbox rather than
   CSS grid, because grid cannot centre the orphans in a short last row. Three
   items plus two gaps total exactly 100%, so full rows still span the container
   edge to edge and only a short row visibly centres. One rule covers every
   count, so there is no separate small-count layout.

   Both grids share this base. Per-grid overrides go on the modifier classes
   .uli-team-grid--photo / .uli-team-grid--no-photo. */

.uli-team .uli-team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.uli-team .uli-team-grid__item {
  flex: 0 0 calc((100% - 60px) / 3);
  max-width: calc((100% - 60px) / 3);
}

/* 2 per row below the Bootstrap lg breakpoint, 1 per row below sm. The
   centring behaviour carries over unchanged at each width. */
@media (max-width: 991.98px) {
  .uli-team .uli-team-grid__item {
    flex-basis: calc((100% - 30px) / 2);
    max-width: calc((100% - 30px) / 2);
  }
}

@media (max-width: 575.98px) {
  .uli-team .uli-team-grid__item {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* Grid item treatment.
   Photo cards keep the roomy white default; no-photo cards render as compact
   grey tiles matching the inactive category tabs. Selectors are prefixed with
   .uli-team to outrank the theme's .page-node-type-full-page .person-detail
   padding, which loads after this file. */

.uli-team .team-with-photo .person-card {
  background: #fff;
}

.uli-team .team-no-photo .person-card {
  height: 100%;
  background: #f5f5f5;
}

/* Shared card padding. This replaces the theme's
   .page-node-type-full-page .person-detail { padding: 50px }, which existed
   only to keep card content off the viewport edge back when the grids escaped
   the container (see the template comment). Spacing between items is the flex
   gap and the container gutter now, so this is purely internal card padding and
   is identical in both grids, keeping content aligned across the two sections. */
.uli-team .team-with-photo .person-detail,
.uli-team .team-no-photo .person-detail {
  padding: 20px;
}

.uli-team .team-no-photo .person-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}

/* No image to render, and no person has summary text — collapse both so the
   tile is only as tall as its real content. */
.uli-team .team-no-photo .person-image,
.uli-team .team-no-photo .person-summary {
  display: none;
}

.uli-team .team-no-photo .person-card h2 {
  font-size: 22px;
}

.uli-team .team-no-photo .person-card .person-job-title {
  margin-bottom: 0;
}

/* Only some no-photo people have a bio. Pin the button to the bottom so tiles
   with and without one still line up. */
.uli-team .team-no-photo .person-bio-link {
  margin-top: auto;
  padding-top: 10px;
}