/**
 * Wisdmlabs Elementor Widgets - Journey Showcase frontend styles.
 * BEM naming.
 *
 * Layered stage layout (per Figma): a single, fixed-size/position content card
 * sits on the left; a single, taller featured-image box sits on the right and
 * overlaps the card's right edge by --wew-image-overlap, so there is never a
 * visible gap between them. Neither box itself ever moves or resizes when the
 * active item changes - only their *inner* per-item content does:
 *   - the card's title/description/button crossfade with a subtle opacity-only
 *     transition (--wew-duration/--wew-easing)
 *   - the image switches instantly (no transition at all, by design)
 *
 * Scroll navigation is native CSS `position: sticky` (see .__track/.__pin
 * below) - the frontend script only computes which item is active from the
 * live scroll position, it never toggles layout-affecting properties here.
 */

.wew-journey-showcase,
.wew-journey-showcase *,
.wew-journey-showcase *::before,
.wew-journey-showcase *::after {
	box-sizing: border-box;
}

.wew-journey-showcase {
	--wew-duration: 300ms;
	--wew-easing: cubic-bezier(0.22, 1, 0.36, 1);
	--wew-progress: 0%;
	--wew-scroll-distance: 100vh;
	--wew-panel-width: 48%;
	--wew-image-overlap: 50px;

	display: block;
}

/* Scroll track: a tall element the pin wrapper "scrolls through". Height is
   only applied in pinning mode - see the --pinning modifier below. Outside of
   pinning mode this stays a normal, auto-height block. */
.wew-journey-showcase__track {
	position: relative;
}

.wew-journey-showcase--pinning .wew-journey-showcase__track {
	height: calc(var(--wew-scroll-distance) * var(--wew-item-count, 1));
}

/* Pin wrapper: holds the header/stage/timeline. Sticks in place while the
   (taller) track scrolls underneath it in pinning mode; a normal in-flow
   block otherwise. */
.wew-journey-showcase__pin {
	position: static;
	top: 0;
	background-color: #f6f6f6;
	border: 2px solid rgba(87, 82, 80, 0.1);
	border-radius: 20px;
	padding: 64px 48px 56px;
	overflow: hidden;
}

.wew-journey-showcase--pinning .wew-journey-showcase__pin {
	position: sticky;
}

/* Header (static heading/description) */

.wew-journey-showcase__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 862px;
	margin: 0 auto 48px;
	text-align: center;
}

.wew-journey-showcase__title-main {
	margin: 0 0 20px;
	font-weight: 600;
	font-size: 42px;
	line-height: 63px;
	color: #1b1b1b;
}

.wew-journey-showcase__description {
	margin: 0;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 32px;
	color: #575250;
}

/* Stage: positioning context for the persistent card + image boxes. Its
   height is set by the "Image Height" style control - the image is the
   tallest element, the (shorter) card is centered against it. */

.wew-journey-showcase__stage {
	position: relative;
	height: 420px;
}

/* Content card: ONE persistent box, fixed size/position. Shorter than the
   image and vertically centered within the stage. */

.wew-journey-showcase__panel {
	position: absolute;
	left: 0;
	top: 50%;
	z-index: 1;
	transform: translateY(-50%);
	width: var(--wew-panel-width);
	height: 370px;
	overflow: hidden;
	background-color: #292929;
}

/* Only the panel-inner content crossfades (opacity only - no transform, no
   position change), so the card itself never appears to move or resize. */
.wew-journey-showcase__panel-inner {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 48px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--wew-duration) var(--wew-easing), visibility 0s linear var(--wew-duration);
}

.wew-journey-showcase__panel-inner--active {
	z-index: 2;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--wew-duration) var(--wew-easing);
}

.wew-journey-showcase__panel-inner--leaving {
	z-index: 1;
	opacity: 0;
	visibility: visible;
	pointer-events: none;
	transition: opacity var(--wew-duration) var(--wew-easing);
}

.wew-journey-showcase__panel-inner--no-transition {
	transition: none !important;
}

.wew-journey-showcase__title {
	margin: 0 0 16px;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 32px;
	line-height: 40px;
	letter-spacing: 0.32px;
	color: #ffffff;
}

.wew-journey-showcase__item-description {
	margin: 0;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 26px;
	color: rgba(255, 255, 255, 0.75);
}

