/* ============================================================
   Omega Hero Diagonal — base styles
   ============================================================ */

.omega-hero-diagonal {
	position: relative;
	overflow: hidden;
	direction: rtl;
	isolation: isolate;
	width: 100%;
	min-height: 520px;

	/* Default values — overridden per breakpoint by Elementor selectors */
	--ohd-img-w: 55%;
	--ohd-top-off: -8%;
	--ohd-bot-off: 8%;
	--ohd-mob-slant: 0px;     /* diagonal angle */
	--ohd-mob-overlap: 0px;   /* how much panel rises into image (independent of slant) */
	--ohd-radius: 0px;        /* diagonal corner radius */
	--ohd-out-radius: 0px;    /* outer widget corner radius */

	border-radius: var(--ohd-out-radius);
}

/* ------------------------------------------------------------
   Image layer
   ------------------------------------------------------------ */
.omega-hero-diagonal__image {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: cover;
	/* Using longhand props so Elementor's X/Y sliders override cleanly */
	background-position-x: 50%;
	background-position-y: 50%;
	z-index: 1;
	transform-origin: center center;
	will-change: transform;
}

.omega-hero-diagonal__image-overlay {
	position: absolute;
	inset: 0;
	background: transparent;
	pointer-events: none;
}

/* ------------------------------------------------------------
   Color panel (the diagonal slab)
   ------------------------------------------------------------ */
