/*
Theme Name: Astra Child - 浙江大兴
Theme URI: https://www.wbdx.vip/
Description: 浙江大兴建设项目管理咨询有限公司官网子主题。承载品牌化 404 页面等定制，避免 Astra 主题更新时被覆盖。
Author: 浙江大兴建设项目管理咨询有限公司
Template: astra
Version: 1.7.3
Text Domain: astra-child-wbdx
*/

/* ============================================================
   页头布局微调（2026-09-29）
   ------------------------------------------------------------
   背景：切换到子主题后，Astra 的 ast-header-logo-width 为空（不限制），
   导致 945×945 原图撑满页头；同时 10 项导航在 1240px 容器里放不下
   （每项 96px × 10 = 928px，而可用宽度只剩 748px），被挤成两行。

   处理：① logo 尺寸约束交给 Astra 设置（ast-header-logo-width=60）
        ② 这里收窄菜单项内边距与字号，让 10 项回到一行
   ============================================================ */

/* 页头容器：logo + 站名 + 导航单行排布 */
.site-header .ast-primary-header-bar .ast-container,
.site-header .ast-primary-header-bar .ast-primary-header-bar-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
}

/* 品牌区不收缩 */
.site-header .ast-site-identity {
	flex: 0 0 auto;
}

/* 导航区自适应，禁止换行 */
.site-header .main-header-bar-navigation,
.site-header #ast-desktop-header .main-header-bar-navigation {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	justify-content: flex-end;
}

.site-header .main-header-menu,
.site-header #ast-desktop-header .main-header-menu {
	display: flex;
	flex-wrap: nowrap !important;
	align-items: center;
	justify-content: flex-end;
	white-space: nowrap;
}

/* 菜单项：收窄内边距，缩小字号，确保 10 项一行 */
.site-header #ast-desktop-header .main-header-menu > .menu-item > .menu-link {
	padding-left: 10px;
	padding-right: 10px;
	font-size: 14.5px;
	white-space: nowrap;
}

.site-header #ast-desktop-header .main-header-menu > .menu-item:first-child > .menu-link {
	padding-left: 0;
}

.site-header #ast-desktop-header .main-header-menu > .menu-item:last-child > .menu-link {
	padding-right: 0;
}

/* 站名：单行显示，不换行 */
.site-header .ast-site-identity .site-title,
.site-header .ast-site-identity .site-title a {
	white-space: nowrap;
	font-size: 25px;
	line-height: 1.25;
}

/* ⚠️ 移动端必须解除 nowrap（2026-09-29 修正）
   桌面端为了让 10 项导航排成一行、站名不折行，加了 white-space: nowrap；
   但在 390px 手机上「浙江大兴建设项目管理咨询有限公司」单行需要 400px，
   会把页头撑到 541px，导致整页出现横向滚动条、汉堡按钮被挤出屏幕。
   设计稿的移动端做法是：公司名折两行 + 字号缩小 + 隐藏 logo。 */
@media (max-width: 921px) {
	.site-header .ast-site-identity .site-title,
	.site-header .ast-site-identity .site-title a {
		white-space: normal;
		font-size: 20px;
		line-height: 1.3;
	}

	/* 页头容器允许收缩，避免子项把宽度顶出去 */
	.site-header .ast-primary-header-bar .ast-container,
	.site-header .ast-primary-header-bar .ast-primary-header-bar-wrap,
	.site-header .ast-builder-grid-row {
		flex-wrap: nowrap;
		max-width: 100%;
	}

	.site-header .ast-site-identity {
		min-width: 0;
		max-width: 100%;
	}

	.site-header .ast-site-identity .ast-site-title-wrap {
		min-width: 0;
	}

	/* 极端窄屏（320px）兜底：允许在任意字间断行，绝不溢出 */
	.site-header .ast-site-identity .site-title,
	.site-header .ast-site-identity .site-title a {
		overflow-wrap: anywhere;
		word-break: break-word;
	}
}

/* logo 上方在行内垂直居中，避免 object-fit:fill 拉伸（图像本身为正方形） */
.site-header .ast-site-identity .custom-logo-link {
	display: flex;
	align-items: center;
}

.site-header .ast-site-identity img.custom-logo {
	object-fit: contain;
	height: auto;
}

/* 中等屏幕：进一步压缩，仍保持一行 */
@media (max-width: 1200px) and (min-width: 922px) {
	.site-header .ast-site-identity .site-title,
	.site-header .ast-site-identity .site-title a { font-size: 22px; }
	.site-header #ast-desktop-header .main-header-menu > .menu-item > .menu-link {
		padding-left: 7px;
		padding-right: 7px;
		font-size: 13.5px;
	}
}

/* ============================================================
   A 方案 · 员工入口按钮化 + 页头吸顶（2026-09-29）
   ------------------------------------------------------------
   设计稿基准（效果截图/官网页头-LOGO与10项导航.png 实测）：
     按钮 78×30px、圆角、实底 #1a5dab、白色字、与其他菜单项留出间隔
   ============================================================ */

/* ---- 1. 员工入口：做成蓝底实心按钮 ----
   菜单项 ID=52 已带 .menu-cta 类（大信系统 https://daxin.zjyuncheng.com）
   class 落在 <li> 上，视觉样式需打在内部 <a> 上。 */
.site-header #ast-desktop-header .main-header-menu > .menu-item.menu-cta {
	margin-left: 12px;          /* 与「联系我们」拉开间距 */
	display: flex;
	align-items: center;
}

.site-header #ast-desktop-header .main-header-menu > .menu-item.menu-cta > .menu-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 30px;
	padding: 0 14px;
	border-radius: 4px;
	background-color: #1a5dab;
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .5px;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.site-header #ast-desktop-header .main-header-menu > .menu-item.menu-cta > .menu-link:hover,
.site-header #ast-desktop-header .main-header-menu > .menu-item.menu-cta > .menu-link:focus {
	background-color: #0b3a72;
	color: #fff;
}

/* Astra 会给当前页/悬停的菜单项加下划线或高亮，按钮态下要压掉 */
.site-header #ast-desktop-header .main-header-menu > .menu-item.menu-cta > .menu-link::before,
.site-header #ast-desktop-header .main-header-menu > .menu-item.menu-cta > .menu-link::after {
	display: none;
}

/* 移动端抽屉内的员工入口同样按钮化（居中展示） */
#ast-mobile-header .main-header-menu .menu-item.menu-cta > .menu-link,
.ast-mobile-popup-drawer .main-header-menu .menu-item.menu-cta > .menu-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 8px auto;
	padding: 8px 20px;
	border-radius: 4px;
	background-color: #1a5dab;
	color: #fff !important;
	font-weight: 600;
}

/* ---- 2. 页头吸顶（sticky）----
   Astra 的 sticky-header-style 保持默认 none，改由 CSS 实现，
   好处：不写入 astra-settings，主题更新不受影响；
   用 transform 提升为独立合成层，避免滚动抖动。 */
