/*
 * ETheme-Block — process（过程 / 步骤）
 */

.etb-process {
	box-sizing: border-box;
	width: 100%;
	padding-block: var(--eth-section-space-y, 3rem);
}

.etb-process__inner {
	max-width: var(--eth-container, 1350px);
	margin-inline: auto;
	padding-inline: var(--eth-section-space-x, 1.5rem);
}

.etb-process__steps {
	counter-reset: etb-process-step;
	display: grid;
	gap: var(--eth-space-m, 1.5rem);
}

.etb-process__step {
	counter-increment: etb-process-step;
	display: flex;
	flex-direction: column;
	gap: var(--eth-space-2xs, 0.6rem);
}

.etb-process__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	font-size: 1.5rem;
	background: var(--eth-primary-10, #eef2ff);
	color: var(--eth-primary, #4f46e5);
	border-radius: var(--eth-radius-full, 999rem);
}

.etb-process__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	font-size: var(--eth-fs-h3, 1.35rem);
	font-weight: var(--eth-fw-bold, 700);
	background: var(--eth-primary, #4f46e5);
	color: var(--eth-light, #fff);
	border-radius: var(--eth-radius-full, 999rem);
}

.etb-process__number--auto::before { content: counter(etb-process-step); }

.etb-process .etb-process__step .etb-process__title {
	margin: 0;
	font-family: var(--eth-font-heading, inherit);
	font-size: calc(var(--eth-fs-h3, 1.35rem) * 0.85);
	font-weight: var(--eth-fw-semibold, 600);
	line-height: var(--eth-lh-heading, 1.25);
	color: var(--eth-text-title, #111);
}

.etb-process__step .etb-process__description {
	margin: 0;
	line-height: var(--eth-lh-body, 1.6);
	color: var(--eth-text-body, #333);
}

.etb-process__description > :first-child { margin-top: 0; }
.etb-process__description > :last-child { margin-bottom: 0; }
.etb-process__description ul,
.etb-process__description ol { padding-inline-start: 1.2em; }
.etb-process__description li + li { margin-top: 0.25em; }

/* ============================================================
 * 样式：横向步骤（连接线）
 * ============================================================ */

.etb-process--style-horizontal .etb-process__steps {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.etb-process--style-horizontal .etb-process__step {
	position: relative;
	text-align: center;
	align-items: center;
}

.etb-process--style-horizontal .etb-process__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 1.5rem;
	right: -1rem;
	width: 2rem;
	height: 2px;
	background: var(--eth-primary-20, rgba(79, 70, 229, 0.2));
}

/* ============================================================
 * 样式：纵向时间线
 * ============================================================ */

.etb-process--style-timeline .etb-process__steps {
	position: relative;
	max-width: var(--eth-container-narrow, 768px);
	margin-inline: auto;
}

.etb-process--style-timeline .etb-process__steps::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 1.5rem;
	width: 2px;
	background: var(--eth-primary-20, rgba(79, 70, 229, 0.2));
}

.etb-process--style-timeline .etb-process__step {
	position: relative;
	padding-left: calc(3rem + var(--eth-space-m, 1.5rem));
	text-align: left;
}

.etb-process--style-timeline .etb-process__icon,
.etb-process--style-timeline .etb-process__number {
	position: absolute;
	left: 0;
	top: 0;
}

/* ============================================================
 * 样式：编号卡片
 * ============================================================ */

.etb-process--style-numbered .etb-process__steps {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.etb-process--style-numbered .etb-process__step {
	padding: var(--eth-space-m, 1.5rem);
	background: var(--eth-bg-surface, #fff);
	border-radius: var(--eth-radius-m, 0.8rem);
	box-shadow: var(--eth-shadow-s, 0 2px 6px rgba(0, 0, 0, 0.08));
}

/* Alternating editorial timeline. */
.etb-process--style-alternating .etb-process__steps {
	position: relative;
	max-width: var(--eth-container-narrow, 900px);
	margin-inline: auto;
}

.etb-process--style-alternating .etb-process__steps::before {
	content: "";
	position: absolute;
	top: 1.5rem;
	bottom: 1.5rem;
	left: 50%;
	width: 2px;
	background: var(--eth-primary-20, rgba(79, 70, 229, 0.2));
}

.etb-process--style-alternating .etb-process__step {
	position: relative;
	width: calc(50% - 2rem);
	padding: var(--eth-space-m, 1.5rem);
	background: var(--eth-bg-surface, #fff);
	border: 1px solid var(--eth-border, rgba(0, 0, 0, 0.12));
	border-radius: var(--eth-radius-m, 0.8rem);
	box-shadow: var(--eth-shadow-s, 0 2px 6px rgba(0, 0, 0, 0.08));
}

.etb-process--style-alternating .etb-process__step:nth-child(odd) {
	justify-self: start;
}

.etb-process--style-alternating .etb-process__step:nth-child(even) {
	justify-self: end;
}

.etb-process--style-alternating .etb-process__step::after {
	content: "";
	position: absolute;
	top: 1.5rem;
	width: 0.75rem;
	height: 0.75rem;
	background: var(--eth-primary, #4f46e5);
	border: 4px solid var(--eth-bg-body, #fff);
	border-radius: 50%;
}

.etb-process--style-alternating .etb-process__step:nth-child(odd)::after { right: -2.42rem; }
.etb-process--style-alternating .etb-process__step:nth-child(even)::after { left: -2.42rem; }

/* Dark cards make an appropriate contrast band without changing block content. */
.etb-process--style-dark-cards .etb-process__steps {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.etb-process--style-dark-cards .etb-process__step {
	padding: var(--eth-space-m, 1.5rem);
	background: var(--eth-dark, #18181b);
	border-radius: var(--eth-radius-m, 0.8rem);
}

.etb-process--style-dark-cards .etb-process__step .etb-process__title,
.etb-process--style-dark-cards .etb-process__description { color: var(--eth-light, #fff); }
.etb-process--style-dark-cards .etb-process__description { opacity: 0.78; }
.etb-process--style-dark-cards .etb-process__icon { background: rgba(255, 255, 255, 0.14); color: var(--eth-light, #fff); }

@media (max-width: 992px) {
	.etb-process--style-horizontal .etb-process__steps,
	.etb-process--style-numbered .etb-process__steps,
	.etb-process--style-dark-cards .etb-process__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.etb-process--style-horizontal .etb-process__step:not(:last-child)::after {
		display: none;
	}
}

@media (max-width: 767px) {
	.etb-process--style-horizontal .etb-process__steps,
	.etb-process--style-numbered .etb-process__steps,
	.etb-process--style-dark-cards .etb-process__steps {
		grid-template-columns: minmax(0, 1fr);
	}

	.etb-process--style-alternating .etb-process__steps::before { left: 1.45rem; }
	.etb-process--style-alternating .etb-process__step {
		width: auto;
		margin-left: 3rem;
	}
	.etb-process--style-alternating .etb-process__step:nth-child(odd),
	.etb-process--style-alternating .etb-process__step:nth-child(even) { justify-self: stretch; }
	.etb-process--style-alternating .etb-process__step::after {
		left: -2.42rem;
		right: auto;
	}
}

/* ============================================================
 * 动效（偏克制：8px + 0.25s）
 * ============================================================ */

.etb-process__step {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.etb-process--style-numbered .etb-process__step:hover,
.etb-process--style-horizontal .etb-process__step:hover {
	transform: translateY(-4px);
	box-shadow: var(--eth-shadow-m, 0 4px 12px rgba(0, 0, 0, 0.08));
}

.etb-process__number,
.etb-process__icon {
	transition: transform 0.25s ease, background 0.25s ease;
}

.etb-process__step:hover .etb-process__number,
.etb-process__step:hover .etb-process__icon {
	transform: scale(1.08);
}

:where(html.etb-has-js) .etb-process.etb-reveal .etb-process__step {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.etb-process.etb-reveal--visible .etb-process__step,
.etb-process.etb-no-anim .etb-process__step {
	opacity: 1;
	transform: none;
}

.etb-process.etb-reveal--visible .etb-process__step:nth-child(2) { transition-delay: 0.06s; }
.etb-process.etb-reveal--visible .etb-process__step:nth-child(3) { transition-delay: 0.12s; }
.etb-process.etb-reveal--visible .etb-process__step:nth-child(n+4) { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
	.etb-process__step,
	.etb-process__number,
	.etb-process__icon {
		transition: none;
	}

	.etb-process.etb-reveal .etb-process__step {
		opacity: 1;
		transform: none;
	}
}