/* ============================================================
   学术期刊频道页样式（两栏门户版）
   左栏：学科导航 / 核心收录导航   右侧：首字母检索 + 最新更新封面墙（已去除右栏）
   主色经 journals/index.php 根元素 inline style 注入 CSS 变量 --chan-accent。
   ============================================================ */
:root { --jr-accent: #1b5bd5; }
.chan-wrap { --jr-accent: var(--chan-accent, #1b5bd5); min-height: 100vh; display: flex; flex-direction: column; background: #f4f6f9; }
.chan-wrap .cw { width: 1200px; max-width: calc(100% - 24px); margin: 0 auto; }
.jr-main { flex: 1; padding: 20px 0 44px; }

/* ---------- 两栏骨架 ---------- */
.jr-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 16px; align-items: start; }
.jr-right  { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.jr-cols   { display: block; }

.jr-card { background: #fff; border: 1px solid #eaedf2; border-radius: 12px; box-shadow: 0 1px 3px rgba(20,40,90,.04); }

/* ---------- 左栏：学科 / 核心收录 ---------- */
.jr-side { overflow: hidden; position: sticky; top: 14px; }
.jr-tabs { display: flex; }
.jr-tab { flex: 1; text-align: center; padding: 13px 6px; font-size: 15px; font-weight: 600; color: #6b7280; background: #f3f5f9; cursor: pointer; user-select: none; transition: color .15s, background .15s; border-bottom: 1px solid #eaedf2; }
.jr-tab + .jr-tab { border-left: 1px solid #eaedf2; }
.jr-tab.on { color: #fff; background: var(--jr-accent); border-bottom-color: var(--jr-accent); }
.jr-list { display: none; padding: 6px 0; max-height: 640px; overflow-y: auto; }
.jr-list.on { display: block; }
.jr-litem { display: flex; align-items: center; gap: 8px; padding: 11px 18px; font-size: 14px; color: #454b54; cursor: pointer; position: relative; transition: color .15s, background .15s; }
.jr-litem::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; transition: background .15s; }
.jr-litem + .jr-litem { border-top: 1px solid #f4f6f9; }
.jr-litem .ct { margin-left: auto; font-size: 12px; color: #b6bcc6; }
.jr-litem:hover { color: var(--jr-accent); background: #f5f8ff; }
.jr-litem.on { color: var(--jr-accent); background: #eef4ff; font-weight: 600; }
.jr-litem.on::before { background: var(--jr-accent); }
.jr-empty-mini { padding: 22px 18px; font-size: 13px; color: #aeb4be; line-height: 1.7; }

/* 学科 / 收录导航：手风琴 —— 默认仅显示一级，点击一级展开其二级 */
.jr-litem { text-decoration: none; }
.jr-l1 { font-weight: 600; color: #333a44; }
.jr-l2 { padding-left: 34px; font-size: 13px; color: #737b86; font-weight: 400; }
.jr-l2::before { left: 20px; top: 50%; bottom: auto; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #ccd3dd; }
.jr-l2:hover::before { background: var(--jr-accent); }

/* 分组分隔线（顶层各分组 / 独立一级之间） */
.jr-list.on > .jr-group + .jr-group,
.jr-list.on > .jr-group + a.jr-litem,
.jr-list.on > a.jr-litem + .jr-group,
.jr-list.on > a.jr-litem + a.jr-litem { border-top: 1px solid #f4f6f9; }

/* 可展开的一级：整行可点，右侧箭头指示展开状态 */
.jr-l1.has-sub { cursor: pointer; user-select: none; }
.jr-l1.has-sub .jr-l1-tx { flex: 1 1 auto; min-width: 0; }
.jr-caret { flex: 0 0 auto; width: 8px; height: 8px; margin-left: 8px; border-right: 2px solid #9aa2ad; border-bottom: 2px solid #9aa2ad; transform: rotate(-45deg); transition: transform .22s ease, border-color .15s; }
.jr-l1.has-sub:hover { color: var(--jr-accent); background: #f5f8ff; }
.jr-l1.has-sub:hover .jr-caret { border-color: var(--jr-accent); }

/* 二级容器：默认收起，展开时平滑滑出 */
.jr-sub { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .28s ease, opacity .2s ease; }
.jr-group.open > .jr-sub { max-height: 1600px; opacity: 1; }
.jr-group.open > .jr-l1.has-sub { color: var(--jr-accent); background: #f5f8ff; font-weight: 600; }
.jr-group.open > .jr-l1.has-sub::before { background: var(--jr-accent); }
.jr-group.open > .jr-l1.has-sub .jr-caret { transform: rotate(45deg); border-color: var(--jr-accent); }

/* ---------- 分类页：面包屑 / 分类头 / 子分类标签 ---------- */
.jrc-crumb { display: flex; align-items: center; flex-wrap: wrap; font-size: 13px; color: #8b93a1; padding: 2px 2px 4px; }
.jrc-crumb a { color: #78808c; text-decoration: none; transition: color .15s; }
.jrc-crumb a:hover { color: var(--jr-accent); }
.jrc-crumb .sep { color: #d3d8df; margin: 0 8px; }
.jrc-crumb .cur { color: var(--jr-accent); font-weight: 600; }
.jrc-hero { padding: 20px 22px; }
.jrc-hero-main { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.jrc-hero-main h1 { margin: 0; font-size: 22px; font-weight: 800; color: #1e2532; letter-spacing: .3px; }
.jrc-hero-main .sub { font-size: 13px; color: #9aa0a8; }
.jrc-hero-main .sub b { color: #f25d30; margin: 0 2px; }
.jrc-sibs { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.jrc-sib { display: inline-flex; align-items: center; font-size: 13px; color: #55606f; background: #f3f5f9; border: 1px solid #e8ebf0; border-radius: 999px; padding: 5px 14px; text-decoration: none; transition: color .15s, background .15s, border-color .15s; }
.jrc-sib:hover { color: var(--jr-accent); border-color: #c2d5f7; background: #f4f8ff; }
.jrc-sib.on { color: #fff; background: var(--jr-accent); border-color: var(--jr-accent); }

/* ---------- 中栏顶部：首字母检索 ---------- */
.jr-alpha { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 13px 16px; }
.jr-alpha .lb { font-size: 13px; color: #9098a3; margin-right: 2px; flex: 0 0 auto; }
.jr-al { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 28px; padding: 0 7px; font-size: 13px; color: #556; background: #fff; border: 1px solid #e4e8ef; border-radius: 6px; cursor: pointer; user-select: none; transition: all .14s; }
.jr-al:hover { color: var(--jr-accent); border-color: #b9cdf3; background: #f4f8ff; }
.jr-al.on { color: #fff; background: var(--jr-accent); border-color: var(--jr-accent); }
.jr-al.off { color: #cdd2da; background: #fafbfc; border-color: #eef0f3; cursor: default; }

/* ---------- 中栏主体：最新更新封面墙 ---------- */
.jr-center { padding: 18px 20px 22px; min-height: 260px; }
.jr-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.jr-hd .tt { font-size: 19px; font-weight: 800; color: #222; letter-spacing: .3px; position: relative; padding-left: 12px; }
.jr-hd .tt::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 3px; background: var(--jr-accent); }
.jr-hd .rs { font-size: 12.5px; color: #9aa0a8; }
.jr-hd .rs b { color: #f25d30; margin: 0 2px; }
.jr-hd .reset { margin-left: auto; font-size: 12.5px; color: var(--jr-accent); cursor: pointer; display: none; text-decoration: none; }
.jr-hd .reset:hover { text-decoration: underline; }

.jr-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 16px; }
.jr-c { display: flex; flex-direction: column; text-decoration: none; min-width: 0; }
.jr-c .cv { width: 100%; aspect-ratio: 3 / 4; border-radius: 7px; background-size: cover; background-position: center; box-shadow: 0 4px 12px rgba(20,40,90,.14); position: relative; overflow: hidden; transition: transform .18s, box-shadow .18s; }
.jr-c:hover .cv { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(27,91,213,.20); }
.jr-c .cv.grad { display: flex; align-items: center; justify-content: center; padding: 0 8px; }
.jr-c .cv.grad::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: rgba(255,255,255,.22); }
.jr-c .cv .cvtx { color: #fff; font-size: 14px; font-weight: 700; text-align: center; line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,.4); word-break: break-all; }
.jr-c .cv .cvlv { position: absolute; left: 6px; top: 6px; font-size: 10px; line-height: 16px; padding: 0 6px; border-radius: 4px; color: #fff; background: rgba(210,74,32,.92); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.jr-c .nm { margin-top: 9px; font-size: 13.5px; line-height: 1.4; color: #333; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 38px; transition: color .15s; }
.jr-c:hover .nm { color: var(--jr-accent); }
.jr-static { cursor: default; }
.jr-static:hover .cv { transform: none; box-shadow: 0 4px 12px rgba(20,40,90,.14); }
.jr-static:hover .nm { color: #333; }

.jr-noresult { display: none; text-align: center; color: #aeb4be; font-size: 14px; padding: 46px 10px; }
.jr-center.is-empty .jr-cards { display: none; }
.jr-center-empty { display: none; text-align: center; color: #aeb4be; padding: 40px 10px 30px; }
.jr-center.is-empty .jr-center-empty { display: block; }
.jr-center-empty .ic { font-size: 42px; margin-bottom: 10px; }
.jr-center-empty h3 { margin: 0 0 6px; font-size: 17px; color: #565c66; }
.jr-center-empty p { margin: 0; font-size: 13.5px; line-height: 1.7; }

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) { .jr-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .jr-layout { grid-template-columns: minmax(0, 1fr); }
  .jr-side { position: static; }
  .jr-list { max-height: none; }
  .jr-list.on { display: flex; flex-wrap: wrap; padding: 10px 12px; gap: 8px; }
  .jr-litem { padding: 7px 12px; border: 1px solid #eceef2; border-radius: 16px; }
  .jr-litem + .jr-litem { border-top: 1px solid #eceef2; }
  .jr-litem::before { display: none; }
  .jr-litem .ct { display: none; }
}
@media (max-width: 640px) {
  .jr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; }
}
@media (max-width: 440px) { .jr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 手风琴导航：移动端保持竖向折叠布局（覆盖旧的胶囊平铺样式） ---------- */
@media (max-width: 860px) {
  .jr-list.on { display: block; flex-wrap: nowrap; padding: 6px 0; gap: 0; }
  .jr-litem { padding: 12px 18px; border: 0; border-radius: 0; }
  .jr-litem + .jr-litem { border-top: 1px solid #f4f6f9; }
  .jr-l2 { padding-left: 34px; }
  .jr-litem::before { display: block; }
  .jr-caret { display: inline-block; }
  .jr-sub .jr-litem { border-top: 1px solid #f4f6f9; }
}