/**
 * Process Steps — Style 3: Numbered Cards
 *
 * Each step becomes a raised card with a large ghost number watermark in the
 * corner and the accent marker floating on the card edge.
 *
 * @package captain-widgets-kit
 * @since   1.7.0
 */

.captwiki-steps.captwiki-style-3 {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
}

.captwiki-steps.captwiki-style-3 .captwiki-steps__item {
	flex: 1 1 220px;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

.captwiki-steps.captwiki-style-3 .captwiki-steps__marker {
	margin: 0 0 calc( var( --captwiki-ps-marker ) / -2 ) 22px;
	box-shadow: 0 8px 18px rgba( 17, 24, 39, 0.16 );
}

.captwiki-steps.captwiki-style-3 .captwiki-steps__body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding: calc( var( --captwiki-ps-marker ) / 2 + 18px ) 22px 24px;
	background: var( --captwiki-ps-card-bg );
	border: 1px solid var( --captwiki-ps-line );
	border-radius: 14px;
	box-shadow: 0 12px 28px rgba( 17, 24, 39, 0.07 );
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.captwiki-steps.captwiki-style-3 .captwiki-steps__item:hover .captwiki-steps__body {
	transform: translateY( -6px );
	box-shadow: 0 18px 36px rgba( 17, 24, 39, 0.12 );
}

.captwiki-steps.captwiki-style-3 .captwiki-steps__ghost-number {
	display: block;
	position: absolute;
	right: 10px;
	top: 0;
	font-size: 84px;
	font-weight: 800;
	line-height: 1;
	color: color-mix( in srgb, var( --captwiki-ps-accent ) 10%, transparent );
	pointer-events: none;
	user-select: none;
}
