/**
 * People grid, with optional bio modal.
 *
 * The portrait's arch radius is a Style control (defaulting to the brand
 * 160px 160px 22px 22px), so it is set here only as a fallback for instances
 * created before that control existed.
 */

/* brand.css .inst is centred, not left-aligned. */
.nysf-person {
	position: relative;
	text-align: center;
}

/*
 * brand.css .inst .ph is 4:5 portrait, anchored to the top of the frame: a
 * centred crop on a 4:5 headshot cuts the top of the head off.
 */
.nysf-person__portrait {
	border-radius: var(--nysf-arch);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--nysf-twilight);
	margin-bottom: 16px;
}

.nysf-person__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.nysf-person__name {
	font-family: var(--nysf-display);
	font-weight: 600;
	font-size: 19px;
	letter-spacing: -0.3px;
	line-height: 1.2;
	margin: 0 0 2px;
	color: var(--nysf-ink);
}

.nysf-person__role {
	font-size: 14px;
	color: var(--nysf-ink-soft);
	margin: 0;
}

/*
 * The design shows a "View bio" cue under anyone whose bio opens a modal. The
 * trigger itself is an invisible overlay covering the card, so the cue is a
 * separate visible element rather than the button's own label.
 */
.nysf-person__cue {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--nysf-flare);
}

.nysf-person__trigger {
	position: absolute;
	inset: 0;
	width: 100%;
	background: none;
	border: 0;
	cursor: pointer;
	/* Screen-reader accessible label lives in the button text. */
	font-size: 0;
}

.nysf-person__trigger:focus-visible {
	outline: 3px solid var(--nysf-flare);
	outline-offset: 4px;
	border-radius: var(--nysf-r-md);
}

/* ---- Modal ---- */

.nysf-person-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(9, 41, 56, 0.72);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.nysf-person-modal[aria-hidden='false'] {
	opacity: 1;
	visibility: visible;
}

.nysf-person-modal__panel {
	background: var(--nysf-card);
	border-radius: var(--nysf-r-lg);
	box-shadow: var(--nysf-shadow);
	max-width: 720px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	padding: 32px;
}

.nysf-person-modal__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--nysf-line);
	background: var(--nysf-card);
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.nysf-person-modal,
	.nysf-program-card {
		transition: none;
	}
}