/*
 * isjac/people block styles.
 *
 * Uniform, centered flex-wrap grid of person photos (Web Card design —
 * name/role already baked into the image). Centered flex-wrap keeps a
 * partial last row (e.g. a lone trailing board member) centered at the same
 * card width as a full row, instead of a CSS grid stretching it full-width.
 * Tokens only. No raw hex, no !important.
 */

.entry-content .isjac-people {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	gap:             var(--isjac-space-5);
}

/*
 * The local-content-host performance pass wraps eligible photos in
 * `<picture><source>...<img class="isjac-people__photo"></picture>` to serve
 * AVIF/WEBP siblings. When that happens, `<picture>` — not the inner
 * `<img>` — is the flex item; sizing only `.isjac-people__photo` leaves the
 * `<picture>` wrapper unstyled, so the browser sizes it from the (often
 * not-yet-loaded, lazy) image's content instead of the intended card width,
 * collapsing it to 0 and breaking the row. Size both the wrapper and the
 * bare-`<img>` case identically so the flex item's box is CSS-driven either
 * way.
 */
.entry-content .isjac-people > picture,
.entry-content .isjac-people__photo {
	flex:      0 1 12.5rem;
	/* Flex items default to `min-width: auto`, which floors shrinking at the
	 * image's intrinsic size (derived from its `width`/`height` attributes).
	 * These photos are large source images (e.g. 1280x720) sized down to a
	 * 200-220px card — without this, the row can't shrink enough to fit 5
	 * across and silently wraps at 4. */
	min-width: 0;
	max-width: 13.75rem;
	width:     100%;
	display:   block;
}

.entry-content .isjac-people__photo {
	height:        auto;
	border-radius: var(--isjac-radius-md);
	box-shadow:    var(--isjac-shadow-card);
}