/* Team Grid — a heading, a responsive photo-card grid sourced from the Team
   Showcase plugin, and an optional CTA button underneath.
   Anything a user should be able to change belongs in a Style tab control
   with a `selectors` entry, not here. */

.team-grid-27986 {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.team-grid-27986 .team-grid-27986__heading {
  margin: 0;
  text-align: center;
  font-weight: bold;
  /*font-size: 57px;*/
  /*
      Minimum: 36px (~2.25rem)
      Maximum: 57px (~3.56rem)
      Scaling: ~2.5vw + 1.5rem (Fluid transition between 400px and 1500px)
  */
  font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3.56rem);
}

/* Flex, not grid: a locked flex-basis keeps every card the exact width of a
   six-column track (so columns line up row to row, like repeat(6, 1fr)), while
   justify-content: center pulls a short final row into the middle — the one
   thing CSS grid cannot do. Step the column count down on narrower viewports. */
.team-grid-27986 .team-grid-27986__cards {
  --tg-gap: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tg-gap);
}

.team-grid-27986 .team-grid-27986__card {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* six equal columns */
  flex: 0 0 calc((100% - 5 * var(--tg-gap)) / 6);
  max-width: calc((100% - 5 * var(--tg-gap)) / 6);
}

@media (max-width: 1200px) {
  .team-grid-27986 .team-grid-27986__card {
    flex-basis: calc((100% - 3 * var(--tg-gap)) / 4);
    max-width: calc((100% - 3 * var(--tg-gap)) / 4);
  }
}

@media (max-width: 900px) {
  .team-grid-27986 .team-grid-27986__card {
    flex-basis: calc((100% - 2 * var(--tg-gap)) / 3);
    max-width: calc((100% - 2 * var(--tg-gap)) / 3);
  }
}

@media (max-width: 600px) {
  .team-grid-27986 .team-grid-27986__card {
    flex-basis: calc((100% - 1 * var(--tg-gap)) / 2);
    max-width: calc((100% - 1 * var(--tg-gap)) / 2);
  }
}

@media (max-width: 340px) {
  .team-grid-27986 .team-grid-27986__card {
    flex-basis: 100%;
    max-width: 100%;
  }
}

.team-grid-27986 .team-grid-27986__photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #d9d9d9;
  margin-bottom: 0.5rem;
}

.team-grid-27986 .team-grid-27986__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-grid-27986 .team-grid-27986__photo-fallback {
  display: block;
  width: 100%;
  height: 100%;
  background: #808080;
}

.team-grid-27986 .team-grid-27986__name {
  font-weight: 700;
  text-align: center;
  font-size: 24px;
}

.team-grid-27986 .team-grid-27986__title {
  font-style: italic;
  text-align: center;
  opacity: 0.75;
}

.team-grid-27986 .team-grid-27986__empty {
  text-align: center;
  opacity: 0.6;
}

/* The button look comes from the sitewide `.tfw-btn` system; this wrapper is
   only a layout hook. */
.team-grid-27986 .team-grid-27986__cta {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.team-grid-27986 .team-grid-27986__editor-note {
  text-align: center;
  opacity: 0.6;
}