@import "/ui/styles/_theme.scss";

MenuHeroCard {
	flex-direction: column;
	min-height: 160px;
	padding: 24px 28px;
	background-color: $panel-glass-strong;
	border: 1px solid $border;
	border-left: 3px solid $primary;
	position: relative;
	overflow: hidden;

	.hero-bg {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		background-size: cover;
		background-position: center;
		opacity: 0.7;
		z-index: 0;
	}

	.hero-fade {
		position: absolute;
		top: 0; right: 0; bottom: 0; left: 0;
		background-image: linear-gradient(
			90deg,
			rgba(33, 33, 35, 0.92) 0%,
			rgba(33, 33, 35, 0.55) 45%,
			rgba(33, 33, 35, 0.55) 65%,
			rgba(33, 33, 35, 0.92) 100%
		);
		z-index: 0;
	}

	.hero-body {
		flex-direction: column;
		gap: 6px;
		z-index: 1;
	}

	.hero-sub {
		font-family: $font-primary;
		font-size: 16px;
		font-weight: 800;
		letter-spacing: 4px;
		text-transform: uppercase;
		color: $primary;
	}

	.hero-title-row {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		.icon { color: $accent; }
	}

	.hero-title {
		font-family: $font-primary;
		font-size: 36px;
		font-weight: 700;
		letter-spacing: 3px;
		text-transform: uppercase;
		color: $text;
		text-shadow: $text-shadow;
	}

	.hero-desc {
		font-family: $font-secondary;
		font-size: 17px;
		color: $text;
		opacity: 0.85;
		max-width: 720px;
	}
}