/*** Module: People ***/

/* No section padding by default; only a coloured band gets breathing room. */
.module.people:is(.bg-parchment, .bg-white) {
	padding-block: var(--module-spacing-large);
}

.module.people.bg-parchment .bg-field {
	background: var(--parchment);
}

.module.people.bg-white .bg-field {
	background: var(--white);
}

/* Group label above the grid (direct child only — not the modal's name heading). */
.module.people .container > .heading-4 {
	margin-bottom: var(--text-spacing-xlarge);
	text-align: left;
}

.module.people .cards {
	column-gap: var(--gap);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: var(--text-spacing-xlarge);
}

/* The leader card is a <button> — strip its chrome. */
.module.people .leader {
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	padding: 0;
	text-align: left;
	width: 100%;
}

.module.people .leader.has-detail {
	cursor: pointer;
}

.module.people .leader .media {
	aspect-ratio: 1;
	background: var(--parchment);
	display: block;
	height: 100%;
	width: 100%;
}

/* On a parchment band the headshot tile flips to white so it doesn't vanish. */
.module.people.bg-parchment .leader .media {
	background: var(--white);
}

.module.people .leader .media img {
	transition: scale 0.4s ease;
}

/* Mirrors the accordion toggle's black square + white plus. */
.module.people .leader.has-detail .media .plus {
	background: var(--black);
	bottom: 8px;
	height: 44px;
	opacity: 0;
	position: absolute;
	right: 8px;
	transition: opacity 0.3s ease;
	width: 44px;
}

.module.people .leader.has-detail:hover .media .plus,
.module.people .leader.has-detail:focus-visible .media .plus {
	opacity: 1;
}

/* Plus drawn from two 2px white bars, like .accordion-toggle .expand. */
.module.people .leader .media .plus::before,
.module.people .leader .media .plus::after {
	background: var(--white);
	content: '';
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.module.people .leader .media .plus::before {
	height: 2px;
	width: 14px;
}

.module.people .leader .media .plus::after {
	height: 14px;
	width: 2px;
}

/* Type comes from .heading-5 on the span; this is layout + tint only. */
.module.people .initials {
	align-items: center;
	color: var(--gray-dark);
	display: flex;
	inset: 0;
	justify-content: center;
	position: absolute;
}

.module.people .leader .media + * {
	margin-top: var(--text-spacing-small);
}

.module.people .leader .heading-6 + .small-text {
	color: var(--gray-dark);
	margin-top: 4px;
}

.module.people .leader .heading-6,
.module.people .leader .small-text {
	transition: transform 0.3s ease;
}

@media (prefers-reduced-motion: no-preference) {

	.module.people .leader.has-detail:hover .media img,
	.module.people .leader.has-detail:focus-visible .media img {
		scale: 1.04;
	}

	.module.people .leader.has-detail:hover .heading-6,
	.module.people .leader.has-detail:focus-visible .heading-6,
	.module.people .leader.has-detail:hover .small-text,
	.module.people .leader.has-detail:focus-visible .small-text {
		transform: translateY(-4px);
	}

}

.module.people .leader:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 4px;
}

/** Bio dialog **/

.people-modal {
	background: var(--white);
	border: 0;
	color: var(--black);
	margin: auto;
	max-height: 680px;
	max-width: 990px;
	padding: 0;
	width: 90vw;
}

/* The grid is the scroll container so the media column can stick within it. */
.people-modal .inner {
	display: grid;
	gap: var(--text-spacing-xlarge);
	grid-template-columns: 300px 1fr;
	max-height: 680px;
	overflow-y: auto;
	padding: var(--text-spacing-large) var(--text-spacing-xxlarge) var(--text-spacing-large) var(--text-spacing-large);
	position: relative;
}

/* Photo over the LinkedIn icon; flex-start keeps the icon at its 44px size.
   Sticks to the top as the bio scrolls; align-self keeps it from stretching. */
.people-modal .media-col {
	align-items: flex-start;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-small);
	position: sticky;
	top: 0;
}

.people-modal .media {
	aspect-ratio: 1;
	background: var(--parchment);
	display: block;
	height: 100%;
	width: 100%;
}

.people-modal .text {
	align-self: center;
}

.people-modal .text > * + * {
	margin-top: var(--text-spacing-xxsmall);
}

.people-modal .text > * + .content-styles {
	margin-top: var(--text-spacing-xsmall);
}

/* Each bio list pairs with the label above it — tight gap into the list, so the
   larger ul → next-label break (the global ul + *) reads as the section change. */
.people-modal .content-styles * + :is(ul, ol) {
	margin-top: var(--text-spacing-xxsmall);
}

.people-modal [data-role] {
	color: var(--gray-dark);
}

/* Circle + 48px come from .btn.icon; only the dialog-corner chrome is bespoke
   (people-modal isn't a .jazzy-dialog, so it can't share that close base). */
.people-modal .close {
	background: var(--gray-light);
	position: absolute;
	right: var(--text-spacing-xxsmall);
	top: var(--text-spacing-xxsmall);
	z-index: 1;
}

.people-modal .close:hover {
	background: var(--gray);
}

.people-modal .close svg {
	display: block;
	height: 14px;
	width: 14px;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1400 - Smaller Desktop Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1400rem / 16)) {

	.module.people:is(.bg-parchment, .bg-white) {
		padding-block: var(--module-spacing-medium);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1200 - Smaller Desktop Sizes / Larger Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1200rem / 16)) {

	.module.people .cards {
		grid-template-columns: repeat(3, 1fr);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	.module.people .cards {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Touch sizes can't hover — surface the plus permanently so the expandable
	   cards read as tappable. */
	.module.people .leader.has-detail .media .plus {
		opacity: 1;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	.module.people .container > .heading-4 {
		margin-bottom: var(--text-spacing-medium);
	}

	.module.people .cards {
		gap: var(--text-spacing-large);
		grid-template-columns: 1fr;
	}

	/* Stack the dialog; cap the photo so it doesn't dominate the panel. */
	.people-modal .inner {
		gap: var(--text-spacing-small);
		grid-template-columns: 1fr;
		padding: var(--text-spacing-small);
	}

	/* Flatten media-col into the dialog's single column: the photo, icon and text
	   become direct grid items, so the LinkedIn icon can order below the bio and the
	   photo pairs with the name across the inner row gap (text-spacing-small). */
	.people-modal .media-col {
		display: contents;
	}

	.people-modal .share-link {
		order: 1;
	}

	.people-modal .close {
		position: fixed;
	}

}