/**
 * Isolated presentation for VIP, Premium, and Frames & Badges.
 */

body.route-vip-membership main.page-wrap {
	background:
		radial-gradient(ellipse at 12% 0%, rgba(246, 199, 91, 0.16), transparent 34%),
		radial-gradient(ellipse at 88% 8%, rgba(120, 40, 180, 0.28), transparent 40%),
		linear-gradient(180deg, #1a0c28 0%, #090411 46%);
}

body.route-premium-membership main.page-wrap {
	background:
		radial-gradient(ellipse at 80% 0%, rgba(80, 160, 255, 0.12), transparent 32%),
		radial-gradient(ellipse at 10% 12%, rgba(165, 44, 255, 0.24), transparent 38%),
		linear-gradient(180deg, #120818 0%, #07040f 50%);
}

body.route-profile-frames-badges main.page-wrap {
	background:
		radial-gradient(ellipse at 50% 0%, rgba(246, 199, 91, 0.12), transparent 28%),
		radial-gradient(ellipse at 0% 30%, rgba(90, 30, 140, 0.22), transparent 36%),
		linear-gradient(180deg, #160a22 0%, #090411 48%);
}

body.route-vip-membership .page-hero,
body.route-premium-membership .page-hero,
body.route-profile-frames-badges .page-hero {
	display: block;
	max-width: 48rem;
}

body.route-vip-membership .page-hero__visual,
body.route-premium-membership .page-hero__visual,
body.route-profile-frames-badges .page-hero__visual {
	display: none;
}

body.route-vip-membership .membership-hero,
body.route-premium-membership .membership-hero,
body.route-profile-frames-badges .membership-hero {
	margin: 6px 0 28px;
}

body.route-vip-membership .membership-hero__img,
body.route-premium-membership .membership-hero__img,
body.route-profile-frames-badges .membership-hero__img {
	display: block;
	width: 100%;
	height: min(46vw, 440px);
	object-fit: cover;
	object-position: center;
	margin: 0;
	border: 1px solid rgba(246, 199, 91, 0.48);
	border-radius: 24px;
	box-shadow: 0 22px 48px rgba(0, 0, 0, 0.42);
}

body.route-vip-membership .membership-band,
body.route-premium-membership .membership-band,
body.route-profile-frames-badges .membership-band,
body.route-vip-membership .membership-bridge,
body.route-premium-membership .membership-bridge,
body.route-profile-frames-badges .membership-bridge {
	margin: 0 0 34px;
}

body.route-vip-membership .membership-kicker,
body.route-premium-membership .membership-kicker,
body.route-profile-frames-badges .membership-kicker {
	margin: 0 0 8px;
	color: #f6c75b;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-size: 0.78rem;
}

body.route-vip-membership .membership-lead,
body.route-premium-membership .membership-lead,
body.route-profile-frames-badges .membership-lead,
body.route-vip-membership .membership-bridge > p,
body.route-premium-membership .membership-bridge > p,
body.route-profile-frames-badges .membership-bridge > p {
	max-width: 46rem;
	color: #d9c9f4;
}

body.route-vip-membership .membership-grid,
body.route-premium-membership .membership-grid,
body.route-profile-frames-badges .membership-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 16px;
}

body.route-vip-membership .membership-card,
body.route-premium-membership .membership-card,
body.route-profile-frames-badges .membership-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #100816;
	border: 1px solid rgba(246, 199, 91, 0.46);
	border-radius: 20px;
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.36);
}

body.route-vip-membership .membership-card__img,
body.route-premium-membership .membership-card__img,
body.route-profile-frames-badges .membership-card__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: center;
}

body.route-vip-membership .membership-card figcaption,
body.route-premium-membership .membership-card figcaption,
body.route-profile-frames-badges .membership-card figcaption {
	margin: 0;
	padding: 12px 14px 16px;
	color: #ffe6a8;
	font-family: var(--display);
	font-size: 1.25rem;
	text-align: center;
}

body.route-vip-membership .membership-bridge__action,
body.route-premium-membership .membership-bridge__action,
body.route-profile-frames-badges .membership-bridge__action {
	margin-top: 18px;
}

@media (max-width: 1024px) {
	body.route-vip-membership .membership-grid,
	body.route-premium-membership .membership-grid,
	body.route-profile-frames-badges .membership-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	body.route-vip-membership .membership-grid,
	body.route-premium-membership .membership-grid,
	body.route-profile-frames-badges .membership-grid {
		grid-template-columns: 1fr;
	}

	body.route-vip-membership .membership-hero__img,
	body.route-premium-membership .membership-hero__img,
	body.route-profile-frames-badges .membership-hero__img {
		height: 220px;
	}
}

@media (hover: hover) and (pointer: fine) {
	body.route-vip-membership .membership-card,
	body.route-premium-membership .membership-card,
	body.route-profile-frames-badges .membership-card {
		transition: transform 0.35s ease, border-color 0.35s ease;
	}

	body.route-vip-membership .membership-card:hover,
	body.route-premium-membership .membership-card:hover,
	body.route-profile-frames-badges .membership-card:hover {
		transform: translateY(-6px);
		border-color: #ffe6a0;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.route-vip-membership .membership-card,
	body.route-premium-membership .membership-card,
	body.route-profile-frames-badges .membership-card {
		transition: none;
	}

	body.route-vip-membership .membership-card:hover,
	body.route-premium-membership .membership-card:hover,
	body.route-profile-frames-badges .membership-card:hover {
		transform: none;
	}
}