/**
 * Process Steps — Style 5: Arrow Flow
 *
 * Each step is a chevron-shaped block pointing to the next one — a compact
 * conversion-funnel look. Falls back to stacked blocks on small screens.
 *
 * @package captain-widgets-kit
 * @since   1.7.0
 */

.captwiki-steps.captwiki-style-5 {
	flex-direction: row;
	align-items: stretch;
	gap: 8px;
}

.captwiki-steps.captwiki-style-5 .captwiki-steps__item {
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 0;
	text-align: center;
}

.captwiki-steps.captwiki-style-5 .captwiki-steps__marker {
	width: 100%;
	height: auto;
	min-height: calc( var( --captwiki-ps-marker ) * 0.9 );
	border-radius: 0;
	background: var( --captwiki-ps-accent );
	clip-path: polygon( 0 0, calc( 100% - 18px ) 0, 100% 50%, calc( 100% - 18px ) 100%, 0 100%, 18px 50% );
}

.captwiki-steps.captwiki-style-5 .captwiki-steps__item:first-child .captwiki-steps__marker {
	clip-path: polygon( 0 0, calc( 100% - 18px ) 0, 100% 50%, calc( 100% - 18px ) 100%, 0 100% );
}

.captwiki-steps.captwiki-style-5 .captwiki-steps__item:nth-child( even ) .captwiki-steps__marker {
	filter: brightness( 0.88 );
}

.captwiki-steps.captwiki-style-5 .captwiki-steps__body {
	padding: 16px 12px 0;
}

@media ( max-width: 767px ) {
	.captwiki-steps.captwiki-style-5 {
		flex-direction: column;
		gap: var( --captwiki-ps-gap );
	}

	.captwiki-steps.captwiki-style-5 .captwiki-steps__marker,
	.captwiki-steps.captwiki-style-5 .captwiki-steps__item:first-child .captwiki-steps__marker {
		clip-path: polygon( 0 0, 100% 0, 100% calc( 100% - 14px ), 50% 100%, 0 calc( 100% - 14px ) );
	}
}
