/* ============================================================
   顶部推广条（广告栏）v4  ads.css
   1) 配色：低饱和淡绿（#f1faf3→#e7f5ec，饱和度仅 4~6%，接近中性）
      —— 站内 banner 主色横跨深蓝黑/青绿/亮绿/青蓝/卡其/纯黑，高饱和色必撞色，
         低饱和淡绿既保留品牌绿属性又不会与 banner 冲突。
   2) 背景图：统一灰度 + 降透明，后台换任何图都不撞色。
   3) UX：文案与按钮合并为一个"居中簇"（邻近性原则，视线与鼠标行程最短），
      整条均可点击（hit 热区，命中面积从 ~100×34px 提升到整条 ~1400×68px），
      按钮触控高度 40px（移动 44px），关闭钮 36×36 且与按钮保持间距防误触。
   4) 无障碍（WCAG 2.2 AA）：标题 8.8:1 / 副标题 6.2:1 / 按钮白字 4.7:1，
      触控目标 ≥24×24，focus-visible 焦点环，prefers-reduced-motion 降级。
   需在 style.css 之后加载（header.html 内 <link> 已保证顺序）
   后台可配字段不变：标题/副标题/背景图/按钮文字/跳转链接/是否开启
   ============================================================ */

/* —— 覆盖 style.css 旧版规则（旧 ::after 绿色蒙层 / 固定高度 / 白字） —— */
#ads{position:relative;height:auto;overflow:hidden;z-index:10;display:none;color:#14512f;
     background:linear-gradient(90deg,#ffffff 0%,#f1faf3 45%,#e7f5ec 100%);
     border-bottom:1px solid rgba(18,133,76,.14);}
#ads::after{content:none;}

/* —— 背景图：轻微降透明保证文字可读（配合专属设计图，不再灰度化） —— */
#ads .ads-bg{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;
     background-position:center;background-size:cover;background-repeat:no-repeat;
     opacity:.62;}
#ads .ads-bg::after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;
     background:linear-gradient(90deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.42) 55%,rgba(255,255,255,.12) 100%);}

/* —— 整条热区：扩大点击命中面积（stretched link 模式） —— */
#ads .ads-hit{position:absolute;left:0;top:0;right:0;bottom:0;z-index:2;cursor:pointer;}
/* 内容层不拦截点击，点击穿透到热区；按钮/关闭钮单独可点 */
#ads .ads-in{position:relative;z-index:3;pointer-events:none;
     width:83%;max-width:1400px;margin:0 auto;min-height:68px;
     display:flex;align-items:center;justify-content:center;
     padding:10px 52px 10px 24px;}
#ads .ads-cluster{display:flex;align-items:center;justify-content:center;gap:18px;
     max-width:100%;}

/* —— 文案 —— */
#ads .ads-tx{display:flex;align-items:center;gap:14px;min-width:0;}
#ads .ads-tx h3{margin:0;font-size:17px;font-weight:700;line-height:1.3;color:#14512f;white-space:nowrap;}
#ads .ads-sep{flex:none;width:1px;height:14px;background:rgba(20,81,47,.22);}
#ads .ads-tx p{margin:0;font-size:13px;letter-spacing:.02em;color:#4a6355;
     white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* —— CTA：与站内「免费试用」按钮(btn-trial)同款绿渐变胶囊（触控高 40px） ——
      hover 统一为站内辅助色橙 #f08c1a（同 eudr 模块 .btn-primary:hover） —— */
#ads .ads-btn{pointer-events:auto;display:inline-flex;align-items:center;gap:6px;
     min-height:40px;padding:0 24px;border-radius:999px;
     background:linear-gradient(135deg,#2EE68B,#0FA55F);color:#fff;
     font-size:14px;font-weight:700;line-height:1.2;text-decoration:none;
     border:1px solid rgba(255,255,255,.4);
     box-shadow:0 8px 24px rgba(25,173,94,.35),inset 0 1px 0 rgba(255,255,255,.35);
     transition:background .25s ease,transform .25s ease,box-shadow .25s ease;}
#ads .ads-btn svg{width:13px;height:13px;transition:transform .25s ease;}
/* 悬停整条时按钮微抬升，强化"整条可点"的认知 */
#ads:hover .ads-btn{transform:translateY(-1px);box-shadow:0 10px 26px rgba(25,173,94,.45);}
/* 按钮悬停：橙底白字（与站内按钮 hover 规范一致） */
#ads .ads-btn:hover{background:#f08c1a;color:#fff;
     box-shadow:0 10px 26px rgba(240,140,26,.40);}
#ads:hover .ads-btn svg{transform:translateX(3px);}
#ads .ads-btn:focus-visible{outline:2px solid #14512f;outline-offset:3px;}

/* —— 关闭钮：36×36，与内容保持间距防误触 —— */
#ads .ads-close{pointer-events:auto;position:absolute;z-index:4;right:16px;top:50%;margin-top:-18px;
     width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
     color:#5b6b7a;background:transparent;
     transition:background .25s ease,color .25s ease;}
#ads .ads-close:hover{background:rgba(20,81,47,.10);color:#14512f;}
#ads .ads-close:focus-visible{outline:2px solid #14512f;outline-offset:2px;}
#ads .ads-close svg{width:12px;height:12px;}

/* —— 移动端：簇内竖排居中，按钮 44px —— */
@media (max-width:768px){
    #ads .ads-in{flex-direction:column;align-items:center;justify-content:center;
         padding:12px 46px 12px 16px;min-height:0;text-align:center;}
    #ads .ads-cluster{flex-direction:column;align-items:center;gap:10px;}
    #ads .ads-tx{flex-direction:column;align-items:center;gap:3px;}
    #ads .ads-sep{display:none;}
    #ads .ads-tx h3{font-size:15px;white-space:normal;}
    #ads .ads-tx p{font-size:12px;white-space:normal;}
    #ads .ads-btn{min-height:44px;padding:0 24px;}
    #ads .ads-close{right:8px;margin-top:0;top:10px;}
}

/* —— 动效克制 —— */
@media (prefers-reduced-motion:reduce){
    #ads .ads-btn,#ads .ads-btn svg,#ads .ads-close{transition:none;}
    #ads:hover .ads-btn svg{transform:none;}
}