/* -------------------------------------------------- */
/* About: Team                                          */
/* -------------------------------------------------- */

/* Three founders, not a headcount grid — fixed at three columns rather than
   auto-fill's "however many fit at 200px", so the cards stay big and the
   layout reads as "meet the founders" instead of a staff directory. Falls
   back to one column on mobile (23-mobile.css); there isn't a good two-up
   step for exactly three cards in between, so it jumps straight there. */
.team-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2.5rem;
	margin-top: 2.5rem;
}

.team-card {
	text-align: left;
}

.team-card__photo {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	margin-bottom: 1.5rem;
	/* Taller than wide, and generous — these three carry the whole section
	   now, where the old grid's small square-ish crops were sized for a
	   dozen faces at once. */
	aspect-ratio: 3 / 4;
}

.team-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* The bio used to be a dark scrim over the photo, hidden until hover/focus
   — now it's plain flowing content next to the name/role, same as those,
   so it reads on first look rather than needing a hover to discover. */
.team-card__bio {
	margin: 0.25rem 0 0;
	color: var(--color-body);
	font-size: var(--text-sm);
}

.team-card h3 {
	margin-bottom: 0.25em;
}

/* Name/role on the left, LinkedIn (when there is one) pinned to the right
   of that same row rather than sitting below as its own block. The role
   <p>'s own base bottom margin (p { margin: 0 0 1em; }, 01-base.css) is
   plenty of gap on its own before .team-card__bio's small top margin above
   adds on top of it — flex items don't collapse margins the way normal
   block siblings do, so that 1em wasn't shrinking against anything, it was
   just stacking. */
.team-card__heading-row p {
	margin-bottom: 0;
}

.team-card__heading-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

/* letsdoo_icon('linkedin') — the plain Font Awesome glyph, not
   letsdoo_social_icon()'s brand-colour badge: that one is a fixed white PNG
   built for the footer's dark background, which would need a backdrop of
   its own to read on this card's white background. A bare currentColor
   icon needs none — just a colour, no circle behind it. */
.team-card__linkedin {
	flex: none;
	color: var(--color-ink);
	font-size: 1.4rem;
	transition: color var(--transition), transform var(--transition);
}

/* LinkedIn's own brand blue on hover — same colour the footer's badge
   backdrop used before it was simplified away, still the clearest "this is
   LinkedIn" cue without bringing that backdrop back. */
.team-card__linkedin:hover {
	color: #0a66c2;
	transform: translateY(-2px);
}