/* ==================================================================
   team.css — styles for #team (small crew grid). Owned by the team
   section agent. Consumes tokens and shared classes (.card, .eyebrow,
   .h2, .lead, .mono, .muted) from base.css — no redefines.
   ================================================================== */

.team {
  position: relative;
}

/* ------------------------------------------------------------------
   Grid — flex wrap + justify-center so a 3+2 layout (5 members)
   centers the trailing row automatically at every breakpoint below.
   ------------------------------------------------------------------ */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.team-card {
  flex: 0 1 calc(33.333% - 16px);
  min-width: 0;
}

/* ------------------------------------------------------------------
   Avatar — 84px rounded square, original pixel-art NFT-style SVG
   (crisp-edge <rect> grid, one hand-authored trait set per member —
   see teamAvatarPixels() in team.ejs). Square crops the SVG to a
   14px-radius tile with a hairline border; hover gives a subtle
   scale + green glow instead of a text-initials badge.
   ------------------------------------------------------------------ */
.team-avatar {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin-bottom: 20px;
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.team-avatar svg {
  display: block;
  width: 100%;
  height: 100%;
}

.team-card:hover .team-avatar {
  transform: scale(1.04);
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(52, 245, 162, .16), 0 10px 24px -8px rgba(15, 217, 119, .45);
}

/* ------------------------------------------------------------------
   Text — name / role / bio. No contact links or socials.
   ------------------------------------------------------------------ */
.team-name {
  font: 600 17px var(--font-body);
  color: var(--text);
  margin-bottom: 4px;
}

.team-role {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--green);
  margin-bottom: 14px;
}

.team-bio {
  font-size: 14px;
  line-height: 1.6;
}

/* ------------------------------------------------------------------
   Responsive — 3 cols desktop, 2 cols <=1024, 1 col <=600.
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  .team-card {
    flex-basis: calc(50% - 12px);
  }
}

@media (max-width: 600px) {
  .team-card {
    flex-basis: 100%;
  }
}