/*
 * ETheme-Block — process-step
 *
 * 本文件负责步骤结构、父模块样式与旧独立内容兼容；新内容中的步骤样式、
 * 连接线和排列方式统一由 process 父模块控制。
 *
 * 样式变体走两条路径，共用同一份规则：
 *   1. 3.0.30–3.0.34 已保存的独立内容 → standalone + is-style-eth-* 兼容路径
 *   2. 在 process 父块内 → 父块样式属性输出的 .etb-process--style-*
 * 因此父块内外的观感完全一致，且无需维护两份样式。
 *
 * 父块级布局与属性仍由父块负责，仅在父块内生效；独立使用时采用默认外观。
 */

/* 可移植结构基线：编号、图标与富文本节奏跟随子组件加载，不再依赖
 * process 父块样式是否同时到达。 */
.etb-process__step .etb-process__icon,
.etb-process__step .etb-process__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--eth-radius-full, 999rem);
	transition: transform var(--etb-duration-normal) ease, background var(--etb-duration-normal) ease, box-shadow var(--etb-duration-normal) ease;
}

.etb-process__step .etb-process__icon {
	background: var(--eth-primary-10, #eef2ff);
	color: var(--eth-primary, #4f46e5);
	font-size: 1.5rem;
}

.etb-process__step .etb-process__number {
	background: var(--eth-primary, #4f46e5);
	color: var(--eth-light, #fff);
	font-size: var(--eth-fs-h3, 1.35rem);
	font-weight: var(--eth-fw-bold, 700);
}

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

.etb-process__step .etb-process__description > :first-child {
	margin-top: 0;
}

.etb-process__step .etb-process__description > :last-child {
	margin-bottom: 0;
}

.etb-process__step .etb-process__description > :is(ul, ol) {
	padding-inline-start: 1.2em;
}

.etb-process__step .etb-process__description li + li {
	margin-top: 0.25em;
}

.etb-process__step {
	/* 元件自带变量：原先只定义在父块根元素 .etb-process 上，脱离父块时 var() 取不到值。 */
	--etb-process-badge: 3rem;
	--etb-process-gap: var(--eth-space-m,1.5rem);
	counter-increment: etb-process-step;
	display: flex;
	flex-direction: column;
	gap: var(--eth-space-2xs,0.6rem);
}
.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.7);
	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__step.etb-process-step--standalone:where(.is-style-eth-horizontal),
.etb-process--style-horizontal .etb-process__step {
	position: relative;
	text-align: center;
	align-items: center;
}
.etb-process__step.etb-process-step--standalone:where(.is-style-eth-horizontal):not(:last-child)::after,
.etb-process--style-horizontal .etb-process__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(var(--etb-process-badge) / 2);
	left: calc(50% + var(--etb-process-badge) / 2 + 0.5rem);
	right: calc(0.5rem + var(--etb-process-badge) / 2 - 50% - var(--etb-process-gap));
	height: 2px;
	background: var(--eth-primary-20,rgba(79,70,229,0.2));
	transition: background var(--etb-duration-normal) ease;
}
.etb-process__step.etb-process-step--standalone:where(.is-style-eth-numbered),
.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));
}
.etb-process__step.etb-process-step--standalone:where(.is-style-eth-dark-cards),
.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__step.etb-process-step--standalone:where(.is-style-eth-dark-cards) .etb-process__title,
.etb-process__step.etb-process-step--standalone:where(.is-style-eth-dark-cards) .etb-process__description,
.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__step.etb-process-step--standalone:where(.is-style-eth-dark-cards) .etb-process__description,
.etb-process--style-dark-cards .etb-process__description {
	opacity: 0.78;
}
.etb-process__step.etb-process-step--standalone:where(.is-style-eth-dark-cards) .etb-process__icon,
.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__step.etb-process-step--standalone:where(.is-style-eth-horizontal):not(:last-child)::after,
.etb-process--style-horizontal .etb-process__step:not(:last-child)::after {
	display: none;
}
}
.etb-process__step {
	transition: transform var(--etb-duration-normal) ease,box-shadow var(--etb-duration-normal) ease;
}
.etb-process__step:hover .etb-process__number,
.etb-process__step:hover .etb-process__icon {
	transform: scale(1.08);
}
.etb-process__step.etb-process-step--standalone:where(.is-style-eth-horizontal):hover .etb-process__number,
.etb-process__step.etb-process-step--standalone:where(.is-style-eth-horizontal):hover .etb-process__icon,
.etb-process--style-horizontal .etb-process__step:hover .etb-process__number,
.etb-process--style-horizontal .etb-process__step:hover .etb-process__icon {
	box-shadow: var(--eth-shadow-m,0 4px 12px rgba(0,0,0,0.08));
}
.etb-process__step.etb-process-step--standalone:where(.is-style-eth-horizontal):not(:last-child):hover::after,
.etb-process--style-horizontal .etb-process__step:not(:last-child):hover::after {
	background: var(--eth-primary,#4f46e5);
}
.etb-process__step.etb-process-step--standalone:where(.is-style-eth-numbered):hover,
.etb-process--style-numbered .etb-process__step:hover {
	transform: translateY(-4px);
	box-shadow: var(--eth-shadow-m,0 4px 12px rgba(0,0,0,0.08));
}
@media (prefers-reduced-motion: reduce) {
.etb-process__step,
.etb-process__number,
.etb-process__icon {
	transition: none;
}
.etb-process__step.etb-process-step--standalone:where(.is-style-eth-numbered):hover,
.etb-process--style-numbered .etb-process__step:hover {
	transform: none;
}
}