/**
 * Corelation Leadership — front-end styles.
 *
 * Namespaced under .corelead-wrap and written to survive Salient/WPBakery
 * resets. Colours are CSS variables so they can be overridden in theme CSS.
 */

.corelead-wrap {
	--corelead-blue: #009ade;
	--corelead-blue-dark: #0077b3;
	--corelead-blue-soft: #bfe7fa;
	--corelead-accent: #b45309;
	--corelead-accent-dark: #92400e;
	--corelead-ink: #111827;
	--corelead-body: #4b5563;
	--corelead-radius: 16px;
	--corelead-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
	--corelead-shadow-lg: 0 25px 50px -12px rgba(15, 23, 42, 0.28);
	--corelead-max: 1280px;

	position: relative;
	box-sizing: border-box;
	background: linear-gradient(to bottom, #ffffff 0%, rgba(239, 246, 255, 0.55) 45%, #ffffff 100%);
}

.corelead-wrap *,
.corelead-wrap *::before,
.corelead-wrap *::after {
	box-sizing: border-box;
}

.corelead-container {
	width: 100%;
	max-width: var(--corelead-max);
	margin: 0 auto;
	padding: 0 24px;
}

.corelead-container--narrow {
	max-width: 900px;
	text-align: center;
}

/* ---------------------------------------------------------------- Hero */

.corelead-hero {
	position: relative;
	overflow: hidden;
	padding: 80px 0 40px;
}

.corelead-hero__blobs {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.corelead-blob {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(64px);
	opacity: 0.5;
	animation: corelead-pulse 8s ease-in-out infinite;
}

.corelead-blob--a {
	top: 40px;
	left: 3%;
	width: 288px;
	height: 288px;
	background: rgba(0, 154, 222, 0.22);
}

.corelead-blob--b {
	bottom: 0;
	right: 3%;
	width: 384px;
	height: 384px;
	background: rgba(253, 230, 138, 0.28);
	animation-delay: 2s;
}

@keyframes corelead-pulse {
	0%, 100% { opacity: 0.35; transform: scale(1); }
	50%      { opacity: 0.6;  transform: scale(1.08); }
}

.corelead-hero__inner {
	position: relative;
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
}

.corelead-wrap .corelead-hero__title {
	margin: 0 0 20px;
	font-size: clamp(34px, 5vw, 60px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--corelead-ink);
}

.corelead-wrap .corelead-accent {
	color: var(--corelead-blue);
}

.corelead-wrap .corelead-hero__sub {
	margin: 0;
	font-size: clamp(16px, 2vw, 20px);
	line-height: 1.6;
	color: var(--corelead-body);
}

/* ------------------------------------------------------------ Sections */

.corelead-section {
	padding: 40px 0 24px;
}

.corelead-section:last-of-type {
	padding-bottom: 72px;
}

/*
 * Bare grid (no hero, no CTA) — the default. Sit flush inside whatever
 * WPBakery row or template the shortcode is dropped into, and let the
 * surrounding layout own the vertical rhythm.
 */
.corelead-wrap--no-hero {
	background: none;
}

.corelead-wrap--no-hero .corelead-section:first-of-type {
	padding-top: 0;
}

.corelead-wrap--no-cta .corelead-section:last-of-type {
	padding-bottom: 0;
}

.corelead-wrap--no-hero .corelead-container {
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 782px) {
	.corelead-wrap--no-hero .corelead-container {
		padding-left: 16px;
		padding-right: 16px;
	}
}

.corelead-wrap .corelead-section__title {
	margin: 0 0 32px;
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--corelead-ink);
	text-align: center;
}

.corelead-wrap .corelead-section__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: 14px auto 0;
	border-radius: 4px;
	background: var(--corelead-blue);
}

.corelead-empty {
	padding: 48px 0;
	text-align: center;
	color: var(--corelead-body);
}

/* ---------------------------------------------------------------- Grid */

.corelead-grid {
	display: grid;
	gap: 32px;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 700px) {
	.corelead-grid--2,
	.corelead-grid--3,
	.corelead-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.corelead-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.corelead-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- Cards */

.corelead-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #ffffff;
	border-radius: var(--corelead-radius);
	box-shadow: var(--corelead-shadow);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	animation: corelead-fade-up 0.6s both;
	animation-delay: var(--corelead-delay, 0s);
}