.site-header#masthead {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: #fff;
	transform: translateZ(0);
	transition: box-shadow .2s ease;
}

/* 吸顶后加一层浅阴影，与正文内容区分（未滚动时无阴影，保持设计稿的干净顶栏） */
.site-header#masthead.is-stuck {
	box-shadow: 0 2px 8px rgba(15, 45, 85, .08);
}

/* 后台管理条（WP Toolbar）存在时，吸顶位置下移，避免被遮挡 */
body.admin-bar .site-header#masthead {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header#masthead {
		top: 46px;
	}
}

/* 尊重系统「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
	.site-header#masthead { transition: none; }
	.site-header #ast-desktop-header .main-header-menu > .menu-item.menu-cta > .menu-link { transition: none; }
}

/* ============================================================
   首页 Hero 改版（2026-09-29）
   ------------------------------------------------------------
   目标：把原来的「窄渐变 banner（约 328px）」升级为通栏全屏视觉锚定区，
        风格参照大型设计院官网：深靛蓝氛围 + 大标语 + 数据成就条。

   关键技术：full-bleed（通栏突破容器）
     Astra 的 .ast-container 有 max-width:1240px，内容区实际仅 1200px。
     要让 hero 铺满整个视口，必须把它从容器里「拽出来」：
         width: 100vw;
         margin-left: calc(50% - 50vw);
     ⚠️ 100vw 包含滚动条宽度，单独的 100vw 会引发横向滚动条。
        因此下面同时加 overflow:hidden 兜底（见 .wbdx-hero）。
   ============================================================ */

.wbdx-hero {
	/* --- 通栏（full-bleed）：突破 Astra 内容容器，铺满整个可视区 ---
	   容器链：.ast-container(max-width:1240, padding:0 20px)
	        > #primary > article > .entry-content(实测 1200px)
	   hero 在 .entry-content 内，左右各有 (视口-1200)/2 的余量要吃掉。

	   公式：margin-left = -( (视口宽 - 自身宽) / 2 )
	        即 calc(50% - 50vw)  —— 用 % 的自身宽 + vw 的视口宽，
	        不论中间隔了几层容器、各自 padding 多少，都能准确拉满。
	   ⚠️ 必须同时设 width:100vw，否则元素本身仍只有容器宽，
	      负边距只造成偏移而不铺满。
	   ⚠️ 不要用 left:50%+translateX —— 那会引入额外的层叠/定位副作用。
	   横向滚动条由文末的 overflow-x:clip 兜底（100vw 含滚动条宽约 15px）。 */
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	overflow: hidden;

	/* --- 深靛蓝 → 藏青 → 中蓝，比原来的亮蓝渐变沉稳 --- */
	background:
		radial-gradient(115% 85% at 80% 112%, rgba(54, 136, 220, .50) 0%, rgba(54, 136, 220, 0) 60%),
		radial-gradient(85% 65% at 8% -12%, rgba(41, 121, 199, .38) 0%, rgba(41, 121, 199, 0) 64%),
		linear-gradient(160deg, #03162c 0%, #062544 32%, #0a3a6c 66%, #10477f 100%);

	color: #fff;

	/* --- 全屏高度（2026-09-30 升级 B 方案：对标华东院「整屏视觉锚定」）---
	   ⚠️ 用 100vh 减页头高，而不是裸 100vh：本站页头是实心白底、不覆盖 hero，
	      若写 100vh，hero 底边会被挤到首屏之外，数据条反而看不见。
	   ⚠️ 100svh 是移动端「地址栏收起前」的稳定视口高，避免 iOS/Android
	      地址栏伸缩导致 hero 高度反复跳动；不支持的浏览器自动回落到上一行 vh。 */
	min-height: calc(100vh - 93px);
	min-height: calc(100svh - 93px);

	display: flex;
	flex-direction: column;
	/* hero 上方与页头衔接，下方与正文留出间距 */
	margin-top: 0;
	margin-bottom: 0;
}

/* --- 装饰层 1：透视网格地面（只铺下半部，中段起淡出） --- */
.wbdx-hero .wbdx-hero-grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(130, 192, 255, .24) 1px, transparent 1px),
		linear-gradient(90deg, rgba(130, 192, 255, .24) 1px, transparent 1px);
	background-size: 62px 62px;
	background-position: center bottom;
	transform: perspective(520px) rotateX(60deg) scale(2.9);
	transform-origin: 50% 100%;
	-webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.34) 30%, rgba(0,0,0,0) 56%);
	        mask-image: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.34) 30%, rgba(0,0,0,0) 56%);
}

/* --- 装饰层 2：底部穹顶光弧（模拟地球弧光，制造空间纵深） --- */
.wbdx-hero .wbdx-hero-dome {
	position: absolute;
	left: 50%;
	bottom: -34%;
	width: 132%;
	aspect-ratio: 1 / 1;
	transform: translateX(-50%);
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(circle at 50% 34%,
		rgba(128, 194, 255, .26) 0%,
		rgba(58, 140, 222, .12) 24%,
		rgba(18, 74, 134, 0) 56%);
	box-shadow:
		inset 0 2.5px 0 0 rgba(190, 226, 255, .78),
		inset 0 0 0 1px rgba(126, 190, 255, .12),
		inset 0 0 140px rgba(104, 178, 255, .18);
}

/* --- 装饰层 2b：第二道内层光弧（增加纵深层次） --- */
.wbdx-hero .wbdx-hero-dome-2 {
	position: absolute;
	left: 50%;
	bottom: -52%;
	width: 96%;
	aspect-ratio: 1 / 1;
	transform: translateX(-50%);
	border-radius: 50%;
	pointer-events: none;
	box-shadow:
		inset 0 1.5px 0 0 rgba(150, 206, 255, .34),
		inset 0 0 60px rgba(104, 178, 255, .08);
}

/* --- 装饰层 3：右上光源 + 左侧文字安全区压暗 --- */
.wbdx-hero .wbdx-hero-glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(56% 44% at 86% 4%, rgba(122, 190, 255, .32) 0%, rgba(122, 190, 255, 0) 72%),
		linear-gradient(100deg, rgba(3, 16, 32, .72) 0%, rgba(3, 16, 32, .48) 34%, rgba(3, 16, 32, 0) 58%);
}

