/**
 * Entry hero (decision 0026): full-bleed key art behind the title, darkened
 * toward the page so text stays readable, under the translucent header.
 * Bootstrap has no full-bleed media header with a gradient scrim.
 */

.vgp-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-top: calc(var(--vgp-header-height) * -1);
	padding-top: calc(var(--vgp-header-height) + 1.25rem);
	/* Room for the screenshot strip or the tab bar that overlap the hero's bottom edge. */
	padding-bottom: 5rem;
	min-height: clamp(26rem, 58vh, 38rem);
	color: #fff;
	background: radial-gradient(120% 90% at 80% 0%, rgba(var(--vgp-orange-rgb), 0.22), transparent 60%), var(--bs-body-bg);
}

.vgp-hero__backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.vgp-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	transform: scale(1.03);
	animation: vgp-hero-in 1.2s var(--vgp-ease) both;
}

/* The scrim: dark on the left for the title, and fading into the page at the bottom. */
/* It overhangs by 2px: the scaled image would otherwise show a one-pixel seam at a fractional bottom edge. */
.vgp-hero__backdrop::after {
	content: "";
	position: absolute;
	inset: -2px;
	background:
		linear-gradient(90deg, rgba(12, 14, 17, 0.92) 0%, rgba(12, 14, 17, 0.7) 38%, rgba(12, 14, 17, 0.15) 70%, rgba(12, 14, 17, 0.35) 100%),
		linear-gradient(0deg, var(--bs-body-bg) 0%, rgba(12, 14, 17, 0) 45%),
		linear-gradient(180deg, rgba(12, 14, 17, 0.75) 0%, rgba(12, 14, 17, 0) 22%);
}

@keyframes vgp-hero-in {
	from {
		opacity: 0;
		transform: scale(1.08);
	}

	to {
		opacity: 1;
		transform: scale(1.03);
	}
}

.vgp-hero__crumbs .breadcrumb {
	--bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.5);
	--bs-breadcrumb-item-active-color: rgba(255, 255, 255, 0.85);
	font-size: 0.875rem;
	margin-bottom: 0;
}

.vgp-hero__crumbs .breadcrumb a {
	color: #f59a3d;
	text-decoration: none;
}

.vgp-hero__body {
	max-width: 44rem;
	margin-top: 2rem;
}

.vgp-hero__logo {
	display: block;
	max-width: min(26rem, 80vw);
	max-height: 11rem;
	width: auto;
	height: auto;
	margin-bottom: 1.25rem;
	filter: drop-shadow(0 0.5rem 1.5rem rgba(0, 0, 0, 0.6));
}

.vgp-hero__title {
	font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -0.035em;
	text-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.5);
	margin-bottom: 0.75rem;
}

.vgp-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 1.5rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.88);
}

.vgp-hero__meta i {
	color: var(--vgp-orange);
	margin-right: 0.4rem;
}

.vgp-hero__meta a {
	color: #fff;
}

.vgp-hero__meta a:hover {
	color: var(--vgp-orange);
}

.vgp-hero__lead {
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.82);
	max-width: 38rem;
	margin-bottom: 1.5rem;
}

.vgp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.vgp-hero__actions .btn {
	--bs-btn-padding-y: 0.65rem;
	--bs-btn-padding-x: 1.25rem;
	--bs-btn-border-radius: 0.5rem;
}

/* A glassy secondary button over the art. */
.vgp-btn-glass {
	--bs-btn-color: #fff;
	--bs-btn-bg: rgba(255, 255, 255, 0.08);
	--bs-btn-border-color: rgba(255, 255, 255, 0.28);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: rgba(255, 255, 255, 0.16);
	--bs-btn-hover-border-color: rgba(255, 255, 255, 0.5);
	--bs-btn-active-bg: rgba(255, 255, 255, 0.22);
	--bs-btn-font-weight: 600;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* A tab bar that sits on the hero's bottom edge (franchise sections). */
.vgp-hero + .vgp-tabs {
	margin-top: -1.5rem;
}

.vgp-tabs {
	position: relative;
	z-index: 2;
}

.vgp-tabs .nav {
	--bs-nav-link-color: var(--bs-secondary-color);
	--bs-nav-link-hover-color: var(--bs-emphasis-color);
	--bs-nav-underline-link-active-color: var(--vgp-orange);
	--bs-nav-underline-border-width: 2px;
	--bs-nav-link-font-weight: 600;
	gap: 0.25rem 1.75rem;
	padding: 0 1.25rem;
	background: rgba(20, 23, 28, 0.86);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--vgp-hairline);
	border-radius: var(--vgp-radius-lg);
}

.vgp-tabs .nav-link {
	padding-block: 1rem;
}

/* A logo too dark for the hero (a black wordmark) is shown as a white silhouette. */
.vgp-hero__logo--silhouette {
	filter: brightness(0) invert(1) drop-shadow(0 0.5rem 1.5rem rgba(0, 0, 0, 0.6));
}

/* Company and platform heroes: shorter, the art is a backdrop rather than the subject. */
.vgp-hero--compact {
	min-height: clamp(20rem, 42vh, 28rem);
	padding-bottom: 3rem;
}

/* A translucent panel over the hero art (the Key info card). */
.vgp-glass {
	--bs-card-bg: rgba(20, 23, 28, 0.72);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/*
 * A cover standing in for missing wide art (console exclusives, decision 0029):
 * blurred and dimmed, so its printed title never competes with the heading or
 * logo. Used by heroes and franchise cards.
 */
.vgp-soft-art {
	filter: blur(32px) brightness(0.75) saturate(1.2);
	scale: 1.2;
}