@charset "utf-8";
/* ==========================================================================
   冲击波英语 / 杨斯毅教育研究院 —— 全站品牌视觉层 v1
   作用：在不改动主题核心文件的前提下，覆盖 metv75 的默认观感。
   顺序：本文件在主题 CSS 之后加载，同优先级下后者生效。
   ========================================================================== */

:root{
  --sy-ink:#22303C;
  --sy-body:#3A4750;
  --sy-mute:#7A8A96;
  --sy-line:#E6EBEF;
  --sy-brand:#0E7FB8;
  --sy-brand-d:#0A5A85;
  --sy-teal:#0E9F7E;
  --sy-amber:#C8862B;
  --sy-navy:#0B2438;
}

/* ==========================================================================
   1. 栏目页页头横幅：纯蓝条 → 图片横幅
   ========================================================================== */
.met-banner-ny{
  position:relative;
  height:290px !important;
  min-height:290px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background-color:#0E3F60;
  background-image:linear-gradient(135deg,#08243A 0%,#0E3F60 55%,#1B6E9E 100%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.met-banner-ny::before{
  content:"";
  position:absolute; left:0; right:0; top:0; bottom:0;
  background:linear-gradient(180deg,
    rgba(4,16,26,.30) 0%,
    rgba(4,16,26,.46) 55%,
    rgba(4,16,26,.62) 100%);
  pointer-events:none;
  z-index:1;
}
.met-banner-ny::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg,#1BAADB 0%,#0E9F7E 42%,#C8862B 100%);
  opacity:.9;
  z-index:3;
}
.met-banner-ny h2,
.met-banner-ny h3{
  position:relative;
  z-index:2;
  margin:0;
  padding:0 40px;
  font-size:44px;
  font-weight:600;
  line-height:1.28;
  letter-spacing:.06em;
  color:#FFFFFF;
  background:linear-gradient(180deg,#FFFFFF 0%,#D3E8F6 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 16px rgba(0,0,0,.45));
}
/* 英文副题：由模板输出 .sy-banner-sub */
.met-banner-ny .sy-banner-sub{
  position:relative; z-index:2;
  display:block;
  margin:14px 0 0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:14px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  text-align:center;
}
.met-banner-ny .sy-banner-deco{
  position:absolute; z-index:2;
  left:50%; bottom:46px;
  width:64px; height:2px; margin-left:-32px;
  background:rgba(255,255,255,.45);
}
.met-banner-ny .sy-banner-inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}

/* ==========================================================================
   2. 面包屑 / 栏目内导航
   ========================================================================== */
