/*
 * Sawatech Woo - Template: Inner Page Banner
 */

.st-inner-page-banner {
	--st-ipb-min-height: clamp(16rem, 34vw, 24rem);
	position: relative;
	overflow: hidden;
	display: grid;
	align-items: center;
	justify-items: center;
	min-block-size: var(--st-ipb-min-height);
	padding: clamp(1.25rem, 2.4vw, 2rem);
	border-radius: var(--radius-corner, 8px);
	background-color: var(--color-bg-secondary, #f9fafb);
	background-image: var(--st-inner-page-banner-bg);
	background-position: center;
	background-size: cover;
	font-family: var(--font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
	isolation: isolate;
}

.st-inner-page-banner--h-sm {
	--st-ipb-min-height: clamp(14rem, 28vw, 18rem);
}

.st-inner-page-banner--h-lg {
	--st-ipb-min-height: clamp(18rem, 42vw, 30rem);
}

.st-inner-page-banner__overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		linear-gradient(
			180deg,
			color-mix(in srgb, var(--color-black, #000000) 42%, transparent) 0%,
			color-mix(in srgb, var(--color-black, #000000) 28%, transparent) 45%,
			color-mix(in srgb, var(--color-black, #000000) 48%, transparent) 100%
		),
		linear-gradient(
			120deg,
			color-mix(in srgb, var(--color-primary, #2563eb) 16%, transparent) 0%,
			transparent 55%
		);
}

.st-inner-page-banner__content {
	position: relative;
	z-index: 1;
	inline-size: min(100%, 58rem);
	color: var(--color-white, #ffffff);
	text-align: center;
	display: grid;
	gap: 0.7rem;
}

.st-inner-page-banner__title {
	margin: 0;
	font-family: var(--font-heading, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
	font-size: clamp(1.6rem, 4vw, 3rem);
	line-height: var(--font-line-height-heading, 1.25);
	color: inherit;
	text-wrap: balance;
	text-shadow: 0 0.25rem 1.2rem color-mix(in srgb, var(--color-black, #000000) 30%, transparent);
}

.st-inner-page-banner__subtitle {
	margin: 0;
	font-size: clamp(0.95rem, 1.7vw, 1.15rem);
	line-height: var(--font-line-height-body, 1.6);
	color: color-mix(in srgb, var(--color-white, #ffffff) 90%, transparent);
	text-wrap: pretty;
	max-inline-size: 50rem;
	justify-self: center;
}

.st-inner-page-banner--top-left,
.st-inner-page-banner--center-left,
.st-inner-page-banner--bottom-left {
	justify-items: start;
}

.st-inner-page-banner--top-right,
.st-inner-page-banner--center-right,
.st-inner-page-banner--bottom-right {
	justify-items: end;
}

.st-inner-page-banner--top-left,
.st-inner-page-banner--top-center,
.st-inner-page-banner--top-right {
	align-items: start;
}

.st-inner-page-banner--bottom-left,
.st-inner-page-banner--bottom-center,
.st-inner-page-banner--bottom-right {
	align-items: end;
}

.st-inner-page-banner--top-left .st-inner-page-banner__content,
.st-inner-page-banner--center-left .st-inner-page-banner__content,
.st-inner-page-banner--bottom-left .st-inner-page-banner__content {
	text-align: start;
}

.st-inner-page-banner--top-right .st-inner-page-banner__content,
.st-inner-page-banner--center-right .st-inner-page-banner__content,
.st-inner-page-banner--bottom-right .st-inner-page-banner__content {
	text-align: end;
}

.st-inner-page-banner--top-left .st-inner-page-banner__subtitle,
.st-inner-page-banner--center-left .st-inner-page-banner__subtitle,
.st-inner-page-banner--bottom-left .st-inner-page-banner__subtitle {
	justify-self: start;
}

.st-inner-page-banner--top-right .st-inner-page-banner__subtitle,
.st-inner-page-banner--center-right .st-inner-page-banner__subtitle,
.st-inner-page-banner--bottom-right .st-inner-page-banner__subtitle {
	justify-self: end;
}

@media (max-width: 640px) {
	.st-inner-page-banner {
		min-block-size: clamp(14rem, 52vw, 20rem);
	}

	.st-inner-page-banner__content {
		inline-size: min(100%, 36rem);
	}
}