/**
 * Entry pages (decision 0026): only what Bootstrap's cards, list groups and
 * utilities don't do. Everything else on game and franchise pages is stock
 * Bootstrap markup.
 */

/* Review scores tinted by how favorable they are (no Bootstrap color for "mixed" orange-yellow on dark). */
.vgp-score--good {
	color: #6fd28c;
}

.vgp-score--mixed {
	color: #f2c14e;
}

.vgp-score--bad {
	color: #ff7b72;
}

/* Cards that link somewhere lift their border on hover (Bootstrap cards have no hover state). */
.vgp-hover-card {
	transition: border-color var(--vgp-speed) var(--vgp-ease);
}

.vgp-hover-card:hover,
.vgp-hover-card:focus-within {
	border-color: rgba(var(--vgp-orange-rgb), 0.6);
}

/* Art with a logo or title over it (franchise cards): a dark scrim under the text. */
.vgp-art {
	background: linear-gradient(160deg, var(--vgp-surface-raised), #0a0b0d);
}

.vgp-art > div {
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 65%);
}

.vgp-art__logo {
	max-width: 70%;
	max-height: 3.75rem;
	width: auto;
	height: auto;
	filter: drop-shadow(0 0.25rem 0.75rem rgba(0, 0, 0, 0.6));
}

.vgp-art__logo.vgp-hero__logo--silhouette {
	filter: brightness(0) invert(1) drop-shadow(0 0.25rem 0.75rem rgba(0, 0, 0, 0.6));
}

/* A square icon tile in link lists (Bootstrap has no fixed-size box utility). */
.vgp-icon-tile {
	display: inline-flex;
	flex: 0 0 2.25rem;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
}

/* Listing header band: a surface with the brand glow (Bootstrap has no gradient background utility for this). */
.vgp-listing-head {
	background:
		radial-gradient(90% 140% at 100% 0%, rgba(var(--vgp-orange-rgb), 0.18), transparent 60%),
		var(--vgp-surface);
	border: 1px solid var(--vgp-hairline);
}