.wew-journey-showcase__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	margin-top: 28px;
	padding: 12px 24px;
	border-radius: 999px;
	background-color: #dc4329;
	color: #ffffff;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}

.wew-journey-showcase__cta:active {
	transform: scale(0.97);
}

/* Featured image: ONE persistent box, deliberately taller than the card and
   positioned to overlap its right edge (no visible gap between the two). */

.wew-journey-showcase__media {
	position: absolute;
	top: 0;
	right: 0;
	left: calc(var(--wew-panel-width) - var(--wew-image-overlap));
	z-index: 2;
	height: 100%;
	overflow: hidden;
}

/* Every item's image is stacked in the same box; switching the active one is
   an instant, non-animated visibility toggle - no fade/slide/zoom. */
.wew-journey-showcase__media-item {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: none;
}

.wew-journey-showcase__media-item--active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
}

.wew-journey-showcase__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* Timeline (progress line + icon buttons) */

.wew-journey-showcase__timeline {
	position: relative;
	margin-top: 48px;
}

.wew-journey-showcase__line,
.wew-journey-showcase__line-progress {
	position: absolute;
	left: 0;
	top: 50%;
	height: 0;
	pointer-events: none;
}

.wew-journey-showcase__line {
	right: 0;
	transform: translateY(-50%);
	border-top: 1.5px dashed #d9d9d9;
	z-index: 1;
}

.wew-journey-showcase__line-progress {
	width: var(--wew-progress);
	border-top: 1.5px dashed #dc4329;
	transition: width var(--wew-duration) var(--wew-easing);
}

.wew-journey-showcase__icons {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wew-journey-showcase__icon {
	--wew-icon-bg: #575250;
	--wew-ring-gap: 11px;

	position: relative;
	flex: none;
	width: 67px;
	height: 67px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1.5px dashed transparent;
	border-radius: 50%;
	background: none;
	color: #ffffff;
	cursor: pointer;
	transition: border-color var(--wew-duration) var(--wew-easing), color var(--wew-duration) var(--wew-easing);
}

.wew-journey-showcase__icon::before {
	content: '';
	position: absolute;
	inset: var(--wew-ring-gap);
	border-radius: 50%;
	background: var(--wew-icon-bg);
	z-index: 0;
	transition: background var(--wew-duration) var(--wew-easing);
}

.wew-journey-showcase__icon i,
.wew-journey-showcase__icon svg {
	position: relative;
	z-index: 1;
	display: inline-flex;
	font-size: 26px;
	width: 26px;
	height: 26px;
	align-items: center;
	justify-content: center;
	color: currentColor;
	fill: currentColor;
	pointer-events: none;
}

.wew-journey-showcase__icon:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.wew-journey-showcase__empty-notice {
	padding: 24px;
	border: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	text-align: center;
	color: #575250;
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.wew-journey-showcase__panel-inner,
	.wew-journey-showcase__icon,
	.wew-journey-showcase__icon::before,
	.wew-journey-showcase__line-progress,
	.wew-journey-showcase__cta {
		transition-duration: 0.01ms !important;
	}
}

/* Sensible fluid baseline so the widget still adapts even if a site never
   customizes the responsive Style controls. Elementor's own generated,
   higher-specificity rules win wherever a breakpoint value is customized. */
@media (max-width: 1024px) {
	.wew-journey-showcase__pin {
		padding: clamp(32px, 6vw, 64px) clamp(24px, 5vw, 48px);
	}

	.wew-journey-showcase__title-main {
		font-size: clamp(28px, 5vw, 42px);
		line-height: 1.35;
	}

	.wew-journey-showcase__title {
		font-size: clamp(22px, 4vw, 32px);
		line-height: 1.3;
	}

	.wew-journey-showcase__panel-inner {
		padding: 0 clamp(24px, 4vw, 48px);
	}
}

@media (max-width: 600px) {
	.wew-journey-showcase__icons {
		gap: 4px;
	}

	.wew-journey-showcase__icon {
		width: 44px;
		height: 44px;
	}

	.wew-journey-showcase__icon i,
	.wew-journey-showcase__icon svg {
		font-size: 18px;
		width: 18px;
		height: 18px;
	}
}