/* ==========================================================================
   TEAM GRID — headshot cards + an optional "and the rest of us" panel
   ==========================================================================
   A row of people: a cropped portrait, then the name, the role, and a bio.
   The panel variant fills the leftover
   columns with a single dark statement instead of a person (e.g. a role still
   being hired for, or "and 30 more of us").

   Build: element_group `row team-grid gap-24`, then per person an
   element_group `col-1-3 team-card` holding an `image` element + a `text`:
       <h3>Name Surname</h3>
       <p>Role</p>
       <p>Bio…</p>
   and, to fill the rest of a short row, a `text` `col-2-3 team-note`:
       <p>Roughly 30 more of us.</p>

   Styled BY TAG (same convention as `stats`): the h3 is the name, the FIRST
   paragraph is the role, the rest is bio. So a card carries no inner classes
   and can't drift.
   ========================================================================== */
.team-grid { align-items: start; }

/* The portrait. A fixed aspect keeps every card's text starting on the same
   line no matter how tall the source photo is, and `cover` + a high focal
   point suits headshots (faces sit in the upper middle). The fill shows while
   a photo loads, and stands in for a missing one. */
.team-card {
    figure { margin: 0; }
    img {
        display: block;
        width: 100%;
        aspect-ratio: 583 / 698;
        object-fit: cover;
        object-position: 50% 22%;
        background: var(--surface-soft);
    }

    h3 {
        font-family: var(--type-display);
        font-weight: 500;
        font-size: clamp(1.35rem, 1.9vw, 1.6875rem);   /* ~27px */
        line-height: 1.25;
        color: var(--heading);
        margin: clamp(1rem, 1.6vw, 1.5rem) 0 0.15em;
    }
    p {
        color: var(--text-body);
        font-size: clamp(0.9rem, 1.05vw, 1rem);        /* ~16px */
        line-height: 1.55;
        margin: 0 0 0.9em;
    }
    p:first-of-type {
                            /* the role */
        color: var(--heading);
        margin-bottom: clamp(0.9rem, 1.4vw, 1.25rem);
    }
    p:last-child { margin-bottom: 0; }
}

/* The panel that fills out a short row. Sized to the portrait band so its
   bottom edge lines up with the photos beside it, not with their text. */
.team-note {
    display: grid;
    place-items: center;
    aspect-ratio: 1186 / 698;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    background: var(--heading);
    text-align: center;
}
.team-note p {
    margin: 0;
    max-width: 22em;
    color: var(--white);
    font-family: var(--type-display);
    font-weight: 600;
    font-size: clamp(1.25rem, 1.95vw, 1.75rem);    /* ~28px */
    line-height: 1.35;
}

@media only screen and (max-width: 900px) {
    /* Two columns of cards; the panel spans the pair and gives up its aspect
       so it doesn't become a tall empty box. */
    .team-note { aspect-ratio: auto; min-height: 14rem; }
}