/* ==========================================================
   AA GROUP HUB - CORE TEAM ORBIT
========================================================== */

.aahb-team-orbit {
	position: relative;
	width: 100%;
	padding: 60px 20px;
}


/* ==========================================================
   ORBIT STAGE
========================================================== */

.aahb-team-orbit-stage {
	--orbit-size: 780px;

	position: relative;

	width: var(--orbit-size);
	height: var(--orbit-size);

	max-width: 100%;

	margin: 0 auto;
}


/* ==========================================================
   ORBIT RING
========================================================== */

.aahb-team-orbit-ring {
	position: absolute;

	inset: 11%;

	border: 1px solid #D9E2F1;
	border-radius: 50%;

	z-index: 1;
}

.aahb-hide-ring .aahb-team-orbit-ring {
	display: none;
}


/* ==========================================================
   CENTER NODE
========================================================== */

.aahb-team-orbit-center {
	position: absolute;

	left: 50%;
	top: 50%;

	width: 190px;
	height: 190px;

	transform:
		translate(-50%, -50%);

	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	text-align: center;

	padding: 20px;

	border-radius: 50%;

	background: #0F172A;

	box-shadow:
		0 20px 60px rgba(15, 23, 42, .22);

	z-index: 10;
}

.aahb-team-orbit-center::before {
	content: "";

	position: absolute;

	inset: -12px;

	border: 1px solid rgba(20, 100, 244, .25);

	border-radius: 50%;
}

.aahb-team-orbit-center-title {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;

	color: #FFFFFF;

	letter-spacing: .04em;
}

.aahb-team-orbit-center-subtitle {
	margin-top: 7px;

	font-size: 12px;
	font-weight: 600;

	color: #9FC2FF;

	letter-spacing: .10em;
}


/* ==========================================================
   ORBIT MEMBER POSITION
========================================================== */

.aahb-team-orbit-member {
	position: absolute;

	left: 50%;
	top: 50%;

	width: 0;
	height: 0;

	transform:
		rotate(var(--angle))
		translate(calc(var(--orbit-size) * .39))
		rotate(calc(var(--angle) * -1));

	transform-origin: center;
}


/* Connector line */

.aahb-team-orbit-member::before {
	content: "";

	position: absolute;

	left: 0;
	top: 0;

	width: calc(var(--orbit-size) * .19);
	height: 1px;

	background: #1464F4;

	opacity: .18;

	transform:
		translate(
			calc(var(--orbit-size) * -.19),
			0
		);

	transform-origin: right center;

	z-index: -1;
}


/* ==========================================================
   MEMBER CARD
========================================================== */

.aahb-team-orbit-member-card {
	--member-size: 130px;

	position: absolute;

	left: 0;
	top: 0;

	width: var(--member-size);

	transform:
		translate(-50%, -50%);

	background: transparent;

	border: 0;

	padding: 0;

	cursor: pointer;

	text-align: center;

	z-index: 6;
}


/* ==========================================================
   PHOTO
========================================================== */

.aahb-team-orbit-photo {
	position: relative;

	width: var(--member-size);
	height: var(--member-size);

	border-radius: 50%;

	border: 5px solid #FFFFFF;

	background: #EEF2F7;

	overflow: hidden;

	box-shadow:
		0 10px 35px rgba(15, 23, 42, .16);

	transition:
		transform .35s ease,
		box-shadow .35s ease,
		border-color .35s ease;
}

.aahb-team-orbit-photo img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center top;

	transition:
		transform .4s ease;
}

.aahb-team-orbit-member-card:hover
.aahb-team-orbit-photo {

	transform: scale(1.12);

	border-color: #1464F4;

	box-shadow:
		0 18px 50px rgba(20, 100, 244, .25);
}

.aahb-team-orbit-member-card:hover
.aahb-team-orbit-photo img {

	transform: scale(1.05);
}


/* ==========================================================
   MEMBER INFO
========================================================== */

.aahb-team-orbit-info {
	position: absolute;

	left: 50%;
	top: calc(var(--member-size) + 12px);

	width: 180px;

	transform: translateX(-50%);

	padding: 10px 12px;

	background: rgba(255,255,255,.96);

	border: 1px solid #EAECF0;

	border-radius: 12px;

	box-shadow:
		0 10px 30px rgba(15, 23, 42, .08);

	opacity: 0;

	visibility: hidden;

	transition:
		opacity .25s ease,
		transform .25s ease,
		visibility .25s ease;

	z-index: 20;
}

.aahb-team-orbit-member-card:hover
.aahb-team-orbit-info {

	opacity: 1;

	visibility: visible;

	transform:
		translateX(-50%)
		translateY(4px);
}

