/**
 * Leadership team cards.
 *
 * The name, job title and division each have to sit on a single line and line
 * up across all four cards. Card width varies a lot between breakpoints, so the
 * type is sized in container-query units against the card itself rather than
 * with fixed breakpoint steps -- that way a long name such as
 * "Kevin Donaldson" stays on one line at every width instead of wrapping and
 * pushing that card's title and division out of alignment with its neighbours.
 */

.team-section .flex-grow {
    container-type: inline-size;
}

.team-section .flex-grow h3 {
    font-size: clamp(18px, 11cqw, 30px);
    line-height: 1.15;
    margin-bottom: 6px;
}

.team-section .flex-grow .position {
    font-size: clamp(13px, 8cqw, 20px);
    line-height: 1.25;
    margin-bottom: 8px;
}

.team-section .flex-grow .eyebrow {
    font-size: clamp(10px, 5.1cqw, 15px);
    line-height: 1.2;
    /* Tracking scales with the type so it does not eat width when small. */
    letter-spacing: 0.04em;
}

/**
 * Below roughly 200px of card width the longest division name
 * ("Amenity Construction Group") can no longer fit on one line without dropping
 * the type below a readable size, so reserve two lines for every card instead.
 * The cards stay aligned; only the wrapping one uses the second line.
 */
@container (max-width: 200px) {
    .team-section .flex-grow .eyebrow {
        min-height: 2.4em;
    }
}