/* ============================================================
   学术期刊 · 分类总览页专属样式（命名空间 jrx-）
   复用 /style/journals/index.css 的 chan-wrap / cw / jr-card / 面包屑骨架，
   本文件补充：总览 Hero、学科门类目录网格、学科卡片与二级方向标签。
   主色继承根元素注入的 --jr-accent（默认 #1b5bd5），配色 / 圆角 / 阴影与站点一致。
   ============================================================ */

/* ---------- 总览 Hero ---------- */
.jrx-hero { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 20px 22px; margin-bottom: 16px; }
.jrx-hero-emblem {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--jr-accent), var(--chan-accent-dark, #1747a8));
  box-shadow: 0 6px 16px rgba(27,91,213,.22);
}
.jrx-hero-main { flex: 1 1 260px; min-width: 0; }
.jrx-hero-main h1 { margin: 0; font-size: 23px; font-weight: 800; color: #1e2532; letter-spacing: .3px; line-height: 1.2; }
.jrx-hero-sub { margin: 6px 0 0; font-size: 13px; color: #97a0ac; line-height: 1.6; }
.jrx-hero-sub b { color: #f25d30; margin: 0 3px; font-weight: 700; }

/* Hero 内筛选框（独立实现，观感与分类页工具条搜索一致） */
.jrx-hero-search { position: relative; flex: 0 0 auto; margin-left: auto; }
.jrx-hero-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: #aab1bc; pointer-events: none; }
.jrx-hero-search input {
  width: 210px; max-width: 46vw; height: 38px; padding: 0 14px 0 33px; font-size: 13.5px; color: #333;
  background: #f6f8fb; border: 1px solid #e4e8ef; border-radius: 9px; outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.jrx-hero-search input::placeholder { color: #aeb4be; }
.jrx-hero-search input:focus { background: #fff; border-color: var(--jr-accent); box-shadow: 0 0 0 3px rgba(27,91,213,.10); }

/* ---------- 学科门类目录网格 ---------- */
.jrx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }

/* ---------- 学科卡片 ---------- */
.jrx-cat { overflow: hidden; transition: border-color .16s, box-shadow .16s, transform .12s; }
.jrx-cat:hover { border-color: #cbdaf6; box-shadow: 0 8px 22px rgba(27,91,213,.10); transform: translateY(-2px); }

/* 卡头：学科图标 + 名称 + 收录本数（整行可点，进入该学科分类页） */
.jrx-cat-head { display: flex; align-items: center; gap: 12px; padding: 15px 16px; text-decoration: none; }
.jrx-cat-ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--jr-accent); background: rgba(27,91,213,.08); transition: background .16s;
}
.jrx-cat-ic svg { width: 22px; height: 22px; }
.jrx-cat:hover .jrx-cat-ic { background: rgba(27,91,213,.14); }
.jrx-cat-name { flex: 1 1 auto; min-width: 0; font-size: 16.5px; font-weight: 700; color: #1e2532; line-height: 1.3; letter-spacing: .2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s; }
.jrx-cat:hover .jrx-cat-name { color: var(--jr-accent); }
.jrx-count { flex: 0 0 auto; font-size: 12px; line-height: 1; padding: 5px 9px; border-radius: 999px; color: var(--jr-accent); background: rgba(27,91,213,.09); font-weight: 500; white-space: nowrap; }
.jrx-count b { font-weight: 700; }
.jrx-count.zero { color: #9aa2ad; background: #f2f4f7; }

/* 二级方向标签区 */
.jrx-subs { margin: 0 16px 15px; padding-top: 13px; border-top: 1px solid #f1f3f7; display: flex; flex-wrap: wrap; gap: 7px; }
.jrx-sub {
  display: inline-flex; align-items: center; max-width: 100%;
  font-size: 12.5px; color: #55606f; background: #f3f5f9; border: 1px solid #e8ebf0; border-radius: 999px;
  padding: 5px 11px; text-decoration: none; transition: color .14s, background .14s, border-color .14s;
}
.jrx-sub:hover { color: var(--jr-accent); border-color: #c2d5f7; background: #f4f8ff; }
.jrx-sub-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jrx-sub-n { flex: 0 0 auto; margin-left: 6px; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 999px; background: #fff; color: var(--jr-accent); font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: inset 0 0 0 1px rgba(27,91,213,.14); }
.jrx-sub:hover .jrx-sub-n { box-shadow: inset 0 0 0 1px rgba(27,91,213,.28); }

/* 无二级方向时的「查看该学科期刊」行 */
.jrx-cat-enter { margin: 0 16px 15px; padding-top: 13px; border-top: 1px solid #f1f3f7; display: inline-flex; align-items: center; gap: 4px; color: var(--jr-accent); font-size: 12.5px; text-decoration: none; }
.jrx-cat-enter svg { transition: transform .15s; }
.jrx-cat:hover .jrx-cat-enter svg { transform: translateX(3px); }

/* ---------- 筛选无结果 ---------- */
.jrx-nohit { display: none; text-align: center; color: #aeb4be; font-size: 14px; padding: 40px 10px; }

/* ---------- 空状态 ---------- */
.jrx-empty { text-align: center; color: #aeb4be; padding: 48px 20px 40px; }
.jrx-empty .ic { font-size: 42px; margin-bottom: 10px; }
.jrx-empty h3 { margin: 0 0 6px; font-size: 17px; color: #565c66; }
.jrx-empty p { margin: 0; font-size: 13.5px; line-height: 1.7; }

/* ---------- 响应式（对齐站点断点） ---------- */
@media (max-width: 1180px) { .jrx-grid { gap: 14px; } }
@media (max-width: 900px)  { .jrx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .jrx-hero { padding: 16px; gap: 12px; }
  .jrx-hero-emblem { width: 48px; height: 48px; border-radius: 12px; }
  .jrx-hero-emblem svg { width: 26px; height: 26px; }
  .jrx-hero-main h1 { font-size: 20px; }
  .jrx-hero-search { margin-left: 0; flex: 1 1 100%; }
  .jrx-hero-search input { width: 100%; max-width: none; }
}
@media (max-width: 560px) { .jrx-grid { grid-template-columns: minmax(0, 1fr); } }