.met-column-nav{ border-bottom:1px solid var(--sy-line); background:#fff; }
.met-column-nav-ul > li > a.link{
  display:inline-block;
  padding:15px 2px;
  font-size:15px;
  color:#54636E !important;
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s;
}
.met-column-nav-ul > li > a.link:hover,
.met-column-nav-ul > li > a.link.active{
  color:var(--sy-brand) !important;
  border-bottom-color:var(--sy-brand);
  font-weight:600;
}
.met-crumbs .breadcrumb{ background:transparent; font-size:13.5px; }
.met-crumbs .breadcrumb-item a{ color:var(--sy-mute); }
.met-crumbs .breadcrumb-item a:hover{ color:var(--sy-brand); }

/* ==========================================================================
   3. 文章页标题：单色 → 品牌渐变
   ========================================================================== */
.details-title{ padding-bottom:20px; margin-bottom:26px; }
.details-title h1{
  font-size:33px;
  font-weight:700;
  line-height:1.42;
  letter-spacing:.005em;
  color:#0A4A70;
  background:linear-gradient(112deg,#0A4A70 0%,#0E7FB8 38%,#13A0B8 66%,#0E9F7E 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.details-title .info{ margin-top:16px; font-size:13.5px; color:var(--sy-mute); }
.details-title .info span{ margin-right:20px; }
.details-title .info .icon{ color:var(--sy-brand); opacity:.75; }
.details-title.border-bottom1{ border-bottom:1px solid var(--sy-line) !important; }


/* ==========================================================================
   4. ★ 正文杂志化排版（对全站所有历史文章统一生效，这是可读性的关键）
   ========================================================================== */
.met-editor{
  font-size:16.5px;
  line-height:1.95;
  color:var(--sy-body);
  word-break:break-word;
}
.met-editor p{ margin:0 0 1.15em; }
.met-editor > p:first-of-type{ color:#2F3B44; }

/* 大节标题 h2 */
.met-editor h2{
  position:relative;
  margin:2.2em 0 1em;
  padding:0 0 12px 0;
  font-size:25px;
  font-weight:700;
  line-height:1.5;
  color:var(--sy-ink);
  border-bottom:2px solid var(--sy-line);
}
.met-editor h2::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:78px; height:2px; background:var(--sy-brand);
}
/* 小节标题 h3：左侧竖条 */
.met-editor h3{
  position:relative;
  margin:2em 0 .85em;
  padding-left:17px;
  font-size:20.5px;
  font-weight:700;
  line-height:1.55;
  color:var(--sy-ink);
}
.met-editor h3::before{
  content:""; position:absolute; left:0; top:.26em;
  width:5px; height:1.05em; border-radius:3px;
  background:linear-gradient(180deg,#1BAADB 0%,#0E9F7E 100%);
}
/* h4：前置方块 */
.met-editor h4{
  position:relative;
  margin:1.6em 0 .7em;
  padding-left:18px;
  font-size:17.5px;
  font-weight:700;
  line-height:1.6;
  color:#1F3A4C;
}
.met-editor h4::before{
  content:""; position:absolute; left:0; top:.52em;
  width:9px; height:9px; border-radius:2px;
  background:var(--sy-amber);
}
.met-editor h5{
  margin:1.4em 0 .6em; font-size:16.5px; font-weight:700; color:#2A4658;
}

/* 段落强调 */
.met-editor strong,.met-editor b{ font-weight:700; color:#0A5A85; }

/* 列表：自定义标记 */
.met-editor ul,.met-editor ol{ margin:0 0 1.2em; padding-left:0; list-style:none; }
.met-editor ul > li,.met-editor ol > li{
  position:relative;
  margin-bottom:.62em;
  padding-left:26px;
}
.met-editor ul > li::before{
  content:""; position:absolute; left:7px; top:.72em;
  width:7px; height:7px; border-radius:50%;
  background:#1BAADB;
}
.met-editor ol{ counter-reset:sy-ol; }
.met-editor ol > li{ counter-increment:sy-ol; padding-left:34px; }
.met-editor ol > li::before{
  content:counter(sy-ol);
  position:absolute; left:0; top:.34em;
  width:22px; height:22px; line-height:22px;
  text-align:center; border-radius:6px;
  background:#EAF6FC; color:#0A5A85;
  font-size:12.5px; font-weight:700;
}
.met-editor li > ul,.met-editor li > ol{ margin-top:.55em; margin-bottom:.2em; }

/* 引用 */
.met-editor blockquote{
  margin:1.6em 0;
  padding:18px 22px 18px 24px;
  border:0; border-left:4px solid #1BAADB;
  border-radius:0 10px 10px 0;
  background:#F4FAFD;
  color:#31505F;
  font-size:16px;
  font-style:normal;
}
.met-editor blockquote p:last-child{ margin-bottom:0; }

/* 分隔线 */
.met-editor hr{
  margin:2.2em 0; border:0; height:1px;
  background:linear-gradient(90deg,rgba(27,170,219,0) 0%,#D5E3EC 22%,#D5E3EC 78%,rgba(213,227,236,0) 100%);
}

/* 正文图片 */
.met-editor img{
  max-width:100%; height:auto;
  border-radius:12px;
  border:1px solid var(--sy-line);
  box-shadow:0 6px 22px rgba(16,42,66,.10);
  margin:6px 0;
}
.met-editor figure{ margin:0 0 30px; }
.met-editor figcaption{
  margin-top:10px; font-size:13.5px; color:var(--sy-mute); text-align:center;
}

/* 正文链接 */
.met-editor a{
  color:var(--sy-brand);
  text-decoration:none;
  border-bottom:1px solid rgba(14,127,184,.35);
  transition:border-color .2s,color .2s;
}
.met-editor a:hover{ color:var(--sy-brand-d); border-bottom-color:var(--sy-brand-d); }

/* 表格（引擎不支持 markdown，但后台编辑器可能产出） */
.met-editor table{ width:100%; margin:1.5em 0; border-collapse:collapse; font-size:15px; }
.met-editor table th{
  background:#F2F7FA; color:#22475C; font-weight:700;
  padding:11px 13px; text-align:left; border:1px solid #DEE8EF;
}
.met-editor table td{ padding:11px 13px; border:1px solid #E8EFF4; color:var(--sy-body); }
.met-editor table tr:nth-child(even) td{ background:#FAFCFD; }

/* 代码 */
.met-editor pre{
  margin:1.5em 0; padding:16px 18px;
  background:#0E2334; color:#D6E6F2;
  border-radius:10px; font-size:14px; line-height:1.7;
  overflow-x:auto;
}
.met-editor code{
  padding:2px 6px; border-radius:5px;
  background:#F0F5F9; color:#B4552A; font-size:.92em;
}
.met-editor pre code{ background:transparent; color:inherit; padding:0; }

/* ==========================================================================
   5. 列表页 / 卡片
   ========================================================================== */
.met-news-list .media-heading,
.met-news-list h4{
  color:var(--sy-ink); font-weight:600; transition:color .2s;
}
.met-news-list a:hover .media-heading,
.met-news-list a:hover h4{ color:var(--sy-brand); }
.met-news-list .des,
.met-news-list .info{ color:var(--sy-mute); }
.met-news-list li,.met-news-list .media-lg{
  padding-bottom:20px; margin-bottom:20px;
  border-bottom:1px solid var(--sy-line);
}
.met-news-list .media-lg:last-child,.met-news-list li:last-child{ border-bottom:0; }
.met-news-list img{ border-radius:9px; }

/* 侧栏 */
.met-sidebar{
  border:1px solid var(--sy-line) !important;
  border-radius:12px;
  box-shadow:0 4px 18px rgba(16,42,66,.05);
}
.met-sidebar .sidebar-news-list h3{
  position:relative; padding-left:14px; color:var(--sy-ink); font-weight:700;
}
.met-sidebar .sidebar-news-list h3::before{
  content:""; position:absolute; left:0; top:.2em;
  width:4px; height:1.1em; border-radius:2px;
  background:linear-gradient(180deg,#1BAADB,#0E9F7E);
}
.met-sidebar .list-group-item{ border-color:var(--sy-line); }
.met-sidebar .list-group-item a{ color:#455663; }
.met-sidebar .list-group-item a:hover{ color:var(--sy-brand); }

/* 分页 */
.pagination .page-item.active .page-link,
.pagination > li.active > a{
  background:var(--sy-brand) !important; border-color:var(--sy-brand) !important; color:#fff !important;
}
.pagination .page-link,.pagination > li > a{ color:#54636E; border-color:var(--sy-line); border-radius:7px; margin:0 3px; }

/* 标签 */
.tag a{ border-radius:20px; }

/* ==========================================================================
   5b. 列表页「有声有色」改造（2026-09-19）
   问题：母版 metv75.css 有 .met-news-list .media-left{display:none}
        （news_imgok=false 时隐藏缩略图），列表只剩纯文字 → 枯燥。
   做法：① 重新打开配图（用更高特异性压过母版，见下方 !important 说明）
        ② 标题左侧加品牌渐变竖条，hover 时渐变字
        ③ 元信息分层、字号收敛
   ⚠️ 特异性：母版选择器为 (0,2,0)。这里写成 .met-news .met-news-list ...
      提高到 (0,3,0)，不依赖加载顺序，避免母版更新后失效。
   ========================================================================== */
.met-news .met-news-list .media-left,
.met-news-list.met-news .media-left{
  display:table-cell !important;
  margin-right:24px; vertical-align:top;
}
.met-news .met-news-list .media-left > a,
.met-news-list.met-news .media-left > a{
  display:block; overflow:hidden; border-radius:9px; line-height:0;
}
.met-news .met-news-list .media-left .media-object,
.met-news-list.met-news .media-left .media-object{
  display:block !important;
  width:190px !important; height:128px !important;
  max-width:none !important;
  object-fit:cover;
  transition:transform .45s ease;
}
.met-news .met-news-list li.media-lg:hover .media-left .media-object,
.met-news-list.met-news li.media-lg:hover .media-left .media-object{
  transform:scale(1.06);
}
.met-news .met-news-list .media-body,
.met-news-list.met-news .media-body{
  display:table-cell !important; vertical-align:top; width:100%; padding-left:0;
}

/* 标题：左侧品牌渐变竖条 + hover 渐变字 */
.met-news .met-news-list li.media-lg > .media-body > h4,
.met-news-list.met-news li.media-lg > .media-body > h4{
  position:relative; padding-left:15px; margin-bottom:10px; line-height:1.55;
}
.met-news .met-news-list li.media-lg > .media-body > h4::before,
.met-news-list.met-news li.media-lg > .media-body > h4::before{
  content:""; position:absolute; left:0; top:.18em;
  width:4px; height:1.05em; border-radius:2px;
  background:linear-gradient(180deg,#1BAADB 0%,#0E9F7E 100%);
  transition:height .25s, top .25s;
}
.met-news .met-news-list li.media-lg:hover > .media-body > h4::before,
.met-news-list.met-news li.media-lg:hover > .media-body > h4::before{
  top:0; height:1.42em;
}
.met-news .met-news-list li.media-lg:hover > .media-body > h4 > a,
.met-news-list.met-news li.media-lg:hover > .media-body > h4 > a{
  background:linear-gradient(100deg,#0A4A70,#13A0B8 55%,#0E9F7E);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ==========================================================================
   5c. 关键词标签化（2026-09-19）
   背景：核心领域页的摘要里带一段纯文本
        「……机械记忆。核心方向：语言习得 · 认知与记忆 · 学习方法 · 学习效率 · 学」
        既与摘要糊在一起，又被字数截断，还不可点击。
   做法：impact-brand.js 识别该模式 → 取其后整段 → 按「·」切词 → 丢残缺尾词
        → 重建为可点击 pill（点击=站内搜索该词）。
   ========================================================================== */
.sy-kw-host{ display:block; margin-top:11px; }
.sy-kw-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.sy-kw-lead{
  font-size:12.5px; letter-spacing:.08em; color:#95A3AE;
  margin-right:2px; white-space:nowrap;
}
.sy-kw{
  display:inline-block; font-size:12.5px; line-height:1; text-decoration:none;
  color:#0A5A85; background:#EDF6FB; border:1px solid #D3E8F4;
  border-radius:999px; padding:7px 13px;
  transition:background .2s, color .2s, border-color .2s, transform .18s, box-shadow .2s;
}
.sy-kw:hover{
  background:linear-gradient(100deg,#0E7FB8,#0E9F7E); color:#fff;
  border-color:transparent; transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(14,127,184,.22);
}
.sy-des-trim::after{ content:""; display:inline-block; width:0; }

/* ==========================================================================
   6. 按钮 / 全局链接
   ========================================================================== */
.btn-primary{ background-color:var(--sy-brand); border-color:var(--sy-brand); }
.btn-primary:hover,.btn-primary:focus{ background-color:var(--sy-brand-d); border-color:var(--sy-brand-d); }
.btn-outline-primary{ color:var(--sy-brand); border-color:var(--sy-brand); }
.btn-outline-primary:hover{ background:var(--sy-brand); color:#fff; }
a{ transition:color .2s; }

/* ==========================================================================
   7. 响应式
   ========================================================================== */
@media (max-width:991px){
  .met-banner-ny{ height:220px !important; min-height:220px; }
  .met-banner-ny h2,.met-banner-ny h3{ font-size:32px; padding:0 22px; }
  .met-banner-ny .sy-banner-deco{ bottom:34px; }
  .details-title h1{ font-size:26px; }
  .met-editor{ font-size:16px; line-height:1.9; }
  .met-editor h2{ font-size:21.5px; }
  .met-editor h3{ font-size:18.5px; }
  .met-editor h4{ font-size:16.5px; }
}

/* 列表页：手机端改用「上图下文」卡片，比左右挤更好读 */
@media (max-width:767px){
  .met-news .met-news-list .media-left,
  .met-news-list.met-news .media-left{
    display:block !important; margin-right:0; margin-bottom:14px;
  }
  .met-news .met-news-list .media-left .media-object,
  .met-news-list.met-news .media-left .media-object{
    width:100% !important; height:186px !important;
  }
  .met-news .met-news-list .media-body,
  .met-news-list.met-news .media-body{ display:block !important; }
  .met-news .met-news-list li.media-lg > .media-body > h4,
  .met-news-list.met-news li.media-lg > .media-body > h4{ padding-left:13px; }
  .sy-kw{ font-size:12px; padding:7px 11px; }
  .sy-kw-lead{ width:100%; margin-bottom:2px; }
}

@media (max-width:575px){
  .met-banner-ny{ height:180px !important; min-height:180px; }
  .met-banner-ny h2,.met-banner-ny h3{ font-size:26px; padding:0 16px; letter-spacing:.03em; }
  .details-title h1{ font-size:22.5px; }
  .met-editor{ font-size:15.5px; }
  .met-editor blockquote{ padding:15px 17px; }
}