/* ==========================================================================
   BLOG 列表页样式  v1
   文件：skin/css/blog.css
   用法：放在 content.css 之后引入；只作用于 newslist.html（<main class="blog-page">）
   --------------------------------------------------------------------------
   作用域说明：
   所有规则都以 .blog-page 开头，或使用新的 .bl- 前缀类名，
   不改动 style.css / list.css / content.css 里的任何一条原有规则，
   也不影响产品列表、FAQ 列表等共用 .newslist 的其他页面。

   设计取向（参考 Interlake Mecalux、Steel King、SSI Schaefer 等海外同行）：
   1) 首屏交代「这个博客讲什么、写给谁」，而不是只放一张 banner；
   2) 主题胶囊先收窄范围，再给卡片流，符合欧美 B2B 买家的扫读习惯；
   3) 最新一篇做成通栏大卡，其余按三列网格，信息密度和呼吸感兼顾；
   4) 右侧栏承担两条动线：找内容（按场景）和 转化（免费出图报价）。
   ========================================================================== */

:root{
  --bl-ink:#131415;
  --bl-ink2:#3c4248;
  --bl-mute:#6b7178;
  --bl-dim:#8b9097;
  --bl-line:#eceef1;
  --bl-soft:#f7f8fa;
  --bl-brand:#f08519;
  --bl-brand-d:#d96f0b;
  --bl-brand-soft:#fdf3e8;
}

/* ==========================================================================
   0. 先清掉列表页的链接下划线
   --------------------------------------------------------------------------
   list.css 第 13 行有一条 article a{text-decoration:underline}，
   而这里每张卡片整体就是一个 <a>（<article><a class="bl-card-in">…），
   于是标题、日期、摘要、「Read guide」全被划上了下划线。
   .blog-page a 的权重（0,1,1）高于 article a（0,0,2），可直接压掉；
   hover 也一并显式声明为 none，避免其他样式表补回来。
   ========================================================================== */
.blog-page a,
.blog-page a:hover,
.blog-page a:focus{text-decoration:none}

/* ==========================================================================
   1. 首屏 banner：与 About 页(.ab-hero)、产品列表页(.pl-hero)同一套
   --------------------------------------------------------------------------
   满幅图片 + 自下而上的压暗遮罩 + 内容贴底。
   高度用 min-height 而不是 height：后台没传栏目图时不会塌成一条缝，
   文案也不会因为写死高度被裁掉。
   改高度 / 字号时三处必须同步：about.css .ab-hero、product.css .pl-hero、
   本文件 .bl-hero，否则又会出现「三个页面 banner 不一样高」。
   ========================================================================== */
.blog-page .bl-hero{
  position:relative;overflow:hidden;background:#0d141a;
  display:flex;align-items:flex-end;
  min-height:clamp(300px,34vw,520px);
}
.blog-page .bl-hero-media{position:absolute;inset:0;z-index:0}
.blog-page .bl-hero-media img{
  position:absolute;inset:0;display:block;
  width:100% !important;max-width:100%;height:100% !important;
  object-fit:cover;object-position:center;
}
.blog-page .bl-hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,13,18,.94) 0%,rgba(8,13,18,.66) 42%,rgba(8,13,18,.16) 100%);
}
.blog-page .bl-hero-copy{
  position:relative;z-index:2;width:100%;
  padding-top:clamp(72px,11vw,150px);
  padding-bottom:clamp(26px,3vw,48px);
}
.blog-page .bl-h1{
  margin:0 0 14px;max-width:20em;
  font-size:clamp(28px,3.6vw,50px);line-height:1.12;letter-spacing:-.02em;
  font-weight:800;color:#fff;text-transform:none;
}
.blog-page .bl-sub{
  margin:0;max-width:44em;
  font-size:clamp(15px,1.25vw,18px);line-height:1.7;
  color:rgba(255,255,255,.82);
  text-shadow:0 1px 12px rgba(8,13,18,.45);
}
/* 后台「栏目描述1」和「栏目描述」都留空时，banner 只留栏目名称，
   不留一个空的 <p> 和它下面多余的间距 */