.aahb-team-orbit-name {
	color: #111827;

	font-size: 15px;
	font-weight: 700;

	line-height: 1.3;
}

.aahb-team-orbit-designation {
	margin-top: 4px;

	color: #1464F4;

	font-size: 13px;
	font-weight: 600;
}

.aahb-team-orbit-department {
	margin-top: 4px;

	color: #667085;

	font-size: 11px;
	font-weight: 500;

	text-transform: uppercase;

	letter-spacing: .06em;
}


/* ==========================================================
   AUTO ROTATION
========================================================== */

.aahb-auto-rotate .aahb-team-orbit-stage {
	animation:
		aahbOrbitRotate
		var(--rotation-duration, 40s)
		linear infinite;
}

.aahb-auto-rotate .aahb-team-orbit-center {
	animation:
		aahbOrbitReverse
		var(--rotation-duration, 40s)
		linear infinite;
}

.aahb-auto-rotate .aahb-team-orbit-member-card {
	animation:
		aahbOrbitReverse
		var(--rotation-duration, 40s)
		linear infinite;
}

.aahb-auto-rotate .aahb-team-orbit-stage:hover {
	animation-play-state: paused;
}

.aahb-auto-rotate .aahb-team-orbit-stage:hover
.aahb-team-orbit-center,
.aahb-auto-rotate .aahb-team-orbit-stage:hover
.aahb-team-orbit-member-card {
	animation-play-state: paused;
}

@keyframes aahbOrbitRotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes aahbOrbitReverse {
	from {
		transform:
			translate(-50%, -50%)
			rotate(0deg);
	}
	to {
		transform:
			translate(-50%, -50%)
			rotate(-360deg);
	}
}


/* ==========================================================
   POPUP
========================================================== */

.aahb-team-orbit-modal {
	position: fixed;

	inset: 0;

	display: none;

	align-items: center;
	justify-content: center;

	padding: 24px;

	z-index: 999999;
}

.aahb-team-orbit-modal.is-open {
	display: flex;
}

.aahb-team-orbit-modal-overlay {
	position: absolute;

	inset: 0;

	background:
		rgba(7, 12, 22, .74);

	backdrop-filter: blur(5px);
}

.aahb-team-orbit-modal-dialog {
	position: relative;

	width: 100%;
	max-width: 920px;
	max-height: 90vh;

	overflow-y: auto;

	padding: 40px;

	background: #FFFFFF;

	border-radius: 20px;

	box-shadow:
		0 35px 90px rgba(0,0,0,.30);

	z-index: 2;

	animation:
		aahbOrbitModalIn .28s ease;
}

@keyframes aahbOrbitModalIn {

	from {
		opacity: 0;

		transform:
			translateY(22px)
			scale(.98);
	}

	to {
		opacity: 1;

		transform:
			translateY(0)
			scale(1);
	}
}

.aahb-team-orbit-modal-close {
	position: absolute;

	right: 16px;
	top: 16px;

	width: 42px;
	height: 42px;

	display: flex;

	align-items: center;
	justify-content: center;

	border: 0;

	border-radius: 50%;

	background: #F2F4F7;

	color: #344054;

	font-size: 27px;

	cursor: pointer;

	transition:
		background .25s ease,
		color .25s ease,
		transform .25s ease;
}

.aahb-team-orbit-modal-close:hover {
	background: #1464F4;
	color: #FFFFFF;

	transform: rotate(90deg);
}


/* ==========================================================
   POPUP GRID
========================================================== */

.aahb-team-orbit-modal-grid {
	display: grid;

	grid-template-columns:
		minmax(250px, 310px)
		minmax(0, 1fr);

	gap: 36px;

	align-items: start;
}


/* ==========================================================
   POPUP IMAGE
========================================================== */

.aahb-team-orbit-modal-image {
	width: 100%;

	border-radius: 16px;

	overflow: hidden;

	background: #F2F4F7;
}

.aahb-team-orbit-modal-image img {
	display: block;

	width: 100%;
	height: auto;

	object-fit: contain;
	object-position: center top;
}


/* ==========================================================
   POPUP CONTENT
========================================================== */

.aahb-team-orbit-modal-content h3 {
	margin:
		0 45px 6px 0;

	color: #101828;

	font-size: 31px;
	font-weight: 700;

	line-height: 1.2;
}

.aahb-team-orbit-modal-role {
	color: #1464F4;

	font-size: 17px;
	font-weight: 600;

	margin-bottom: 6px;
}

.aahb-team-orbit-modal-meta {
	color: #667085;

	font-size: 13px;
	font-weight: 600;

	text-transform: uppercase;

	letter-spacing: .05em;

	margin-bottom: 20px;
}

