/* ==========================================================================
   KSS Hero Split
   Custom properties (--kss-hs-*) are set inline per-instance by Elementor
   controls; this file only ever reads them so multiple widget instances
   on one page never bleed into each other.
   ========================================================================== */

.kss-hero-split {
	--kss-hs-gap: 60px;
	--kss-hs-stagger: 120ms;

	display: flex;
	align-items: center;
	gap: var(--kss-hs-gap);
	width: 100%;
}

.kss-hero-split.kss-hs-image-first {
	flex-direction: row;
}

.kss-hs-content {
	flex: 1 1 0;
	min-width: 0;
}

.kss-hs-image {
	flex: 1 1 0;
	min-width: 0;
}

.kss-hs-image img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform 0.45s ease, box-shadow 0.45s ease;
}

/* Custom / full-screen height support. When a min-height is set on the
   wrapper, stretch the image column to match it so the photo fills the
   section instead of floating in whitespace. */
.kss-hero-split[style*="min-height"] .kss-hs-image:not([style*="height"]) {
	align-self: stretch;
}
.kss-hero-split[style*="min-height"] .kss-hs-image:not([style*="height"]) img {
	height: 100%;
}

.kss-hs-full-height {
	min-height: 100vh;
}

/* Image hover effects — toggled on/off via the wrapper class the widget
   only prints when "Hover Effect" isn't set to None. */
.kss-hs-img-hover-zoom .kss-hs-image {
	overflow: hidden;
	border-radius: inherit;
}
.kss-hs-img-hover-zoom .kss-hs-image img:hover {
	transform: scale(1.05);
}
.kss-hs-img-hover-lift .kss-hs-image img:hover {
	transform: translateY(-8px);
}

.kss-hs-eyebrow {
	margin: 0;
	text-transform: uppercase;
}

.kss-hs-heading {
	margin: 0;
}

.kss-hs-subheading,
.kss-hs-description {
	margin: 0;
}

.kss-hs-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}

.kss-hs-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.kss-hs-btn-primary {
	border-radius: 4px;
}

.kss-hs-btn-secondary {
	background: transparent;
	padding: 0;
}

.kss-hs-btn-icon {
	display: inline-flex;
	align-items: center;
	transition: transform 0.25s ease;
}

.kss-hs-btn-icon svg,
.kss-hs-btn-icon i {
	width: 1em;
	height: 1em;
	font-size: 0.9em;
}

/* Button hover animation — only applied when the "Button Hover Animation"
   switcher is on, so it can be fully disabled per instance. */
.kss-hs-btn-hover-on .kss-hs-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.35);
}
.kss-hs-btn-hover-on .kss-hs-btn-primary:hover .kss-hs-btn-icon {
	transform: translateX(4px);
}
.kss-hs-btn-hover-on .kss-hs-btn-secondary:hover .kss-hs-btn-icon {
	transform: translateX(4px);
}

/* ==========================================================================
   Entrance animation
   Elements start hidden only when JS + IntersectionObserver confirm the
   browser can actually run the animation (see kss-hero-split.js). The
   ".kss-hs-in-view" class released per-item creates the stagger via
   transition-delay, computed from --kss-hs-stagger * item index.
   ========================================================================== */

.kss-hs-animate.kss-hs-js-ready .kss-hs-item {
	opacity: 0;
	transition: opacity 0.6s ease, transform 0.6s ease;
	transition-delay: calc(var(--kss-hs-item-index, 0) * var(--kss-hs-stagger));
}

.kss-hs-animate.kss-hs-anim-fade-up.kss-hs-js-ready .kss-hs-item {
	transform: translateY(28px);
}
.kss-hs-animate.kss-hs-anim-zoom-in.kss-hs-js-ready .kss-hs-item {
	transform: scale(0.92);
}
.kss-hs-animate.kss-hs-anim-fade-in.kss-hs-js-ready .kss-hs-item {
	transform: none;
}

.kss-hs-animate .kss-hs-item.kss-hs-in-view {
	opacity: 1;
	transform: none;
}

/* Respect users who've asked for less motion. */
@media (prefers-reduced-motion: reduce) {
	.kss-hs-animate .kss-hs-item {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
	.kss-hs-btn,
	.kss-hs-btn-icon,
	.kss-hs-image img {
		transition: none !important;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.kss-hero-split {
		--kss-hs-gap: 40px;
	}
}

@media (max-width: 767px) {
	.kss-hero-split,
	.kss-hero-split.kss-hs-image-first {
		flex-direction: column;
		--kss-hs-gap: 32px;
	}

	.kss-hero-split:not(.kss-hs-image-first) .kss-hs-image {
		order: 2;
	}
	.kss-hero-split:not(.kss-hs-image-first) .kss-hs-content {
		order: 1;
	}
	.kss-hero-split.kss-hs-image-first .kss-hs-image {
		order: 1;
	}
	.kss-hero-split.kss-hs-image-first .kss-hs-content {
		order: 2;
	}

	.kss-hs-content,
	.kss-hs-image {
		width: 100%;
		max-width: 100% !important;
		flex-basis: auto !important;
	}

	.kss-hs-buttons {
		width: 100%;
	}

	.kss-hs-btn-primary {
		width: 100%;
		justify-content: center;
	}

	.kss-hs-full-height {
		min-height: 100svh;
	}
}