/* ==========================================================================
   Shared alternating editorial feature
   ========================================================================== */

/**
 * Shared Jedi-Robe alternating image-and-copy feature.
 *
 * Provides the framed editorial presentation originally developed for the
 * About Us story sections while allowing the same component to be reused on
 * other dark editorial pages.
 *
 * Use:
 * - jr-split-feature jr-split-feature--text-left
 * - jr-split-feature jr-split-feature--text-right
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 * @since 1.0.0
 */


/* ==========================================================================
   Feature panel
   ========================================================================== */

body.jr-dark-commerce
    .shoptimizer-archive
	.jr-split-feature {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	margin: 0 0 clamp(1.5rem, 3vw, 3rem);
	padding: clamp(1.5rem, 3.5vw, 3.5rem);

	border: 1px solid rgba(111, 203, 255, 0.2);
	border-radius: 0;

	background:
		linear-gradient(
			135deg,
			rgba(255, 255, 255, 0.035),
			transparent 40%
		),
		radial-gradient(
			circle at 100% 0,
			rgba(111, 203, 255, 0.07),
			transparent 24rem
		),
		rgba(8, 14, 22, 0.5);

	box-shadow:
		0 1.5rem 3.5rem rgba(0, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.035);
}


/**
 * Reverse the atmospheric emphasis when the copy sits on the right.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
	.jr-split-feature.jr-split-feature--text-right {
	background:
		linear-gradient(
			225deg,
			rgba(255, 255, 255, 0.03),
			transparent 40%
		),
		radial-gradient(
			circle at 0 100%,
			rgba(45, 166, 83, 0.065),
			transparent 24rem
		),
		rgba(8, 14, 22, 0.5);
}


/* ==========================================================================
   Top interface rail
   ========================================================================== */

/**
 * Add the shared green technical rail to the feature panel.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
	.jr-split-feature::before {
	position: absolute;
	top: -1px;
	right: 0;
	left: 0;
	z-index: 2;

	height: 2px;

	background:
		linear-gradient(
			90deg,
			rgba(45, 166, 83, 0.12) 0%,
			rgba(69, 217, 107, 0.68) 18%,
			var(--jr-green-light) 50%,
			rgba(69, 217, 107, 0.68) 82%,
			rgba(45, 166, 83, 0.12) 100%
		);

	box-shadow:
		0 0 1.25rem rgba(45, 166, 83, 0.22);

	content: "";

	pointer-events: none;
}


/* ==========================================================================
   Orbital interface detail
   ========================================================================== */

/**
 * Add the restrained orbital background detail used by editorial features.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
	.jr-split-feature::after {
	position: absolute;
	z-index: 0;

	width: clamp(13rem, 24vw, 28rem);
	aspect-ratio: 1;

	border: 1px solid rgba(111, 203, 255, 0.075);
	border-radius: 50%;

	content: "";

	pointer-events: none;
}


body.jr-dark-commerce
	.jr-split-feature--text-left::after {
	top: -18%;
	right: -9%;
}


body.jr-dark-commerce
	.jr-split-feature--text-right::after {
	bottom: -18%;
	left: -9%;

	border-color: rgba(69, 217, 107, 0.075);
}


/* ==========================================================================
   Two-column layout
   ========================================================================== */

/**
 * Build an equal two-column editorial layout while retaining the original
 * Elementor column order.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
	.jr-split-feature
	> .elementor-container {
	position: relative;
	z-index: 1;

	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;

	width: 100%;
	max-width: none;

	margin: 0 auto;
}


body.jr-dark-commerce
	.jr-split-feature
	> .elementor-container
	> .elementor-column {
	width: 100%;
	min-width: 0;
}


body.jr-dark-commerce
	.jr-split-feature
	.elementor-widget-wrap {
	align-content: center;

	padding: 0;

	background: transparent;
}


/* ==========================================================================
   Editorial eyebrow
   ========================================================================== */

/**
 * Match the small editorial labels used by the About Us feature system.
 *
 * Examples:
 * Worldwide shipping
 * From us to you
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
	.jr-split-feature
	.elementor-widget-heading
	p.elementor-heading-title {
	margin: 0;

	color: var(--jr-green-light);

	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.15em;
	line-height: 1.3;

	text-transform: uppercase;
}


/* ==========================================================================
   Feature heading
   ========================================================================== */

body.jr-dark-commerce
	.jr-split-feature
	.elementor-widget-heading
	h2.elementor-heading-title {
	position: relative;

	max-width: 42rem;

	margin: 0;

	color: var(--jr-text);

	text-wrap: balance;

	text-shadow:
		0 0 1.25rem rgba(255, 255, 255, 0.025);
}


/* ==========================================================================
   Content rhythm
   ========================================================================== */
body.jr-dark-commerce
	.jr-split-feature
	.elementor-widget {
	margin-bottom: 0;
}

body.jr-dark-commerce
	.jr-split-feature
	.elementor-widget
	+ .elementor-widget {
	margin-top: 1rem;
}


body.jr-dark-commerce
	.jr-split-feature
	.elementor-widget-text-editor {
	max-width: 45rem;
}


body.jr-dark-commerce
	.jr-split-feature
	.elementor-widget-text-editor
	p {
	margin: 0;
}


body.jr-dark-commerce
	.jr-split-feature
	.elementor-widget-text-editor
	p
	+ p {
	margin-top: 1rem;
}


/* ==========================================================================
   Cinematic feature image
   ========================================================================== */

