/**
 * TO Process Zigzag — how-it-works alternating steps.
 * Scoped: .toaew-pz / --toaew-pz-*
 */

.toaew-pz {
	--toaew-pz-gap: 72px;
	--toaew-pz-col-gap: 48px;
	--toaew-pz-num: #1a1a2e;
	--toaew-pz-num-border: #d1d5db;
	--toaew-pz-num-size: 36px;
	--toaew-pz-title: #111827;
	--toaew-pz-desc: #6b7280;
	--toaew-pz-card-bg: #ffffff;
	--toaew-pz-card-radius: 24px;
	--toaew-pz-card-h: 320px;
	--toaew-pz-blob-blur: 48px;
	--toaew-pz-btn-bg: #111827;
	--toaew-pz-btn-color: #ffffff;
	--toaew-pz-line-1: #60a5fa;
	--toaew-pz-line-2: #f472b6;
	--toaew-pz-line-w: 2px;
	--toaew-pz-fit: cover;

	position: relative;
	width: 100%;
}

.toaew-pz__connector {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
	overflow: visible;
}

.toaew-pz__connector-path {
	stroke-width: var( --toaew-pz-line-w );
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	opacity: 0.95;
	/* Scroll sets dashoffset each frame — no CSS transition */
	transition: none;
}

.toaew-pz__list {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var( --toaew-pz-gap );
}

.toaew-pz__step {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: var( --toaew-pz-col-gap );
	align-items: center;
}

.toaew-pz__step--media-left .toaew-pz__media {
	order: 1;
}

.toaew-pz__step--media-left .toaew-pz__content {
	order: 2;
	text-align: left;
}

.toaew-pz__step--media-right .toaew-pz__media {
	order: 2;
}

.toaew-pz__step--media-right .toaew-pz__content {
	order: 1;
	text-align: left;
	justify-self: end;
	width: 100%;
	max-width: 420px;
}

.toaew-pz__step--media-left .toaew-pz__content {
	max-width: 420px;
}

.toaew-pz__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc( var( --toaew-pz-card-h ) + 40px );
}

.toaew-pz__blob {
	position: absolute;
	width: 78%;
	height: 78%;
	border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
	background: radial-gradient(
		circle at 40% 40%,
		var( --toaew-pz-blob-1, #ff4d8d ) 0%,
		var( --toaew-pz-blob-2, #a78bfa ) 55%,
		transparent 75%
	);
	filter: blur( var( --toaew-pz-blob-blur ) );
	opacity: 0.9;
	z-index: 0;
	pointer-events: none;
}

.toaew-pz__card {
	position: relative;
	z-index: 3;
	width: min( 100%, 380px );
	min-height: var( --toaew-pz-card-h );
	border-radius: var( --toaew-pz-card-radius );
	background: var( --toaew-pz-card-bg );
	box-shadow: 0 18px 50px rgba( 15, 23, 42, 0.1 );
	overflow: hidden;
}

.toaew-pz__img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center center;
}

.toaew-pz--fit-contain .toaew-pz__img {
	object-fit: contain !important;
}

.toaew-pz--fit-fill .toaew-pz__img {
	object-fit: fill !important;
}

.toaew-pz__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var( --toaew-pz-card-h );
	padding: 24px;
	color: #9ca3af;
	font-size: 0.875rem;
	background: #f3f4f6;
}

.toaew-pz__content {
	position: relative;
	z-index: 1;
}

.toaew-pz__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --toaew-pz-num-size );
	height: var( --toaew-pz-num-size );
	margin-bottom: 16px;
	border: 1px solid var( --toaew-pz-num-border );
	border-radius: 50%;
	color: var( --toaew-pz-num );
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	background: transparent;
}

.toaew-pz__title {
	margin: 0 0 12px;
	color: var( --toaew-pz-title );
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.toaew-pz__desc {
	margin: 0 0 20px;
	color: var( --toaew-pz-desc );
	font-size: 1rem;
	line-height: 1.6;
	max-width: 36em;
}

.toaew-pz__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	border: 0;
	border-radius: 999px;
	background: var( --toaew-pz-btn-bg );
	color: var( --toaew-pz-btn-color );
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.toaew-pz__btn:hover {
	opacity: 0.9;
	color: var( --toaew-pz-btn-color );
}

.toaew-pz__btn:focus-visible {
	outline: 2px solid var( --toaew-pz-btn-bg );
	outline-offset: 3px;
}

@media ( max-width: 1024px ) {
	.toaew-pz__connector {
		display: none;
	}

	.toaew-pz__step,
	.toaew-pz__step--media-left,
	.toaew-pz__step--media-right {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.toaew-pz__step--media-left .toaew-pz__media,
	.toaew-pz__step--media-right .toaew-pz__media,
	.toaew-pz__step--media-left .toaew-pz__content,
	.toaew-pz__step--media-right .toaew-pz__content {
		order: initial;
		max-width: none;
		justify-self: stretch;
		text-align: left;
	}

	.toaew-pz__media {
		order: -1;
	}
}

@media ( max-width: 767px ) {
	.toaew-pz__title {
		font-size: clamp( 1.25rem, 5vw, 1.5rem );
	}
}