/* =========================================================
   equip.css —— 职业装备父子滑动门
   V6 版本：接入站点头尾 + 底部装备精选手风琴 + 区块背景色差
   冲突修复：
   1. 移除 html/body 的 overflow:hidden —— 原无头脚整屏版禁止滚动，
      带头尾后页高约 1500px+，必须恢复垂直滚动（否则页脚永远看不到）
   2. .equip-wrap 上下 padding 统一 64px：与站点 .blk 标准节奏
      （padding:64px 0）对齐，主体上下各留 64 高空白
   3. body 背景 #f5f5f5 → var(--bg) 白底：参照 doc 页"白内容区 +
      灰带（.blk.gray #f6f8fb）"节奏——装备展示区白底、手风琴区
      包 .blk.gray 灰带，用色差区分不同区块
   4. 元素级 reset 与站点 index.css 的 *{margin/padding/box-sizing}
      及 a/img/ul 规则同值，加载顺序在站点 CSS 之后也不会反噬头尾
   ========================================================= */

html, body, div, ul, li, a, span, img {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body.equip-page {
	font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
	color: #222;
	background: var(--bg);
	line-height: 1.5;
}

ul {
	list-style: none;
}

a {
	text-decoration: none;
	color: inherit;
}

img {
	display: block;
	border: 0;
	max-width: 100%;
}

.equip-wrap {
	width: 1200px;
	margin: 0 auto;
	padding: 64px 0 64px;
                     /* 上下 64：与站点 .blk 节奏对齐，主体上下各留 64 高空白 */
}

/* ===== 1. 大图 严格 1200×750 = 16:10 ===== */
.equip-hero {
	position: relative;
	width: 100%;
	height: 750px;
	overflow: hidden;
	background: #eaeaea;
	border: 1px solid #ddd;
	border-bottom: 0;
}

.equip-hero .big-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity .28s ease;
	object-fit: cover;
}

.equip-hero .big-img.is-active {
	opacity: 1;
	z-index: 2;
}

/* ===== 2. 父滑动门：叠在大图底部，半透明背景 ===== */
.equip-fathers {
	position: relative;
	width: 1200px;
	display: flex;
	z-index: 5;
	margin-top: -60px;
                          /* 上移60px叠到大图底部，底部重合 */
}

.equip-fathers .ef-father {
	position: relative;
	flex: 0 0 150px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 1px;
	background: rgba(44, 62, 80, 0.62);
         /* 半透明，可透出大图 */
	color: #fff;
	border-right: 1px solid rgba(255,255,255,.18);
	cursor: pointer;
	user-select: none;
	transition: background-color .2s ease, color .2s ease;
}

.equip-fathers .ef-father:last-child {
	border-right: 0;
}

.equip-fathers .ef-father:hover,
.equip-fathers .ef-father.is-active {
	background: rgba(212, 175, 104, 0.85);
	color: #1a1a1a;
}

/* ===== 3. 子滑动门容器：展开下沉 ===== */
.equip-children {
	width: 1200px;
	overflow: hidden;
	background: #f7f7f7;
	border: 1px solid #eee;
	border-top: 0;
	max-height: 0;
	opacity: 0;
	transform: translateY(-8px);
	transition: max-height .35s cubic-bezier(.22,.61,.36,1),
    opacity .28s ease,
    transform .35s cubic-bezier(.22,.61,.36,1);
}

.equip-children.is-open {
	max-height: 105px;
	opacity: 1;
	transform: translateY(0);
}

.equip-children .ec-row {
	width: 1200px;
	min-height: 88px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
}

/* 子门单元：上 16:10 缩略图(80×50) + 下名称(34px, 14px字体) */
.equip-children .ec-cell {
	flex: 0 0 80px;
	min-height: 88px;
	border-right: 1px dotted #dcdcdc;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	transform: translateY(-10px);
	opacity: 0;
	transition: background-color .18s ease,
    color .18s ease,
    transform .28s cubic-bezier(.22,.61,.36,1),
    opacity .28s ease;
}