/**
 * Reuse the approved About Us image framing without changing the original
 * media or Elementor markup.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
	.jr-split-feature
	.elementor-widget-image {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	width: 100%;

	border: 1px solid rgba(152, 169, 192, 0.42);

	background: #0a0e15;

	box-shadow:
		0 2.4rem 5.5rem rgba(0, 0, 0, 0.42),
		0 0 2.5rem rgba(111, 203, 255, 0.045),
		0 0 2.5rem rgba(45, 166, 83, 0.035);
}


/**
 * Add the restrained cinematic colour wash.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
	.jr-split-feature
	.elementor-widget-image::before {
	position: absolute;
	z-index: 1;
	inset: 0;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.055),
			transparent 24%,
			transparent 72%,
			rgba(0, 0, 0, 0.32)
		),
		linear-gradient(
			90deg,
			rgba(111, 203, 255, 0.035),
			transparent 35%,
			transparent 65%,
			rgba(45, 166, 83, 0.035)
		);

	content: "";

	pointer-events: none;
}


/**
 * Add the thin internal technical image frame.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */
body.jr-dark-commerce
	.jr-split-feature
	.elementor-widget-image::after {
	position: absolute;
	z-index: 2;
	inset: 0.75rem;

	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 0.125rem;

	content: "";

	pointer-events: none;
}


body.jr-dark-commerce
	.jr-split-feature
	.elementor-widget-image
	img {
	display: block;

	width: 100%;
	height: auto;

	margin: 0;

	object-fit: cover;

	filter:
		saturate(1.08)
		contrast(1.055)
		brightness(0.97);

	transition:
		transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1),
		filter 350ms ease;
}


/* ==========================================================================
   Heading connector
   ========================================================================== */

/**
 * Connect the editorial heading toward the neighbouring image.
 *
 * Text-left features draw toward the right.
 * Text-right features draw toward the left.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */
@media (min-width: 993px) {

	body.jr-dark-commerce
		.jr-split-feature
		.elementor-widget-heading
		h2.elementor-heading-title {
		--jr-feature-connector-width:
			clamp(2.5rem, 4vw, 4.5rem);
	}


	/* Text left -> image right. */
	body.jr-dark-commerce
		.jr-split-feature--text-left
		.elementor-widget-heading
		h2.elementor-heading-title::after {
		position: absolute;
		top: 0.68em;
		right:
			calc(
				-1 *
				var(--jr-feature-connector-width)
			);
		left: auto;

		display: block;

		width: var(--jr-feature-connector-width);
		height: 1px;

		margin: 0;

		background:
			linear-gradient(
				90deg,
				rgba(255, 255, 255, 0.68),
				rgba(196, 213, 232, 0.38) 58%,
				transparent
			);

		box-shadow: none;

		content: "";

		filter:
			drop-shadow(
				0 0 0.35rem
				rgba(255, 255, 255, 0.12)
			);

		pointer-events: none;
	}


	/* Image left -> text right. */
	body.jr-dark-commerce
		.jr-split-feature--text-right
		.elementor-widget-heading
		h2.elementor-heading-title::before {
		position: absolute;
		top: 0.68em;
		right: auto;
		left:
			calc(
				-1 *
				var(--jr-feature-connector-width)
			);

		width: var(--jr-feature-connector-width);
		height: 1px;

		background:
			linear-gradient(
				270deg,
				rgba(255, 255, 255, 0.68),
				rgba(196, 213, 232, 0.38) 58%,
				transparent
			);

		content: "";

		filter:
			drop-shadow(
				0 0 0.35rem
				rgba(255, 255, 255, 0.12)
			);

		pointer-events: none;
	}


	/**
	 * Remove the generic shared H2 underline from right-hand headings because
	 * this variation uses the left-facing connector instead.
	 */
	body.jr-dark-commerce
		.jr-split-feature--text-right
		.elementor-widget-heading
		h2.elementor-heading-title::after {
		content: none;
	}
}


/* ==========================================================================
   Image hover
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

	body.jr-dark-commerce
		.jr-split-feature
		.elementor-widget-image:hover
		img {
		filter:
			saturate(1.12)
			contrast(1.07)
			brightness(1.01);

		transform: scale(1.035);
	}
}


/* ==========================================================================
   Tablet / mobile
   ========================================================================== */

/**
 * Collapse the feature to one column and keep copy before imagery regardless
 * of the alternating desktop direction.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */
@media (max-width: 992px) {

	body.jr-dark-commerce
		.jr-split-feature
		> .elementor-container {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}


	@supports selector(
		.elementor-column:has(.elementor-widget-image)
	) {

		body.jr-dark-commerce
			.jr-split-feature
			.elementor-column:has(
				.elementor-widget-heading
			) {
			order: 1;
		}


		body.jr-dark-commerce
			.jr-split-feature
			.elementor-column:has(
				.elementor-widget-image
			) {
			order: 2;
		}
	}


	body.jr-dark-commerce
		.jr-split-feature
		.elementor-widget-heading
		h2.elementor-heading-title::before,
	body.jr-dark-commerce
		.jr-split-feature
		.elementor-widget-heading
		h2.elementor-heading-title::after {
		content: none;
	}
}


@media (max-width: 620px) {

	body.jr-dark-commerce
		.jr-split-feature {
		margin-bottom: 1rem;

		padding: 1.25rem;

		border-radius: 0.375rem;
	}
}


/* ==========================================================================
   Reduced motion
   ========================================================================== */

/**
 * Respect the operating-system reduced-motion preference.
 *
 * @package Jedi_Theme
 * @subpackage Shared_Components
 */
@media (prefers-reduced-motion: reduce) {

	body.jr-dark-commerce
		.jr-split-feature
		.elementor-widget-image
		img {
		transition: none;
	}


	body.jr-dark-commerce
		.jr-split-feature
		.elementor-widget-image:hover
		img {
		transform: none;
	}
}