/* ==========================================================================
   Profile card
   Figma "team member": 408px wide, photo (408 × 227, rounded like the
   card) above name, role, bio and social links on a dark surface. Cards in
   a row share their height; the links sit at the bottom.
   ========================================================================== */

@layer components {
  .profile-card {
    display: flex;
    flex-direction: column;
    block-size: 100%;
    overflow: hidden;
    border-radius: 1rem; /* 16 — same as the photo's corners */
    background-color: var(--color-surface);
  }

  /* Every photo fills the Figma frame (408 × 227), whatever its own ratio,
     with the Figma 16px corners on all four sides. */
  .profile-card__photo {
    inline-size: 100%;
    aspect-ratio: 408 / 227;
    object-fit: cover;
    border-radius: inherit;
  }

  /* Figma text block: 33.8 under the photo, 31 from the left, 353 wide
     (24 from the right); links 17 under it, 34.8 from the bottom. */
  .profile-card__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 2.125rem 1.5rem 2.1875rem 1.9375rem; /* 34 24 35 31 */
  }

  .profile-card__name {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    line-height: calc(29 / 24); /* Figma auto line height */
  }

  /* Role and bio use the body "text" style (18/25); the role is bold. */
  .profile-card__role {
    font-weight: var(--font-weight-bold);
  }

  /* One empty text line between role and bio, as in Figma. */
  .profile-card__bio {
    margin-block-start: 1lh;
  }

  .profile-card__links {
    display: flex;
    gap: 1.5rem; /* 24 */
    margin-block-start: auto;
    padding-block-start: 1.0625rem; /* 17 */
  }

  /* Block so the focus ring wraps the 24px icon. */
  .profile-card__link {
    display: block;
  }
}