/* --- 装饰层 4：星点 --- */
.wbdx-hero .wbdx-hero-stars {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		radial-gradient(1.7px 1.7px at 11% 22%, rgba(196, 227, 255, .9) 50%, transparent 52%),
		radial-gradient(1.3px 1.3px at 27% 12%, rgba(196, 227, 255, .7) 50%, transparent 52%),
		radial-gradient(1.9px 1.9px at 42% 30%, rgba(216, 238, 255, .95) 50%, transparent 52%),
		radial-gradient(1.2px 1.2px at 58% 16%, rgba(196, 227, 255, .62) 50%, transparent 52%),
		radial-gradient(1.6px 1.6px at 71% 27%, rgba(216, 238, 255, .8) 50%, transparent 52%),
		radial-gradient(1.1px 1.1px at 84% 38%, rgba(196, 227, 255, .58) 50%, transparent 52%),
		radial-gradient(1.5px 1.5px at 18% 44%, rgba(196, 227, 255, .5) 50%, transparent 52%),
		radial-gradient(1.2px 1.2px at 52% 49%, rgba(216, 238, 255, .44) 50%, transparent 52%),
		radial-gradient(1.4px 1.4px at 93% 20%, rgba(196, 227, 255, .66) 50%, transparent 52%);
	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.95) 0%, rgba(0,0,0,.3) 66%, rgba(0,0,0,0) 100%);
	        mask-image: linear-gradient(to bottom, rgba(0,0,0,.95) 0%, rgba(0,0,0,.3) 66%, rgba(0,0,0,0) 100%);
}

/* --- 内容层 ---
   hero 自身已是 100vw 通栏，但内层文字必须重新收进 1240px 居中容器，
   否则文字会贴到屏幕最左边、与页头容器错位。 */
.wbdx-hero .wbdx-hero-inner {
	position: relative;
	z-index: 5;                /* 高于图片层(2)与遮罩层(3)，低于数据条(6) */
	width: 100%;
	max-width: 1280px;         /* 1240 内容 + 两侧 20px 内边距 */
	margin: 0 auto;
	padding: 90px 20px 76px;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
}

.wbdx-hero .wbdx-hero-kicker {
	margin: 0 0 22px;
	font-size: 12.5px;
	letter-spacing: 5px;
	color: #8fc0ee;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.wbdx-hero .wbdx-hero-sep {
	color: rgba(143, 192, 238, .40);
	letter-spacing: 0;
}

.wbdx-hero .wbdx-hero-title {
	margin: 0 0 24px;
	font-size: 47px;
	line-height: 1.32;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: #fff;
	text-shadow: 0 2px 22px rgba(2, 16, 34, .42);
}

.wbdx-hero .wbdx-hero-title-2 {
	color: #cfe4fb;
}

.wbdx-hero .wbdx-hero-sub {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.95;
	color: #c3dcf5;
	max-width: 780px;
	/* 照片底纹深浅不均，正文加一层柔和投影保证任何底色下都可读 */
	text-shadow: 0 1px 12px rgba(2, 14, 30, .55);
}

/* 资质标签（半透明胶囊） */
.wbdx-hero .wbdx-hero-tags {
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wbdx-hero .wbdx-hero-tags > span {
	display: inline-block;
	font-size: 12.5px;
	line-height: 1;
	padding: 10px 16px;
	border-radius: 999px;
	color: #d3e7fb;
	background: rgba(126, 190, 255, .10);
	border: 1px solid rgba(126, 190, 255, .28);
	white-space: nowrap;
}

/* --- 底部数据条（融入 hero，半透明深色带） --- */
.wbdx-hero .wbdx-hero-stats {
	position: relative;
	z-index: 6;                /* 必须高于图片层与遮罩层，否则会被照片盖住 */
	width: 100%;
	background: linear-gradient(to bottom, rgba(3, 16, 32, .34) 0%, rgba(2, 12, 24, .62) 100%);
	border-top: 1px solid rgba(126, 190, 255, .20);
	box-shadow: inset 0 1px 0 0 rgba(2, 12, 24, .30);
}

.wbdx-hero .wbdx-hero-stats-inner {
	max-width: 1280px;         /* 与 .wbdx-hero-inner 对齐，保证数据与标题同左边界 */
	margin: 0 auto;
	padding: 34px 20px 38px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px 28px;
	box-sizing: border-box;
}

.wbdx-hero .wbdx-stat-num {
	font-size: 42px;
	font-weight: 700;
	line-height: 1.02;
	color: #fff;
	letter-spacing: .5px;
	font-variant-numeric: tabular-nums;
}

.wbdx-hero .wbdx-stat-unit {
	font-size: 21px;
	font-weight: 600;
	margin-left: 4px;
	color: #b6d6f8;
}

.wbdx-hero .wbdx-stat-label {
	margin-top: 13px;
	font-size: 13px;
	line-height: 1.6;
	color: #9ec0e4;
	padding-left: 12px;
	position: relative;
}

.wbdx-hero .wbdx-stat-label::before {
	content: "";
	position: absolute;
	left: 0;
	top: 5px;
	width: 3px;
	height: calc(100% - 10px);
	background: rgba(126, 190, 255, .55);
	border-radius: 2px;
}

/* ============================================================
   ★ Hero 实景轮播层（2026-09-30 升级为 B 方案）
   ------------------------------------------------------------
   视觉策略（拆解华东勘测设计研究院官网后对标）：
     1. 全屏项目实景大图「淡入淡出」轮播 + Ken Burns 极缓推近
     2. 左深右浅横向遮罩：左侧 62% 是文字安全区，右侧让照片细节透出来
     3. 底部再叠一层压暗，保证数据条白字永远清晰
     4. 文字按节奏逐层上浮入场；数据数字从 0 滚动到真值

   渐进增强（这是本方案敢上线的前提）：
     · 图片层 z-index:2 盖在原有 CSS 深蓝渐变与科技光效（z-index:1）之上
       → 图片没加载完时看到的是渐变，加载完自动接管，**永不白屏**
     · 文字入场用纯 CSS animation（不是 JS 加类）
       → 即使 JS 被禁用或报错，标题也不会卡在 opacity:0 看不见
   ============================================================ */

/* --- 层叠顺序显式声明：把原有装饰层统一压到图片层之下作「兜底底景」 --- */
.wbdx-hero .wbdx-hero-grid,
.wbdx-hero .wbdx-hero-dome,
.wbdx-hero .wbdx-hero-dome-2,
.wbdx-hero .wbdx-hero-glow,
.wbdx-hero .wbdx-hero-stars {
	z-index: 1;
}

/* ---------- 轮播图片层 ---------- */
.wbdx-hero .wbdx-hero-media {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	pointer-events: none;
}

.wbdx-hero .wbdx-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.6s ease-in-out;   /* 与华东院 Swiper crossfade 节奏一致 */
	will-change: opacity;
}

.wbdx-hero .wbdx-hero-slide.is-on {
	opacity: 1;
}

.wbdx-hero .wbdx-hero-slide > picture,
.wbdx-hero .wbdx-hero-slide img {
	display: block;
	width: 100%;
	height: 100%;
}

