/* ==========================================================================
   Process Steps Block
   ========================================================================== */

.pillar-process-steps {
	--pillar-process-reveal-step: 0.32s;
	background: #ffffff;
	color: #111111;
}

.pillar-process-steps__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: var(--pillar-process-steps-padding-y, 5vh) clamp(1.5rem, 4vw, 3.5rem);
	box-sizing: border-box;
}

.pillar-process-steps__grid {
	display: flex;
	align-items: stretch;
	gap: clamp(0.85rem, 1.8vw, 1.35rem);
}

.pillar-process-steps__card {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-width: 0;
	min-height: 100%;
	padding: clamp(1.5rem, 2.5vw, 2rem);
	background: #ffffff;
	border: 1px solid rgba(17, 17, 17, 0.12);
	border-radius: 16px;
	box-sizing: border-box;
	opacity: 0;
	transform: translateX(-1rem);
}

.pillar-process-steps__connector {
	align-self: center;
	flex: 0 0 auto;
	width: clamp(1.1rem, 2.2vw, 1.75rem);
	height: 2px;
	background: var(--pillar-yellow, #ffa800);
	border-radius: 1px;
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left center;
}

.pillar-process-steps__number {
	display: block;
	margin: 0 0 0.85rem;
	font-size: clamp(1.75rem, 2.8vw, 2.35rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--pillar-yellow, #ffa800);
}

.pillar-process-steps__title {
	margin: 0 0 0.85rem;
	font-size: clamp(1.15rem, 1.7vw, 1.4rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #111111;
}

.pillar-process-steps__lead {
	margin: 0 0 0.75rem;
	font-size: clamp(0.88rem, 1.1vw, 0.98rem);
	font-weight: 700;
	line-height: 1.45;
	color: #111111;
}

.pillar-process-steps__body {
	font-size: clamp(0.84rem, 1.05vw, 0.94rem);
	font-weight: 400;
	line-height: 1.65;
	color: rgba(17, 17, 17, 0.78);
}

.pillar-process-steps__body p {
	margin: 0;
}

.pillar-process-steps__body p + p {
	margin-top: 0.75em;
}

.pillar-process-steps__footer {
	margin-top: clamp(1rem, 2vw, 1.35rem);
	padding: clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.35rem, 2.5vw, 2rem);
	background: #f3f3f3;
	border: 1px solid rgba(17, 17, 17, 0.1);
	border-radius: 16px;
	box-sizing: border-box;
	opacity: 0;
	transform: translateY(0.75rem);
}

.pillar-process-steps__footer-title {
	margin: 0;
	font-size: clamp(0.92rem, 1.15vw, 1.05rem);
	font-weight: 700;
	line-height: 1.45;
	color: #111111;
}

.pillar-process-steps__footer-standards {
	margin: 0.45rem 0 0;
	font-size: clamp(0.84rem, 1.05vw, 0.95rem);
	font-weight: 500;
	line-height: 1.5;
	color: rgba(17, 17, 17, 0.72);
}

/* --------------------------------------------------------------------------
   Staggered reveal — card → yellow line → card → …
   -------------------------------------------------------------------------- */

.pillar-process-steps.pillar-reveal > * {
	opacity: 1;
	transform: none;
	transition: none;
}

.pillar-process-steps.is-revealed .pillar-process-steps__card {
	animation: pillar-process-card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: calc(var(--pillar-reveal-order, 0) * var(--pillar-process-reveal-step));
}

.pillar-process-steps.is-revealed .pillar-process-steps__connector {
	animation: pillar-process-line-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	animation-delay: calc(var(--pillar-reveal-order, 0) * var(--pillar-process-reveal-step));
}

.pillar-process-steps.is-revealed .pillar-process-steps__footer {
	animation: pillar-process-footer-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	/* Wait until the last card fade finishes, then reveal footer */
	animation-delay: calc(
		(var(--pillar-reveal-order, 0) * var(--pillar-process-reveal-step)) + 0.55s
	);
}

@keyframes pillar-process-card-in {
	from {
		opacity: 0;
		transform: translateX(-1rem);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes pillar-process-line-in {
	from {
		opacity: 0;
		transform: scaleX(0);
	}
	to {
		opacity: 1;
		transform: scaleX(1);
	}
}

@keyframes pillar-process-footer-in {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pillar-process-steps__card,
	.pillar-process-steps__connector,
	.pillar-process-steps__footer {
		opacity: 1;
		transform: none;
		animation: none !important;
	}
}

.editor-styles-wrapper .pillar-process-steps__card,
.editor-styles-wrapper .pillar-process-steps__connector,
.editor-styles-wrapper .pillar-process-steps__footer {
	opacity: 1;
	transform: none;
	animation: none !important;
}

.wp-block-acf-process-steps {
	margin: 0;
	max-width: none;
}

@media (max-width: 900px) {
	.pillar-process-steps__grid {
		flex-direction: column;
		gap: 1rem;
	}

	.pillar-process-steps__connector {
		display: none;
	}

	.pillar-process-steps__card {
		transform: translateY(1rem);
	}

	.pillar-process-steps.is-revealed .pillar-process-steps__card {
		animation-name: pillar-process-card-in-mobile;
	}
}

@keyframes pillar-process-card-in-mobile {
	from {
		opacity: 0;
		transform: translateY(1rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}