/* Team member card — photo, name, role. Shared between the about-page
   team grid (rendered as an <a>, links to the person's single page)
   and the standalone highlight card
   (template-parts/team-member-card.php, rendered as a plain <div>, no
   click behavior) usable on any page. */

.team-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.team-card--interactive {
  cursor: pointer;
}

.team-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--brand-color-dark);
  overflow: clip;
}

.team-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s var(--theme-ease-signature), transform 0.6s var(--theme-ease-signature);

  @starting-style {
    opacity: 0;
  }
}

.team-card--interactive:hover .team-card__media img {
  transform: scale(1.05);
}

.team-card__body {
  padding: var(--theme-space-xs);
  text-transform: uppercase;
  text-align: center;
}

.team-card__name {
  margin: 0 0 0.25em;
  font-size: 1.25rem;
  font-weight: 700;
  overflow-wrap: break-word;   /* unconditional safety net, zero downside */
}

.team-card__role {
  margin: 0;
  font-weight: 500;
  color: var(--brand-color-sand);
  overflow-wrap: break-word;
}

/* Flexbox instead of the shared 6-col grid — with an odd member count
   the last row would otherwise land left-aligned under a grid;
   flex-wrap + justify-content: center centers any incomplete last row
   while full rows look identical (no leftover space to distribute).
   A lone last-row card just stays at normal size, centered — an
   earlier version stretched it wider to "fill" the row, but since
   .team-card__media's aspect-ratio scales with width, that also
   roughly doubled the photo's height, reading as broken rather than
   intentional. Plain centering at normal size reads fine as-is. */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: var(--theme-space-sm);
  margin-bottom: 4rem;
  padding: 0 1rem;
}

.team-grid .team-card {
  flex: 0 1 calc((100% - 3 * 2rem) / 4);
  /* Without this, a flex item's automatic min-width is its content's
     min-content size — a longer, unbreakable role label (e.g. "Partner
     Development") sets a higher floor than a shorter one on the same
     row, so the row shrinks unevenly and the shorter-label card (and
     its photo with it) ends up visibly smaller than its row partner. */
  min-width: 0;
}

/* Tablet tier — 4 columns reads cramped below desktop widths, so this
   steps straight down to 2 (covers the old separate <=768px tier too,
   same value either side of that width). */
@media (width <= 1024px) {
  .team-grid .team-card {
    flex-basis: calc((100% - 2rem) / 2);
  }
}

@media (width <= 640px) {
  .team-grid .team-card {
    flex-basis: 100%;       /* 1 per row */
  }
}