/*
 * Our People page — hero, featured (CEO) card, and the three grouped
 * listing sections (Senior Staff / Our Staff / Our Associates).
 *
 * Values match the Figma property panels where given (card padding/gap/
 * radius/colors, typography), interpolated only where a panel wasn't
 * shown; same design tokens as the rest of the site (Sora, #7FB04F green,
 * #1B250E/#030712 heading, #364153 body, #F1F1F3 border, #F7F7F8 grey).
 */

.people-hero,
.people-featured,
.people-grid-section,
.people-profile {
	--pp-font: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--pp-heading: #1B250E;
	--pp-heading-dark: #030712;
	--pp-body: #364153;
	--pp-border: #F1F1F3;
	--pp-grey: #F7F7F8;
	--pp-orange: #FCECD8;
	--pp-green: #7FB04F;
	--pp-max-width: 1704px;
}

/* =============================================================================
   Hero — same structural pattern as .projects-hero / .about-hero
   ============================================================================= */

.people-hero {
	position: relative;
	max-width: 1880px;
	height: 400px;
	margin: 0 auto;
	border-radius: 20px;
	overflow: hidden;
	background-color: #1B250E;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
}

.people-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
}

.people-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--pp-max-width);
	margin: 0 auto;
	padding: 0 40px;
}

.people-hero__title {
	margin: 0;
	font-family: var(--pp-font);
	font-size: 52px;
	font-weight: 600;
	line-height: 60px;
	color: #FFFFFF;
}

/* =============================================================================
   Dummy avatar — generic silhouette icon shown when a staff member has no
   photo yet (see bn_render_staff_avatar_placeholder() in inc/post-types/staff.php)
   ============================================================================= */

.people-avatar-placeholder__icon {
	width: 42%;
	height: 42%;
}

/* =============================================================================
   LinkedIn badge — small green rounded square, used on every card
   ============================================================================= */

.people-linkedin-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--pp-green);
	flex-shrink: 0;
}

a.people-linkedin-badge {
	transition: background-color 0.15s ease;
}

a.people-linkedin-badge:hover {
	background-color: #6a9a3e;
}

/* =============================================================================
   Featured (CEO) card
   ============================================================================= */

/* Unconditional side padding (not just inside a breakpoint) — this only
   gets a gutter from margin: auto centering once the viewport is wider
   than --pp-max-width; below that it was running edge to edge with no
   gutter at all on any width, including tablets/iPad Pro landscape that
   don't hit the narrower breakpoints below. */
.people-featured {
	max-width: var(--pp-max-width);
	margin: 60px auto 0;
	padding: 0 24px;
}

.people-featured__card {
	display: flex;
	align-items: stretch;
	gap: 40px;
	padding: 30px;
	background: var(--pp-orange);
	border: 1px solid var(--pp-border);
	border-radius: 20px;
}

.people-featured__photo {
	flex: 0 0 280px;
	width: 280px;
	border-radius: 16px;
	overflow: hidden;
	background: #E4D6C4;
}

.people-featured__photo-el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.people-featured__photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #E4D6C4;
	color: #C9B392;
}

.people-featured__body {
	flex: 1 1 auto;
	min-width: 0;
}

.people-featured__heading-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 4px;
}

.people-featured__name {
	margin: 0;
	font-family: var(--pp-font);
	font-size: 28px;
	font-weight: 600;
	line-height: 36px;
	color: var(--pp-heading-dark);
}

.people-featured__title {
	margin: 0 0 16px;
	font-family: var(--pp-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	color: var(--pp-body);
}

.people-featured__bio p {
	margin: 0 0 12px;
	font-family: var(--pp-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--pp-body);
}

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

/* =============================================================================
   Grouped listing sections
   ============================================================================= */

.people-grid-section {
	max-width: 1880px;
	margin: 60px auto 0;
	padding: 0 40px;
}

.people-grid-section--band {
	background: var(--pp-orange);
	border-radius: 20px;
	padding: 100px 40px;
}

.people-grid-section__inner {
	max-width: var(--pp-max-width);
	margin: 0 auto;
}

.people-grid-group__heading {
	margin: 0 0 40px;
	font-family: var(--pp-font);
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	color: var(--pp-heading-dark);
}

.people-grid-group__grid {
	display: grid;
	gap: 24px;
}

.people-grid-group__grid--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.people-grid-group__grid--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.people-grid-section__empty {
	font-family: var(--pp-font);
	font-size: 18px;
	color: var(--pp-body);
	text-align: center;
	padding: 40px 0;
}

/* =============================================================================
   Person card
   ============================================================================= */

.people-card {
	border: 1px solid var(--pp-border);
	border-radius: 20px;
	background: var(--pp-grey);
}

.people-card__link {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 20px;
	height: 100%;
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
}

/* "Our Staff" cards (compact — no bio) are white, not grey, and sit inside
   the cream band; "Senior Staff" and "Our Associates" cards are grey. With
   no bio text, the name/title block is vertically centered against the
   photo instead of sitting at the top with empty space below it. */
.people-card--compact {
	background: #FFFFFF;
}

.people-card--compact .people-card__link {
	align-items: center;
}

.people-card__photo {
	flex: 0 0 100px;
	width: 100px;
	height: 100px;
	border-radius: 16px;
	overflow: hidden;
	background: #E5E7EB;
}

.people-card__photo-el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.people-card__photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #E5E7EB;
	color: #A9AFBC;
}

