/**
 * 关于我们合并页：章节导航样式（方案A）
 *
 * @package Developer_Portfolio
 */

:root {
	--dp-header-h: 0px;
}

/* ---------- Hero ---------- */
.about-us-hero {
	padding: 3.5rem 0 2.5rem;
	background: linear-gradient(180deg, #f5f8fb 0%, #ffffff 100%);
	border-bottom: 1px solid #eaeaea;
}

.about-us-hero .about-us-title {
	margin: 0 0 0.75rem;
	font-size: 2.25rem;
	font-weight: 700;
	color: #1f2937;
}

.about-us-hero .about-us-tagline {
	margin: 0;
	font-size: 1.0625rem;
	color: #6b7280;
}

/* ---------- 移动端横向章节条 ---------- */
.dp-section-nav--bar {
	display: none;
	position: sticky;
	top: var(--dp-header-h, 0px);
	z-index: 900;
	background: #fff;
	border-bottom: 1px solid #eaeaea;
}

.dp-section-nav--bar ul {
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0.625rem 0;
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}

.dp-section-nav--bar a {
	display: block;
	padding: 0.375rem 0.875rem;
	border: 1px solid #e0e0e0;
	border-radius: 999px;
	font-size: 0.875rem;
	color: #4b5563;
	text-decoration: none;
}

.dp-section-nav--bar a.is-active {
	background: #0073aa;
	border-color: #0073aa;
	color: #fff;
}

/* ---------- 桌面端侧栏章节导航 ---------- */
.about-us-layout {
	display: flex;
	gap: 2.5rem;
	align-items: flex-start;
	padding: 2.5rem 0 4rem;
}

.dp-section-nav--side {
	width: 260px;
	flex-shrink: 0;
	position: sticky;
	top: calc(var(--dp-header-h, 0px) + 20px);
	align-self: flex-start;
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	padding: 1.25rem 1rem;
}

.dp-section-nav--side .sidebar-nav-title {
	margin: 0 0 0.75rem;
	font-size: 1.0625rem;
	font-weight: 600;
	color: #1f2937;
}

.dp-section-nav--side ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dp-section-nav--side li a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-left: 3px solid transparent;
	color: #4b5563;
	font-size: 0.9375rem;
	text-decoration: none;
}

.dp-section-nav--side li a:hover {
	background: #f3f4f6;
	color: #1f2937;
}

.dp-section-nav--side li a.is-active {
	border-left-color: #0073aa;
	background: #f0f7fc;
	color: #0073aa;
	font-weight: 600;
}

.about-us-content {
	flex: 1;
	min-width: 0;
}

.about-us-content h2 {
	margin: 2.75rem 0 1rem;
	padding-top: 0.5rem;
	font-size: 1.625rem;
	color: #1f2937;
	scroll-margin-top: calc(var(--dp-header-h, 0px) + 76px);
}

.about-us-content h2:first-child {
	margin-top: 0;
}

/* ---------- CTA 收尾带 ---------- */
.about-cta-band {
	margin-top: 3.5rem;
	padding: 2rem;
	background: #f5f8fb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}

.about-cta-band .wp-block-buttons {
	gap: 0.75rem;
}

/* ---------- 响应式 ---------- */
@media (max-width: 991px) {
	.dp-section-nav--side {
		display: none;
	}

	.dp-section-nav--bar {
		display: block;
	}

	.about-us-layout {
		display: block;
		padding: 1.5rem 0 3rem;
	}

	.about-us-hero .about-us-title {
		font-size: 1.75rem;
	}
}