.wbdx-hero .wbdx-hero-slide img {
	object-fit: cover;
	object-position: center 42%;            /* 略偏上，保住天空与建筑主体 */
	transform-origin: 62% 50%;              /* 推近锚点偏向右侧主体，避免左侧文字区跟着动 */
}

/* 只有「当前张」在缓慢推近；切走后动画撤销，下次进来重播 */
.wbdx-hero .wbdx-hero-slide.is-on img {
	animation: wbdx-hero-kb 13s ease-out forwards;
}

@keyframes wbdx-hero-kb {
	from { transform: scale(1); }
	to   { transform: scale(1.065); }       /* 幅度刻意克制：原图 900px，推太猛会更糊 */
}

/* ---------- 遮罩层：图片之上、文字之下 ---------- */
.wbdx-hero .wbdx-hero-veil {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background:
		linear-gradient(96deg,
			rgba(2, 13, 30, .88) 0%,
			rgba(2, 13, 30, .82) 20%,
			rgba(2, 13, 30, .66) 40%,
			rgba(2, 13, 30, .40) 58%,
			rgba(2, 13, 30, .16) 76%,
			rgba(2, 13, 30, .34) 100%),
		linear-gradient(to bottom,
			rgba(2, 12, 26, .44) 0%,
			rgba(2, 12, 26, .06) 18%,
			rgba(2, 12, 26, 0) 38%,
			rgba(1, 10, 22, .30) 70%,
			rgba(1, 8, 18, .80) 100%);
}

/* ⚠️ 中窄屏（≤1100px）：横向「左深右浅」在这里会失效 ——
   容器变窄后文字横跨到右侧浅色区，副标题右半段会压在亮色照片上读不清
   （2026-09-30 实测 390px 移动端发现的真实问题）。此时改为「整体纵向压暗」，
   可读性优先于照片通透度。 */
@media (max-width: 1100px) {
	.wbdx-hero .wbdx-hero-veil {
		/* 顶部（kicker 之上）与底部数据条之外放轻，让照片多露出一点；
		   中段文字区维持在 .74 以上，保证白字对比度 */
		background: linear-gradient(to bottom,
			rgba(2, 13, 30, .56) 0%,
			rgba(2, 13, 30, .74) 24%,
			rgba(2, 13, 30, .78) 66%,
			rgba(2, 13, 30, .84) 84%,
			rgba(1, 8, 18, .92) 100%);
	}
}

/* ---------- 右侧翻页按钮（竖排） ---------- */
.wbdx-hero .wbdx-hero-navs {
	position: absolute;
	right: 26px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 8;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wbdx-hero .wbdx-hero-navs > button {
	width: 44px;
	height: 78px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 11px;
	letter-spacing: 3px;
	writing-mode: vertical-rl;
	color: rgba(255, 255, 255, .80);
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .24);
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
	transition: background-color .28s, border-color .28s, color .28s;
}

.wbdx-hero .wbdx-hero-navs > button:hover,
.wbdx-hero .wbdx-hero-navs > button:focus-visible {
	background: rgba(26, 93, 171, .78);
	border-color: rgba(150, 200, 255, .58);
	color: #fff;
	outline: none;
}

/* ---------- 圆点分页（贴内容区底部，统计条正上方） ---------- */
.wbdx-hero .wbdx-hero-dots {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 26px;
	z-index: 8;
	display: flex;
	justify-content: center;
	gap: 11px;
}

/* 用 <button> 而不是 <i>：分页点本身是可点击控件，必须键盘可达、有 :focus-visible */
.wbdx-hero .wbdx-hero-dots > button {
	display: block;
	width: 26px;
	height: 2px;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, .34);
	cursor: pointer;
	transition: width .3s, background-color .3s;
}

.wbdx-hero .wbdx-hero-dots > button.is-on {
	width: 46px;
	background: #fff;
}

.wbdx-hero .wbdx-hero-dots > button:focus-visible {
	outline: 2px solid rgba(150, 200, 255, .85);
	outline-offset: 4px;
}

