/* =====================================================================
   article.css — 文章页专属样式（须在 base.css 之后引入）
   ---------------------------------------------------------------------
   v0.1 来源：由 新网站设计/public/css/article.css 移植（2026-09-19 · it-005）。
   设计稿的 .crumb / .article-head / .article-body / .article-meta 等自研类名，
   已改写到对应组件的渲染态类名上：
     · 190509 当前位置  .content-address > table.winstyle190509
     · 190548 文章内容  .content-news-list > form > .content-list
                        > .content-1 > h3 + .content-source
                        + #vsb_content_4.content-details > .v_news_content
   ===================================================================== */

/* 页面横幅 */
.page-banner{position:relative;background:var(--grad);padding:60px 0 56px;overflow:hidden;color:#fff}
.page-banner .grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:52px 52px;mask-image:radial-gradient(ellipse 80% 90% at 20% 50%,#000 30%,transparent 78%)}
.page-banner .glow{position:absolute;width:420px;height:420px;border-radius:50%;background:#0E8C74;filter:blur(100px);opacity:.45;right:-80px;top:-160px}
.page-banner .en{font-size:13px;letter-spacing:3.5px;color:var(--cyan);text-transform:uppercase;font-family:var(--font-en);display:block;margin-bottom:10px;position:relative;z-index:2}
.page-banner h1{font-size:32px;font-weight:800;letter-spacing:2px;position:relative;z-index:2}

/* 组件 190509 当前位置：渲染态为 <table class="winstyle190509"><tr><td nowrap>当前位置：… */
.content-address{position:relative;z-index:2;margin-top:16px;font-size:13px;color:rgba(255,255,255,.6)}
.content-address table{font-size:13px;color:rgba(255,255,255,.6)}
.content-address td{white-space:nowrap}
.content-address .fontstyle190509{color:rgba(255,255,255,.6)}
.content-address a .fontstyle190509:hover{color:var(--cyan)}
.content-address .splitflagstyle190509{color:rgba(255,255,255,.3);margin:0 8px}

/* 主体布局
   ---------------------------------------------------------------------
   it-010（2026-09-24）：设计稿的详情页是「正文 + 320px 侧栏」两列。
   模板侧按用户要求移除了侧栏 / 上一篇下一篇 / 分享（无实际数据支持），
   只剩一列正文 —— 若不处理，正文贴左、右侧空出 356px（1440 实测偏左 356）。
   处置：用 `:not(:has(aside))` 让「无侧栏」的页面自动切换为**单列居中阅读区**，
   宽度取原两列时的正文列宽 884px（= 1240 − 320 − 36），正文行宽与设计稿一致。
   静态站 details.html 仍带侧栏，`:has(aside)` 成立 → 该页布局完全不变。

   ⚠ grid 列必须写成 `minmax(0,…)`，不能写 `1fr`：
   `1fr` 的最小尺寸是 `auto`（= 内容的 min-content），CMS 富文本里的固定宽度
   表格/图片会把网格列撑破容器，进而让整页横向溢出（it-010 实测 375px 下
   溢出 891px、sticky 头部随之错位）。 */
.main{padding:56px 0 88px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start}
.layout>div{min-width:0}
.layout:not(:has(aside)){grid-template-columns:minmax(0,1fr);gap:0}
.layout:not(:has(aside))>div{width:100%;max-width:884px;margin:0 auto}

/* 文章卡片（页面框架） */
.article-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}

/* 组件 190548 文章内容 */
.content-list{position:relative}
.content-list .content-1{padding:44px 56px 0;text-align:center;position:relative}
.content-list .content-1::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--cyan),var(--teal))}
.content-list .content-1>h3{font-size:26px;font-weight:800;color:var(--ink);line-height:1.6;max-width:760px;margin:0 auto;overflow-wrap:break-word}
/* 设计稿的「学院新闻」分类胶囊在组件渲染态里没有对应节点，用伪元素保住外观；
   文字硬编码在 CSS 中（见 VERSION.md 已知偏差）。 */
