/* ============================================================
   team-card: the team member card (static: no link, no hover).
   Figma: executive 1331:152416 / 1331:152768, departmental
   1331:152482 / 1331:152830, About preview 1407:87856 / 1407:88308.

   The photo and panel sit in a card whose corners clip them, but
   the card itself is not clipped: with a cut-out, the cut-out lays
   exactly over the photo and rises --tc-pop above the card top.
   The cards keep their desktop sizes on mobile (the swipe rows
   that hold them are template sections).
   ============================================================ */

.team-card {
    --tc-radius: 10.57px;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: none;
    max-width: 100%;
    color: var(--color-text-inverse);
}

/* Photo area: white, clipped to the card's top corners */
.team-card__media {
    position: relative;
    height: var(--tc-media);
    overflow: hidden;
    border-radius: var(--tc-radius) var(--tc-radius) 0 0;
    background: var(--color-surface);
}
.team-card__photo,
.team-card__cutout {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* With a cut-out the photo and the cut-out share one box, as the frames
   place them: the photo area plus the pop-out above it, bottom-aligned, so
   the two stay in register. The photo is clipped by the media box; the
   cut-out is not. */
.team-card--cutout .team-card__photo,
.team-card__cutout {
    position: absolute;
    left: 0;
    top: calc(var(--tc-pop) * -1);
    height: calc(var(--tc-media) + var(--tc-pop));
    object-position: center bottom;
}
.team-card__cutout { pointer-events: none; }

/* One transparent PNG per card (the `png` arg): it already holds the photo box and the person rising out of
   it, so it sits in the flow at its own proportions with no box, crop or clip behind it, and the panel follows */
.team-card--png .team-card__media {
    height: auto;
    overflow: visible;
    border-radius: 0;
    background: none;
    margin-bottom: -1px;   /* tuck under the panel: no hairline where the export's edge meets it */
}
.team-card--png .team-card__panel { position: relative; }
.team-card__png {
    display: block;
    width: 100%;
    height: auto;
}

/* Panel: role, name, bio */
.team-card__panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    border-radius: 0 0 var(--tc-radius) var(--tc-radius);
}
.team-card__role,
.team-card__name,
.team-card__bio { margin: 0; }

.team-card__role {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
}
.team-card__name {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
}
.team-card__bio {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
}

/* Executive: 286 wide, photo area 203, 29 of pop-out; panel padding 32,
   gap 12; role Body, name 36 in the frame (no declared style: H3, 28),
   bio Body */
.team-card--executive {
    --tc-media: 203px;
    --tc-pop: 29px;
    width: 286px;
}
.team-card--executive .team-card__panel {
    gap: 12px;
    padding: 32px;
    background: var(--gradient-1);
}
.team-card--executive .team-card__role,
.team-card--executive .team-card__bio {
    font-size: var(--text-body);
    line-height: var(--leading-body);
}
.team-card--executive .team-card__name {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
}

/* Compact (departmental): 232 wide, photo 149, no pop-out. The frame's text
   column is 179 wide, 26.5 in from each side, and sits 8.6 below the panel
   top; role Body (small), name 24 (H4), bio Info */
.team-card--compact {
    --tc-media: 149px;
    width: 232px;
}
.team-card--compact .team-card__panel {
    gap: 8px;
    padding: 22px;
    background: var(--color-card-navy);
}
.team-card--compact .team-card__role {
    font-family: var(--font-heading);   /* Body (small) is Futura, not Futura PT */
    font-size: var(--text-body-small);
    line-height: var(--leading-body-small);
}
.team-card--compact .team-card__name {
    font-size: var(--text-h4);
    line-height: 1;
}
.team-card--compact .team-card__bio {
    font-family: var(--font-info);
    font-weight: var(--weight-bold);
    font-size: var(--text-info);
    line-height: var(--leading-info);
}

/* Preview (About): 209 wide, photo area 149, 28 of pop-out; caption padding
   20, gap 8; role Body (small), name 20 (Mobile/H4); no bio */
.team-card--preview {
    --tc-media: 149px;
    --tc-pop: 28px;
    width: 209px;
}
.team-card--preview .team-card__panel {
    gap: 8px;
    padding: 20px;
    background: var(--gradient-1);
}
.team-card--preview .team-card__role {
    font-family: var(--font-heading);   /* Body (small) is Futura, not Futura PT */
    font-size: var(--text-body-small);
    line-height: var(--leading-body-small);
}
.team-card--preview .team-card__name {
    font-size: var(--text-mobile-h4);
    line-height: var(--leading-mobile-h4);
}