/* ---------- 轮播进度线（hero 最底边） ---------- */
.wbdx-hero .wbdx-hero-prog {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	z-index: 9;
	background: linear-gradient(90deg, #1a5dab, #6fb4f2);
}

/* ---------- 文字逐层入场（纯 CSS，无 JS 依赖） ---------- */
@keyframes wbdx-hero-rise {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

.wbdx-hero .wbdx-hero-kicker { animation: wbdx-hero-rise .80s cubic-bezier(.22, .7, .3, 1) .10s both; }
.wbdx-hero .wbdx-hero-title  { animation: wbdx-hero-rise .95s cubic-bezier(.22, .7, .3, 1) .24s both; }
.wbdx-hero .wbdx-hero-sub    { animation: wbdx-hero-rise .95s cubic-bezier(.22, .7, .3, 1) .40s both; }
.wbdx-hero .wbdx-hero-tags   { animation: wbdx-hero-rise .95s cubic-bezier(.22, .7, .3, 1) .54s both; }

/* ---------- 尊重系统「减少动态效果」偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
	.wbdx-hero .wbdx-hero-slide.is-on img,
	.wbdx-hero .wbdx-hero-kicker,
	.wbdx-hero .wbdx-hero-title,
	.wbdx-hero .wbdx-hero-sub,
	.wbdx-hero .wbdx-hero-tags {
		animation: none;
	}
	.wbdx-hero .wbdx-hero-prog { display: none; }
}

/* hero 与下方正文之间的间距（原 hero 自带 margin-bottom:44px） */
.wbdx-hero + div {
	margin-top: 56px;
}

/* ---- Hero 响应式 ---- */
@media (max-width: 1100px) {
	.wbdx-hero .wbdx-hero-title { font-size: 40px; }
	.wbdx-hero .wbdx-stat-num { font-size: 36px; }
	.wbdx-hero .wbdx-stat-unit { font-size: 19px; }
}

@media (max-width: 921px) {
	.wbdx-hero {
		/* 移动端页头更矮（约 71px），hero 仍保持整屏 */
		min-height: calc(100vh - 71px);
		min-height: calc(100svh - 71px);
	}
	/* 窄屏收起右侧竖排翻页按钮，翻页交给圆点，避免压在文字上 */
	.wbdx-hero .wbdx-hero-navs { display: none; }
	.wbdx-hero .wbdx-hero-inner { padding: 64px 24px 56px; }
	.wbdx-hero .wbdx-hero-title { font-size: 34px; letter-spacing: 1px; }
	.wbdx-hero .wbdx-hero-sub { font-size: 15px; }
	.wbdx-hero .wbdx-hero-stats-inner {
		grid-template-columns: repeat(2, 1fr);
		gap: 26px 20px;
		padding: 28px 24px 32px;
	}
	.wbdx-hero .wbdx-stat-num { font-size: 32px; }
	.wbdx-hero .wbdx-stat-unit { font-size: 18px; }
}

@media (max-width: 600px) {
	.wbdx-hero .wbdx-hero-inner { padding: 50px 20px 44px; }
	.wbdx-hero .wbdx-hero-dots { bottom: 18px; }
	.wbdx-hero .wbdx-hero-dots > button { width: 20px; }
	.wbdx-hero .wbdx-hero-dots > button.is-on { width: 34px; }
	.wbdx-hero .wbdx-hero-title { font-size: 28px; line-height: 1.42; letter-spacing: .5px; margin-bottom: 18px; }
	.wbdx-hero .wbdx-hero-kicker { font-size: 11px; letter-spacing: 3.5px; gap: 9px; margin-bottom: 16px; }
	.wbdx-hero .wbdx-hero-sub { font-size: 14.5px; line-height: 1.9; }
	.wbdx-hero .wbdx-hero-tags { margin-top: 22px; gap: 8px; }
	.wbdx-hero .wbdx-hero-tags > span { font-size: 12px; padding: 8px 12px; }
	.wbdx-hero .wbdx-hero-stats-inner {
		grid-template-columns: repeat(2, 1fr);
		gap: 22px 16px;
		padding: 24px 20px 28px;
	}
	.wbdx-hero .wbdx-stat-num { font-size: 27px; }
	.wbdx-hero .wbdx-stat-unit { font-size: 15px; margin-left: 3px; }
	.wbdx-hero .wbdx-stat-label { font-size: 12px; margin-top: 10px; padding-left: 10px; }
	.wbdx-hero .wbdx-stat-label::before { top: 4px; height: calc(100% - 8px); }
}

@media (max-width: 360px) {
	.wbdx-hero .wbdx-hero-title { font-size: 24px; letter-spacing: 0; }
	.wbdx-hero .wbdx-hero-sub { font-size: 14px; }
	.wbdx-hero .wbdx-stat-num { font-size: 23px; }
	.wbdx-hero .wbdx-stat-label { font-size: 11.5px; }
}

/* 尊重系统「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
	.wbdx-hero,
	.wbdx-hero .wbdx-hero-grid,
	.wbdx-hero .wbdx-hero-dome,
	.wbdx-hero .wbdx-hero-dome-2 { transition: none; }
}

/* ============================================================
   品牌化 404 页面样式
   主色沿用官网深蓝 #1a5dab / #0b3a72
   ============================================================ */

.wbdx-404 {
	max-width: 760px;
	margin: 0 auto;
	padding: 56px 20px 72px;
	text-align: center;
	box-sizing: border-box;
}

.wbdx-404 .wbdx-404-code {
	font-size: 104px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 4px;
	color: #e3ecf7;
	margin: 0 0 -18px;
	user-select: none;
}

.wbdx-404 .wbdx-404-title {
	font-size: 27px;
	font-weight: 600;
	color: #0b3a72;
	margin: 0 0 14px;
	letter-spacing: .5px;
}

.wbdx-404 .wbdx-404-desc {
	font-size: 15.5px;
	line-height: 2;
	color: #5a6b7d;
	margin: 0 auto 30px;
	max-width: 560px;
}

/* 三个入口按钮 */
.wbdx-404 .wbdx-404-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-bottom: 34px;
}

.wbdx-404 .wbdx-404-btn {
	display: inline-block;
	padding: 12px 30px;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: all .18s ease;
	border: 1px solid #1a5dab;
	color: #1a5dab;
	background: #fff;
}

.wbdx-404 .wbdx-404-btn:hover,
.wbdx-404 .wbdx-404-btn:focus {
	background: #eef5fd;
	color: #0b3a72;
	border-color: #0b3a72;
}

.wbdx-404 .wbdx-404-btn.wbdx-404-btn-primary {
	background: #1a5dab;
	border-color: #1a5dab;
	color: #fff;
}

.wbdx-404 .wbdx-404-btn.wbdx-404-btn-primary:hover,
.wbdx-404 .wbdx-404-btn.wbdx-404-btn-primary:focus {
	background: #0b3a72;
	border-color: #0b3a72;
	color: #fff;
}

/* 搜索框 */
.wbdx-404 .wbdx-404-search {
	max-width: 440px;
	margin: 0 auto;
	padding-top: 28px;
	border-top: 1px solid #e3e9f2;
}

.wbdx-404 .wbdx-404-search-hint {
	font-size: 13px;
	color: #8a97a6;
	margin: 0 0 12px;
	letter-spacing: .5px;
}

.wbdx-404 .wbdx-404-search form {
	display: flex;
	gap: 8px;
}

.wbdx-404 .wbdx-404-search input[type="search"],
.wbdx-404 .wbdx-404-search input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 15px;
	border: 1px solid #d5dfeb;
	border-radius: 6px;
	font-size: 14.5px;
	color: #22303f;
	background: #fff;
}

.wbdx-404 .wbdx-404-search input[type="search"]:focus,
.wbdx-404 .wbdx-404-search input[type="text"]:focus {
	outline: none;
	border-color: #1a5dab;
	box-shadow: 0 0 0 3px rgba(26, 93, 171, .1);
}

.wbdx-404 .wbdx-404-search button {
	flex: 0 0 auto;
	padding: 11px 24px;
	border: none;
	border-radius: 6px;
	background: #1a5dab;
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .18s ease;
}

.wbdx-404 .wbdx-404-search button:hover {
	background: #0b3a72;
}

/* 快捷链接 */
.wbdx-404 .wbdx-404-links {
	margin-top: 30px;
	font-size: 13.5px;
	color: #8a97a6;
	line-height: 2.1;
}

.wbdx-404 .wbdx-404-links a {
	color: #1a5dab;
	text-decoration: none;
	margin: 0 4px;
}

.wbdx-404 .wbdx-404-links a:hover {
	text-decoration: underline;
}

/* 移动端 */
@media (max-width: 544px) {
	.wbdx-404 { padding: 36px 16px 52px; }
	.wbdx-404 .wbdx-404-code { font-size: 76px; margin-bottom: -12px; }
	.wbdx-404 .wbdx-404-title { font-size: 22px; }
	.wbdx-404 .wbdx-404-desc { font-size: 14.5px; }
	.wbdx-404 .wbdx-404-actions { flex-direction: column; gap: 10px; }
	.wbdx-404 .wbdx-404-btn { display: block; padding: 13px 20px; }
	.wbdx-404 .wbdx-404-search form { flex-direction: column; }
	.wbdx-404 .wbdx-404-search button { width: 100%; }
}

/* ============================================================
   通栏 hero 的页面级适配（2026-09-29）
   ------------------------------------------------------------
   ① 去掉 hero 上方的白带
      Astra 的 .site-content 默认 padding: 2em 0，会把 hero 往下推约 20px，
      页头与 hero 之间出现一条白色缝隙，与设计稿「hero 紧贴页头」不符。
      仅对含 .wbdx-hero 的页面归零该 padding，其他页面不受影响。
   ② 裁掉 100vw 带来的 15px 横向溢出
      100vw 含竖向滚动条宽度，需在页面级裁掉横向溢出。
      ⚠️ 只能用 overflow-x（clip 优先），绝不能写 overflow:hidden
         —— 那会连带把纵向滚动一起裁掉。
   ============================================================ */
