/* Team bios */

.navix-team {
	/* #121212 at 60% over a 25px backdrop blur, per the design file. */
	--navix-team-bio-bg: rgba(18, 18, 18, .6);
	--navix-team-bio-blur: 25px;
	--navix-team-bio-color: #ffffff;
	--navix-team-bio-pad: clamp(1.5rem, 3vw, 3rem);
	--navix-team-bio-radius: 10px;
	--navix-team-speed: 480ms;
	--navix-team-ease: cubic-bezier(.65, 0, .35, 1);

	position: relative;
}


.navix-team.is-bio-open {
	transition: height var(--navix-team-speed) var(--navix-team-ease);
}

/* Other cards step aside */
.navix-team.is-bio-open .navix-team__card {
	transition: opacity calc(var(--navix-team-speed) * .5) ease;
}

.navix-team.is-bio-open .navix-team__card:not(.is-bio-active) {
	opacity: 0;
	pointer-events: none;
}

/* Trigger label */
.navix-team__card.is-bio-active .navix-team__trigger .elementor-button-text {
	position: relative;
	color: transparent;
}

.navix-team__card.is-bio-active .navix-team__trigger .elementor-button-text > * {
	color: transparent;
}

.navix-team__card.is-bio-active .navix-team__trigger .elementor-button-text::after {
	content: attr(data-navix-close-label);
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	white-space: nowrap;

	text-transform: uppercase;
	color: var(--navix-team-bio-color);
}

/* Overlay */


.navix-team > [data-widget_type^="shortcode"],
.navix-team .elementor-shortcode {
	display: contents;
}

.navix-team-bios {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
}

/* Repeated for states: Site Settings > Buttons is more specific */
.navix-team .navix-team-bios__close,
.navix-team .navix-team-bios__close:hover,
.navix-team .navix-team-bios__close:focus,
.navix-team .navix-team-bios__close:focus-visible {
	position: absolute;

	top: calc(var(--navix-team-view-top, 0px) + 14px);
	right: calc(var(--navix-team-view-right, 0px) + 14px);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	background: rgba(255, 255, 255, .12);
	color: var(--navix-team-bio-color);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity 200ms ease, transform 200ms ease, visibility 200ms, background 200ms ease;
}

.navix-team .navix-team-bios__close:hover,
.navix-team .navix-team-bios__close:focus-visible {
	background: rgba(255, 255, 255, .24);
}

.navix-team.is-bio-open .navix-team-bios__close {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

/* Clipping window over the rest of the row */

.navix-team-bios__viewport {
	position: absolute;
	top: var(--navix-team-view-top, 0px);
	height: var(--navix-team-view-h, 100%);
	left: var(--navix-team-view-left, 50%);
	right: var(--navix-team-view-right, 0px);
	overflow: hidden;
	border-radius: var(--navix-team-bio-radius);
	visibility: hidden;

	transition: visibility 0s linear var(--navix-team-speed);
}

.navix-team.is-bio-open .navix-team-bios__viewport {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.navix-team-bios__panel[hidden] {
	display: none;
}

.navix-team-bios__panel {
	position: absolute;
	inset: 0;
	background: var(--navix-team-bio-bg);
	-webkit-backdrop-filter: blur(var(--navix-team-bio-blur));
	backdrop-filter: blur(var(--navix-team-bio-blur));
	color: var(--navix-team-bio-color);
	/* Start off the edge nearest the read card */
	transform: translateX(var(--navix-team-from, -100%));
	transition: transform var(--navix-team-speed) var(--navix-team-ease);
}

.navix-team.is-bio-open .navix-team-bios__panel {
	transform: translateX(0);
}

.navix-team-bios__scroll {
	max-height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--navix-team-bio-pad);
	font-size: clamp(.95rem, 1.05vw, 1.0625rem);
	line-height: 1.6;
}

.navix-team-bios__scroll > p {
	margin: 0 0 1em;
}

.navix-team-bios__scroll > p:last-child {
	margin-bottom: 0;
}

/* Mobile: unfold under the tapped card */

@media (max-width: 767px) {
	.navix-team.is-bio-open {
		height: auto !important; /* JS sizes the desktop overlay only. */
	}

	.navix-team-bios {
		position: static;
		pointer-events: auto;
	}


	.navix-team-bios__viewport {
		position: static;
		visibility: visible;
		height: 0;
		border-radius: var(--navix-team-bio-radius);
		transition: height var(--navix-team-speed) var(--navix-team-ease);
	}


	.navix-team.is-bio-open .navix-team-bios__viewport {
		height: var(--navix-team-mobile-h, auto);
	}

	.navix-team-bios__panel {
		position: relative;
		inset: auto;
		transform: none;
		opacity: 0;
		transition: opacity var(--navix-team-speed) ease;
	}

	.navix-team.is-bio-open .navix-team-bios__panel {
		opacity: 1;
	}

	.navix-team-bios__scroll {
		max-height: none;
		overflow: visible;
	}


	.navix-team.is-bio-open .navix-team__card:not(.is-bio-active) {
		opacity: 1;
		pointer-events: auto;
	}

	.navix-team-bios__close {
		display: none; /* the trigger itself toggles back to Close */
	}
}

@media (prefers-reduced-motion: reduce) {
	.navix-team,
	.navix-team-bios__panel,
	.navix-team-bios__viewport,
	.navix-team-bios__close,
	.navix-team .navix-team__card {
		transition: none !important;
	}

	.navix-team-bios__panel {
		transform: none;
	}
}
