/*!
 * Senior Leadership tier — About page, directly below the founders.
 * Mirrors the founders card language (portrait, quote-arrow icon,
 * View-Bio hover, lift) at a slightly smaller scale in a 4-up grid.
 * Reuses the theme's existing .about-eyebrow / .section-title.
 * Loaded by inc/init.php.
 */

.about-leadership {
	background: #F7F9FD;
	padding: 72px 0 88px;
	border-top: 1px solid rgba(19, 35, 84, 0.07);
}

.about-leadership .section-header {
	margin-bottom: 42px;
}

.about-leadership .about-eyebrow {
	margin-bottom: 24px;
}

.about-leadership .section-title {
	max-width: 720px;
	width: 100%;
	font-size: 60px;
	letter-spacing: 0.6px;
}

.about-leadership-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 36px;
}

.lead-card {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: transform 0.2s ease;
}

.lead-card:hover {
	transform: translateY(-4px);
}

.lead-card__image {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 20px;
	background: linear-gradient(150deg, #2a3b73 0%, #132354 60%, #0c1535 100%);
}

.lead-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lead-card__quote {
	position: absolute;
	top: 14px;
	right: 14px;
}

.lead-card__quote svg path {
	transition: fill 0.2s ease;
}

.lead-card:hover .lead-card__quote svg path {
	fill: var(--main-color);
}

.lead-card__bio {
	position: absolute;
	bottom: 14px;
	right: 14px;
	font-family: 'Aeonik TRIAL';
	font-weight: 500;
	font-size: 15px;
	line-height: 120%;
	color: rgba(255, 255, 255, 0.92);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.lead-card:hover .lead-card__bio {
	opacity: 1;
}

.lead-card__name {
	font-family: 'Aeonik TRIAL';
	font-weight: 500;
	font-size: 24px;
	line-height: 122%;
	color: var(--primary-color);
	margin-bottom: 6px;
}

.lead-card__role {
	font-family: 'Switzer';
	font-weight: 400;
	font-size: 15px;
	line-height: 140%;
	color: rgba(19, 35, 84, 0.78);
}

@media (max-width: 1100px) {
	.about-leadership-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
	}
	.about-leadership .section-title {
		font-size: 44px;
	}
}

/* Mobile: switch from tall stacked cards to a compact roster so
   the four don't push the all-team section far down the page.
   Small thumbnail on the left, name + role on the right, each a
   tappable row with a hairline divider. Quote icon / View-Bio
   overlay are dropped here (no room, and the whole row links). */
@media (max-width: 600px) {
	.about-leadership {
		padding: 44px 0 48px;
	}
	.about-leadership .section-title {
		font-size: 30px;
	}
	.about-leadership .section-header {
		margin-bottom: 28px;
	}

	.about-leadership-list {
		display: block;
	}

	.lead-card {
		display: grid;
		grid-template-columns: 64px 1fr;
		grid-template-areas:
			"img name"
			"img role";
		column-gap: 16px;
		align-items: center;
		padding: 16px 0;
		border-bottom: 1px solid rgba(19, 35, 84, 0.10);
	}
	.about-leadership-list .lead-card:last-child {
		border-bottom: 0;
	}
	.lead-card:hover {
		transform: none;
	}

	.lead-card__image {
		grid-area: img;
		width: 64px;
		height: 64px;
		aspect-ratio: 1 / 1;
		border-radius: 8px;
		margin-bottom: 0;
	}

	/* No room for the hover affordances at this size. */
	.lead-card__quote,
	.lead-card__bio {
		display: none;
	}

	.lead-card__name {
		grid-area: name;
		align-self: end;
		font-size: 18px;
		margin-bottom: 2px;
	}

	.lead-card__role {
		grid-area: role;
		align-self: start;
		font-size: 13px;
		line-height: 130%;
	}
}