body:has(.wbdx-hero) .site-content {
	padding-top: 0;
	padding-bottom: 0;
}

/* ③ 去掉 .content-area.primary 的 64px 上下外边距（实测 heroTop-headerBottom=64 的真凶）
      Astra 在 #primary 上设了 margin: 64px 0；hero 归零 .site-content padding 后
      这条 margin 就成了页头与 hero 之间残留的白带。 */
body:has(.wbdx-hero) .content-area.primary,
body:has(.wbdx-hero) #primary.content-area {
	margin-top: 0;
	margin-bottom: 0;
}

html:has(.wbdx-hero),
html:has(.wbdx-hero) body {
	overflow-x: clip;          /* clip 不产生新滚动容器，比 hidden 更安全 */
}
@supports not (overflow: clip) {
	html:has(.wbdx-hero),
	html:has(.wbdx-hero) body {
		overflow-x: hidden;
	}
}

/* 兼容不支持 :has() 的旧浏览器：由 functions.php 输出 html.has-wbdx-hero 类兜底 */
body.has-wbdx-hero .site-content {
	padding-top: 0;
	padding-bottom: 0;
}
body.has-wbdx-hero .content-area.primary,
body.has-wbdx-hero #primary.content-area {
	margin-top: 0;
	margin-bottom: 0;
}
html.has-wbdx-hero,
html.has-wbdx-hero body {
	overflow-x: clip;
}
@supports not (overflow: clip) {
	html.has-wbdx-hero,
	html.has-wbdx-hero body {
		overflow-x: hidden;
	}
}

/* ============================================================
   资质证书展示墙（首页 · .wbdx-certs）
   ------------------------------------------------------------
   设计要点
   ① 移动优先：默认单列，随宽度自动 2→3 列，无需媒体查询
      （grid auto-fit + minmax）
   ② 证书比例不一（营业执照横版、资质证书竖版），统一「固定比例
      白底 + object-fit:contain」，保证不裁切、不变形
   ③ 动效克制：仅 transform / opacity（GPU 加速），悬停上浮 4px，
      0.25s；阴影用伪元素透明度过渡，避免动画 box-shadow 重绘
   ④ 无障碍：<a> 天然可键盘聚焦 + 可见焦点环；点击由 JS 升级为
      灯箱，JS 失效时退化为直接打开原图
   ============================================================ */
.wbdx-certs {
	margin-top: 56px;
}

.wbdx-certs-head {
	margin-bottom: 26px;
}

.wbdx-certs-title {
	margin: 0 0 8px 0;
	font-size: 23px;
	color: #0b3a72;
	border-left: 5px solid #1a5dab;
	padding-left: 14px;
	line-height: 1.45;
}

.wbdx-certs-sub {
	margin: 0 0 0 19px;
	color: #7a8797;
	font-size: 14px;
}

.wbdx-certs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
	gap: 16px;
}

.wbdx-cert {
	display: block;
	position: relative;
	text-decoration: none;
	background: #fff;
	border: 1px solid #e3e9f2;
	border-radius: 8px;
	padding: 12px 12px 14px;
	box-sizing: border-box;
	transition: transform .25s ease;
}

.wbdx-cert::after {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(11, 58, 114, .13);
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}

.wbdx-cert:hover,
.wbdx-cert:focus-visible {
	transform: translateY(-4px);
}

.wbdx-cert:hover::after,
.wbdx-cert:focus-visible::after {
	opacity: 1;
}

.wbdx-cert:focus-visible {
	outline: 3px solid #2a7ac8;
	outline-offset: 3px;
}

.wbdx-cert-box {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 4;
	background: #fbfcfe;
	border: 1px solid #eef2f8;
	border-radius: 5px;
	overflow: hidden;
}

.wbdx-cert-box img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.wbdx-cert-name {
	display: block;
	margin: 12px 0 4px;
	font-size: 14.5px;
	font-weight: 700;
	color: #0b3a72;
	line-height: 1.5;
}

.wbdx-cert-meta {
	display: block;
	font-size: 12.5px;
	color: #7a8797;
	line-height: 1.6;
}

/* ---------- 证书灯箱（点击大图） ---------- */
.wbdx-lb {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(5, 14, 28, .93);
	opacity: 0;
	transition: opacity .22s ease;
}

.wbdx-lb[hidden] {
	display: none;
}

.wbdx-lb.is-open {
	opacity: 1;
}

.wbdx-lb-figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 92vw;
}

.wbdx-lb-img {
	display: block;
	max-width: 92vw;
	max-height: 78vh;
	width: auto;
	height: auto;
	background: #fff;
	border-radius: 6px;
}

.wbdx-lb-cap {
	margin-top: 14px;
	color: #dce9f8;
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
}

.wbdx-lb-close {
	position: absolute;
	top: 18px;
	right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	background: rgba(255, 255, 255, .10);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.wbdx-lb-close:hover {
	background: rgba(255, 255, 255, .22);
}

.wbdx-lb-close:focus-visible {
	outline: 3px solid #7fb6ee;
	outline-offset: 2px;
}

body.wbdx-lb-open {
	overflow: hidden;
}

@media (max-width: 575px) {
	.wbdx-certs-grid {
		grid-template-columns: 1fr;
	}
	.wbdx-lb {
		padding: 14px;
	}
	.wbdx-lb-img {
		max-height: 72vh;
	}
}

/* ============================================================
   首页整屏下滑（对标华东院 · 2026-09-30）
   ------------------------------------------------------------
   开启条件（三者同时满足，缺一不可）：
     ① 视口宽 ≥ 1025px —— 窄屏 / 移动端保持普通纵向滚动（与华东院一致）
     ② 未开启「减弱动效」prefers-reduced-motion
     ③ JS 正常执行完 —— <html> 上才会出现 .wbdx-fp-on

   因此任何一条不满足，页面就是普通纵向滚动，内容 / 链接 / SEO 全不受影响；
   JS 半路出错时脚本自己会把 .wbdx-fp-on 摘掉，不会出现「滚不动」。
   ============================================================ */
html.wbdx-fp-on {
	scroll-behavior: smooth;
}

html.wbdx-fp-on .entry-content > .wbdx-screen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(100vh - var(--wbdx-hdr, 93px));
	box-sizing: border-box;
}

/* hero 本身就是满屏通栏，不能被 flex 居中。
   ⚠️ 绝不能在这里写 min-height —— hero 的高度正是靠 min-height 撑起来的，
      归零会让它塌成内容高度（首屏直接矮掉 146px）。 */
