/**
 * Process Steps — Style 4: Zigzag Timeline
 *
 * A centre rail with step bodies alternating left and right of the markers —
 * the classic "company story" layout. Falls back to a left-rail timeline on
 * small screens.
 *
 * @package captain-widgets-kit
 * @since   1.7.0
 */

.captwiki-steps.captwiki-style-4 .captwiki-steps__item {
	width: 50%;
	align-self: flex-start;
	flex-direction: row-reverse;
	text-align: right;
}

.captwiki-steps.captwiki-style-4 .captwiki-steps__item:nth-child( even ) {
	align-self: flex-end;
	flex-direction: row;
	text-align: left;
}

/* Markers sit on the centre rail. */
.captwiki-steps.captwiki-style-4 .captwiki-steps__item .captwiki-steps__marker {
	transform: translateX( 50% );
}

.captwiki-steps.captwiki-style-4 .captwiki-steps__item:nth-child( even ) .captwiki-steps__marker {
	transform: translateX( -50% );
}

/* Centre rail segments drawn per item so the list height stays natural. */
.captwiki-steps.captwiki-style-4 .captwiki-steps__item::before {
	content: "";
	position: absolute;
	top: calc( var( --captwiki-ps-marker ) + 6px );
	right: -1.5px;
	width: 3px;
	height: calc( 100% + var( --captwiki-ps-gap ) - var( --captwiki-ps-marker ) - 12px );
	background: var( --captwiki-ps-line );
	border-radius: 3px;
}

.captwiki-steps.captwiki-style-4 .captwiki-steps__item:nth-child( even )::before {
	right: auto;
	left: -1.5px;
}

.captwiki-steps.captwiki-style-4 .captwiki-steps__item:last-child::before {
	display: none;
}

.captwiki-steps.captwiki-style-4 .captwiki-steps__body {
	padding: 14px 18px;
	background: var( --captwiki-ps-card-bg );
	border: 1px solid var( --captwiki-ps-line );
	border-radius: 12px;
	box-shadow: 0 8px 22px rgba( 17, 24, 39, 0.06 );
}

@media ( max-width: 767px ) {
	.captwiki-steps.captwiki-style-4 .captwiki-steps__item,
	.captwiki-steps.captwiki-style-4 .captwiki-steps__item:nth-child( even ) {
		width: 100%;
		align-self: stretch;
		flex-direction: row;
		text-align: left;
		padding: 0;
	}

	.captwiki-steps.captwiki-style-4 .captwiki-steps__item .captwiki-steps__marker,
	.captwiki-steps.captwiki-style-4 .captwiki-steps__item:nth-child( even ) .captwiki-steps__marker {
		transform: none;
	}

	.captwiki-steps.captwiki-style-4 .captwiki-steps__item::before,
	.captwiki-steps.captwiki-style-4 .captwiki-steps__item:nth-child( even )::before {
		right: auto;
		left: calc( var( --captwiki-ps-marker ) / 2 - 1.5px );
	}
}
