/* ==========================================================================
   荣誉页（honors.html）首屏 · 参考图1「CORE COMPETENCE」版式
   —— 版式：左栏红色上线 + 全大写大标题 + 红色短线；
      右栏 5 格图块（上排两小格、左下一大格、右侧竖长格 + 底部横格），
      每格左下角白色标签（底部渐变遮罩）；最下方一行 4 组红色文字 + 说明，竖线分隔
   —— 内容取自扣子 honors_page_mockup.html：本区块用 Management Systems 段，
      其上方深色 .page-banner 用 hero 段（标题 + 导语 + 4 组数据），
      面包屑与导语只在 banner 出现一次，本区块不再重复
    —— 仅作用于 .hn-intro，配色复用站内 token
    —— V19：深色 banner 内原来的 4 组数据（.hn-hero-stats）已按要求移除
    ========================================================================== */

/* ---------- 白底主体区块 ---------- */
.hn-intro{padding:clamp(104px,8.6vw,132px) 0 clamp(54px,5.4vw,82px);background:#fff}
/* 紧跟深色 banner 时收紧上内距，避免两屏之间留白过大 */
.page-banner + .hn-intro{padding-top:clamp(48px,4.6vw,74px)}
.hn-intro .wrap{max-width:var(--max,1460px)}

/* 左文右图：31.7% : 62.3%（与参考图比例一致） */
.hn-grid{display:grid;grid-template-columns:minmax(0,.51fr) minmax(0,1fr);gap:clamp(40px,5.4vw,84px);align-items:start}

.hn-copy .overline{justify-content:flex-start;margin-bottom:clamp(16px,1.6vw,20px);color:var(--cyan,#C80000);font-size:12.5px;letter-spacing:.18em}
.hn-copy .overline:before{width:26px;height:2px;background:var(--cyan,#C80000)}
.hn-copy h2{margin:0;font-size:clamp(25px,2.62vw,38px);line-height:1.24;letter-spacing:-.5px;color:var(--ink,#0F1F33)}
.hn-rule{width:92px;height:3px;margin:clamp(22px,2.4vw,30px) 0 0;background:var(--cyan,#C80000)}

/* 5 格图块：整体比例 655:480，右侧竖长格高于左侧两行 */
.hn-mosaic{display:grid;grid-template-columns:minmax(0,1.48fr) minmax(0,1fr);gap:10px;aspect-ratio:655/480}
.hn-col{display:grid;gap:10px;min-height:0}
.hn-col-l{grid-template-columns:1fr 1fr;grid-template-rows:35fr 63fr}
.hn-col-r{grid-template-rows:70fr 28.6fr}

.hn-tile{position:relative;margin:0;min-height:0;border-radius:10px;overflow:hidden;background:var(--blue-l,#EAF2FB)}
.hn-tile-big{grid-column:1/-1}
.hn-tile img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .7s var(--ease)}
.hn-tile:hover img{transform:scale(1.04)}
.hn-tile figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 14px 12px;color:#fff;font:700 clamp(12.5px,.95vw,14.5px)/1.32 var(--fh);letter-spacing:.01em;text-shadow:0 2px 10px rgba(0,0,0,.5);background:linear-gradient(0deg,rgba(2,11,26,.74) 0%,rgba(2,11,26,.24) 58%,rgba(2,11,26,0) 100%)}

/* 「全球市场准入」格：深蓝底 + 世界地图（与参考图该格的深色块呼应） */
.hn-tile-map{background:radial-gradient(120% 130% at 72% 18%,#0A3566 0%,#031F3F 56%,#02152B 100%)}
.hn-tile-map .hn-map{position:absolute;inset:0;background:url("../img/prof/worldmap.svg") center/86% auto no-repeat;opacity:.3}

/* 底部数据行：4 套管理体系（红色认证名 + 说明），竖线分隔 */
.hn-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(36px,4.2vw,62px)}
.hn-stat{padding:0 clamp(16px,2vw,28px);border-left:1px solid var(--line,#E3EAF3)}
.hn-stat:first-child{padding-left:0;border-left:0}
.hn-stat b{display:block;font:800 clamp(19px,1.72vw,25px)/1.16 var(--fh);letter-spacing:-.3px;color:var(--cyan,#C80000)}
.hn-stat span{display:block;margin-top:10px;max-width:258px;font-size:12.5px;line-height:1.62;color:var(--ink2,#475467)}

@media (max-width:1180px){
  .hn-grid{grid-template-columns:1fr;gap:clamp(28px,3.6vw,40px)}
  .hn-mosaic{aspect-ratio:655/520}
  .hn-stats{grid-template-columns:1fr 1fr;margin-top:clamp(30px,3.8vw,44px)}
  .hn-stat:nth-child(3){padding-left:0;border-left:0}
  .hn-stat:nth-child(n+3){margin-top:24px}
}
@media (max-width:760px){
  .hn-intro,.page-banner + .hn-intro{padding-top:clamp(38px,7vw,56px)}
  .hn-intro,.hn-certs-sec,.hn-market-sec,.hn-honors-sec{padding-bottom:clamp(38px,7vw,56px)}
  .hn-certs-sec,.hn-market-sec,.hn-honors-sec{padding-top:clamp(38px,7vw,56px)}
  .page-id-8374 .sec{padding-top:clamp(38px,7vw,56px);padding-bottom:clamp(38px,7vw,56px)}
  .hn-mosaic{grid-template-columns:1fr;aspect-ratio:auto;gap:10px}
  .hn-col-l{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .hn-col-r{grid-template-rows:auto}
  .hn-tile{aspect-ratio:16/10}
  .hn-tile-big{aspect-ratio:16/10}
  .hn-stats{grid-template-columns:1fr}
  .hn-stat{padding:18px 0 0;border-left:0;border-top:1px solid var(--line,#E3EAF3)}
  .hn-stat:first-child{padding-top:0;border-top:0}
  .hn-stat:nth-child(n+3){margin-top:0}
  .hn-stat span{max-width:none}
}

/* ==========================================================================
   第二板块 · Four Certifications（扣子同名段落）
   —— 卡片外壳直接复用 rd.html「八大核心分析设备」的 .eq-cards 深色面板卡
      （深蓝渐变面板 + 图标，白底文案区），只在内容区补「体系类型」与要点行
   —— 顶部分隔细线呼应参考图，板块底色沿用站内 --soft
   ========================================================================== */
.hn-certs-sec{border-top:1px solid var(--line,#E3EAF3)}
.hn-certs>.card{padding-bottom:0}
.hn-certs>.card h4, .hn-certs>.card h3{font-size:17px;margin-top:24px}
.hn-certs .hn-cert-type{display:block;padding:0 24px;margin-top:7px;font:700 11px/1.5 var(--fh);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3,#8695A8)}
.hn-certs>.card p{padding:12px 24px 0;font-size:14px;line-height:1.72;color:var(--ink2,#475467)}
.hn-certs>.card p b{font-weight:700;color:var(--ink,#0F1F33)}
/* 要点行：贴卡片底部，红色左竖线 + 浅蓝底（与站内 .note 同一套观感） */
.hn-certs>.card .hn-cert-tip{margin:auto 24px 24px;padding:10px 12px;border-left:3px solid var(--cyan,#C80000);background:var(--blue-ll,#F4F8FC);border-radius:0 8px 8px 0;font-size:12.5px;line-height:1.62;color:var(--ink2,#475467)}

/* 四体系标志：蓝色圆形徽章（参照用户提供的官方标志样式：蓝底白字 + 白描边）
   —— 底色取参考标志的蓝 #145CA8，外圈 3px 白描边，内圈淡白光环
   —— 圆内依次为 ISO / IATF、标准号、版本年；底部能力条在圆形里放不下，隐藏
   —— 只有文字与色块，无外部图片依赖；拿到认证机构给的原图时，替换 .hn-logo 内容即可 */
.hn-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;width:132px;height:132px;padding:0;border-radius:50%;color:#fff;
  background:radial-gradient(circle at 32% 22%,#2A7AC8 0%,#145CA8 56%,#0E4A8B 100%);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.92),inset 0 0 0 9px rgba(255,255,255,.14),0 16px 34px rgba(0,0,0,.38)}
.hn-logo-top{font:800 15px/1 var(--fh);letter-spacing:.22em;text-indent:.22em;color:#fff}
.hn-logo-num{font:800 31px/1.02 var(--fh);letter-spacing:-.02em;margin-top:5px;color:#fff}
.hn-logo-yr{font:700 9px/1 var(--fh);letter-spacing:.3em;text-indent:.3em;margin-top:7px;color:rgba(255,255,255,.88)}
.hn-logo-bar{display:none}
.hn-logo-iatf{background:radial-gradient(circle at 32% 22%,#2C5480 0%,#0B2C5A 58%,#07213F 100%)}
@media (max-width:880px){
  .hn-logo{width:112px;height:112px}
  .hn-logo-top{font-size:13.5px}
  .hn-logo-num{font-size:27px}
  .hn-logo-yr{font-size:8.5px;margin-top:6px}
}
@media (max-width:880px){
  .hn-certs>.card .hn-cert-tip{margin-left:20px;margin-right:20px;margin-bottom:20px}
  .hn-certs .hn-cert-type{padding:0 20px}
  .hn-certs>.card p{padding-left:20px;padding-right:20px}
}

/* ==========================================================================
   第三板块 · 13 Product Standards 市场筛选（North America / International / Europe / Asia）
   —— 药丸筛选按钮 + 当前市场标题（旗帜/地球 + 名称 + 覆盖范围）
   —— 卡片沿用站内 .cert 卡，内容区改为「图标 + 证书名 + 适用地区 + 说明」，
      点卡片仍走原有证书弹窗逻辑
   —— 显隐全部由 .hn-market-sec[data-market] 驱动，脚本只改这一个属性
   ========================================================================== */
.hn-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 0 clamp(24px,2.6vw,34px)}
.hn-tab{display:inline-flex;align-items:center;gap:9px;padding:11px 22px;border:1.5px solid var(--line,#E3EAF3);border-radius:999px;background:#fff;color:var(--ink,#0F1F33);font:600 14px/1.2 var(--fh);cursor:pointer;transition:border-color .22s,background .22s,color .22s}
.hn-tab:hover{border-color:rgba(3,82,162,.5);color:var(--blue,#0352A2)}
.hn-tab .hn-ic{flex:none;display:block}
.hn-tab .hn-ic-globe{color:var(--blue,#0352A2)}
/* 当前选中的市场：蓝色描边 + 浅蓝底 */
.hn-market-sec[data-market="na"] .hn-tab[data-market="na"],
.hn-market-sec[data-market="intl"] .hn-tab[data-market="intl"],
.hn-market-sec[data-market="eu"] .hn-tab[data-market="eu"],
.hn-market-sec[data-market="asia"] .hn-tab[data-market="asia"]{border-color:var(--blue,#0352A2);background:#F1F7FE}

/* 当前市场标题行 */
.hn-market-hd{display:flex;align-items:center;gap:14px;margin:0 0 clamp(18px,2vw,24px)}
.hn-mf{width:38px;display:flex;align-items:center;justify-content:center;flex:none}
.hn-mf-i{display:none}
.hn-mt{display:none}
.hn-mt b{display:block;font:800 19px/1.2 var(--fh);color:var(--ink,#0F1F33)}
.hn-mt em{display:block;font-style:normal;font-size:13px;line-height:1.5;color:var(--ink3,#8695A8);margin-top:4px}
.hn-market-sec[data-market="na"] :is(.hn-mf-i[data-mf="na"],.hn-mt[data-mt="na"]),
.hn-market-sec[data-market="intl"] :is(.hn-mf-i[data-mf="intl"],.hn-mt[data-mt="intl"]),
.hn-market-sec[data-market="eu"] :is(.hn-mf-i[data-mf="eu"],.hn-mt[data-mt="eu"]),
.hn-market-sec[data-market="asia"] :is(.hn-mf-i[data-mf="asia"],.hn-mt[data-mt="asia"]){display:block}

/* 证书卡：4 列自适应，左对齐图文 */
.hn-certs-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.hn-certs-grid .hn-cert{padding:24px;text-align:left;display:flex;flex-direction:column}
.hn-certs-grid .hn-cert-hd{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.hn-certs-grid .hn-cert .cic{width:44px;height:44px;margin:0;border-radius:10px;flex:none}
.hn-certs-grid .hn-cert-t b{font:700 16.5px/1.3 var(--fh);color:var(--ink,#0F1F33)}
.hn-certs-grid .hn-cert-t span{margin-top:3px;font-size:12.5px;color:var(--ink3,#8695A8)}
.hn-certs-grid .hn-cert-desc{margin:0;font-size:13.5px;line-height:1.72;color:var(--ink2,#475467)}

/* 只显示当前市场的证书卡 */
.hn-market-sec[data-market="na"] .hn-cert:not([data-market="na"]),
.hn-market-sec[data-market="intl"] .hn-cert:not([data-market="intl"]),
.hn-market-sec[data-market="eu"] .hn-cert:not([data-market="eu"]),
.hn-market-sec[data-market="asia"] .hn-cert:not([data-market="asia"]){display:none}

@media (max-width:760px){
  .hn-tabs{gap:10px}
  .hn-tab{padding:9px 16px;font-size:13px}
  .hn-market-hd{gap:12px}
  .hn-mt b{font-size:17px}
  .hn-certs-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   第四板块 · Enterprise Honors（扣子「Recognized for Excellence」段）
   —— 白底、左对齐标题区；三张「彩色封面 + 奖章 + 白底说明」卡（橙 / 红 / 绿）
   —— 板块底部一枚按钮，跳到下载中心 Certificates 选项卡（downloads.html#cert）
   ========================================================================== */
.hn-honors-sec{background:#fff}
.hn-honors-head{max-width:820px;margin:0 auto clamp(28px,3vw,40px);text-align:center}
.hn-honors-head .overline{justify-content:center;margin-bottom:12px;color:var(--cyan,#C80000);font-size:12.5px;letter-spacing:.18em}
.hn-honors-head .overline:before{width:26px;height:2px;background:var(--cyan,#C80000)}
.hn-honors-head h2{margin:0 0 12px;text-transform:none;font-size:clamp(24px,2.45vw,32px);line-height:1.22;letter-spacing:-.4px;color:var(--blue-dd,#012A56)}
.hn-honors-head p{margin:0 auto;max-width:660px;color:var(--ink2,#475467);font-size:15.5px;line-height:1.75}

.hn-honors-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,26px)}
.hn-honor{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line,#E3EAF3);border-radius:10px;overflow:hidden;box-shadow:0 8px 24px rgba(3,52,110,.08)}
.hn-honor-art{display:flex;align-items:center;justify-content:center;aspect-ratio:300/175}
.hn-honor-art-1{background:linear-gradient(135deg,#FFC531 0%,#F59E0B 100%)}
.hn-honor-art-2{background:linear-gradient(135deg,#E4573D 0%,#C9402A 100%)}
.hn-honor-art-3{background:linear-gradient(135deg,#2F8A57 0%,#256B43 100%)}
.hn-medal{width:clamp(50px,4.6vw,66px);height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.22))}
.hn-honor-body{padding:clamp(18px,2vw,26px) clamp(16px,1.8vw,24px) clamp(20px,2.2vw,28px);text-align:center}
.hn-honor-body h3{margin:0 0 10px;font-size:17px;line-height:1.35;color:#0C2D6B;letter-spacing:-.1px}
.hn-honor-body p{margin:0;color:var(--ink2,#475467);font-size:13.5px;line-height:1.7}

.hn-honors-cta{display:flex;justify-content:center;margin-top:clamp(30px,3.4vw,44px)}
.hn-honors-cta .btn{gap:9px}

@media (max-width:840px){
  .hn-honors-grid{grid-template-columns:1fr}
  .hn-honor-art{aspect-ratio:16/9}
  .hn-honors-head h2{font-size:24px}
}