/**
 * Academic Advisory Board page (Figma node 390:93).
 * Global content width (--aibm-container) and site font (Spoof).
 *  - Banner 570: gradients rgba(16,13,70,.91) → .451 @62% → rgba(9,20,36,.1)
 *    over rgba(9,20,36,.76); eyebrow 13 / 1.8px with 28px line;
 *    title 48/56 (-0.6px); lead 17/27 #E8EAF7 (650 wide)
 *  - Tab bar: white, padding 32, gap 16, no bottom line; tabs 72 high,
 *    radius 8; active navy, others white + #E2E8F0 border, 15 #475569
 *  - Members: padding 80 / 104, gap 48; head eyebrow 13 / 1px, title 34/42,
 *    count 13 / .8px #64748B; cards #F8FAFC, radius 16, padding 40 35,
 *    gap 35; photo 260 × 285 radius 12 + bottom shade; name 22/28 navy,
 *    role 15/22, divider #CBD5E1, bio 15/24 #475569
 *
 * @package AIBM
 * @author  Sameer Ali N
 */

.aibm-board-page {
	--aibm-board-navy: #1B1464;
	--aibm-board-ink: #0F172A;
	--aibm-board-muted: #475569;
	--aibm-board-line: #E2E8F0;

	display: block;
	background: #fff;
	color: var(--aibm-board-ink);
	font-family: var(--aibm-font-body);
}

.aibm-board-page *,
.aibm-board-page *::before,
.aibm-board-page *::after {
	box-sizing: border-box;
}

.aibm-board-page .aibm-board__inner {
	width: 100%;
	max-width: calc(var(--aibm-container, 1340px) + var(--aibm-gutter, 40px) * 2);
	margin: 0 auto;
	padding: 0 var(--aibm-gutter, 40px);
}

.aibm-board-page .aibm-board__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--aibm-board-navy);
	font-family: var(--aibm-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.aibm-board-page .aibm-board__eyebrow span {
	flex: 0 0 24px;
	width: 24px;
	height: 2px;
	background: var(--aibm-board-navy);
}

/* ---------------------------------------------------------------
   Banner
--------------------------------------------------------------- */
.aibm-board-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 570px;
	padding: 96px 0;
	overflow: hidden;
	background: #100D46;
	color: #fff;
	isolation: isolate;
}

.aibm-board-hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.aibm-board-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(16, 13, 70, .91) 0%, rgba(16, 13, 70, .451) 62%, rgba(9, 20, 36, .102) 100%),
		rgba(9, 20, 36, .5);
}

.aibm-board-hero .aibm-board-hero__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
	opacity: 0;
	transition: opacity .5s ease;
}

.aibm-board-hero .aibm-board-hero__img.is-active {
	opacity: 1;
}

.aibm-board-hero__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 760px;
}

.aibm-board-page .aibm-board-hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: #fff;
	font-family: var(--aibm-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

.aibm-board-page .aibm-board-hero__eyebrow span {
	flex: 0 0 28px;
	width: 28px;
	height: 2px;
	background: #fff;
}

.aibm-board-page .aibm-board-hero__title {
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: var(--aibm-font-body);
	font-size: 48px;
	font-weight: 700;
	line-height: 56px;
	letter-spacing: -.6px;
	text-transform: none;
}

.aibm-board-page .aibm-board-hero__title.is-swap {
	animation: aibm-board-title-in .35s ease;
}

@keyframes aibm-board-title-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aibm-board-page .aibm-board-hero__title.is-swap {
		animation: none;
	}
}

.aibm-board-page .aibm-board-hero__lead {
	max-width: 650px;
	margin: 0;
	color: #E8EAF7;
	font-family: var(--aibm-font-body);
	font-size: 17px;
	line-height: 27px;
}

/* ---------------------------------------------------------------
   Tabs
--------------------------------------------------------------- */
.aibm-board-tabs__bar {
	padding: 32px 0 0;
	background: #fff;
}