.omega-hero-diagonal__panel {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(135deg, #0050b3 0%, #1e6fd9 100%);
	pointer-events: none;
}

/* --- Image LEFT (default for Manpower hero) --------------------
   Panel covers from somewhere in the middle to the right edge,
   with a diagonal left edge. Curves at diagonal-edge intersections
   are approximated with 3-point polygon segments per corner.     */
.omega-hero-diagonal--image-left .omega-hero-diagonal__panel {
	clip-path: polygon(
		/* top edge starts after the top-corner curve */
		calc(var(--ohd-img-w) + var(--ohd-top-off) + var(--ohd-radius)) 0,
		100% 0,
		100% 100%,
		/* bottom edge ends before the bottom-corner curve */
		calc(var(--ohd-img-w) + var(--ohd-bot-off) + var(--ohd-radius)) 100%,
		/* bottom corner curve (3 points approximation) */
		calc(var(--ohd-img-w) + var(--ohd-bot-off) + var(--ohd-radius) * 0.45) calc(100% - var(--ohd-radius) * 0.1),
		calc(var(--ohd-img-w) + var(--ohd-bot-off) + var(--ohd-radius) * 0.1) calc(100% - var(--ohd-radius) * 0.45),
		calc(var(--ohd-img-w) + var(--ohd-bot-off)) calc(100% - var(--ohd-radius)),
		/* diagonal line up to top-corner curve */
		calc(var(--ohd-img-w) + var(--ohd-top-off)) calc(0% + var(--ohd-radius)),
		/* top corner curve (3 points approximation) */
		calc(var(--ohd-img-w) + var(--ohd-top-off) + var(--ohd-radius) * 0.1) calc(0% + var(--ohd-radius) * 0.45),
		calc(var(--ohd-img-w) + var(--ohd-top-off) + var(--ohd-radius) * 0.45) calc(0% + var(--ohd-radius) * 0.1)
	);
}

/* --- Image RIGHT — mirrored ------------------------------------ */
.omega-hero-diagonal--image-right .omega-hero-diagonal__panel {
	clip-path: polygon(
		0 0,
		calc(100% - var(--ohd-img-w) - var(--ohd-top-off) - var(--ohd-radius)) 0,
		/* top-right corner curve */
		calc(100% - var(--ohd-img-w) - var(--ohd-top-off) - var(--ohd-radius) * 0.45) calc(0% + var(--ohd-radius) * 0.1),
		calc(100% - var(--ohd-img-w) - var(--ohd-top-off) - var(--ohd-radius) * 0.1) calc(0% + var(--ohd-radius) * 0.45),
		calc(100% - var(--ohd-img-w) - var(--ohd-top-off)) calc(0% + var(--ohd-radius)),
		/* diagonal */
		calc(100% - var(--ohd-img-w) - var(--ohd-bot-off)) calc(100% - var(--ohd-radius)),
		/* bottom-right corner curve */
		calc(100% - var(--ohd-img-w) - var(--ohd-bot-off) - var(--ohd-radius) * 0.1) calc(100% - var(--ohd-radius) * 0.45),
		calc(100% - var(--ohd-img-w) - var(--ohd-bot-off) - var(--ohd-radius) * 0.45) calc(100% - var(--ohd-radius) * 0.1),
		calc(100% - var(--ohd-img-w) - var(--ohd-bot-off) - var(--ohd-radius)) 100%,
		0 100%
	);
}

/* ------------------------------------------------------------
   Content wrap — FULL width of the widget.
   Content box is positioned via flex alignment, and its actual
   width is controlled by content_max_width slider (Elementor control).
   This means text can be as wide as the user wants — even crossing
   into the image area if needed.
   ------------------------------------------------------------ */
.omega-hero-diagonal__content-wrap {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: inherit;
	width: 100%;
	box-sizing: border-box;
	padding-inline: clamp(20px, 4vw, 80px);
}

/* Image on LEFT → content on the right side (RTL: align-items flex-start = right) */
.omega-hero-diagonal--image-left .omega-hero-diagonal__content-wrap {
	align-items: flex-start;
}

/* Image on RIGHT → content on the left side */
.omega-hero-diagonal--image-right .omega-hero-diagonal__content-wrap {
	align-items: flex-end;
}

.omega-hero-diagonal__content {
	max-width: 480px;
	width: 100% !important;
	min-width: 0;
	text-align: right;
	padding: 40px;
	box-sizing: border-box;
	display: block !important;
	flex-shrink: 0; /* don't allow shrinking in the flex column */
	--omega-btn-self-align: right;
}

/* Title + description: aggressively forced to behave like normal paragraphs.
   The !important + descendant rules guard against accessibility/animation
   plugins that might wrap words in block-level spans. */
.omega-hero-diagonal__title,
.omega-hero-diagonal__desc {
	display: block !important;
	width: auto !important;
	min-width: 0;
	max-width: 100%;
	white-space: normal !important;
	word-spacing: normal !important;
	word-break: normal !important;
	overflow-wrap: break-word;
	column-count: 1 !important;
	column-width: auto !important;
	writing-mode: horizontal-tb !important;
	text-orientation: mixed !important;
}

/* Force every descendant (spans, em, strong, etc.) to be inline so text flows */
.omega-hero-diagonal__title > *,
.omega-hero-diagonal__desc > *,
.omega-hero-diagonal__title span,
.omega-hero-diagonal__desc span {
	display: inline !important;
	float: none !important;
	width: auto !important;
}

/* ------------------------------------------------------------
   Title + Description typography
   ------------------------------------------------------------ */
.omega-hero-diagonal__title {
	margin: 0 0 24px;
	color: #ffffff;
	font-weight: 500;
	line-height: 1.25;
	font-size: 40px;
}

.omega-hero-diagonal__desc {
	margin: 0 0 32px;
	color: rgba(255, 255, 255, 0.92);
	line-height: 1.7;
	font-size: 16px;
}

/* Support for inline HTML spans inside the title (light + bold) */
.omega-hero-diagonal__title .light { font-weight: 300; }
.omega-hero-diagonal__title .bold  { font-weight: 700; }

/* ============================================================
   Responsive line break classes — use inside the title/desc:
   <br class="mobile-only">   — visible only on mobile (≤767px)
   <br class="tablet-only">   — visible only on tablet (768-1024px)
   <br class="desktop-only">  — visible only on desktop (≥1025px)
   <br class="tablet-down">   — visible on tablet + mobile (≤1024px)
   <br class="tablet-up">     — visible on tablet + desktop (≥768px)
   <br class="desktop-down">  — visible on all screens (≤any) - same as <br>
   ============================================================ */

/* mobile-only: visible ≤767px only */
.omega-hero-diagonal br.mobile-only { display: none; }
@media (max-width: 767px) {
	.omega-hero-diagonal br.mobile-only { display: inline; }
}

/* tablet-only: visible 768-1024px only */
.omega-hero-diagonal br.tablet-only { display: none; }
@media (min-width: 768px) and (max-width: 1024px) {
	.omega-hero-diagonal br.tablet-only { display: inline; }
}

/* desktop-only: visible ≥1025px only */
.omega-hero-diagonal br.desktop-only { display: none; }
@media (min-width: 1025px) {
	.omega-hero-diagonal br.desktop-only { display: inline; }
}

/* tablet-down: visible on tablet + mobile (≤1024px) */
.omega-hero-diagonal br.tablet-down { display: inline; }
@media (min-width: 1025px) {
	.omega-hero-diagonal br.tablet-down { display: none; }
}

/* tablet-up: visible on tablet + desktop (≥768px) */
.omega-hero-diagonal br.tablet-up { display: none; }
@media (min-width: 768px) {
	.omega-hero-diagonal br.tablet-up { display: inline; }
}

/* ------------------------------------------------------------
   Button
   ------------------------------------------------------------ */
.omega-hero-diagonal__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 14px 32px;
	border: 2px solid #ffffff;
	border-radius: 50px;
	background-color: transparent;
	color: #ffffff;
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease,
				border-color 0.25s ease, transform 0.25s ease;
	-webkit-appearance: none;
}

