/* =====================================================================
   column.css — 栏目卡片页专属样式（jsld1 / szdw / szdw1）
   ---------------------------------------------------------------------
   本文件服务 2026-09-24 新增的三张栏目页（it-007），与 v0.1 既有三页共存：
     · jsld1.html  学院领导    （旧模板 jsld1.jsp / 旧页 xygk/xyld1.htm）
     · szdw.html   博士生导师  （旧模板 szdw.jsp   / 旧页 szdw/bssds.htm）
     · szdw1.html  师资队伍    （旧模板 szdw1.jsp  / 旧页 szdw.htm）
   三页的页面骨架（横幅 / 侧栏 / 面板 / 栅格 / 响应式）全部复用 list.css，
   本文件只补充两件事：
     ① 侧栏（组件 190563）英文小标题的逐页差异 —— list.css 里文案写死为
        "News Center"（列表页），这三页须换文案（文案在组件渲染态无节点，
        沿用 v0.1 的伪元素做法，见 VERSION.md 偏差登记）；
     ② 组件 190567 图片文章列表 → 领导/导师卡片墙的新样式
        （渲染态结构 .content-details > .content-leaderbox×N，
          每张卡为 .content-leaderimg>img + .content-leaderintroduce>a+p）。
   隔离说明：卡片墙规则全部挂在 .panel-leaders 前缀下，避免与详情页正文
   容器 .content-details（article.css）互相污染。
   引入顺序：base.css → list.css → column.css。
   ===================================================================== */

/* 侧栏英文小标题（逐页文案，替换 list.css 的 "News Center"） */
body.page-about .side-card .content-span-1::after{content:"About Us"}
body.page-faculty .side-card .content-span-1::after{content:"Faculty & Staff"}

/* 面板标题栏副标题（jsld1 模板骨架里的 .content-span-2 "LEADER"） */
.panel-head .content-span-2{font-size:12px;letter-spacing:2.5px;color:#93A1B5;font-family:var(--font-en);text-transform:uppercase}

/* 组件 190567 图片文章列表 → 卡片墙 */
.panel-leaders .content-details{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:22px;padding:26px 28px 34px}
/* 桌面宽度按 5 列对齐：jsld1 5 人 = 1 行、szdw/szdw1 25 人 = 5 行，不产生孤行 */
@media(min-width:1200px){
  .panel-leaders .content-details{grid-template-columns:repeat(5,1fr)}
}
.panel-leaders .content-leaderbox{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:all .35s ease;display:flex;flex-direction:column}
.panel-leaders .content-leaderbox:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(0,163,137,.35)}
/* 组件自带的裁剪脚本 centerCutImg.js 已被省略（只抄结构、省略脚本），
   人像统一按 7:10 版式承载——实测原图 2048×2925 与 241×344 均为该比例 */
.panel-leaders .content-leaderimg{aspect-ratio:7/10;overflow:hidden;background:linear-gradient(150deg,#F2F7FF,#EAF7F4)}
.panel-leaders .content-leaderimg img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.panel-leaders .content-leaderbox:hover .content-leaderimg img{transform:scale(1.05)}
.panel-leaders .content-leaderintroduce{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.panel-leaders .content-leaderintroduce>a{font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .25s}
.panel-leaders .content-leaderbox:hover .content-leaderintroduce>a{color:var(--teal)}
.panel-leaders .content-leaderintroduce>p{font-size:12.5px;color:#8A97AB;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.panel-leaders .content-leaderintroduce>p:empty{display:none}

/* ============ Responsive（与 base.css / list.css 的断点口径一致） ============ */
@media(max-width:1080px){
  .panel-leaders .content-details{gap:18px;padding:20px 20px 26px}
}
@media(max-width:640px){
  .panel-leaders .content-details{grid-template-columns:repeat(2,1fr);gap:14px;padding:16px}
  .panel-leaders .content-leaderintroduce{padding:12px 13px 14px;gap:4px}
  .panel-leaders .content-leaderintroduce>a{font-size:14px}
  .panel-leaders .content-leaderintroduce>p{font-size:12px}
}