.aibm-board-tabs__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.aibm-board-page .aibm-board-tabs__tab {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 72px;
	margin: 0;
	padding: 12px 24px;
	border: 1px solid var(--aibm-board-line);
	border-radius: 8px;
	background: #fff;
	box-shadow: none;
	color: var(--aibm-board-muted);
	font-family: var(--aibm-font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 21px;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.aibm-board-page .aibm-board-tabs__tab:hover {
	border-color: #CBD5E1;
	background: #F8FAFC;
	color: var(--aibm-board-navy);
}

.aibm-board-page .aibm-board-tabs__tab.is-active,
.aibm-board-page .aibm-board-tabs__tab.is-active:hover {
	border-color: var(--aibm-board-navy);
	background: var(--aibm-board-navy);
	box-shadow: 0 14px 28px -18px rgba(27, 20, 100, .7);
	color: #fff;
	font-weight: 700;
}

.aibm-board-page .aibm-board-tabs__tab:focus {
	outline: none;
}

.aibm-board-page .aibm-board-tabs__tab:focus-visible {
	outline: 3px solid rgba(56, 189, 248, .6);
	outline-offset: 2px;
}

.aibm-board-panel {
	padding: 56px 0 104px;
}

.aibm-board-panel:focus {
	outline: none;
}

.aibm-board-panel[hidden] {
	display: none;
}

/* Section head (all tabs) */
.aibm-board-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 48px;
}

.aibm-board-section__titles {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	max-width: 700px;
}

.aibm-board-page .aibm-board-section__title {
	margin: 0;
	padding: 0;
	color: var(--aibm-board-ink);
	font-family: var(--aibm-font-body);
	font-size: 34px;
	font-weight: 700;
	line-height: 42px;
	text-transform: none;
}

.aibm-board-page .aibm-board-section__count {
	flex: 0 0 auto;
	margin: 0;
	color: #64748B;
	font-family: var(--aibm-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .8px;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------
   Members
--------------------------------------------------------------- */
.aibm-board-members {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.aibm-board-member {
	display: flex;
	align-items: center;
	gap: 35px;
	padding: 40px 35px;
	border: 1px solid var(--aibm-board-line);
	border-radius: 16px;
	background: #F8FAFC;
}

.aibm-board-member__photo {
	position: relative;
	flex: 0 0 260px;
	width: 260px;
	height: 285px;
	overflow: hidden;
	border-radius: 12px;
	background: #E2E8F0;
}

.aibm-board-member__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(9, 20, 36, 0) 42%, rgba(9, 20, 36, .55) 100%);
	pointer-events: none;
}

.aibm-board-page .aibm-board-member__photo img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	object-fit: cover;
	object-position: center 20%;
}

.aibm-board-member__details {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.aibm-board-member__identity {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 24px;
	border-bottom: 1px solid #CBD5E1;
}

.aibm-board-page .aibm-board-member__name {
	margin: 0;
	padding: 0;
	color: var(--aibm-board-navy);
	font-family: var(--aibm-font-body);
	font-size: 22px;
	font-weight: 700;
	line-height: 28px;
	text-transform: none;
}

.aibm-board-page .aibm-board-member__role {
	margin: 0;
	color: var(--aibm-board-ink);
	font-family: var(--aibm-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 22px;
}

.aibm-board-member__bio {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.aibm-board-page .aibm-board-member__bio p,
.aibm-board-page .aibm-board-member__bio li {
	margin: 0;
	color: var(--aibm-board-muted);
	font-family: var(--aibm-font-body);
	font-size: 15px;
	line-height: 24px;
}

.aibm-board-page .aibm-board-member__bio ul {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aibm-board-page .aibm-board-member__bio li {
	position: relative;
	padding-left: 18px;
}

.aibm-board-page .aibm-board-member__bio li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 2px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--aibm-board-navy);
}

/* ---------------------------------------------------------------
   Functions and responsibilities (Figma 397:152)
   intro/outro 15/24 #475569, gap 48; cards #F8FAFC radius 16,
   padding 32, gap 16; title 22/28 navy; divider #CBD5E1; text 15/24
--------------------------------------------------------------- */
.aibm-board-section__head--stack {
	margin-bottom: 48px;
}

.aibm-board-page .aibm-board-duties__text {
	margin: 0;
	color: var(--aibm-board-muted);
	font-family: var(--aibm-font-body);
	font-size: 15px;
	line-height: 24px;
}

.aibm-board-page .aibm-board-duties__intro {
	margin-bottom: 48px;
}

.aibm-board-page .aibm-board-duties__outro {
	margin-top: 48px;
}

.aibm-board-duties {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.aibm-board-duty {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px;
	border: 1px solid var(--aibm-board-line);
	border-radius: 16px;
	background: #F8FAFC;
	transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease;
}

.aibm-board-page .aibm-board-duty__title {
	margin: 0;
	padding: 0 0 16px;
	border-bottom: 1px solid #CBD5E1;
	color: var(--aibm-board-navy);
	font-family: var(--aibm-font-body);
	font-size: 22px;
	font-weight: 700;
	line-height: 28px;
	text-transform: none;
}

.aibm-board-page .aibm-board-duty__text {
	margin: 0;
	color: var(--aibm-board-muted);
	font-family: var(--aibm-font-body);
	font-size: 15px;
	line-height: 24px;
}

@media (hover: hover) and (pointer: fine) {
	.aibm-board-duty:hover {
		border-color: #BAE6FD;
		background: #fff;
		box-shadow: 0 22px 44px -30px rgba(15, 19, 150, .35);
	}
}

/* ---------------------------------------------------------------
   Responsive
--------------------------------------------------------------- */
@media (max-width: 1099px) {
	.aibm-board-hero {
		min-height: 460px;
	}

	.aibm-board-page .aibm-board-hero__title {
		font-size: 40px;
		line-height: 1.2;
	}

	.aibm-board-member {
		gap: 28px;
		padding: 32px 28px;
	}

	.aibm-board-member__photo {
		flex-basis: 220px;
		width: 220px;
		height: 250px;
	}

}

@media (max-width: 767px) {
	.aibm-board-hero {
		min-height: 380px;
		padding: 64px 0;
	}

	.aibm-board-hero__media::after {
		background: linear-gradient(90deg, rgba(16, 13, 70, .92) 0%, rgba(16, 13, 70, .7) 100%);
	}

	.aibm-board-page .aibm-board-hero__eyebrow {
		font-size: 12px;
		letter-spacing: 1.4px;
	}

	.aibm-board-page .aibm-board-hero__title {
		font-size: 32px;
	}

	.aibm-board-page .aibm-board-hero__lead {
		font-size: 16px;
		line-height: 25px;
	}

	/* Tabs: stacked full-width buttons (as Examination & Certification) */
	.aibm-board-tabs__bar {
		padding: 24px 0 0;
	}

	.aibm-board-tabs__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.aibm-board-page .aibm-board-tabs__tab {
		justify-content: flex-start;
		min-height: 48px;
		padding: 10px 16px;
		font-size: 14px;
		line-height: 1.4;
		text-align: left;
	}

	.aibm-board-panel {
		padding: 36px 0 72px;
	}

	.aibm-board-section__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 28px;
	}

	.aibm-board-page .aibm-board-section__title {
		font-size: 27px;
		line-height: 1.25;
	}

	.aibm-board-members {
		gap: 20px;
	}

	.aibm-board-member {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding: 16px 16px 24px;
	}

	.aibm-board-member__photo {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.aibm-board-member__details {
		gap: 16px;
		padding: 0 6px;
	}

	.aibm-board-member__identity {
		padding-bottom: 16px;
	}

	.aibm-board-page .aibm-board-member__name {
		font-size: 20px;
	}

	.aibm-board-section__head--stack,
	.aibm-board-page .aibm-board-duties__intro {
		margin-bottom: 28px;
	}

	.aibm-board-page .aibm-board-duties__outro {
		margin-top: 28px;
	}

	.aibm-board-duties {
		gap: 16px;
	}

	.aibm-board-duty {
		gap: 12px;
		padding: 22px 20px;
	}

	.aibm-board-page .aibm-board-duty__title {
		padding-bottom: 12px;
		font-size: 19px;
		line-height: 1.3;
	}
}