/* =========================================================================
 * Sabeny Hero
 *
 * Desktop layout:
 *   ┌──────────────────────────────────────────────────────────────┐
 *   │ [green wiggly mask]  [───── image fills viewport ──────────] │
 *   │                                                              │
 *   │   [content sits over the mask, anchored to the left]         │
 *   └──────────────────────────────────────────────────────────────┘
 *
 * Mobile (<=900px):
 *   ┌────────────────┐
 *   │  green block   │
 *   │  + content     │
 *   ├────────────────┤
 *   │  image strip   │
 *   └────────────────┘
 *
 * The section breaks out of any Elementor boxed container above so the
 * image bleeds to the right edge of the viewport.
 * ========================================================================= */

.sbn-hero {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	overflow: hidden;
	color: #fff;
	background: #14888D;     /* fallback teal until image loads */
}

/* ----- Right-side image ------------------------------------------------ */
.sbn-hero__image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	z-index: 0;
}

/* ----- Wiggly green mask ----------------------------------------------- */
.sbn-hero__mask {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 58vw;
	max-width: 1040px;
	color: #14888D;          /* drives the SVG `currentColor` fill */
	z-index: 1;
	pointer-events: none;
}
.sbn-hero__mask svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Custom mask path — when the admin supplies an uploaded SVG, render it
 * via CSS mask-image. The teal fill comes from `background`; the SVG
 * supplies only the silhouette.
 *
 * `mask-size: 100% 100%` doesn't always force-stretch SVGs that have an
 * intrinsic aspect-ratio + a preserveAspectRatio attribute baked in —
 * the SVG can letterbox inside the mask box, leaving the photo visible
 * top/bottom. Over-sizing to 105% with a centered position pushes the
 * shape past every edge so it always fills the section.
 *
 * If your SVG includes whitespace padding inside its viewBox, increase
 * the over-bleed to 110% or trim the SVG's viewBox to hug the shape. */
.sbn-hero__mask--custom {
	background: #12888E;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-size: 105% 105%;
	        mask-size: 105% 105%;
	-webkit-mask-position: center;
	        mask-position: center;
}

/* ----- Content container ----------------------------------------------
 *
 * The wrapper centres a max-width box that matches the site's content
 * container (Elementor's default is ~1240px; tune below to match your
 * header logo's left edge). The content sits inside that wrapper and
 * left-aligns naturally with the header — so when the browser gets
 * wider, only the green mask behind it extends further left, never the
 * text.
 *
 * If the header logo doesn't line up perfectly, change --sbn-hero-max
 * here to match your Elementor "Content Width" setting. */
.sbn-hero { --sbn-hero-max: 1240px; }

.sbn-hero__wrapper {
	position: relative;
	z-index: 2;
	max-width: var(--sbn-hero-max);
	margin: 0 auto;
	padding-left: clamp(20px, 4vw, 40px);
	padding-right: clamp(20px, 4vw, 40px);
	width: 100%;
}

.sbn-hero__content {
	max-width: 560px;
	padding: clamp(60px, 8vw, 110px) 0 clamp(48px, 6vw, 80px) 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.sbn-hero__chip {
	display: inline-block;
	align-self: flex-start;
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 600;
}

.sbn-hero__title {
	font-family: "Tuckers", "Brush Script MT", cursive !important;
	font-size: clamp(40px, 6.5vw, 86px) !important;
	font-weight: 400 !important;
	line-height: 1.05 !important;
	color: #FFF5E0 !important;        /* brand cream */
	margin: 0 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.sbn-hero__sub {
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.5;
	color: #fff;
	opacity: .95;
	max-width: 460px;
	margin: 0;
}

/* ----- CTA buttons ----------------------------------------------------- */
.sbn-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 6px;
}
.sbn-hero__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none !important;
	transition: transform .15s ease, background-color .15s ease;
	white-space: nowrap;
}
.sbn-hero__btn--primary {
	background: #FFF8E6;
	color: #14888D !important;
}
.sbn-hero__btn--primary:hover {
	background: #fff;
	transform: translateY(-1px);
}
.sbn-hero__btn--ghost {
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.85);
	color: #fff !important;
}
.sbn-hero__btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
}

/* ----- Stats row ------------------------------------------------------- */
.sbn-hero__stats {
	display: flex;
	gap: clamp(20px, 4vw, 52px);
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.sbn-hero__stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.sbn-hero__stat strong {
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 700;
	color: #fff;
	line-height: 1;
}
.sbn-hero__stat span {
	font-size: 13px;
	color: #fff;
	opacity: .85;
}

/* ----- Min-height set per-breakpoint ----------------------------------- */
.sbn-hero { min-height: clamp(480px, 60vw, 720px); }

/* =========================================================================
 * Mobile / tablet — drop the wiggle, stack image below content.
 * ===================================================================== */
@media (max-width: 900px) {
	.sbn-hero {
		display: flex;
		flex-direction: column;
		min-height: 0;
		background: #12888E;       /* flat green band behind the wrapper */
	}
	.sbn-hero__mask {
		display: none;
	}
	.sbn-hero__image {
		position: relative;
		order: 2;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
	.sbn-hero__wrapper {
		order: 1;
		padding-left: 24px;
		padding-right: 24px;
	}
	.sbn-hero__content {
		max-width: 100%;
		padding: 40px 0 44px;
	}
}

/* ----- Narrow phones --------------------------------------------------- */
@media (max-width: 480px) {
	.sbn-hero__wrapper { padding-left: 20px; padding-right: 20px; }
	.sbn-hero__content { gap: 14px; padding: 32px 0 36px; }
	.sbn-hero__title   { font-size: clamp(34px, 12vw, 56px) !important; }
	.sbn-hero__btn     { padding: 12px 22px; font-size: 15px; }
	.sbn-hero__stats   { gap: 16px; padding-top: 16px; margin-top: 16px; flex-wrap: wrap; }
	.sbn-hero__image   { aspect-ratio: 4 / 3; }
}