/* =========================================================
   Hero section with background image
   Desktop        2560 x 1350  (1.896:1)
   Tablet/mobile  1280 x 1600  (4:5 portrait)
   ========================================================= */

.hero-bg {
	position: relative;
	padding: 0;
	aspect-ratio: 2560 / 1350;
	background-image: url("/wp-content/uploads/2026/09/pheim-kar-prakt̩-xxnlin̒-k̄hxng-khuṇ-d̂wy-brikar-xxkbaeb-websit̒-doy-p̄hu-cheiywchay-k̄hxng-rea-05.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
}

/* Readability overlay — delete this rule if the image is dark enough */
.hero-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0) 75%);
	pointer-events: none;
}

.hero-bg > .l-section-h {
	position: relative;
	z-index: 2;
	height: 100%;
}

.hero-bg .g-cols,
.hero-bg .vc_column_container,
.hero-bg .vc_column-inner,
.hero-bg .vc_column-inner > .wpb_wrapper {
	height: 100%;
}

.hero-bg .vc_column-inner > .wpb_wrapper {
	display: flex;
	align-items: center;
}

/* --- Tablets and below (Impreza: max-width 1024px) -------- */
@media (max-width: 1024px) {
	.hero-bg {
		aspect-ratio: 4 / 5;
		background-image: url("/wp-content/uploads/2026/09/pheim-kar-prakt̩-xxnlin̒-k̄hxng-khuṇ-d̂wy-brikar-xxkbaeb-websit̒-doy-p̄hu-cheiywchay-k̄hxng-rea-mobile-05.webp");
		background-position: 50% 30%;
	}

	/* Text sits low, so darken the bottom instead of the top */
	.hero-bg::before {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 45%, rgba(0, 0, 0, 0) 80%);
	}

	.hero-bg .vc_column-inner > .wpb_wrapper {
		align-items: flex-end;
	}

	.hero-inner-wrapper {
		padding-bottom: 3rem;
	}
}

/* --- Content inline padding ------------------------------- */
@media (min-width: 601px) and (max-width: 1380px) {
	.hero-inner-wrapper {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
}

@media (max-width: 600px) {
	.hero-inner-wrapper {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	.hero-inner-wrapper {
		padding-bottom: 2rem;
	}
}