.people-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.people-card__heading-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.people-card__name {
	margin: 0;
	font-family: var(--pp-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	color: var(--pp-heading-dark);
}

.people-card__role {
	margin: 2px 0 0;
	font-family: var(--pp-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	color: var(--pp-body);
}

.people-card__bio {
	margin: 12px 0 0;
	font-family: var(--pp-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
	color: var(--pp-body);
}

/* "Read More" — Senior Staff cards only (see people-card.php); an explicit
   link to the full profile page rather than the whole card being <a>,
   since the bio's truncated text already sits inside .people-card__link
   (now a plain div for every variant). */
.people-card__readmore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	font-family: var(--pp-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--pp-green);
	text-decoration: none;
}

.people-card__readmore svg {
	flex-shrink: 0;
}

.people-card__readmore:hover,
.people-card__readmore:focus-visible {
	color: #5f8f3a;
	text-decoration: underline;
	outline: none;
}

/* Our Associates / Team excerpt cards keep a fixed height with a clamped
   bio (2 lines) — matches the design's compact truncated look. Senior
   Staff ("full") cards clamp to 8 lines instead of showing the entire bio. */
.people-card--excerpt,
.people-card--full {
	height: 100%;
}

/* Our Associates' 2-line-clamped bio is shorter than the photo, so — same
   as the compact "Our Staff" cards — the whole name/bio block is vertically
   centered against the photo instead of sitting at the top. */
.people-card--excerpt .people-card__link {
	align-items: center;
}

.people-card--excerpt .people-card__bio {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.people-card--full .people-card__bio {
	display: -webkit-box;
	-webkit-line-clamp: 16;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =============================================================================
   Single staff profile page (single-staff.php)
   ============================================================================= */

.people-profile {
	max-width: var(--pp-max-width);
	margin: 60px auto 0;
	padding: 0 40px 100px;
}

.people-profile__card {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	padding: 40px;
	background: var(--pp-grey);
	border: 1px solid var(--pp-border);
	border-radius: 20px;
}

.people-profile__photo {
	flex: 0 0 240px;
	width: 240px;
	height: 240px;
	border-radius: 16px;
	overflow: hidden;
	background: #E5E7EB;
}

.people-profile__photo-el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.people-profile__photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #E5E7EB;
	color: #A9AFBC;
}

.people-profile__body {
	flex: 1 1 auto;
	min-width: 0;
}

.people-profile__heading-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 4px;
}

.people-profile__name {
	margin: 0;
	font-family: var(--pp-font);
	font-size: 32px;
	font-weight: 600;
	line-height: 40px;
	color: var(--pp-heading-dark);
}

.people-profile__title {
	margin: 0 0 12px;
	font-family: var(--pp-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	color: var(--pp-body);
}

.people-profile__meta {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-family: var(--pp-font);
	font-size: 15px;
	color: var(--pp-body);
}

.people-profile__meta a {
	color: var(--pp-green);
	text-decoration: none;
}

.people-profile__meta a:hover {
	text-decoration: underline;
}

.people-profile__bio p,
.people-profile__bio li {
	font-family: var(--pp-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	color: var(--pp-body);
}

.people-profile__bio p {
	margin: 0 0 16px;
}

.people-profile__back {
	margin: 24px 0 0;
	font-family: var(--pp-font);
}

.people-profile__back a {
	color: var(--pp-green);
	text-decoration: none;
	font-weight: 500;
}

.people-profile__back a:hover {
	text-decoration: underline;
}

@media (max-width: 768px) {
	.people-profile__card {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 24px;
	}

	.people-profile__heading-row {
		flex-direction: column;
		gap: 8px;
	}

	.people-profile__meta {
		justify-content: center;
	}

	.people-profile__name {
		font-size: 26px;
		line-height: 34px;
	}
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 1400px) {
	.people-hero {
		height: 320px;
	}

	.people-hero__title {
		font-size: 40px;
		line-height: 48px;
	}

	.people-grid-section--band {
		padding: 60px 24px;
	}
}

@media (max-width: 1024px) {
	.people-hero {
		height: 260px;
		border-radius: 16px;
		margin-left: 24px;
		margin-right: 24px;
	}

	.people-hero__title {
		font-size: 32px;
		line-height: 40px;
	}

	.people-grid-group__grid--cols-2,
	.people-grid-group__grid--cols-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	/* Was in the 1400px breakpoint, which meant iPad Pro (1024/1366px) got
	   this stacked/centered mobile layout instead of the desktop side-by-
	   side one it had plenty of width for. */
	.people-featured__card {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.people-featured__heading-row,
	.people-featured__title {
		justify-content: center;
	}

	.people-card__link {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.people-card__heading-row {
		flex-direction: column;
		gap: 6px;
	}

	.people-grid-group__grid--cols-2,
	.people-grid-group__grid--cols-3 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.people-hero {
		margin-left: 16px;
		margin-right: 16px;
		height: 200px;
		border-radius: 12px;
	}

	.people-hero__inner {
		padding: 0 20px;
	}

	.people-hero__title {
		font-size: 26px;
		line-height: 32px;
	}

	.people-featured,
	.people-grid-section {
		padding: 0 16px;
		margin-top: 32px;
	}

	.people-grid-section--band {
		padding: 40px 24px;
	}

	.people-featured__card {
		padding: 20px;
	}

	.people-featured__photo {
		width: 160px;
		height: 160px;
		flex-basis: 160px;
	}

	.people-featured__name {
		font-size: 24px;
		line-height: 32px;
	}

	.people-grid-group__heading {
		font-size: 26px;
		line-height: 34px;
		margin-bottom: 20px;
	}

	.people-profile__name {
		font-size: 22px;
		line-height: 30px;
	}
}