.content-list .content-1>h3::before{content:"学院新闻";display:block;width:max-content;margin:0 auto 18px;font-size:12px;font-weight:400;letter-spacing:1.5px;color:var(--teal);background:rgba(0,163,137,.08);padding:4px 16px;border-radius:999px}
.content-list .content-source{margin-top:22px;padding:0 56px 32px;border-bottom:1px dashed var(--line);display:flex;justify-content:center;gap:26px;flex-wrap:wrap;font-size:13px;color:#93A1B5}
.content-list .content-source>span{display:inline-flex;align-items:center;gap:6px}

/* it-010（GOAL 第 10 项）：正文由 CMS 富文本承载，可能插入固定宽度的 <table>/<img>
   （含内联 width 属性/样式）。窄屏下这类内容会撑破页面宽度，故按用户要求在**正文区**
   自成横向滚动容器：只有内容真的比容器宽时才出现滚动条，且滚动被约束在正文区内，
   不再向上撑破网格列与页面。
   （overflow-x 非 visible 后，正文的 min-content 尺寸不再向上传递 —— 这正是
   `.layout` 用 minmax(0,…) 之外的第二道保险。） */
.content-details{padding:44px 56px;font-size:15.5px;color:#33415C;line-height:2.05;overflow-x:auto}
.v_news_content p{margin-bottom:1.4em;text-indent:2em;text-align:justify}
.v_news_content p.vsbcontent_start{font-size:16.5px;color:var(--ink);font-weight:500}
.v_news_content figure{margin:2em auto;text-align:center}
.v_news_content figure img{margin:0 auto;border-radius:10px;box-shadow:var(--shadow-md);max-width:88%}
.v_news_content figcaption{margin-top:12px;font-size:12.5px;color:#93A1B5;text-indent:0}
.v_news_content .quote{margin:2em 0;padding:20px 26px;border-left:4px solid var(--teal);background:#F4FAF8;border-radius:0 12px 12px 0;color:var(--ink);text-indent:0}

/* 组件块之外的框架内容（模板可在 editable 之外承载） */
.article-foot{border-top:1px dashed var(--line);padding:22px 56px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:13px;color:#93A1B5}
.share{display:flex;gap:10px;align-items:center}
.share .sbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:#8A97AB;cursor:pointer}
.share .sbtn:hover{border-color:var(--teal);color:var(--teal)}

/* 上一篇 / 下一篇（页面框架） */
.pn-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.pn-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 24px;transition:all .3s;box-shadow:var(--shadow-sm)}
.pn-item:hover{border-color:rgba(0,163,137,.4);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.pn-item .lab{font-size:12px;letter-spacing:1.5px;color:var(--teal);display:block;margin-bottom:8px;text-transform:uppercase}
.pn-item .t{font-size:14.5px;color:var(--ink);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pn-item:hover .t{color:var(--teal)}
.pn-item.next{text-align:right}
.pn-item.empty{opacity:.5;pointer-events:none}

/* 侧边栏（页面框架） */
.side-block{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:26px}
.side-block .head{padding:18px 24px;border-bottom:1px solid var(--line);font-size:16px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:10px}
.side-block .head::before{content:"";width:4px;height:16px;border-radius:2px;background:linear-gradient(180deg,var(--blue),var(--cyan))}
.side-block .head .en{font-size:11px;color:#93A1B5;letter-spacing:1.5px;text-transform:uppercase;font-family:var(--font-en);font-weight:400}
.side-news a{display:block;padding:14px 24px;border-bottom:1px dashed var(--line);transition:background .25s}
.side-news a:last-child{border-bottom:none}
.side-news a:hover{background:#F8FBFA}
.side-news .t{font-size:13.5px;color:var(--ink);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .25s}
.side-news a:hover .t{color:var(--teal)}
.side-news .dt{font-size:12px;color:#A8B4C4;margin-top:5px;font-family:var(--font-en)}
.side-tags{padding:18px 24px;display:flex;flex-wrap:wrap;gap:10px}
.side-tags a{font-size:12.5px;padding:6px 14px;border-radius:999px;background:#F2F6FB;color:var(--body);border:1px solid transparent}
.side-tags a:hover{background:rgba(0,163,137,.1);color:var(--teal);border-color:rgba(0,163,137,.25)}

/* ============ Misc ============ */
.reveal{opacity:0;transform:translateY(24px);transition:all .65s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ============ Responsive（文章页专属部分） ============ */
@media(max-width:1080px){
  /* 列宽下的 min 必须显式为 0：`1fr` 的隐含最小尺寸是 auto，会被内容撑破（见上） */
  .layout{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  /* it-010：面包屑组件 190509 的 td 是 nowrap 单行（设计稿口径）。栏目层级深时
     （如 首页/人才培养/本科教育教学审核评估/正文，375px 实测 368px > 容器 343px）
     会被 .page-banner 的 overflow:hidden 直接裁掉尾部 → 窄屏改为允许折行，信息完整。 */
  .content-address td{white-space:normal}
  .content-list .content-1{padding:32px 24px 0}
  .content-list .content-1>h3{font-size:20px}
  .content-list .content-source{margin-top:18px;padding:0 24px 26px;gap:14px}
  .content-details{padding:30px 24px;font-size:15px}
  .v_news_content figure img{max-width:100%}
  .article-foot{padding:18px 24px}
  .pn-nav{grid-template-columns:1fr}
  .page-banner{padding:20px 0 20px;}
  .main{padding:20px 0 20px}
}