/* ===== Hero background — mobile: image and video alternate in a loop, video fades in over the image ===== */
@keyframes hero-video-loop {
	0%   { opacity: 0; }
	10%  { opacity: 1; }
	45%  { opacity: 1; }
	55%  { opacity: 0; }
	100% { opacity: 0; }
}

@media (max-width: 1024px) {
	/* Fallback layer (visible while the video loads / during the image phase of the loop) */
	.elementor-14 .elementor-element.elementor-element-51a6953 {
		min-height: 100vh;
		min-height: 100svh;
		min-height: 100dvh;
		margin-top: 0;
		margin-bottom: 0;
		border-radius: 0;
		background-image: url('../images/hero-welcome-banner.jpg');
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}

	.elementor-14 .elementor-element.elementor-element-51a6953 .elementor-background-video-container,
	.elementor-14 .elementor-element.elementor-element-51a6953 .elementor-background-video-hosted {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
	}

	/* Slight zoom so the video fully covers the hero section content */
	.elementor-14 .elementor-element.elementor-element-51a6953 .elementor-background-video-hosted {
		transform: scale(1.2);
		transform-origin: center center;
	}

	/* Video stays hidden until it can play, then the image/video loop starts */
	.elementor-14 .elementor-element.elementor-element-51a6953 .elementor-background-video-hosted {
		opacity: 0;
		transition: opacity 0.8s ease;
	}

	.elementor-14 .elementor-element.elementor-element-51a6953.is-video-ready .elementor-background-video-hosted {
		opacity: 1;
		animation: hero-video-loop 9s ease-in-out infinite;
	}
}

