/**
 * Team Quick View Nav — styles for the Phox Quick View on the Team page.
 * Everything is scoped to the "team" quick view overlay.
 */

/* Overlay (fallback; also set in the Breakdance element) */
.phox-qv-overlay[data-qv-id="team"] {
	background: rgba(10, 49, 82, 0.5);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	overflow-x: hidden; /* keep the slide-in from causing a horizontal scrollbar */
}

/* Modal shell: transparent; the injected block brings the white card */
.phox-qv-overlay[data-qv-id="team"] .phox-qv-modal {
	width: 1050px;
	max-width: calc(100% - 140px);
	background: transparent;
	padding: 0;
	overflow: visible;
	max-height: none;
	display: flex;
	flex-direction: column;
}

/* Scrolling area */
.phox-qv-overlay[data-qv-id="team"] .phox-qv-content {
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: 10px;
}

.phox-qv-overlay[data-qv-id="team"] .phox-qv-content .dwc-quick-view {
	max-width: 100%;
}

/* The block's own decorative close button is replaced by Phox's */
.phox-qv-overlay[data-qv-id="team"] .phox-qv-content .dwc-quick-view__close-btn {
	display: none;
}

/* Close button */
.phox-qv-overlay[data-qv-id="team"] .phox-qv-close {
	top: 8px;
	right: 8px;
	width: 43px;
	height: 43px;
	background: #fff;
	border-radius: 200px;
	color: #0F1729;
	z-index: 3;
	transition: transform 0.2s;
}

.phox-qv-overlay[data-qv-id="team"] .phox-qv-close:hover {
	transform: scale(1.1);
}

/* Spinner on the dark overlay */
.phox-qv-overlay[data-qv-id="team"] .phox-qv-spinner {
	border-color: rgba(255, 255, 255, 0.3);
	border-top-color: #fff;
}

/* Prev / next arrows */
.phox-qv-overlay[data-qv-id="team"] .gm-qv-nav {
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	padding: 12px;
	margin: 0;
	border: 0;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.25);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: opacity 0.2s, transform 0.2s, background 0.2s;
}

.phox-qv-overlay[data-qv-id="team"] .gm-qv-nav[hidden] {
	display: none;
}

.phox-qv-overlay[data-qv-id="team"] .gm-qv-nav svg {
	display: block;
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.phox-qv-overlay[data-qv-id="team"] .gm-qv-prev {
	left: 30px;
}

.phox-qv-overlay[data-qv-id="team"] .gm-qv-next {
	right: 30px;
}

.phox-qv-overlay[data-qv-id="team"] .gm-qv-nav:hover {
	background: rgba(0, 0, 0, 0.45);
}

.phox-qv-overlay[data-qv-id="team"] .gm-qv-nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.phox-qv-overlay[data-qv-id="team"] .gm-qv-nav[disabled] {
	opacity: 0.5;
	transform: translateY(-50%) scale(0.9);
	cursor: default;
}

.phox-qv-overlay[data-qv-id="team"] .gm-qv-nav[disabled]:hover {
	background: rgba(0, 0, 0, 0.25);
}

/* Directional slide-in after navigating */
.phox-qv-overlay[data-qv-id="team"] .phox-qv-content.gm-qv-in-next {
	animation: gm-qv-in-next 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.phox-qv-overlay[data-qv-id="team"] .phox-qv-content.gm-qv-in-prev {
	animation: gm-qv-in-prev 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes gm-qv-in-next {
	from {
		opacity: 0;
		transform: translateX(20%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes gm-qv-in-prev {
	from {
		opacity: 0;
		transform: translateX(-20%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.phox-qv-overlay[data-qv-id="team"] .phox-qv-content.gm-qv-in-next,
	.phox-qv-overlay[data-qv-id="team"] .phox-qv-content.gm-qv-in-prev {
		animation: none;
	}

	.phox-qv-overlay[data-qv-id="team"] .gm-qv-nav,
	.phox-qv-overlay[data-qv-id="team"] .phox-qv-close {
		transition: none;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.phox-qv-overlay[data-qv-id="team"] .phox-qv-modal {
		max-width: 100%;
	}

	.phox-qv-overlay[data-qv-id="team"] .gm-qv-nav {
		width: 40px;
		height: 40px;
		padding: 8px;
	}

	.phox-qv-overlay[data-qv-id="team"] .gm-qv-prev {
		left: 4px;
	}

	.phox-qv-overlay[data-qv-id="team"] .gm-qv-next {
		right: 4px;
	}
}