.corelead-card--clickable {
	cursor: pointer;
}

.corelead-card:hover,
.corelead-card:focus-visible {
	box-shadow: var(--corelead-shadow-lg);
	transform: translateY(-4px);
}

.corelead-card:focus-visible {
	outline: 3px solid var(--corelead-blue);
	outline-offset: 3px;
}

@keyframes corelead-fade-up {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.corelead-card,
	.corelead-blob {
		animation: none;
	}
	.corelead-card,
	.corelead-card__img {
		transition: none;
	}
}

.corelead-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: #e5edf5;
}

/* Fallback for browsers without aspect-ratio. */
@supports not (aspect-ratio: 4 / 5) {
	.corelead-card__media {
		height: 320px;
	}
}

.corelead-wrap .corelead-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	margin: 0;
	border: 0;
	border-radius: 0;
	transition: transform 0.4s ease;
}

.corelead-card:hover .corelead-card__img {
	transform: scale(1.05);
}

.corelead-card__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--corelead-blue) 0%, var(--corelead-blue-dark) 100%);
	color: #ffffff;
	font-size: 56px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.corelead-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.25) 42%, rgba(0, 0, 0, 0) 68%);
	pointer-events: none;
}

.corelead-card__id {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 20px 22px;
	color: #ffffff;
	pointer-events: none;
}

.corelead-wrap .corelead-card__name {
	margin: 0 0 4px;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.corelead-wrap .corelead-card__role {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
	font-weight: 500;
	color: var(--corelead-blue-soft);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.corelead-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 22px;
}

.corelead-wrap .corelead-card__excerpt {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--corelead-body);
}

.corelead-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
}

.corelead-wrap button.corelead-card__more {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	border-radius: 0;
	min-height: 0;
	line-height: 1.4;
}

.corelead-wrap button.corelead-card__more:hover,
.corelead-wrap button.corelead-card__more:focus {
	background: none;
	color: var(--corelead-blue-dark);
}

.corelead-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--corelead-blue);
}

.corelead-card__more svg {
	transition: transform 0.25s ease;
}

.corelead-card:hover .corelead-card__more svg {
	transform: translateX(3px);
}

.corelead-card__links {
	display: inline-flex;
	gap: 10px;
}

.corelead-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: #ffffff;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.corelead-icon:hover,
.corelead-icon:focus {
	color: #ffffff;
	transform: translateY(-2px);
}

.corelead-icon--li { background: var(--corelead-blue); }
.corelead-icon--li:hover { background: var(--corelead-blue-dark); }
.corelead-icon--mail { background: var(--corelead-accent); }
.corelead-icon--mail:hover { background: var(--corelead-accent-dark); }

/* ----------------------------------------------------------------- CTA */

.corelead-cta {
	padding: 84px 0;
	background: linear-gradient(135deg, var(--corelead-blue) 0%, var(--corelead-blue-dark) 100%);
}

.corelead-wrap .corelead-cta__title {
	margin: 0 0 20px;
	font-size: clamp(28px, 4vw, 46px);
	line-height: 1.15;
	font-weight: 700;
	color: #ffffff;
}

.corelead-wrap .corelead-cta__text {
	margin: 0 0 30px;
	font-size: clamp(16px, 2vw, 20px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.9);
}

.corelead-wrap .corelead-cta__btn {
	display: inline-block;
	padding: 15px 38px;
	border-radius: 999px;
	background: #ffffff;
	color: var(--corelead-blue);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.corelead-wrap .corelead-cta__btn:hover,
.corelead-wrap .corelead-cta__btn:focus {
	background: #eff6ff;
	color: var(--corelead-blue-dark);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

/* --------------------------------------------------------------- Modal */

.corelead-modal {
	--corelead-blue: #009ade;
	--corelead-blue-dark: #0077b3;
	--corelead-accent: #b45309;
	--corelead-accent-dark: #92400e;
	--corelead-ink: #111827;
	--corelead-body: #4b5563;
	--corelead-radius: 16px;
	--corelead-shadow-lg: 0 25px 50px -12px rgba(15, 23, 42, 0.28);

	box-sizing: border-box;
}

.corelead-modal *,
.corelead-modal *::before,
.corelead-modal *::after {
	box-sizing: border-box;
}

.corelead-modal[hidden] {
	display: none;
}

.corelead-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.corelead-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.72);
	animation: corelead-fade 0.2s both;
}