html.wbdx-fp-on .entry-content > .wbdx-screen.wbdx-hero {
	display: block;
}

/* 5 张荣誉信用证书固定排成一行，避免 auto-fit 折成 4+1 两行把整屏撑破 */
html.wbdx-fp-on .wbdx-screen .wbdx-certs-grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* 整屏模式下证书墙的 56px 上外边距由 flex 居中接管 */
html.wbdx-fp-on .wbdx-screen .wbdx-certs {
	margin-top: 0;
}

/* ---------- 滚入动效（对标华东院 WOW：淡入 + 上浮 + 逐级递延） ---------- */
html.wbdx-fp-on .wbdx-screen .wbdx-rv,
html.wbdx-fp-on .wbdx-screen .wbdx-rv-grid > * {
	transition:
		opacity .72s cubic-bezier(.22, .61, .36, 1),
		transform .72s cubic-bezier(.22, .61, .36, 1);
}

html.wbdx-fp-on .wbdx-screen:not(.is-in) .wbdx-rv {
	opacity: 0;
	transform: translateY(26px);
}

html.wbdx-fp-on .wbdx-screen:not(.is-in) .wbdx-rv-grid > * {
	opacity: 0;
	transform: translateY(22px);
}

html.wbdx-fp-on .wbdx-screen .wbdx-rv-2 { transition-delay: .10s; }
html.wbdx-fp-on .wbdx-screen .wbdx-rv-3 { transition-delay: .18s; }

html.wbdx-fp-on .wbdx-screen .wbdx-rv-grid > *:nth-child(1) { transition-delay: .16s; }
html.wbdx-fp-on .wbdx-screen .wbdx-rv-grid > *:nth-child(2) { transition-delay: .23s; }
html.wbdx-fp-on .wbdx-screen .wbdx-rv-grid > *:nth-child(3) { transition-delay: .30s; }
html.wbdx-fp-on .wbdx-screen .wbdx-rv-grid > *:nth-child(4) { transition-delay: .37s; }
html.wbdx-fp-on .wbdx-screen .wbdx-rv-grid > *:nth-child(5) { transition-delay: .44s; }
html.wbdx-fp-on .wbdx-screen .wbdx-rv-grid > *:nth-child(6) { transition-delay: .51s; }
html.wbdx-fp-on .wbdx-screen .wbdx-rv-grid > *:nth-child(7) { transition-delay: .58s; }
html.wbdx-fp-on .wbdx-screen .wbdx-rv-grid > *:nth-child(8) { transition-delay: .65s; }
html.wbdx-fp-on .wbdx-screen .wbdx-rv-grid > *:nth-child(9) { transition-delay: .72s; }
html.wbdx-fp-on .wbdx-screen .wbdx-rv-grid > *:nth-child(n+10) { transition-delay: .78s; }

@media (prefers-reduced-motion: reduce) {
	html.wbdx-fp-on .wbdx-screen .wbdx-rv,
	html.wbdx-fp-on .wbdx-screen .wbdx-rv-grid > * {
		transition: none;
	}
}

/* ---------- 矮屏（1366×768 / 1280×720 笔记本）紧凑化 ----------
   保证「一屏一屏」在常见笔记本上不被内容撑破。
   内联样式只能用 !important 覆盖。 */
@media (min-width: 1025px) and (max-height: 880px) {
	html.wbdx-fp-on .wbdx-screen {
		padding: 12px 0;
	}

	/* 首屏：1366×768 这类矮屏上，hero 正文 + 数据条的总高会超出「视口−页头」
	   约 10px，把底部数据条的收尾挤出可视区。这里收一收上下留白补回来。 */
	html.wbdx-fp-on .wbdx-hero .wbdx-hero-inner {
		padding-top: 46px;
		padding-bottom: 40px;
	}

	html.wbdx-fp-on .wbdx-hero .wbdx-hero-stats-inner {
		padding: 24px 20px 26px;
	}

	html.wbdx-fp-on .wbdx-screen h2,
	html.wbdx-fp-on .wbdx-screen .wbdx-certs-title {
		font-size: 21px;
	}

	html.wbdx-fp-on .wbdx-screen p[style*="margin:0 0 26px 19px"] {
		margin-bottom: 16px !important;
	}

	html.wbdx-fp-on .wbdx-screen .wbdx-rv-grid > div {
		padding: 15px 16px !important;
	}

	html.wbdx-fp-on .wbdx-screen .wbdx-rv-grid > div p {
		line-height: 1.65 !important;
	}

	html.wbdx-fp-on .wbdx-screen .wbdx-certs-head {
		margin-bottom: 18px;
	}
}

/* ---------- 右侧分页点导航（JS 生成，渐进增强） ---------- */
.wbdx-fpnav {
	display: none;
	position: fixed;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 90;
	flex-direction: column;
	gap: 15px;
}

html.wbdx-fp-on .wbdx-fpnav {
	display: flex;
}

.wbdx-fpnav button {
	position: relative;
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(11, 58, 114, .22);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .6);
	cursor: pointer;
	transition: background .3s ease, transform .3s ease;
}

.wbdx-fpnav button:hover {
	background: rgba(11, 58, 114, .52);
}

.wbdx-fpnav button.is-on {
	background: #1a5dab;
	transform: scale(1.45);
}

.wbdx-fpnav button:focus-visible {
	outline: 3px solid #2a7ac8;
	outline-offset: 3px;
}

/* 首屏压在深色实景图上 → 换成浅色点 */
.wbdx-fpnav.on-hero button {
	background: rgba(255, 255, 255, .45);
	box-shadow: 0 0 0 3px rgba(11, 58, 114, .3);
}

.wbdx-fpnav.on-hero button.is-on {
	background: #fff;
}

/* ============================================================
   各屏实景背景 + 代表项目带图卡（2026-09-30 第二轮）
   ------------------------------------------------------------
   ① 首屏固定丽水机场图（原来是 3 张轮播）—— 见 functions.php 轮播脚本，
      其中 slides.length < 2 直接 return，单张天然不轮播。
   ② 第 2-6 屏各配一张代表性项目实景图做背景。
   ③ 代表项目屏由 3 个文字卡扩为 6 个带图卡。

   ⚠️ 项目实景原图仅 900×600，铺满全屏要放大 2 倍以上。
      因此背景层一律「模糊 + 压暗」：既盖住放大后的发虚，又保证白字可读。
      首屏是主视觉，不加模糊，只靠原有 veil 压暗。
   ============================================================ */