.omega-hero-diagonal__btn:hover,
.omega-hero-diagonal__btn:focus {
	background-color: #ffffff;
	color: #0050b3;
	outline: none;
}

.omega-hero-diagonal__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 0;
	transition: transform 0.25s ease;
}

.omega-hero-diagonal__btn-icon svg {
	width: 14px;
	height: 14px;
	display: block;
}

.omega-hero-diagonal__btn:hover .omega-hero-diagonal__btn-icon {
	transform: translateX(-4px);
}

/* ============================================================
   Responsive — Tablet
   The CSS vars --ohd-img-w / --ohd-top-off / --ohd-bot-off are
   updated automatically per breakpoint by Elementor responsive
   selectors. The clip-path equation stays the same.
   ============================================================ */

/* ============================================================
   Responsive — Mobile
   ============================================================ */
@media (max-width: 767px) {

	/* ---------- STACKED mode (image on top, panel below) -------- */
	.omega-hero-diagonal--mobile-stacked {
		min-height: 0;
		display: block;
		position: relative;
	}

	/* Image stays as a FULL rectangle (no clip-path).
	   This lets the image "extend behind" the panel, so a semi-transparent
	   panel reveals the image through it — creating a fade effect. */
	.omega-hero-diagonal--mobile-stacked .omega-hero-diagonal__image {
		position: relative;
		inset: auto;
		width: 100%;
		height: var(--ohd-mob-img-h, 260px);
		z-index: 1;
	}

	/* Panel is absolutely positioned — fills from below image to section bottom.
	   Position formula: panel_top = image_height - slant - overlap.
	   This means at overlap=0, the panel's diagonal edge LANDS exactly at
	   the image's bottom — no white triangle gap on either side.
	   Increasing overlap pushes the diagonal UP into the image area. */
	.omega-hero-diagonal--mobile-stacked .omega-hero-diagonal__panel {
		position: absolute;
		inset: auto;
		top: calc(var(--ohd-mob-img-h, 260px) - var(--ohd-mob-slant) - var(--ohd-mob-overlap));
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		min-height: 0;
		margin: 0;
		z-index: 2;
	}

	/* Right edge is higher → diagonal slants down from right to left */
	.omega-hero-diagonal--mobile-stacked.omega-hero-diagonal--slant-right-high .omega-hero-diagonal__panel {
		clip-path: polygon(
			0 var(--ohd-mob-slant),   /* top-left LOW */
			100% 0,                   /* top-right HIGH */
			100% 100%,
			0 100%
		);
	}

	/* Left edge is higher → diagonal slants down from left to right */
	.omega-hero-diagonal--mobile-stacked.omega-hero-diagonal--slant-left-high .omega-hero-diagonal__panel {
		clip-path: polygon(
			0 0,                      /* top-left HIGH */
			100% var(--ohd-mob-slant),/* top-right LOW */
			100% 100%,
			0 100%
		);
	}

	/* Content wrap is RELATIVE (in flow) — it determines the section's height.
	   Section grows as content grows. Panel (absolute) fills behind it. */
	.omega-hero-diagonal--mobile-stacked .omega-hero-diagonal__content-wrap {
		position: relative;
		inset: auto;
		width: 100% !important;
		margin: 0 !important;
		padding: 60px 24px 60px;
		z-index: 3;
		box-sizing: border-box;
	}

	.omega-hero-diagonal--mobile-stacked .omega-hero-diagonal__content {
		max-width: 100%;
		padding: 32px 24px 40px;
		text-align: right;
	}

	/* Typography scale-down on mobile */
	.omega-hero-diagonal__title { font-size: 26px; }
	.omega-hero-diagonal__desc  { font-size: 15px; }
	.omega-hero-diagonal__btn   { padding: 12px 24px; font-size: 15px; }
}

/* ============================================================
   Button self-alignment within text-aligned containers
   ============================================================ */
.omega-hero-diagonal__content[style*="text-align: center"] .omega-hero-diagonal__btn,
.omega-hero-diagonal__content { /* RTL fallback below */ }

/* When parent is text-aligned, the inline-flex button picks it up
   via text-align, so no extra rule needed. */