.aahb-team-orbit-modal-short {
	margin-bottom: 18px;

	color: #475467;

	font-size: 15px;
	line-height: 1.7;
}

.aahb-team-orbit-modal-bio {
	color: #475467;

	font-size: 15px;
	line-height: 1.8;
}

.aahb-team-orbit-modal-details {
	display: grid;

	grid-template-columns:
		repeat(2, 1fr);

	gap: 12px;

	margin-top: 22px;
}

.aahb-team-orbit-modal-details div {
	padding: 14px;

	background: #F8FAFC;

	border-radius: 10px;
}

.aahb-team-orbit-modal-details strong {
	display: block;

	margin-bottom: 4px;

	color: #101828;

	font-size: 12px;

	text-transform: uppercase;

	letter-spacing: .05em;
}

.aahb-team-orbit-modal-details span {
	color: #667085;

	font-size: 14px;
}


/* ==========================================================
   SOCIAL
========================================================== */

.aahb-team-orbit-socials {
	display: flex;

	gap: 8px;

	margin-top: 24px;
}

.aahb-team-orbit-socials a {
	display: inline-flex;

	width: 38px;
	height: 38px;

	align-items: center;
	justify-content: center;

	border-radius: 50%;

	background: #F2F4F7;

	color: #475467;

	text-decoration: none;

	transition:
		background .25s ease,
		color .25s ease,
		transform .25s ease;
}

.aahb-team-orbit-socials a:hover {
	background: #1464F4;

	color: #FFFFFF;

	transform:
		translateY(-3px);
}


/* ==========================================================
   BODY LOCK
========================================================== */

body.aahb-team-orbit-modal-active {
	overflow: hidden;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1024px) {

	.aahb-team-orbit-stage {
		--orbit-size: 650px;
	}

	.aahb-team-orbit-member-card {
		--member-size: 110px;
	}

	.aahb-team-orbit-center {
		width: 160px;
		height: 160px;
	}

}


/* ==========================================================
   MOBILE - SPECIAL CONNECTED TEAM LIST
========================================================== */

@media (max-width: 767px) {

	.aahb-team-orbit {
		padding:
			25px 0;
	}


	.aahb-team-orbit-stage {
		width: 100%;
		height: auto;

		display: flex;
		flex-direction: column;

		gap: 24px;

		padding-left: 45px;
	}


	.aahb-team-orbit-ring {
		display: none;
	}


	.aahb-team-orbit-center {
		position: relative;

		left: auto;
		top: auto;

		transform: none;

		width: 150px;
		height: 150px;

		margin:
			0 auto 20px;
	}


	.aahb-team-orbit-member {
		position: relative;

		left: auto;
		top: auto;

		width: 100%;
		height: auto;

		transform: none !important;
	}


	.aahb-team-orbit-member::before {
		content: "";

		position: absolute;

		left: -27px;
		top: 50%;

		width: 27px;
		height: 2px;

		background: #1464F4;

		opacity: .25;

		transform: none;
	}


	.aahb-team-orbit-stage::before {
		content: "";

		position: absolute;

		left: 17px;

		top: 200px;
		bottom: 45px;

		width: 2px;

		background: #D9E2F1;
	}


	.aahb-team-orbit-member-card {
		position: relative;

		left: auto;
		top: auto;

		width: 100%;

		transform: none !important;

		display: flex;

		align-items: center;

		text-align: left;

		gap: 16px;
	}


	.aahb-team-orbit-photo {
		flex: 0 0 82px;

		width: 82px;
		height: 82px;

		border-width: 3px;
	}


	.aahb-team-orbit-info {
		position: relative;

		left: auto;
		top: auto;

		width: auto;

		transform: none !important;

		padding: 0;

		background: transparent;

		border: 0;

		box-shadow: none;

		opacity: 1;

		visibility: visible;
	}


	.aahb-team-orbit-name {
		font-size: 16px;
	}


	.aahb-team-orbit-designation {
		font-size: 13px;
	}


	.aahb-auto-rotate .aahb-team-orbit-stage,
	.aahb-auto-rotate .aahb-team-orbit-center,
	.aahb-auto-rotate .aahb-team-orbit-member-card {
		animation: none !important;
	}


	.aahb-team-orbit-modal {
		padding: 12px;
	}


	.aahb-team-orbit-modal-dialog {
		padding:
			55px 22px 25px;
	}


	.aahb-team-orbit-modal-grid {
		grid-template-columns: 1fr;

		gap: 24px;
	}


	.aahb-team-orbit-modal-image {
		max-width: 320px;

		margin: 0 auto;
	}


	.aahb-team-orbit-modal-details {
		grid-template-columns: 1fr;
	}

}