@keyframes gradientShift {
	0% {
		background-position: 0% 50%;
	}
	25% {
		background-position: 100% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	75% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.gradient-banner {
	position: relative;
	height: 400px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	color: #292B2E;
	/* Default background will be set via inline style from PHP */
}

.gradient-banner--animated {
	background-size: 600% 600% !important;
	animation: gradientShift 40s ease infinite;
}

/* Ensure non-animated gradients have proper background-size */
.gradient-banner:not(.gradient-banner--animated) {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

/* Fallback for browsers that don't support background-size */
@supports not (background-size: cover) {
	.gradient-banner {
		background-attachment: fixed;
		background-size: 100% 100%;
	}
}

.gradient-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.15);
	z-index: 0;
}

.gradient-banner .banner-content {
	position: relative;
	z-index: 1;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gradient-banner .banner-image {
	height: auto;
	display: block;
	object-fit: contain;
}

@media (min-width: 481px) {
	.gradient-banner {
		height: 600px;
	}
}

@media (min-width: 768px) {
	.gradient-banner {
		height: 900px;
	}
}