/* ===== ABOUT PAGE: TEAM GRID =====
   Cards follow the .role-card frame in components.css (border, radius, hover lift) so the team
   reads as part of the same site. Photos are square crops; object-fit covers any source that
   arrives off-square. */

.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

.team-card{
  background:var(--white);
  border:1px solid var(--indigo-a07);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease-out-expo),border-color .3s,box-shadow .4s var(--ease-out-expo);
}
.team-card:hover{
  transform:translateY(-6px);
  border-color:rgba(38,55,244,.2);
  box-shadow:0 20px 50px rgba(38,55,244,.08),0 6px 16px var(--indigo-a04);
}

.team-photo{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  background:var(--warm-grey);
}

/* Stand-in for a missing photo: the person's initials in the same warm grey square. */
.team-initials{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-weight:700;font-size:72px;letter-spacing:4px;
  color:var(--indigo-a30);
}

.team-body{padding:28px 26px 30px;display:flex;flex-direction:column;gap:10px;flex:1}
.team-body h3{font-size:20px;font-weight:700;color:var(--indigo)}
.team-role{
  font-size:13px;font-weight:400;text-transform:uppercase;letter-spacing:2px;
  color:var(--system-blue);
}
.team-bio{font-size:15px;font-weight:400;color:var(--indigo-a70);line-height:1.75}

.team-links{
  margin-top:auto;padding-top:14px;
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
}
.team-linkedin{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:400;color:var(--system-blue);
}
.team-linkedin:hover{color:var(--indigo)}

@media(max-width:1024px){
  .team-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .team-grid{grid-template-columns:1fr}
}