.blog-page .bl-sub:empty{display:none}
.blog-page .bl-hero-copy .l-wrap:has(> .bl-sub:empty) .bl-h1{margin-bottom:0}

/* ==========================================================================
   2. 面包屑条：数值直接对齐 about.css .ab-crumb-bar / product.css .pl-crumb-bar
   ========================================================================== */
.blog-page .bl-crumb{
  background:#FAFAFA;
  border-top:1px solid #eceef0;
  border-bottom:1px solid #eceef0;
}
.blog-page .bl-crumb .l-wrap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:14px;padding-bottom:14px;
}
.blog-page .bl-crumb .banner-title-h1{
  font-size:20px;font-weight:700;line-height:1.2;
  color:var(--fontcolortitle,#131415);text-transform:uppercase;margin:0;
}
.blog-page .bl-crumb .banner-breadcrumbs{font-size:14px;line-height:1.5;color:#6b7178}
.blog-page .bl-crumb .banner-breadcrumbs a{color:inherit;transition:color .2s linear}
.blog-page .bl-crumb .banner-breadcrumbs a:hover{color:var(--color,#f08519)}

/* ==========================================================================
   3. 主题胶囊
   ========================================================================== */
.blog-page .bl-topics{background:#fff;border-bottom:1px solid var(--bl-line)}
.blog-page .bl-topics .l-wrap{
  display:flex;align-items:center;flex-wrap:wrap;gap:16px;
  padding-top:14px;padding-bottom:14px;
}
.blog-page .bl-topics-label{
  flex:none;padding-right:16px;border-right:1px solid var(--bl-line);
  font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#b0b6bd;
}
.blog-page .bl-chips{display:flex;flex-wrap:wrap;gap:9px}
.blog-page .bl-chips a{
  display:inline-flex;align-items:center;height:34px;padding:0 15px;
  border:1px solid #e6e8ec;border-radius:999px;background:#fff;
  font-size:13.5px;font-weight:600;color:#414850;
  transition:border-color .2s ease,color .2s ease,background .2s ease,transform .2s ease;
}
.blog-page .bl-chips a:hover{
  border-color:var(--bl-brand);color:var(--bl-brand-d);background:var(--bl-brand-soft);
  transform:translateY(-1px);
}

/* ==========================================================================
   4. 主体两栏
   ========================================================================== */
.blog-page .bl-main{background:var(--bl-soft);padding:42px 0 76px}
.blog-page .bl-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:44px;align-items:start;
}
.blog-page .bl-content{min-width:0}

.blog-page .bl-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.blog-page .bl-bar-l{min-width:0}
.blog-page .bl-bar-title{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--bl-ink);text-transform:none}
.blog-page .bl-bar-sub{margin-top:5px;font-size:14px;color:var(--bl-mute)}

/* 站内搜索：原来在 banner 里，banner 收成 About / 产品页那套纯图文版式后
   移到这里，位置其实更贴切——就在列表正上方，搜完直接看结果 */
.blog-page .bl-search{
  flex:none;display:flex;align-items:center;gap:8px;
  width:clamp(200px,24vw,290px);height:44px;padding:0 6px 0 16px;
  background:#fff;border:1px solid #e3e6ea;border-radius:999px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.blog-page .bl-search:focus-within{border-color:var(--bl-brand);box-shadow:0 0 0 4px rgba(240,133,25,.12)}
.blog-page .bl-search > .iconfont{flex:none;font-size:16px;color:#b0b6bd}
.blog-page .bl-search input{
  flex:1;min-width:0;height:40px;padding:0;
  border:0;outline:0;background:transparent;
  font-family:inherit;font-size:14px;color:var(--bl-ink);
}
.blog-page .bl-search input::placeholder{color:#9aa1a9}
.blog-page .bl-search button{
  flex:none;height:34px;padding:0 15px;border:0;border-radius:999px;
  background:var(--bl-brand);color:#fff;font-family:inherit;
  font-size:13px;font-weight:700;cursor:pointer;
  transition:background .2s ease;
}
.blog-page .bl-search button:hover{background:var(--bl-brand-d)}

/* ==========================================================================
   5. 卡片流
   ========================================================================== */
.blog-page .bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}

.blog-page .bl-grid > .newsitem{
  width:auto;margin:0;
  background:#fff;border:1px solid var(--bl-line);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,20,24,.05);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease;
}
.blog-page .bl-grid > .newsitem:hover{
  transform:translateY(-4px);border-color:#dfe3e8;
  box-shadow:0 22px 40px -24px rgba(15,20,24,.42),0 2px 6px rgba(15,20,24,.05);
}
.blog-page .bl-card-in{display:flex;flex-direction:column;height:100%;color:inherit}

.blog-page .bl-thumb{
  display:block;position:relative;padding-bottom:62%;overflow:hidden;background:#eef0f2;
}
.blog-page .bl-thumb img{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.blog-page .bl-grid > .newsitem:hover .bl-thumb img{transform:scale(1.05)}

.blog-page .bl-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}

.blog-page .bl-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.blog-page .bl-date{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--bl-dim);
}
.blog-page .bl-date .iconfont{font-size:13px;color:#c1c7ce}
.blog-page .bl-badge{
  display:none;align-items:center;height:22px;padding:0 9px;border-radius:6px;
  background:var(--bl-brand-soft);color:var(--bl-brand-d);
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}

.blog-page .bl-title{
  font-size:17.5px;line-height:1.45;font-weight:700;color:var(--bl-ink);
  text-transform:none;letter-spacing:-.005em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
  transition:color .2s ease;
}
.blog-page .bl-grid > .newsitem:hover .bl-title{color:var(--bl-brand-d)}

.blog-page .bl-excerpt{
  margin-top:10px;font-size:14.5px;line-height:1.68;color:var(--bl-mute);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.blog-page .bl-more{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:16px;
  font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--bl-brand-d);
}
.blog-page .bl-more .iconfont{font-size:11px;transition:transform .25s ease}
.blog-page .bl-grid > .newsitem:hover .bl-more .iconfont{transform:translateX(4px)}

/* 5b. 第一篇：通栏大卡（后台置顶或最新一篇自动成为视觉主角） */
.blog-page .bl-grid > .newsitem:first-child{grid-column:1 / -1}
.blog-page .bl-grid > .newsitem:first-child .bl-card-in{display:grid;grid-template-columns:1.06fr 1fr;align-items:stretch}
.blog-page .bl-grid > .newsitem:first-child .bl-thumb{padding-bottom:0;min-height:320px;height:100%}
.blog-page .bl-grid > .newsitem:first-child .bl-body{justify-content:center;padding:34px 38px}
.blog-page .bl-grid > .newsitem:first-child .bl-title{font-size:clamp(20px,1.7vw,27px);line-height:1.32;letter-spacing:-.015em}
.blog-page .bl-grid > .newsitem:first-child .bl-excerpt{margin-top:12px;font-size:15.5px;-webkit-line-clamp:4}
.blog-page .bl-grid > .newsitem:first-child .bl-more{padding-top:22px;margin-top:0;font-size:13.5px}
.blog-page .bl-grid > .newsitem:first-child .bl-badge{display:inline-flex}

/* ==========================================================================
   6. 分页
   ========================================================================== */
.blog-page .bl-pages{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;
  margin-top:38px;
}
.blog-page .bl-pg-nums{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.blog-page .bl-pages .page-num{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 13px;
  border:1px solid #e3e6ea;border-radius:10px;background:#fff;
  font-size:14px;font-weight:700;color:#414850;
  transition:border-color .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease;
}
.blog-page .bl-pages a.page-num:hover{border-color:var(--bl-brand);color:var(--bl-brand-d)}
.blog-page .bl-pages .page-num-current,
.blog-page .bl-pages a.page-num-current:hover{
  background:var(--bl-brand);border-color:var(--bl-brand);color:#fff;
  box-shadow:0 10px 20px -12px rgba(240,133,25,.9);
}
/* 省略号不是按钮 */
.blog-page .bl-pages span.page-num{
  min-width:auto;padding:0 2px;border:0;background:transparent;color:#9aa1a9;
}
.blog-page .bl-pg-nav{
  display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;
  border:1px solid #e3e6ea;border-radius:10px;background:#fff;
  font-size:14px;font-weight:700;color:#414850;
  transition:border-color .2s ease,color .2s ease;
}
.blog-page .bl-pg-nav:hover{border-color:var(--bl-ink);color:var(--bl-ink)}
.blog-page .bl-pg-nav .iconfont{font-size:11px}
.blog-page .bl-empty{
  padding:56px 20px;border:1px dashed #dfe3e8;border-radius:14px;background:#fff;
  text-align:center;font-size:15px;color:var(--bl-mute);
}

/* ==========================================================================
   7. 右侧栏
   ========================================================================== */
/* 右侧留出 28px：站点右下角那块固定客服浮标（#ab-mkf，固定在视口右侧 18px）
   会压在这条栏目的右边缘上，留出空隙让它落在空白处而不是卡片上 */
.blog-page .bl-aside{
  display:flex;flex-direction:column;gap:20px;margin-right:28px;
}
.blog-page .bl-widget{
  background:#fff;border:1px solid var(--bl-line);border-radius:14px;
  padding:22px 22px 20px;box-shadow:0 1px 2px rgba(15,20,24,.04);
}
.blog-page .bl-widget-title{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid #f0f2f4;
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bl-ink);
}
.blog-page .bl-widget-all{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--bl-dim);
}
.blog-page .bl-widget-all .iconfont{font-size:10px}
.blog-page .bl-widget-all:hover{color:var(--bl-brand)}

/* 7a. 按场景 */
.blog-page .bl-applist li + li{border-top:1px solid #f4f6f8}
.blog-page .bl-applist a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 0;font-size:14.5px;font-weight:600;color:var(--bl-ink2);
  transition:color .2s ease;
}
.blog-page .bl-applist a em{font-size:10px;color:#c6cbd1;transition:transform .22s ease,color .22s ease}
.blog-page .bl-applist a:hover{color:var(--bl-brand-d)}
.blog-page .bl-applist a:hover em{color:var(--bl-brand);transform:translateX(3px)}

/* 7b. 询盘卡 */
.blog-page .bl-quote{
  position:relative;overflow:hidden;
  background:linear-gradient(158deg,#14181c 0%,#232a31 100%);
  border-color:#232a31;color:#fff;
}
.blog-page .bl-quote::after{
  content:"";position:absolute;right:-60px;top:-60px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,133,25,.3) 0%,rgba(240,133,25,0) 68%);
  pointer-events:none;
}
.blog-page .bl-quote-eye{
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#f7a55a;
}
.blog-page .bl-quote-h{
  margin-top:8px;font-size:18px;line-height:1.42;font-weight:800;color:#fff;text-transform:none;
}
.blog-page .bl-quote-p{margin-top:9px;font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.66)}
.blog-page .bl-quote-list{margin-top:14px}
.blog-page .bl-quote-list li{
  position:relative;padding-left:20px;margin-top:7px;
  font-size:13px;line-height:1.6;color:rgba(255,255,255,.82);
}
.blog-page .bl-quote-list li::before{
  content:"";position:absolute;left:2px;top:5px;width:6px;height:10px;
  border-right:2px solid var(--bl-brand);border-bottom:2px solid var(--bl-brand);
  transform:rotate(40deg);
}
.blog-page .bl-quote .company_subscribe{margin-top:18px}
.blog-page .bl-quote .company_subscribe .button{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:46px;border-radius:999px;
  background:linear-gradient(90deg,#f08519 0%,#e0700c 100%);
  color:#fff;font-size:14.5px;font-weight:700;cursor:pointer;
  transition:box-shadow .25s ease,transform .25s ease;
}
.blog-page .bl-quote .company_subscribe .button:hover{
  box-shadow:0 16px 26px -14px rgba(240,133,25,.95);transform:translateY(-1px);
}
.blog-page .bl-quote-wa{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-top:10px;height:42px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  font-size:13.5px;font-weight:600;color:rgba(255,255,255,.9);
  transition:border-color .2s ease,background .2s ease;
}
.blog-page .bl-quote-wa .iconfont{font-size:15px;color:#2cb740}
.blog-page .bl-quote-wa:hover{border-color:rgba(255,255,255,.42);color:#fff;background:rgba(255,255,255,.05)}

/* 7c. 产品入口 */
.blog-page .bl-prolist li{display:flex;align-items:center;gap:12px;margin-top:14px}
.blog-page .bl-prolist li:first-child{margin-top:0}
.blog-page .bl-prolist li > a{
  flex:none;width:78px;height:62px;border-radius:9px;overflow:hidden;
  border:1px solid #eef0f2;background:#fff;
}
.blog-page .bl-prolist li > a img{width:100%;height:100%;object-fit:cover}
.blog-page .bl-prolist li > div{min-width:0}
.blog-page .bl-prolist li > div a{font-size:13.5px;font-weight:700;line-height:1.42;color:var(--bl-ink)}
.blog-page .bl-prolist li:hover > div a{color:var(--bl-brand-d)}

/* 7d. 作者背书：AI 搜索和采购方都看「谁在写」，这块同时补上栏目高度 */
.blog-page .bl-authors p{margin:0;font-size:13.5px;line-height:1.7;color:var(--bl-mute)}
.blog-page .bl-authors a{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:13px;font-weight:700;color:var(--bl-brand-d);
}
.blog-page .bl-authors a em{font-size:10px;transition:transform .22s ease}
.blog-page .bl-authors a:hover em{transform:translateX(3px)}

/* ==========================================================================
   8. 结尾转化条
   ========================================================================== */
.blog-page .bl-cta{
  position:relative;overflow:hidden;margin-top:52px;margin-right:28px;
  padding:clamp(34px,4vw,56px) clamp(26px,3.4vw,54px) 0;
  background:#0f1418;border-radius:18px;color:#fff;
}
.blog-page .bl-cta::before{
  content:"";position:absolute;left:-90px;bottom:-140px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,133,25,.22) 0%,rgba(240,133,25,0) 70%);
  pointer-events:none;
}
.blog-page .bl-cta-main{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:40px;flex-wrap:wrap;padding-bottom:clamp(28px,3vw,44px);
}
.blog-page .bl-cta-copy{max-width:620px}
/* 小标签（banner 里已经不用了，这条只服务结尾转化条） */
.blog-page .bl-cta .bl-eye{
  display:inline-flex;align-items:center;margin:0;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#f7a55a;
}
.blog-page .bl-cta-copy h2{
  margin-top:12px;font-size:clamp(21px,2.1vw,30px);line-height:1.24;letter-spacing:-.015em;
  font-weight:800;color:#fff;text-transform:none;
}
.blog-page .bl-cta-copy p{margin-top:12px;font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.66)}
.blog-page .bl-cta-act{display:flex;flex-direction:column;gap:10px;min-width:224px}
.blog-page .bl-cta .company_subscribe .button{
  display:flex;align-items:center;justify-content:center;
  height:50px;padding:0 30px;border-radius:999px;
  background:linear-gradient(90deg,#f08519 0%,#e0700c 100%);
  color:#fff;font-size:15px;font-weight:700;cursor:pointer;
  transition:box-shadow .25s ease,transform .25s ease;
}
.blog-page .bl-cta .company_subscribe .button:hover{
  box-shadow:0 18px 30px -16px rgba(240,133,25,.95);transform:translateY(-1px);
}
.blog-page .bl-cta-ghost{
  display:flex;align-items:center;justify-content:center;
  height:50px;padding:0 30px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  font-size:14.5px;font-weight:600;color:#fff;
  transition:border-color .2s ease,background .2s ease;
}
.blog-page .bl-cta-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06);color:#fff}

.blog-page .bl-cta-trust{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.12);
}
.blog-page .bl-cta-trust li{
  display:flex;flex-direction:column;gap:3px;
  padding:18px 22px 22px;border-right:1px solid rgba(255,255,255,.1);
}
.blog-page .bl-cta-trust li:first-child{padding-left:0}
.blog-page .bl-cta-trust li:last-child{border-right:0}
.blog-page .bl-cta-trust b{font-size:15px;font-weight:800;letter-spacing:-.01em;color:#fff}
.blog-page .bl-cta-trust span{font-size:12px;color:rgba(255,255,255,.5)}

/* ==========================================================================
   9. 响应式
   ========================================================================== */
@media (max-width:1400px){
  .blog-page .bl-layout{grid-template-columns:minmax(0,1fr) 300px;gap:34px}
  .blog-page .bl-grid{gap:22px}
}

@media (max-width:1280px){
  .blog-page .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 标签和胶囊挤不进一行时，让标签整行占住，避免它孤零零挂在左上方 */
  .blog-page .bl-topics-label{width:100%;padding-right:0;border-right:0;padding-bottom:2px}
  .blog-page .bl-cta-trust{grid-template-columns:repeat(2,1fr)}
  .blog-page .bl-cta-trust li{padding:14px 18px}
  .blog-page .bl-cta-trust li:first-child{padding-left:18px}
  .blog-page .bl-cta-trust li:nth-child(2n){border-right:0}
  .blog-page .bl-cta-trust li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
}

/* ≤1024：站点在这一段把 header 改成固定顶栏、侧栏隐藏，这里同步收成单列 */
@media (max-width:1024px){
  .blog-page .bl-layout{grid-template-columns:minmax(0,1fr)}
  .blog-page .bl-aside{display:none}
  /* 右栏收起后内容铺到 l-wrap 右边，而 #ab-mkf（right:18px、宽 74px）仍在，
     会压住面包屑末尾和搜索按钮；这里统一右缩 38px 让开浮标 */
  .blog-page .bl-crumb,
  .blog-page .bl-topics,
  .blog-page .bl-main{padding-right:38px}
  .blog-page .bl-main{padding-top:34px;padding-bottom:60px}
  .blog-page .bl-cta{margin-top:38px;margin-right:0}
}

/* ≤900：与 about.css 的 .ab-hero-media 同一个断点和高度 */
@media (max-width:900px){
  .blog-page .bl-hero{min-height:clamp(280px,46vw,400px)}
  .blog-page .bl-h1{max-width:16em}
}

@media (max-width:768px){
  /* 768 以下 #ab-mkf 已经隐藏，不再需要给浮标让位 */
  .blog-page .bl-crumb,
  .blog-page .bl-topics,
  .blog-page .bl-main{padding-right:0}
  .blog-page .bl-hero-copy{padding-top:60px;padding-bottom:22px}
  .blog-page .bl-h1{font-size:26px;line-height:1.16;margin-bottom:10px}
  .blog-page .bl-sub{font-size:14.5px;line-height:1.65}

  .blog-page .bl-crumb .l-wrap{padding-top:12px;padding-bottom:12px;gap:10px}
  .blog-page .bl-crumb .banner-title-h1{font-size:16px}
  .blog-page .bl-crumb .banner-breadcrumbs{font-size:13px}
  .blog-page .bl-topics .l-wrap{gap:10px;padding-top:12px;padding-bottom:12px}
  .blog-page .bl-topics-label{width:100%;padding-right:0;border-right:0;padding-bottom:2px}
  .blog-page .bl-chips{gap:7px}
  .blog-page .bl-chips a{height:32px;padding:0 13px;font-size:13px}

  .blog-page .bl-bar{flex-direction:column;align-items:stretch;gap:14px}
  .blog-page .bl-search{width:100%}
  .blog-page .bl-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .blog-page .bl-grid > .newsitem:first-child .bl-card-in{grid-template-columns:1fr}
  .blog-page .bl-grid > .newsitem:first-child .bl-thumb{padding-bottom:60%;min-height:0}
  .blog-page .bl-grid > .newsitem:first-child .bl-body{padding:22px}
  .blog-page .bl-grid > .newsitem:first-child .bl-title{font-size:19px}
  .blog-page .bl-thumb{padding-bottom:56%}

  .blog-page .bl-cta{border-radius:14px;padding:26px 20px 0}
  .blog-page .bl-cta-act{width:100%}
  .blog-page .bl-cta-trust{grid-template-columns:1fr}
  .blog-page .bl-cta-trust li{padding:12px 0;border-right:0}
  .blog-page .bl-cta-trust li:first-child{padding-left:0}
  .blog-page .bl-cta-trust li:nth-child(n+2){border-top:1px solid rgba(255,255,255,.1)}
}