/**
 * Fluid Framework - Team Section
 * @layer components
 *
 * Grid of team member cards with avatar, name, role, and optional bio.
 * Integrates with the existing avatar component.
 *
 * Usage:
 *   <section class="team">
 *     <header class="team__header">
 *       <h2>Our Team</h2>
 *       <p>The people behind the product.</p>
 *     </header>
 *     <div class="team__grid">
 *       <article class="team-member">
 *         <img class="avatar" data-size="xl" src="..." alt="Jane Doe">
 *         <h3 class="team-member__name">Jane Doe</h3>
 *         <p class="team-member__role">CEO & Co-founder</p>
 *         <p class="team-member__bio">Short bio about Jane.</p>
 *         <nav class="team-member__social" aria-label="Jane's social links">
 *           <a href="#" aria-label="Twitter"><svg>...</svg></a>
 *           <a href="#" aria-label="LinkedIn"><svg>...</svg></a>
 *         </nav>
 *       </article>
 *     </div>
 *   </section>
 */

@layer components {

  /* The band's padding and edges, and the header (a section head), are in
     src/fluid.css (layouts). */

  .team__header p:not(.eyebrow, .lede) { color: var(--color-text-muted); }   /* the label voice owns the eyebrow's colour */

  .team__grid {
    display: grid;
    gap: var(--space-l) var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }

  /* A member is open, like a card: avatar or photo, name, role, bio. */
  .team-member {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .team-member .avatar { margin-block-end: var(--space-xs); }

  .team-member__name {
    font-family: var(--font-heading);
    font-size: var(--step-1);
    font-weight: calc(500 + var(--_dark-weight));
    line-height: var(--leading-heading);
    margin: 0;
  }

  .team-member__role {
    font-size: var(--step--1);
    color: var(--color-text-muted);
    margin: 0;
  }

  .team-member__bio {
    color: var(--color-text-muted);
    margin: 0; margin-block-start: var(--space-xs);
  }

  .team-member__social {
    display: flex;
    gap: var(--space-1);
    margin-block-start: var(--space-xs);
    margin-inline-start: -0.75rem;
  }

  .team-member__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    color: var(--color-text-muted);
  }

  .team-member__social a:hover { color: var(--color-text); }

  .team-member__social svg {
    inline-size: 1.125rem;
    block-size: 1.125rem;
  }
}