.equip-children.is-open .ec-cell {
	transform: translateY(0);
	opacity: 1;
}
/* 递进延迟（加快版） */
.equip-children.is-open .ec-cell:nth-child(1) {
	transition-delay: .02s !important;
}

.equip-children.is-open .ec-cell:nth-child(15) {
	transition-delay: .02s !important;
}

.equip-children.is-open .ec-cell:nth-child(2) {
	transition-delay: .04s !important;
}

.equip-children.is-open .ec-cell:nth-child(14) {
	transition-delay: .04s !important;
}

.equip-children.is-open .ec-cell:nth-child(3) {
	transition-delay: .06s !important;
}

.equip-children.is-open .ec-cell:nth-child(13) {
	transition-delay: .06s !important;
}

.equip-children.is-open .ec-cell:nth-child(4) {
	transition-delay: .08s !important;
}

.equip-children.is-open .ec-cell:nth-child(12) {
	transition-delay: .08s !important;
}

.equip-children.is-open .ec-cell:nth-child(5) {
	transition-delay: .10s !important;
}

.equip-children.is-open .ec-cell:nth-child(11) {
	transition-delay: .10s !important;
}

.equip-children.is-open .ec-cell:nth-child(6) {
	transition-delay: .12s !important;
}

.equip-children.is-open .ec-cell:nth-child(10) {
	transition-delay: .12s !important;
}

.equip-children.is-open .ec-cell:nth-child(7) {
	transition-delay: .14s !important;
}

.equip-children.is-open .ec-cell:nth-child(9) {
	transition-delay: .14s !important;
}

.equip-children.is-open .ec-cell:nth-child(8) {
	transition-delay: .16s !important;
}

.equip-children .ec-cell:last-child {
	border-right: 0;
}

.equip-children .ec-cell:hover {
	background: #d4af68;
	color: #1a1a1a;
	transform: translateY(-2px);
}

/* 16:10 缩略图区：80×50 满格 object-fit:cover */
.equip-children .ec-cell .ec-thumb {
	width: 100%;
	height: 50px;
	flex: 0 0 50px;
	overflow: hidden;
	background: #ddd;
}

.equip-children .ec-cell .ec-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 名称：字体加大到 14px，居中显示 */
.equip-children .ec-cell .ec-name {
	flex: 1 1 auto;
	min-height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 16px;
                      /* 12 → 16 明显增大 */
	font-weight: 600;
	color: #222;
	padding: 4px 2px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.equip-children .ec-cell:hover .ec-name {
	color: #1a1a1a;
	font-weight: 700;
}

/* ===== 4. 底部预留行：与父门等高 60px，一行 8 列 ===== */
.equip-bottom {
	width: 1200px;
	height: 60px;
                             /* 72 → 60 */
	display: flex;
	border: 1px solid #eee;
	border-top: 0;
	background: #fafafa;
	opacity: 1;
	transform: translateY(0);
	transition: opacity .28s ease,
    transform .32s ease,
    max-height .32s ease;
	max-height: 72px;
	overflow: hidden;
}

.equip-bottom.is-hidden {
	opacity: 0;
	transform: translateY(12px);
	max-height: 0;
	border: 0;
}

.equip-bottom .eb-cell {
	flex: 0 0 150px;
	height: 60px;
                             /* 同步 */
	display: flex;
	align-items: center;
	justify-content: center;
	border-right: 1px solid #eee;
	font-size: 14px;
	color: #555;
}

.equip-bottom .eb-cell:last-child {
	border-right: 0;
}

.equip-bottom .eb-cell.eb-home a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 124px;
	height: 40px;
                              /* 按钮高度相应缩小 */
	background: #2c3e50;
	color: #fff;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 2px;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.equip-bottom .eb-cell.eb-home a::before {
	content: "⌂";
	margin-right: 6px;
	font-size: 15px;
	line-height: 1;
}

.equip-bottom .eb-cell.eb-home a:hover {
	background: #d4af68;
	color: #1a1a1a;
	transform: translateY(-1px);
}