/**
 * Leadership Team
 *
 * Layout and spacing only — the person card and bio dialog are global patterns
 * in style.css (.person-card / .person-bio-dialog), shared with the people archive.
 */

.module.leadership:has(.shape-top.shape-outside) .container {
	padding-top: var(--text-spacing-large);
}

.module.leadership:has(.shape-bottom.shape-outside) .container {
	padding-bottom: var(--text-spacing-large);
}

.module.leadership header {
	margin-bottom: var(--module-spacing-small);
	max-width: 720px;
}

.module.leadership header .eyebrow {
	display: block;
	margin-bottom: var(--text-spacing-xsmall);
}

.module.leadership header .heading-2 {
	margin: 0;
}

.module.leadership header .large {
	margin: var(--text-spacing-small) 0 0;
}

/** Grid **/

.module.leadership ul.grid {
	align-items: stretch;
	gap: var(--text-spacing-large);
}

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

.module.leadership.columns-4 ul.grid {
	grid-template-columns: repeat(4, 1fr);
}

/* Stretch each card to the row height so the always-visible arrow-block on
   touch sits flush at the bottom of every card. */

.module.leadership ul.grid li {
	display: flex;
}

.module.leadership .buttons {
	margin-top: var(--text-spacing-xlarge);
}

/*
 * ====================================================================== *
 * MQ <=1200px — Laptop
 * ====================================================================== *
 */

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

	.module.leadership.columns-4 ul.grid {
		grid-template-columns: repeat(3, 1fr);
	}

}

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

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

	.module.leadership header {
		margin-bottom: var(--text-spacing-xlarge);
	}

	.module.leadership.columns-3 ul.grid,
	.module.leadership.columns-4 ul.grid {
		grid-template-columns: repeat(2, 1fr);
	}

}

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

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

	.module.leadership.columns-3 ul.grid,
	.module.leadership.columns-4 ul.grid {
		grid-template-columns: 1fr;
		margin-inline: auto;
	}

	.module.leadership .buttons {
		margin-top: var(--text-spacing-large);
	}

}