@keyframes corelead-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.corelead-modal__panel {
	position: relative;
	width: 100%;
	max-width: 940px;
	max-height: calc(100vh - 48px);
	overflow: hidden;
	background: #ffffff;
	border-radius: var(--corelead-radius);
	box-shadow: var(--corelead-shadow-lg);
	animation: corelead-zoom 0.25s both;
}

@keyframes corelead-zoom {
	from { opacity: 0; transform: scale(0.96) translateY(12px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

.corelead-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--corelead-ink);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.corelead-modal__close:hover {
	background: #ffffff;
}

.corelead-modal__grid {
	display: grid;
	grid-template-columns: 1fr;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

@media (min-width: 820px) {
	.corelead-modal__grid {
		grid-template-columns: 320px 1fr;
	}
}

.corelead-modal__media {
	position: relative;
	background: #e5edf5;
}

.corelead-modal__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 340px;
	margin: 0;
	object-fit: cover;
	object-position: center top;
	border-radius: 0;
}

@media (min-width: 820px) {
	.corelead-modal__media img {
		max-height: none;
		min-height: 100%;
	}
}

.corelead-modal__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 260px;
	height: 100%;
	background: linear-gradient(135deg, var(--corelead-blue) 0%, var(--corelead-blue-dark) 100%);
	color: #ffffff;
	font-size: 64px;
	font-weight: 700;
}

.corelead-modal__content {
	padding: 34px 34px 38px;
}

.corelead-modal__name {
	margin: 0 0 6px;
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.2;
	font-weight: 700;
	color: var(--corelead-ink);
}

.corelead-modal__role {
	margin: 0 0 20px;
	font-size: 16px;
	font-weight: 600;
	color: var(--corelead-blue);
}

.corelead-modal__bio {
	color: var(--corelead-body);
	font-size: 16px;
	line-height: 1.75;
}

.corelead-modal__bio p {
	margin: 0 0 16px;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.corelead-modal__bio p:last-child {
	margin-bottom: 0;
}

.corelead-modal__links {
	display: flex;
	gap: 10px;
	margin-top: 26px;
}

/* Prevent background scroll while a modal is open. */
body.corelead-modal-open {
	overflow: hidden;
}

/* Leadership modal - photo crop fix (added 2026-08-20)
   The corelation-leadership plugin sets min-height:100% on the modal photo at
   >=820px, so it stretched to whatever height the bio text produced. A long bio
   made a 320x768 box for a ~500x514 source and object-fit:cover then cropped
   ~57% of the width into the face. Here the grid height is capped in proportion
   to the photo column and the bio scrolls instead. Doubled selectors only to
   outrank the plugin without !important. Nothing below 820px is affected.
   Belongs in the plugin CSS long-term - it lives here because the plugin
   directory is not writable from wp-admin. */

@media (min-width: 820px) {
	.corelead-modal .corelead-modal__panel {
		max-width: 1040px;
	}

	.corelead-modal .corelead-modal__grid {
		/* Photo column width. The 1.42 multiplier becomes the height cap, holding
		   the photo at a ~0.70 portrait ratio at every viewport width. Raise it for
		   a taller/tighter crop, lower it for a looser one. */
		--corelead-media-w: clamp(340px, 34vw, 470px);
		grid-template-columns: var(--corelead-media-w) 1fr;
		max-height: min(calc(100vh - 48px), calc(var(--corelead-media-w) * 1.064));
		overflow: hidden;
	}

	.corelead-modal .corelead-modal__media {
		overflow: hidden;
	}

	.corelead-modal .corelead-modal__media img {
		width: 100%;
		height: 100%;
		min-height: 0;
		max-height: none;
		object-fit: cover;
		object-position: center 20%;
	}

	.corelead-modal .corelead-modal__content {
		max-height: min(calc(100vh - 48px), calc(var(--corelead-media-w) * 1.064));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-right: 26px;
		scrollbar-width: thin;
		scrollbar-color: #c7d6e4 transparent;
	}

	.corelead-modal .corelead-modal__content::-webkit-scrollbar { width: 8px; }
	.corelead-modal .corelead-modal__content::-webkit-scrollbar-track { background: transparent; }
	.corelead-modal .corelead-modal__content::-webkit-scrollbar-thumb { background: #c7d6e4; border-radius: 4px; }
}