/* Service Process Section - 服务流程模块（严格对照设计图） */

.service-process {
	position: relative;
	padding: 64px 0; /* 移除左右固定padding，由.container负责居中内边距 */
	/* 背景：上半部分灰色#f6f8f7，下半部分白色#ffffff，50%处硬切无过渡 */
	background:
		linear-gradient(180deg,
			#f6f8f7 0%,
			#f6f8f7 50%,
			#ffffff 50%,
			#ffffff 100%);
	overflow: visible; /* 允许左侧圆形突出到容器外 */
}

.service-process__inner {
	position: relative;
	/* 让服务流程模块整体宽度更紧凑，水平居中，不与1200px的页面最大宽度强行对齐 */
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 24px; /* 左右各24px安全内边距，防止窄屏下贴边 */
}

/* ========== 整体布局 ========== */
.service-process__layout {
	display: flex;
	align-items: center;
	gap: 0;
}

/* ========== 左侧：服务流程圆形标签 ========== */
.service-process__label {
	flex-shrink: 0;
	position: relative;
	z-index: 3;
	margin-left: 0;
	margin-right: -50px; /* 圆形右侧叠入 flow 50px，充分遮挡 SVG 起点(-40px)，实现无缝自然衔接 */
}

.service-process__label-circle {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #2bb05d 0%, #118740 55%, #0a6a31 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 10px 28px rgba(11, 106, 49, 0.32),
		0 3px 10px rgba(11, 106, 49, 0.2),
		inset 0 2px 5px rgba(255, 255, 255, 0.18);
	position: relative;
}

/* 圆形外圈淡光环 */
.service-process__label-circle::before {
	content: '';
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
	border-radius: 50%;
	border: 2px solid rgba(17, 135, 64, 0.18);
	pointer-events: none;
	z-index: -1;
}

/* 移除方形遮罩 — 改用圆形自然遮挡 SVG 起点方案（见下方 SVG 调整） */
.service-process__label-circle::after {
	display: none;
}

.service-process__label-text {
	color: #ffffff;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 4px;
	text-align: center;
	writing-mode: vertical-rl;
	text-orientation: upright;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: vertical-rl;
	user-select: none;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* ========== 右侧：流程主体 ========== */
.service-process__flow {
	flex: 1;
	position: relative;
	/* 固定高度严格 = SVG viewBox 高度，避免 preserveAspectRatio="none" 拉伸导致 y 偏移 */
	height: 320px;
	min-width: 0;
	/* flow 区域左右允许 SVG 溢出显示（左侧连线接入圆形，右侧大 U 弯） */
	overflow: visible;
}

/* SVG 线条层：铺满整个容器 */
.service-process__lines {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 1;
	pointer-events: none;
}

/* 【移动端优先】小屏默认：完整环形（上下线+左侧U型），圆形在上方独立展示 */
.sp-line-desktop { display: none; }
.sp-line-mobile  { display: inline; }

/* 【大屏≥992px】水平布局：切换为连接线从圆形自然引出，隐藏左侧独立U型 */
@media (min-width: 992px) {
	.sp-line-desktop { display: inline; }
	.sp-line-mobile  { display: none; }
}

/* ========== 节点行 ========== */
.sp-row {
	position: absolute;
	left: 0;
	right: 0;
	display: grid;
	/* 左右各 100px padding → 5 个节点自动挨近（与 SVG 坐标严格对应 180/340/500/660/820） */
	padding: 0 100px;
	grid-template-columns: repeat(5, 1fr);
	z-index: 2;
	pointer-events: none;
}

/* 上排：节点中心对齐 SVG 的 y=70。
   node 默认 68px → top = 70 - 34 = 36px */
.sp-row--top {
	top: 36px;
}

/* 下排：节点中心对齐 SVG 的 y=250。
   250 - 34 = 216px */
.sp-row--bottom {
	top: 216px;
}

/* ========== 单个节点 ========== */
.sp-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	pointer-events: auto;
}

/* 节点圆形（浅灰白底色，覆盖在绿色粗连接线上） */
.sp-step__node {
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: #f7f8f8;
	border: 2px solid #d5ddd8;
	box-shadow:
		0 4px 14px rgba(20, 60, 35, 0.06),
		0 1px 3px rgba(20, 60, 35, 0.04);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex-shrink: 0;
	transition: all 0.3s ease;
}

.sp-step:hover .sp-step__node {
	border-color: #118740;
	box-shadow:
		0 6px 18px rgba(17, 135, 64, 0.15),
		0 2px 5px rgba(17, 135, 64, 0.08);
	transform: translateY(-2px);
}

.sp-step__icon {
	width: 48px; /* 放大图标，节点圆 68px → 图标占 ~70% */
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-step__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* 节点标题 */
.sp-step__title {
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	color: #1f3a2a;
	line-height: 1.4;
	text-align: center;
	letter-spacing: 0.5px;
	white-space: nowrap;
	position: relative;
}

/* 上排：文字统一在节点上方（position: absolute） */
.sp-step--above {
	/* 标题输出在 DOM 前，用绝对定位移到节点上方 */
}
.sp-step--above .sp-step__title {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 14px;
	font-size: 15px;
}

/* 下排：文字统一在节点下方（flex column 自然顺序） */
.sp-step--below .sp-step__title {
	margin-top: 14px;
	font-size: 15px;
}

/* ========== 响应式适配 ========== */
@media (max-width: 1199px) {
	.service-process {
		padding: 52px 0; /* 移除左右padding，由.service-process__inner负责 */
	}

	.service-process__label {
		margin-left: 0; /* 不再需要负偏移抵消外padding */
		margin-right: -44px; /* 130px圆叠入44px，确保SVG起点(-40px)完全被遮挡 */
	}

	.service-process__label-circle {
		width: 130px;
		height: 130px;
	}

	.service-process__label-text {
		font-size: 23px;
		letter-spacing: 3.5px;
	}

	/* 1199px 时 flow 仍高 320 = viewBox，1:1 对齐 */
	.service-process__flow {
		height: 320px;
	}

	.sp-step__node {
		width: 62px;
		height: 62px;
	}

	.sp-step__icon {
		/* 节点圆 62 → 图标 44 (~71%) */
		width: 44px;
		height: 44px;
	}

	/* y=70 → 70 - 31 = 39 */
	.sp-row--top {
		top: 39px;
	}

	.sp-row--bottom {
		/* y=250 → 250 - 31 = 219 */
		top: 219px;
	}

	.sp-step--above .sp-step__title {
		margin-bottom: 12px;
		font-size: 14px;
	}
	.sp-step--below .sp-step__title {
		margin-top: 12px;
		font-size: 14px;
	}
}

@media (max-width: 991px) {
	.service-process {
		padding: 44px 0; /* 移除左右padding，由.service-process__inner负责 */
	}

	.service-process__layout {
		flex-direction: column;
		gap: 32px;
	}

	.service-process__label {
		margin-left: 0;
		margin-right: 0;
	}

	.service-process__label-circle {
		width: 130px;
		height: 130px;
		margin-right: 0;
	}

	.service-process__label-circle::after {
		display: none;
	}

	.service-process__label-text {
		font-size: 24px;
		/* 991px 以下仍保持竖排（设计图始终竖排），到更小屏再改横排 */
		writing-mode: vertical-rl;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: vertical-rl;
		letter-spacing: 5px;
	}

	.service-process__flow {
		width: 100%;
		height: 360px;
		flex: none;
	}

	/* 991px 以下：节点行左右 padding 减小，让节点之间有更多空间 */
	.sp-row {
		padding: 0 80px;
		gap: 8px;
	}

	/* 991px 继承 1199px node=62 icon=44，行位置稍微拉开 */
	.sp-row--top {
		top: 49px;
	}

	.sp-row--bottom {
		top: 239px;
	}

	/* ========== 移动端：标题交替上下显示，避免挤成一团 ========== */
	/* 上排：第1、3、5个(奇数)标题在上方，第2、4个(偶数)标题改到下方 */
	.sp-row--top .sp-step:nth-child(odd).sp-step--above .sp-step__title {
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 12px;
	}
	.sp-row--top .sp-step:nth-child(even).sp-step--above .sp-step__title {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 12px;
		margin-bottom: 0;
		bottom: auto;
	}

	/* 下排：第1、3、5个(奇数)标题在下方，第2、4个(偶数)标题改到上方 */
	.sp-row--bottom .sp-step:nth-child(odd).sp-step--below .sp-step__title {
		margin-top: 12px;
	}
	.sp-row--bottom .sp-step:nth-child(even).sp-step--below .sp-step__title {
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 12px;
		margin-top: 0;
	}
}

@media (max-width: 767px) {
	.service-process {
		padding: 36px 0; /* 移除左右padding，由.service-process__inner负责 */
	}

	.service-process__layout {
		gap: 26px;
	}

	.service-process__label-circle {
		width: 110px;
		height: 110px;
	}

	.service-process__label-text {
		font-size: 20px;
		writing-mode: horizontal-tb; /* 767px 以下改横排更合适 */
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: horizontal-tb;
		letter-spacing: 4px;
	}

	.service-process__flow {
		height: 320px;
		flex: none;
	}

	.sp-row {
		padding: 0 60px;
		gap: 6px;
	}

	.sp-step__node {
		width: 52px;
		height: 52px;
		border-width: 1.8px;
	}

	.sp-step__icon {
		/* 节点圆 52 → 图标 36 (~69%) */
		width: 36px;
		height: 36px;
	}

	/* 稍微拉大行间距，容纳交替标题 */
	.sp-row--top {
		top: 50px;
	}

	.sp-row--bottom {
		top: 218px;
	}

	.sp-step__title {
		font-size: 12.5px;
		white-space: normal;
		min-width: 48px;
		letter-spacing: 0;
	}

	/* 767px 以下：标题交替上下显示 */
	.sp-row--top .sp-step:nth-child(odd).sp-step--above .sp-step__title {
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 8px;
		font-size: 12.5px;
	}
	.sp-row--top .sp-step:nth-child(even).sp-step--above .sp-step__title {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 8px;
		margin-bottom: 0;
		bottom: auto;
		font-size: 12.5px;
	}

	.sp-row--bottom .sp-step:nth-child(odd).sp-step--below .sp-step__title {
		margin-top: 8px;
		font-size: 12.5px;
	}
	.sp-row--bottom .sp-step:nth-child(even).sp-step--below .sp-step__title {
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 8px;
		margin-top: 0;
		font-size: 12.5px;
	}
}

@media (max-width: 520px) {
	.service-process {
		padding: 28px 0; /* 移除左右padding，由.service-process__inner负责 */
	}

	.service-process__label-circle {
		width: 94px;
		height: 94px;
	}

	.service-process__label-text {
		font-size: 17px;
		letter-spacing: 3px;
	}

	.service-process__flow {
		height: 300px;
		flex: none;
	}

	.sp-row {
		padding: 0 40px;
		gap: 4px;
	}

	.sp-step__node {
		width: 44px;
		height: 44px;
		border-width: 1.5px;
	}

	.sp-step__icon {
		/* 节点圆 44 → 图标 32 (~73%) */
		width: 32px;
		height: 32px;
	}

	/* 拉大行间距，容纳交替标题 */
	.sp-row--top {
		top: 52px;
	}

	.sp-row--bottom {
		top: 208px;
	}

	.sp-step__title {
		font-size: 11px;
	}

	/* 520px 以下：标题交替上下显示 */
	.sp-row--top .sp-step:nth-child(odd).sp-step--above .sp-step__title {
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 6px;
		font-size: 11px;
	}
	.sp-row--top .sp-step:nth-child(even).sp-step--above .sp-step__title {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin-top: 6px;
		margin-bottom: 0;
		bottom: auto;
		font-size: 11px;
	}

	.sp-row--bottom .sp-step:nth-child(odd).sp-step--below .sp-step__title {
		margin-top: 6px;
		font-size: 11px;
	}
	.sp-row--bottom .sp-step:nth-child(even).sp-step--below .sp-step__title {
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translateX(-50%);
		margin-bottom: 6px;
		margin-top: 0;
		font-size: 11px;
	}
}