/* People grid block */

.people-grid {
	--pg-navy: #002b4e;
	--pg-blue: #0a7cc4;
	--pg-text: #1d2430;
	--pg-muted: #5d6877;
	--pg-panel-text: #ffffff;
	--pg-panel-muted: #c9d6e3;
	--pg-line: #1f6fae;
	--pg-placeholder: #dde1e5;
	--pg-ease: cubic-bezier(.22, .61, .36, 1);
	--pg-duration: .38s;
}

/* Lets the caret position transition smoothly */
@property --caret {
	syntax: '<length>';
	inherits: true;
	initial-value: 40px;
}

/* ---------- Cards ---------- */

.people-grid__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px 16px;
	position: relative;
}

.people-grid__card {
	all: unset;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 4px;
	cursor: pointer;
	min-width: 0;
}

.people-grid__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 105 / 121;
	object-fit: cover;
	object-position: center top;
	background: var(--pg-placeholder);
	outline: 3px solid transparent;
	outline-offset: 0;
	transition: outline-color .2s var(--pg-ease), filter .2s var(--pg-ease);
}

.people-grid__card:hover .people-grid__img {
	filter: brightness(.94);
}

.people-grid__card:focus-visible .people-grid__img,
.people-grid__card[aria-expanded="true"] .people-grid__img {
	outline-color: var(--pg-blue);
}

.people-grid__name {
	margin-top: 10px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pg-navy);
	line-height: 1.3;
}

.people-grid__role {
    margin-top: 10px;
	font-size: 16px;
	color: var(--pg-muted);
	line-height: 1.4;
}

/* ---------- "View profile" indicator ---------- */

.people-grid__more {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 16px;
	font-weight: 600;
	color: var(--pg-blue);
	line-height: 1.3;
}

.people-grid__more-open,
.people-grid__more-close {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color .2s var(--pg-ease);
}

.people-grid__card:hover .people-grid__more-open,
.people-grid__card:hover .people-grid__more-close,
.people-grid__card:focus-visible .people-grid__more-open,
.people-grid__card:focus-visible .people-grid__more-close {
	text-decoration-color: currentColor;
}

.people-grid__more-close {
	display: none;
}

.people-grid__card[aria-expanded="true"] .people-grid__more-open {
	display: none;
}

.people-grid__card[aria-expanded="true"] .people-grid__more-close {
	display: inline;
}

.people-grid__chevron {
	flex: none;
	transition: transform var(--pg-duration) var(--pg-ease);
}

.people-grid__card[aria-expanded="true"] .people-grid__chevron {
	transform: rotate(180deg);
}

/* ---------- Bio store ---------- */

/* Closed bios live here, out of sight, in the same grid */
.people-grid__store {
	display: contents;
}

/* Bootstrap's reboot sets [hidden] { display: none !important }, which stops
   Ctrl+F from finding text in closed bios. This brings until-found back. */
.people-grid__bio[hidden="until-found"] {
	display: block !important;
	content-visibility: hidden;
}

/* ---------- Bio panel ---------- */

/* Box styles are on the inner panel, so a hidden="until-found" bio takes no space.
   The top padding leaves room for the caret, so it isn't clipped while the height animates. */
.people-grid__bio {
	grid-column: 1 / -1;
	position: relative;
	padding-top: 10px;
	transition: --caret var(--pg-duration) var(--pg-ease);
}

.people-grid__panel {
	position: relative;
	background: var(--pg-navy);
	color: var(--pg-panel-text);
	padding: 40px 48px 44px;
}

.people-grid__panel::before {
	content: "";
	position: absolute;
	top: -10px;
	left: var(--caret, 40px);
	transform: translateX(-50%);
	border: 10px solid transparent;
	border-top: 0;
	border-bottom-color: var(--pg-navy);
}

.people-grid__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s var(--pg-ease);
}

.people-grid__close:hover {
	background: rgba(255, 255, 255, .1);
}

.people-grid__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.people-grid__bio-name {
	margin: 0;
	padding-right: 48px;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	color: #fff;
}

.people-grid__bio-name:focus {
	outline: none;
}

.people-grid__bio-role {
	margin: 6px 0 0;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--pg-line);
	color: var(--pg-panel-muted);
}

/* ---------- Details ---------- */

.people-grid__details {
	display: grid;
	grid-template-columns: 13rem minmax(0, 1fr);
	gap: 14px 32px;
	margin: 24px 0 0;
}

.people-grid__details dt {
	font-weight: 600;
	color: var(--pg-panel-muted);
}

.people-grid__details dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.people-grid__details dd p {
	margin: 0 0 .6em;
}

.people-grid__details dd p:last-child {
	margin-bottom: 0;
}

.people-grid__details dd ul {
	margin: 0;
	padding-left: 1.1em;
}

.people-grid__details dd li + li {
	margin-top: 4px;
}

.people-grid__details a {
	color: #fff;
	text-decoration: underline;
}

.nowrap {
	white-space: nowrap;
}

/* ---------- Tablet: 2 per row ---------- */

@media (max-width: 991px) {
	.people-grid__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 16px;
	}

	.people-grid__panel {
		padding: 32px;
	}

	.people-grid__details {
		grid-template-columns: 10rem minmax(0, 1fr);
		gap: 12px 20px;
	}
}

/* ---------- Phone: 1 per row ---------- */

@media (max-width: 575px) {
	.people-grid__cards {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.people-grid__img {
		max-width: 320px;
	}

    .people-grid__card {
	    max-width: 320px;
    }

	.people-grid__panel {
		padding: 28px 20px;
	}

	.people-grid__bio-name {
		font-size: 22px;
	}

	.people-grid__details {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.people-grid__details dd {
		margin-bottom: 12px;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.people-grid__bio,
	.people-grid__img,
	.people-grid__close,
	.people-grid__chevron,
	.people-grid__more-open,
	.people-grid__more-close {
		transition: none;
	}
}