/*
 * banner.css — the reusable Page Banner system (template-parts/banner.php).
 * Enqueued on any Page that has the banner enabled (see inc/enqueue.php).
 * Per-page height/colors come from inline CSS custom properties set in
 * template-parts/banner.php; this file only holds the shared structural
 * rules so every banner looks consistent with the rest of the site.
 */

.dws-page-banner {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
	min-height: var(--dws-banner-h-desktop, 420px);
	padding-top: 56px;
	padding-bottom: 56px;
}

.dws-page-banner__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.dws-page-banner__image,
.dws-page-banner__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dws-page-banner__image--fallback {
	background:
		radial-gradient(60% 90% at 75% 15%, rgba(154, 230, 76, 0.16), transparent 70%),
		linear-gradient(160deg, #101c16 0%, #070c09 100%);
}

.dws-page-banner__overlay {
	position: absolute;
	inset: 0;
}

.dws-page-banner__content {
	position: relative;
	max-width: 760px;
}

.dws-page-banner__heading {
	font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem);
	line-height: 1.15;
	margin: 0;
	color: #ffffff;
}

.dws-page-banner__subtext {
	margin-top: 16px;
	color: var(--dws-color-muted);
	font-size: 1.06rem;
	line-height: 1.7;
}

/* Alignment variants */

.dws-page-banner--align-left .dws-page-banner__content {
	margin-inline: 0;
	text-align: left;
}

.dws-page-banner--align-center .dws-page-banner__content {
	margin-inline: auto;
	text-align: center;
}

.dws-page-banner--align-right .dws-page-banner__content {
	margin-inline: 0 0;
	margin-left: auto;
	text-align: right;
}

@media (max-width: 1024px) {
	.dws-page-banner {
		min-height: var(--dws-banner-h-tablet, 360px);
	}
}

@media (max-width: 640px) {
	.dws-page-banner {
		min-height: var(--dws-banner-h-mobile, 300px);
		padding-top: 44px;
		padding-bottom: 44px;
	}

	.dws-page-banner__subtext {
		font-size: 0.98rem;
	}
}