/**
 * Archive: People
 *
 * Hero, sectioned grid of person cards (3-col), group photo.
 *
 * The person card and bio dialog themselves are global patterns in style.css
 * (.person-card / .person-bio-dialog) — shared with the Leadership Team module.
 * Only archive layout and spacing live here.
 */

/*
 * ====================================================================== *
 * Hero
 * ====================================================================== *
 */

.person-archive-hero {
	padding: var(--module-spacing-large) 0 var(--module-spacing-medium);
}

.person-archive-hero .pill {
	background: var(--husky-blue-50);
	font-size: calc(12rem / 16);
	margin-bottom: var(--text-spacing-xsmall);
	padding: 6px 16px;
}

.person-archive-hero .heading-2 {
	margin: 0;
}

/*
 * ====================================================================== *
 * Sections
 * ====================================================================== *
 */

.person-archive-sections {
	background: var(--appaloosa-beige);
	overflow-x: clip;
	position: relative;
}

.person-archive-sections::before {
	background: var(--pitty-off-white);
	content: '';
	height: 280px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 0;
}

.person-archive-section {
	padding-bottom: var(--module-spacing-medium);
	position: relative;
	z-index: 1;
}

.person-archive-curve {
	color: var(--appaloosa-beige);
	font-size: 0;
	left: 0;
	line-height: 0;
	position: absolute;
	top: 280px;
	transform: translateY(-100%);
	width: 100%;
	z-index: 0;
}

.person-archive-curve svg {
	display: block;
	height: auto;
	width: 100%;
}

.person-archive-animal {
	color: var(--appaloosa-beige);
	pointer-events: none;
	position: absolute;
	right: -40px;
	rotate: 6deg;
	top: -70px;
	width: 350px;
	z-index: 1;
}

.person-archive-animal svg {
	display: block;
	height: auto;
	width: 100%;
}

.person-archive-animal svg path {
	fill: currentColor;
}

.person-archive-section .heading-4 {
	margin: 0 0 var(--text-spacing-large);
}

/* Person grid — 3 columns */

.person-archive-grid {
	display: grid;
	gap: var(--text-spacing-large);
	grid-template-columns: repeat(3, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * ====================================================================== *
 * Group Photo
 * ====================================================================== *
 */

.person-archive-group-photo {
	border-radius: var(--border-radius-large);
	margin-top: var(--text-spacing-xlarge);
}

/*
 * ====================================================================== *
 * MQ <=950px — Tablet
 * ====================================================================== *
 */

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

	.person-archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Stretch the card to the row height so the always-visible arrow-block
	   (see .person-card in style.css) sits flush at the bottom of every card. */

	.person-archive-grid li {
		display: flex;
	}

}

/*
 * ====================================================================== *
 * MQ <=650px — Mobile
 * ====================================================================== *
 */

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

	.person-archive-animal {
		right: -100px;
		width: 263px;
		z-index: 0;
	}

	.person-archive-sections::before {
		height: 192px;
	}

	.person-archive-curve {
		top: 192px;
	}

	.person-archive-section {
		z-index: 2;
	}

	.person-archive-grid {
		grid-template-columns: 1fr;
		max-width: 400px;
	}

}