/* ============================================================
   鹰诺达 · 栏目导航（收缩/展开式）+ 文章列表卡片
   2026-11-13  v=20261113b
   说明：导航为一条紧凑标签栏，点击标签就地展开栏目清单，
        再点收起；当前栏目高亮。
   ============================================================ */

/* ---------- 外壳（与内容区 1200 对齐） ---------- */
.yn-about.yn-catbar{
  width:100% !important; max-width:100% !important;
  margin:0 !important; padding:0 !important;
  background:#fff; border-bottom:1px solid #edf0f5;
  position:relative; z-index:50;
  color:#454b5c; font-size:15px; line-height:1.7;
}
.yn-about.yn-catbar *{ box-sizing:border-box; }
.ync-wrap{ width:100%; max-width:1200px; margin:0 auto; }

/* ---------- 面包屑 ---------- */
.yn-catbar .ync-crumb{
  padding:14px 0 0; font-size:12.5px; color:#9aa1ae; letter-spacing:.2px;
}
.yn-catbar .ync-crumb a{ color:#9aa1ae; text-decoration:none; }
.yn-catbar .ync-crumb a:hover{ color:#011d5c; }

/* ---------- 栏目导航 · 分类式（与产品筛选区同款胶囊） ---------- */
.yncatx{
  background:#fff; border:1px solid #e9eef6; border-radius:10px;
  padding:8px 20px 10px; box-shadow:0 2px 10px rgba(20,32,60,.03);
}
.yncatx-row{
  display:flex !important; align-items:flex-start; gap:12px;
  padding:7px 0;
}
.yncatx-row + .yncatx-row{ border-top:1px dashed #eef2f8; }
.yncatx-lab{
  flex:0 0 96px; width:96px; box-sizing:border-box;
  display:inline-flex !important; align-items:center;
  height:30px; font-size:14px; color:#6b7280; text-decoration:none;
  white-space:nowrap; line-height:1;
}
.yncatx-lab:hover{ color:#011d5c; }
.yncatx-links{
  flex:1 1 auto; min-width:0;
  display:flex !important; flex-wrap:wrap; align-items:center;
  gap:10px 10px; padding-top:1px;
}
.yncatx-links a{
  display:inline-block; padding:5px 18px; border-radius:16px;
  border:1px solid #e5e9f0; background:#fff;
  font-size:14px; color:#5b6478; line-height:1.3; text-decoration:none;
  white-space:nowrap; transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.yncatx-links a:hover{ border-color:#011d5c; color:#011d5c; }
.yncatx-links a.on{
  background:#011d5c; border-color:#011d5c; color:#fff; font-weight:600;
}
.yncatx-links a.all{ color:#8b93a3; }
.yncatx-links a.all:hover{ color:#011d5c; }
.yncatx-links a.all.on{ color:#fff; }

/* ---------- 文章列表卡片 ---------- */
.yn-arts{ display:flex; flex-direction:column; gap:18px; }
.yn-art{
  display:flex; gap:24px; padding:16px;
  background:#fff; border:1px solid #edf0f6; border-radius:16px;
  box-shadow:0 2px 8px rgba(20,32,60,.03);
  transition:box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}
.yn-art:hover{ border-color:#dbe4f4; box-shadow:0 16px 38px rgba(16,32,72,.10); transform:translateY(-2px); }
.yn-art-ph{
  flex:0 0 300px; width:300px; height:190px; display:block; overflow:hidden;
  border-radius:10px; background:#eef1f7;
}
.yn-art-ph img{
  width:100%; height:190px; display:block; object-fit:cover; object-position:center 22%;
  transition:transform .55s ease;
}
.yn-art:hover .yn-art-ph img{ transform:scale(1.045); }
.yn-art-ph.is-empty::after{
  content:"鹰诺达工作服"; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; color:#b9c1d1; font-size:13px; letter-spacing:2px;
}

.yn-art-bd{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; padding:2px 2px 0 0; }
.yn-art-bd h2{ margin:0; font-size:19px; line-height:1.5; font-weight:700; letter-spacing:.2px; }
.yn-art-bd h2 a{
  color:#141b2b; text-decoration:none; display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.yn-art-bd h2 a:hover{ color:#011d5c; }
.yn-art-desc{
  margin:10px 0 0; font-size:14px; line-height:1.85; color:#6b7386;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.yn-art-desc a{ color:inherit; text-decoration:none; }
.yn-art-meta{
  margin-top:auto; padding-top:12px;
  display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  font-size:13px; color:#98a0b0;
}
.yn-art-meta .dt{ display:inline-flex; align-items:center; gap:6px; }
.yn-art-meta .dt::before{ content:""; width:6px; height:6px; border-radius:50%; background:#c8d2e6; }
.yn-art-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.yn-art-tags a{ padding:4px 9px; border-radius:6px; background:#f4f7fc; font-size:12px; color:#7b8496; text-decoration:none; }
.yn-art-tags a:hover{ background:#eaf1ff; color:#011d5c; }
.yn-art-meta .more{
  margin-left:auto; font-size:13px; color:#011d5c; font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; gap:4px;
}
.yn-art-meta .more:hover{ color:#c8102e; }

/* ---------- 分类胶囊（案例等页复用） ---------- */
.yn-subbar{ display:flex; align-items:flex-start; flex-wrap:wrap; gap:8px; margin:4px 0 18px; }
.yn-subbar .lab{ font-size:13px; color:#98a0b0; line-height:32px; margin-right:2px; }
.yn-subbar a{
  display:inline-block; padding:7px 14px; border-radius:999px; line-height:1;
  font-size:13.5px; color:#4a5468; background:#f4f7fc; border:1px solid #eef2f9;
  text-decoration:none; transition:all .16s ease;
}
.yn-subbar a:hover{ color:#011d5c; border-color:#c9d9f5; background:#eef4ff; }
.yn-subbar a.on{ background:#011d5c; border-color:#011d5c; color:#fff; font-weight:600; }

/* ---------- 图片网格统一 ---------- */
.yn-grid{ display:grid !important; grid-template-columns:repeat(4,1fr); gap:18px; }
.yn-grid > li{
  float:none !important; width:auto !important; margin:0 !important; border:1px solid #eef1f7 !important;
  background:#fff; border-radius:14px; padding:8px;
  box-shadow:0 2px 8px rgba(20,32,60,.03);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.yn-grid > li:hover{ box-shadow:0 14px 32px rgba(16,32,72,.10); transform:translateY(-2px); }
.yn-grid > li .ph{ width:100%; aspect-ratio:3/4; overflow:hidden; background:#eef1f7; border-radius:9px; }
.yn-grid > li .ph img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; transition:transform .5s ease; }
.yn-grid > li:hover .ph img{ transform:scale(1.04); }
.yn-grid > li p{
  margin:0; padding:11px 6px 4px; font-size:14px; line-height:1.6; color:#2a3242;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---------- 响应式 ---------- */
@media (max-width:1300px){
  .ync-wrap{ padding:0 20px; }
  .yn-art-ph{ flex:0 0 260px; width:260px; height:168px; }
  .yn-art-ph img{ height:168px; }
  .yn-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .yn-catbar .ync-crumb{ padding:10px 0 0; font-size:12px; }
  .yncatx{ padding:2px 14px 4px; border-radius:10px; }
  .yncatx-row{ display:block !important; padding:9px 0; cursor:pointer; }
  .yncatx-row + .yncatx-row{ border-top:1px dashed #eef2f8; }
  .yncatx-lab{ width:auto !important; flex:none !important; height:auto; display:flex !important; font-size:14px; margin-bottom:0; color:#011d5c; font-weight:600; align-items:center; }
  .yncatx-arrow{
    display:inline-block; width:0; height:0; margin-left:8px;
    border-left:4.5px solid transparent; border-right:4.5px solid transparent;
    border-top:5.5px solid #9aa6bd; transition:transform .2s ease;
  }
  .yncatx-row.open .yncatx-arrow{ transform:rotate(180deg); }
  .yncatx-row .yncatx-links{ display:none !important; margin-top:8px; }
  .yncatx-row.on .yncatx-links,
  .yncatx-row.open .yncatx-links{ display:flex !important; }
  .yncatx-links{ gap:8px 8px; }
  .yncatx-links a{ padding:4px 13px; font-size:13px; border-radius:14px; }
  .yn-art{ flex-direction:column; gap:12px; padding:12px; border-radius:14px; }
  .yn-art-ph, .yn-art-ph img{ flex:none; width:100%; height:auto; aspect-ratio:16/10; }
  .yn-art-bd h2{ font-size:16.5px; }
  .yn-art-bd h2 a{ white-space:normal; }
  .yn-art-desc{ font-size:13.5px; }
  .yn-grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
}

/* ---------- 网格底部更多 ---------- */
.yn-more{ text-align:center; padding:22px 0 6px; }
.yn-more a{
  display:inline-block; padding:10px 26px; border-radius:24px;
  border:1px solid #cfdcf4; background:#fff; color:#011d5c;
  font-size:14px; font-weight:600; text-decoration:none;
  transition:background .16s ease, box-shadow .16s ease;
}
.yn-more a:hover{ background:#f2f7ff; box-shadow:0 8px 18px rgba(16,32,72,.08); }

/* ---------- 产品列表筛选区：等宽网格对齐 + 一行收起 ---------- */
.P_cat dl{ position:relative; padding-right:76px; }
.P_cat dl dd{
  display:grid !important; grid-template-columns:repeat(8, minmax(0,1fr));
  gap:10px 10px; box-sizing:border-box;
  max-height:none !important; overflow:visible !important;
}
.P_cat dl dd.hangye{ height:auto !important; max-height:none !important; overflow:visible !important; }
.P_cat dl dd a{
  display:block !important; margin:0 !important; padding:0 6px !important;
  height:32px; line-height:30px; box-sizing:border-box;
  border:1px solid #e5e9f0 !important; border-radius:16px;
  background:#fff; font-size:13.5px; color:#5b6478;
  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:pointer;
}
.P_cat dl dd a:hover, .P_cat dl dd a.on{
  background:#011d5c !important; border-color:#011d5c !important; color:#fff !important;
}
.P_cat dl dd .quanbu, .P_cat dl dd .xiangshang,
.P_cat dl dd.hangye .quanbu, .P_cat dl dd.hangye .xiangshang{ display:none !important; font-size:0 !important; }
@media (max-width:900px){
  .P_cat dl{ padding-right:0; }
  .P_cat dl dd{ grid-template-columns:repeat(3, minmax(0,1fr)); max-height:none; overflow:visible; }
  .P_cat dl dd a{ height:30px; line-height:28px; font-size:13px; }
  .P_cat dl .cat-more{ display:none !important; }
}