/* Keep the featured photography and replace the thumbnail strip with compact controls. */
.mgs-vg-hero-art {
	height: clamp(590px, 50vw, 750px);
}

.mgs-vg-hero-stage {
	height: 90%;
}

.mgs-vg-hero-sequence {
	display: none !important;
}

.mgs-vg-hero-controls {
	position: absolute;
	z-index: 12;
	right: 3%;
	bottom: 13%;
	display: flex;
	align-items: stretch;
	gap: 8px;
	color: #fff;
}

.mgs-vg-hero-status {
	min-width: 190px;
	padding: 12px 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .28);
	border-top: 2px solid var(--mgs-vg-gold);
	background: rgba(7, 27, 51, .82);
	box-shadow: 0 14px 34px rgba(7, 27, 51, .24);
	backdrop-filter: blur(14px);
}

.mgs-vg-hero-status span {
	margin-bottom: 5px;
	font: 900 9px/1 system-ui, sans-serif;
	letter-spacing: .15em;
	color: var(--mgs-vg-gold);
}

.mgs-vg-hero-status strong {
	font: 700 12px/1.2 system-ui, sans-serif;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #fff;
}

.mgs-vg-hero-prev,
.mgs-vg-hero-next {
	width: 52px;
	min-height: 52px;
	border: 1px solid rgba(255, 255, 255, .36);
	background: rgba(7, 27, 51, .86);
	color: #fff;
	font: 400 24px/1 system-ui, sans-serif;
	cursor: pointer;
	box-shadow: 0 14px 34px rgba(7, 27, 51, .20);
	transition: transform .25s ease, background .25s ease, color .25s ease;
}

.mgs-vg-hero-prev:hover,
.mgs-vg-hero-next:hover,
.mgs-vg-hero-prev:focus-visible,
.mgs-vg-hero-next:focus-visible {
	background: var(--mgs-vg-gold);
	color: var(--mgs-vg-navy);
	transform: translateY(-2px);
	outline: none;
}

.mgs-vg-hero-prev:focus-visible,
.mgs-vg-hero-next:focus-visible {
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--mgs-vg-gold);
}

@media (max-width: 980px) {
	.mgs-vg-hero-art {
		height: min(700px, 88vw);
		min-height: 590px;
	}
}

@media (max-width: 620px) {
	.mgs-vg-hero-art {
		height: 540px;
		min-height: 0;
	}

	.mgs-vg-hero-stage {
		height: 100%;
	}

	.mgs-vg-hero-scene > span {
		bottom: 106px;
		width: 82%;
	}

	.mgs-vg-hero-controls {
		left: 18px;
		right: 18px;
		bottom: 18px;
		justify-content: flex-end;
	}

	.mgs-vg-hero-status {
		min-width: 0;
		margin-right: auto;
		padding: 10px 12px;
	}

	.mgs-vg-hero-prev,
	.mgs-vg-hero-next {
		width: 48px;
		min-height: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mgs-vg-hero-prev,
	.mgs-vg-hero-next {
		transition: none;
	}
}