/* ---------- 通栏（full-bleed）：第 2~6 屏必须铺满视口宽 ----------
   ⚠️ 只有首屏 hero 自带 100vw 通栏规则；其余屏默认只占 .entry-content 的容器宽
      （Astra 内容区 1200px，居中），在 1440 / 1920 这类宽屏上两侧各空出 120~360px
      露出页面底色 —— 看上去就是「从第二屏起不再是满屏」。
      背景层虽是 inset:0 的绝对定位，但它只铺得满自己的定位祖先（= 屏本身），
      屏不够宽，背景自然也铺不满。
   这里用「负外边距撑开」而不是 width:100vw：
   块级元素 width:auto 时宽度 = 容器宽 + 左右负外边距之和，正好等于视口宽；
   而 100vw 含竖向滚动条宽（Windows 约 15px），得靠 overflow-x:clip 兜底裁掉。
   窄视口下 calc(50% - 50vw) 趋近 0（容器已与视口等宽），不会产生副作用。 */
.entry-content > .wbdx-screen.wbdx-screen--img {
	width: auto;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* 撑满之后，屏内直接子元素要重新收进 1200px 居中容器，
   否则标题与卡片会摊到整个 1920 宽（行长失控，也不与页头容器对齐）。
   ⚠️ 必须显式写 width:100% —— 屏是 flex 容器，光给 max-width + auto 外边距时，
      auto 外边距会顶掉交叉轴的 stretch，让元素收缩成 fit-content，
      卡片网格随之改变列数、整屏高度暴增。
   用 max-width 而不是 padding —— 避免覆盖子元素自身的 padding
   （如联系屏玻璃卡片的内边距）。子元素内联的 margin-left（副标题 19px 缩进）依旧优先。 */
.entry-content > .wbdx-screen.wbdx-screen--img > *:not(.wbdx-scr-bg) {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* ---------- 各屏背景层 ---------- */
.wbdx-screen--img {
	position: relative;
	isolation: isolate;
}

.wbdx-screen--img > .wbdx-scr-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.wbdx-screen--img > .wbdx-scr-bg picture {
	display: block;
	width: 100%;
	height: 100%;
}

.wbdx-screen--img > .wbdx-scr-bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(5px) saturate(1.12) brightness(.84);
	/* 放大一点，避免 blur 在四边露出底色 */
	transform: scale(1.06);
}

/* 深蓝压暗层 —— 左深右浅：标题所在的左侧压到最深保白字对比，
   右侧与底部留出亮度，让项目实景照片能被辨认（否则背景图等于白放）。 */
.wbdx-screen--img > .wbdx-scr-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		104deg,
		rgba(4, 14, 32, .93) 0%,
		rgba(5, 20, 43, .85) 32%,
		rgba(7, 28, 58, .68) 66%,
		rgba(9, 36, 74, .56) 100%);
}

/* 内容整体抬到背景层之上 */
.wbdx-screen--img > *:not(.wbdx-scr-bg) {
	position: relative;
	z-index: 1;
}

/* ---------- 深色底上的证书墙标题 ---------- */
.wbdx-screen--img .wbdx-certs-title {
	color: #ffffff;
	border-left-color: #4d9fe0;
	text-shadow: 0 2px 14px rgba(3, 16, 38, .6);
}

.wbdx-screen--img .wbdx-certs-sub {
	color: #a9c3e2;
	text-shadow: 0 1px 8px rgba(3, 16, 38, .55);
}

/* 证书卡片本体是白底，在深色底上自动形成对比，无需再加投影 */
.wbdx-screen--img .wbdx-cert-box {
	box-shadow: 0 10px 26px rgba(2, 12, 30, .34);
}

/* ---------- 代表项目：带图卡 ---------- */
.wbdx-proj-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
	gap: 16px;
}

.wbdx-proj {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 10px;
	text-decoration: none;
	box-shadow: 0 10px 26px rgba(2, 12, 30, .3);
}

.wbdx-proj-ph {
	display: block;
	overflow: hidden;
	/* 用 vh 自适应：整屏模式下一屏高度来自视口，矮屏自动收图 */
	height: clamp(132px, 22vh, 208px);
	background: #d9e3ef;
}

.wbdx-proj-ph img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

/* hover 只动图片 transform —— 卡片自身的 transform 被入场动效占用，
   两处同时写会互相覆盖（入场规则优先级更高）。 */
.wbdx-proj:hover .wbdx-proj-ph img {
	transform: scale(1.07);
}

.wbdx-proj:hover {
	border-color: rgba(124, 184, 248, .6);
}

.wbdx-proj-tx {
	display: block;
	padding: 14px 16px 16px;
}

.wbdx-proj-tag {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	letter-spacing: 2px;
	color: #2a7ac8;
}

.wbdx-proj-name {
	display: block;
	margin-bottom: 7px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	color: #0b3a72;
}

.wbdx-proj-desc {
	display: block;
	font-size: 13px;
	line-height: 1.7;
	color: #5a6b7d;
}

.wbdx-proj-desc b {
	color: #1a5dab;
	font-weight: 700;
}

/* 整屏模式下固定 3 列 —— 6 张卡正好 3×2，不会被 auto-fit 折成 4+2 */
html.wbdx-fp-on .wbdx-screen .wbdx-proj-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 矮屏（1366×768 / 1280×720）文字收紧，给图片留高度 */
@media (min-width: 1025px) and (max-height: 820px) {
	html.wbdx-fp-on .wbdx-screen .wbdx-proj-ph {
		height: clamp(118px, 19vh, 168px);
	}

	html.wbdx-fp-on .wbdx-screen .wbdx-proj-tx {
		padding: 11px 14px 13px;
	}

	html.wbdx-fp-on .wbdx-screen .wbdx-proj-name {
		margin-bottom: 5px;
		font-size: 15px;
	}

	html.wbdx-fp-on .wbdx-screen .wbdx-proj-desc {
		font-size: 12.5px;
		line-height: 1.6;
	}
}

/* 窄屏证书墙：5 张固定一行会挤成邮票，改回自适应换行
   （575px 以下沿用原有的单列规则，故这里从 576px 起） */
@media (min-width: 576px) and (max-width: 1024px) {
	.wbdx-certs-grid {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
}

.wbdx-fpnav button span {
	position: absolute;
	right: 26px;
	top: 50%;
	transform: translateY(-50%);
	padding: 5px 11px;
	border-radius: 4px;
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 2px 12px rgba(11, 58, 114, .16);
	color: #0b3a72;
	font-size: 13px;
	line-height: 1.4;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

.wbdx-fpnav button:hover span,
.wbdx-fpnav button:focus-visible span {
	opacity: 1;
}

/* 窄屏（≤1100px）：标题横跨整幅，斜向渐变会把右侧标题压到亮部，
   改用纵向压暗，保证每一行标题都在深底上。 */
@media (max-width: 1100px) {
	.wbdx-screen--img > .wbdx-scr-bg::after {
		background: linear-gradient(
			to bottom,
			rgba(4, 14, 32, .93) 0%,
			rgba(5, 20, 43, .87) 42%,
			rgba(6, 24, 50, .84) 100%);
	}
}