/* ===== Hero content — phones: ONE glass panel, no per-card borders ===== */
@media (max-width: 767px) {
	/* Fuse the two content cards (d16a0cb + 8cd7d31) into one continuous panel:
	   remove the flex gap between them so there is no visible seam/separate blocks. */
	.elementor-14 .elementor-element.elementor-element-51a6953 {
		--gap: 0px 0px;
		--row-gap: 0px;
		--column-gap: 0px;
	}

	/* Single background treatment: keep the hero photo clearly visible but lay a
	   light cinematic veil over the whole section. The veil is strongest at the
	   very top/bottom edges (to seat the text) while the centre stays airy, so
	   the baked-in gold typography + stripes still read as a beautiful texture. */
	.elementor-14 .elementor-element.elementor-element-51a6953:not(.elementor-motion-effects-element-type-background),
	.elementor-14 .elementor-element.elementor-element-51a6953 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background:
			linear-gradient(
				180deg,
				rgba(18, 24, 32, 0.3) 0%,
				rgba(18, 24, 32, 0.1) 42%,
				rgba(18, 24, 32, 0.07) 58%,
				rgba(18, 24, 32, 0.34) 100%
			),
			url('../images/hero-welcome-banner.jpg') center center / cover no-repeat;
	}

	/* Light veil over the video phase too, just enough to keep text readable
	   without washing out the footage. */
	.elementor-14 .elementor-element.elementor-element-51a6953 .elementor-background-video-container::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			180deg,
			rgba(18, 24, 32, 0.32) 0%,
			rgba(18, 24, 32, 0.08) 50%,
			rgba(18, 24, 32, 0.36) 100%
		);
		pointer-events: none;
	}

	/* ONE glass panel: identical fill + blur on both cards, NO border, fused
	   radii (top on the first card, bottom on the second) so they read as a
	   single panel rather than two floating blocks. */
	.elementor-14 .elementor-element.elementor-element-d16a0cb,
	.elementor-14 .elementor-element.elementor-element-8cd7d31 {
		overflow: hidden;
		min-width: 0;
		background:
			linear-gradient(
				155deg,
				rgba(255, 255, 255, 0.14) 0%,
				rgba(255, 255, 255, 0.06) 45%,
				rgba(18, 24, 32, 0.78) 100%
			);
		-webkit-backdrop-filter: blur(16px) saturate(150%);
		backdrop-filter: blur(16px) saturate(150%);
		box-shadow:
			0 18px 44px rgba(2, 12, 27, 0.4),
			inset 0 1px 0 rgba(255, 255, 255, 0.12);
	}

	/* Headline + buttons: top of the panel */
	.elementor-14 .elementor-element.elementor-element-d16a0cb {
		border-radius: 20px 20px 0 0;
		padding: 24px 16px 12px;
	}

	/* Body copy + stats: bottom of the panel */
	.elementor-14 .elementor-element.elementor-element-8cd7d31 {
		border-radius: 0 0 20px 20px;
		gap: 12px;
		padding: 12px 16px 14px;
	}

	/* Keep the hero text inside the viewport */
	.elementor-14 .elementor-element.elementor-element-9d3fbdf {
		min-width: 0;
	}

	/* Both CTAs stay on a single line inside the panel */
	.elementor-14 .elementor-element.elementor-element-2c9b67e {
		flex-wrap: nowrap !important;
		gap: 10px !important;
	}

	.elementor-14
		.elementor-element.elementor-element-2c9b67e
		> .elementor-widget {
		min-width: 0;
	}

	.elementor-14
		.elementor-element.elementor-element-2c9b67e
		.ekit_creative_button {
		white-space: nowrap;
		max-width: 100%;
		padding: 12px clamp(8px, 2.8vw, 14px);
		font-size: clamp(10px, 3.2vw, 13px);
		line-height: 1;
	}

	/* CTA hierarchy on mobile:
	   - "Join our church" stays the single filled primary (accent).
	   - "Get started" is de-emphasised to a quiet ghost link + trailing arrow. */
	.elementor-14
		.elementor-element.elementor-element-f17b835
		.ekit_creative_button {
		background-color: transparent;
		border-color: rgba(255, 255, 255, 0.45);
		color: rgba(255, 255, 255, 0.9);
	}
	.elementor-14
		.elementor-element.elementor-element-f17b835
		.ekit_creative_button:hover {
		border-color: var(--e-global-color-white);
		color: var(--e-global-color-white);
		background-color: rgba(255, 255, 255, 0.08);
	}

	/* Visible, accessible focus states for both CTAs */
	.elementor-14
		.elementor-element.elementor-element-2c9b67e
		.ekit_creative_button:focus-visible {
		outline: 2px solid var(--e-global-color-white);
		outline-offset: 2px;
	}

	/* Stats: thin divider above the row, then vertical hairlines between items.
	   Three items side by side — bold numbers, muted labels, no per-item cards. */
	.elementor-14 .elementor-element.elementor-element-b70d802 {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 0;
		min-width: 0;
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid rgba(255, 255, 255, 0.18);
	}

	.elementor-14
		.elementor-element.elementor-element-b70d802
		.hero-counter-item {
		flex: 1 1 0;
		min-width: 0;
		padding: 0 10px;
		text-align: center;
	}

	/* vertical hairline between the stats (not before the first) */
	.elementor-14
		.elementor-element.elementor-element-b70d802
		.hero-counter-item:not(:first-child) {
		border-left: 1px solid rgba(255, 255, 255, 0.18);
	}

	.elementor-14
		.elementor-element.elementor-element-b70d802
		.elementor-counter-title {
		font-size: 11px;
		white-space: normal;
		color: rgba(255, 255, 255, 0.7);
	}

	.elementor-14
		.elementor-element.elementor-element-b70d802
		.elementor-counter-number-wrapper {
		font-size: 22px;
		font-weight: 700;
		color: var(--e-global-color-white);
	}
}

/* ===== Hero content — mobile/tablet only: center the text blocks vertically ===== */
@media (max-width: 1024px) {
	.elementor-14 .elementor-element.elementor-element-51a6953 {
		--align-items: center;
		--align-content: center;
	}
}

/* ===== Hero background — desktop: image only, no video ===== */
@media (min-width: 1025px) {
	.elementor-14 .elementor-element.elementor-element-51a6953 {
		background-image: url('../images/hero-welcome-banner.jpg');
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}

	.elementor-14 .elementor-element.elementor-element-51a6953 .elementor-background-video-container {
		display: none !important;
	}
}