/* ETOP Academy – Home Hero Background FIX v1.0.0 */

.etop-kc-home-hero-bg-fix .etop-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: #f4f7fc;
}

/*
 * Реалният визуален слой.
 * Снимката е концентрирана вдясно, където е инженерният workbench.
 */
.etop-kc-home-hero-bg-fix .etop-hero::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;

	background-image: url("home-workbench-bg.jpg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;

	/* Много бледо, както поискахме. */
	opacity: .18;
	filter:
		saturate(.88)
		contrast(.96)
		brightness(1.12);

	pointer-events: none;
}

/*
 * Плавен Academy-blue veil:
 * вляво почти напълно скрива снимката под текста;
 * вдясно я оставя леко да се вижда.
 */
.etop-kc-home-hero-bg-fix .etop-hero::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(244,247,252,1) 0%,
			rgba(244,247,252,.99) 32%,
			rgba(244,247,252,.94) 48%,
			rgba(244,247,252,.72) 62%,
			rgba(244,247,252,.42) 78%,
			rgba(244,247,252,.20) 100%
		);

	pointer-events: none;
}

/* Реалното съдържание винаги остава над фона. */
.etop-kc-home-hero-bg-fix .etop-hero > .etop-container {
	position: relative;
	z-index: 2;
}

/*
 * Тъмният син панел остава четим и визуално отделен.
 * Не го правим прозрачен.
 */
.etop-kc-home-hero-bg-fix .etop-hero-panel {
	position: relative;
	z-index: 3;
}

/* На по-малки екрани фонът става още по-слаб. */
@media (max-width: 1100px) {
	.etop-kc-home-hero-bg-fix .etop-hero::before {
		opacity: .12;
		background-position: 75% center;
		background-size: cover;
	}

	.etop-kc-home-hero-bg-fix .etop-hero::after {
		background: rgba(244,247,252,.86);
	}
}

@media (max-width: 760px) {
	.etop-kc-home-hero-bg-fix .etop-hero::before {
		opacity: .08;
		background-position: center;
	}

	.etop-kc-home-hero-bg-fix .etop-hero::after {
		background: rgba(244,247,252,.92);
	}
}