/* Sizing copied from the flight album archive grid (main/flight_albums_archive_list) -- the
   concept is that card with a headshot in it, so the two stay visually matched on purpose. */
.component-people {
    container-type: inline-size;
    container-name: people;

    /* Centered on the concept, unlike the card text under it. */
    :where(.heading) {
        text-align: center;
        margin-block-end: var(--size-medium);
    }

    :where(.people-grid) {
        display: grid;
        /* minmax with a 0 minimum rather than 1fr: a bare 1fr floors at the track's content size, and a
           wide headshot would then push its column past its share and skew the grid. */
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--size-medium) var(--size-small);
        margin-block: 0;
    }

    :where(.person-card) {
        display: grid;
        /* No gap: the three rows sit at two very different distances in the concept, so each
           one carries its own margin instead. */
        gap: 0;
        align-content: start;
    }

    :where(.person-card-image) {
        display: block;
        /* A fixed ratio is what keeps the grid "perfect" -- headshots arrive at whatever shape
           the camera produced, and object-fit crops them to a common tile instead of ragging
           the rows. */
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: var(--border-radius-large);
        background-color: var(--color-brand-light-grey);
        margin-block-end: var(--size-small);

        & img {
            display: block;
            inline-size: 100%;
            block-size: 100%;
            object-fit: cover;
        }
    }

    :where(.person-card-image.is-empty) {
        background-color: var(--color-brand-blue);
    }

    :where(.person-card-name) {
        color: var(--color-primary-black);
        font-weight: var(--font-weight-bold);
        font-size: var(--font-size-h6);
        line-height: 1.2;
        margin-block-end: var(--size-xx-small);
    }

    :where(.person-card-title) {
        color: var(--color-primary-black);
        font-size: 1.6rem;
        line-height: 1.2;
    }
}

@container people (inline-size < 90rem) {
    .component-people :where(.people-grid) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container people (inline-size < 60rem) {
    .component-people :where(.people-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--size-small);
    }
}

/* One column for phones. Two columns below this leaves ~145px cards, which is too small for a
   face plus a name. 48rem clears every common phone width, so tablets keep two or three. */
@container people (inline-size < 48rem) {
    .component-people :where(.people-grid) {
        grid-template-columns: minmax(0, 1fr);
        /* Back to the wider row gap: stacked one-up, 20px ran a person's role into the next
           headshot. */
        gap: var(--size-medium);
    }
}

/* Horizontal padding is otherwise entirely editor-controlled, and with none set the region pads
   by nothing -- so on a phone the grid ran hard against the screen edge. Guarantee the gutter
   from the point the region stops having room to center inside its cap, which is what
   events_and_news does for the same reason.
   112rem = content-width-large, 4rem = minimum-inline-padding. */
@container people (inline-size < calc(112rem + 4rem + 4rem)) {
    :where(.component-people > .component-wrapper > .region) {
        max-width: 100%;
        padding-inline: var(--minimum-inline-padding);
    }
}