/*
 * 文章页样式（教程列表 + 详情 + 错误页）。
 *
 * 文章页和落地页是两份独立文档，但共用 style.css 里的字体、色板和按钮，
 * 这里只补文章特有的版式。变量全部取自 style.css，不要在这里重新定义色值，
 * 否则改一次主题会漏掉这一半页面。
 */

.wpr-article-body {
  background: #f4f5f6;
  color: var(--color-heading-1);
  font-family: var(--font-secondary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wpr-article-body .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* ---------------------------------------------------------------- 页头 */

.wpr-article-topbar {
  background: var(--color-white);
  border-bottom: 1px solid rgba(3, 7, 18, 0.1);
  position: sticky;
  top: 0;
  z-index: 20;
}

.wpr-article-topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
}

.wpr-article-topbar .brand {
  text-decoration: none;
  flex: 0 0 auto;
}

.wpr-article-topbar .links {
  display: flex;
  align-items: center;
  gap: 28px;
}

/* 排除按钮：按钮有自己的深色底，套上这里的近黑字色就成了深底深字 */
.wpr-article-topbar .links a:not(.wpr-btn) {
  color: var(--color-heading-1);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

.wpr-article-topbar .links a:not(.wpr-btn):hover {
  opacity: 0.65;
}

/* 按钮字色写死成白色，不去继承。
   落地页上同一个按钮之所以是白字，其实是模板的 .btn-primary 类名正好和
   bootstrap 的撞上、吃到了 bootstrap 的 color:#fff —— 那是巧合，哪天
   bootstrap.min.css 被换掉或类名改了就会变成深底深字。这里写死。 */
.wpr-article-topbar .links a.wpr-btn {
  color: var(--color-white);
  font-size: 15px;
  white-space: nowrap;
}

.wpr-article-main {
  flex: 1 0 auto;
  padding: 64px 0 96px;
}

/* -------------------------------------------------------------- 列表页 */

.wpr-article-hero {
  max-width: 720px;
  margin-bottom: 48px;
}

.wpr-article-hero .sub-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-heading-1);
  margin-bottom: 20px;
}

.wpr-article-hero .sub-title::before {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--color-primary);
  display: inline-block;
}

.wpr-article-hero h1 {
  font-family: var(--font-primary);
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0 0 20px;
}

.wpr-article-hero .desc {
  font-size: 17px;
  color: var(--color-body-1);
  margin: 0;
}

.wpr-article-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.wpr-article-filters .chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  border: 1px solid rgba(3, 7, 18, 0.12);
  background: var(--color-white);
  color: var(--color-heading-1);
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s;
}

.wpr-article-filters .chip:hover {
  border-color: rgba(3, 7, 18, 0.32);
}

.wpr-article-filters .chip.active {
  background: var(--color-heading-1);
  border-color: var(--color-heading-1);
  color: var(--color-white);
}

/* auto-fill 而不是 auto-fit：只有一两篇文章时，auto-fit 会把单张卡拉到整行宽，
   一行一张超宽卡片很难看 */
.wpr-article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 20px;
}

.wpr-article-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid rgba(3, 7, 18, 0.1);
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
}

.wpr-article-card:hover {
  transform: translateY(-3px);
  border-color: rgba(3, 7, 18, 0.24);
  box-shadow: 0 14px 30px rgba(3, 7, 18, 0.08);
}

.wpr-article-card .card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin-bottom: 14px;
}

.wpr-article-card .pin,
.wpr-article-card .cat {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1;
}

.wpr-article-card .pin {
  background: var(--color-primary);
  color: var(--color-heading-1);
  font-weight: 600;
}

.wpr-article-card .cat {
  background: #f1f2f4;
  color: var(--color-body-1);
}

/* 主题把 h2 设成了 text-transform: uppercase，中文看不出来但英文标题会变成
   全大写（"Cherry Studio" → "CHERRY STUDIO"），文章标题要保持原样 */
.wpr-article-card .card-title,
.wpr-article-detail .detail-title,
.detail-body h1,
.detail-body h2,
.detail-body h3,
.detail-body h4 {
  text-transform: none;
}

.wpr-article-card .card-title {
  font-family: var(--font-primary);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

/* 摘要统一压到三行：卡片在网格里并排，高度不齐会很乱 */
.wpr-article-card .card-desc {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-body-1);
  margin: 0 0 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wpr-article-card .card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  font-size: 13px;
  color: #9aa2ac;
}

.card-meta .dot,
.detail-meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

.wpr-article-empty {
  padding: 80px 0;
  text-align: center;
  color: var(--color-body-1);
}

.wpr-article-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 48px;
}

.wpr-article-pager .pager-btn {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 21px;
  border: 1px solid rgba(3, 7, 18, 0.14);
  background: var(--color-white);
  color: var(--color-heading-1);
  text-decoration: none;
  font-size: 14px;
}

.wpr-article-pager .pager-btn:hover {
  border-color: rgba(3, 7, 18, 0.36);
}

.wpr-article-pager .pager-info {
  font-size: 14px;
  color: var(--color-body-1);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- 详情页 */

.wpr-article-detail {
  max-width: 780px;
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid rgba(3, 7, 18, 0.1);
  border-radius: 20px;
  padding: 48px clamp(24px, 5vw, 64px) 64px;
}

.wpr-article-detail .crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #9aa2ac;
  margin-bottom: 24px;
}

.wpr-article-detail .crumbs a {
  color: inherit;
  text-decoration: none;
}

.wpr-article-detail .crumbs a:hover {
  color: var(--color-heading-1);
}

.wpr-article-detail .detail-title {
  font-family: var(--font-primary);
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0 0 16px;
}

.wpr-article-detail .detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13.5px;
  color: #9aa2ac;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(3, 7, 18, 0.08);
  margin-bottom: 36px;
}

/* --------------------------------------------- 正文（goldmark 渲染结果） */

.detail-body {
  font-size: 16.5px;
  line-height: 1.85;
  color: #2b3038;
}

.detail-body > *:first-child {
  margin-top: 0;
}

.detail-body h1,
.detail-body h2,
.detail-body h3,
.detail-body h4 {
  font-family: var(--font-primary);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-heading-1);
  line-height: 1.35;
  margin: 44px 0 16px;
  /* 锚点跳转时不被 sticky 页头盖住 */
  scroll-margin-top: 96px;
}

.detail-body h1 {
  font-size: 30px;
}
.detail-body h2 {
  font-size: 25px;
}
.detail-body h3 {
  font-size: 20px;
}
.detail-body h4 {
  font-size: 17px;
}

.detail-body p {
  margin: 0 0 18px;
}

.detail-body a {
  color: var(--color-heading-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(3, 7, 18, 0.3);
}

.detail-body a:hover {
  text-decoration-color: currentColor;
}

/* 主题在 style.css:1511-1516 用两条全局 !important 把所有列表的缩进和符号
   都干掉了（那是给页头菜单写的）。文章正文是散文排版，得把这两样还回来。
   这里的 !important 是用来压另一条 !important 的，不是图省事——直接改
   style.css 会污染设计源文件，下次重新导出设计稿就丢了。 */
.detail-body ul,
.detail-body ol {
  margin: 0 0 18px;
  padding-left: 24px !important;
}

.detail-body ul {
  list-style: disc !important;
}

.detail-body ol {
  list-style: decimal !important;
}

.detail-body li {
  margin-bottom: 8px;
  list-style: inherit !important;
}

/* 任务列表（GFM 的 - [ ]）不该带项目符号，勾选框本身就是标记 */
.detail-body li:has(> input[type='checkbox']) {
  list-style: none !important;
  margin-left: -20px;
}

.detail-body li::marker {
  color: #9aa2ac;
}

.detail-body blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--color-primary);
  color: var(--color-body-1);
}

.detail-body blockquote p:last-child {
  margin-bottom: 0;
}

.detail-body code {
  font-family: var(--font-monospace, ui-monospace, Menlo, Consolas, monospace);
  font-size: 0.88em;
  background: #f1f2f4;
  border-radius: 5px;
  padding: 2px 6px;
}

/* 代码块横向滚动，绝不撑破版心：教程里贴 curl 命令是常态，
   一行长命令把整页顶宽的话手机上根本没法读。
   底色和字色对齐 chroma 的 github-dark：标了语言的代码块由 chroma 输出行内
   样式，没标语言的走不到 chroma、只吃这里的规则，两边取同一个值才不会在同
   一页上出现深浅不一的两种黑。 */
.detail-body pre {
  background: #0d1117;
  border-radius: 12px;
  padding: 20px 22px;
  margin: 0 0 22px;
  overflow-x: auto;
  line-height: 1.7;
}

.detail-body pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  color: #e6edf3;
  font-size: 14px;
  white-space: pre;
}

/* chroma 把每一行包成 flex 容器。flex item 默认不会缩到内容宽度以下，
   长行会把 pre 撑开而不是触发横向滚动，得显式允许它溢出。 */
.detail-body pre code > span {
  min-width: 0;
}

.detail-body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 8px 0 22px;
}

.detail-body hr {
  border: none;
  border-top: 1px solid rgba(3, 7, 18, 0.1);
  margin: 40px 0;
}

/* 表格同样要能横滚。goldmark 不会给表格套容器，所以让表格本身可滚 */
.detail-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 0 0 22px;
  font-size: 15px;
}

.detail-body th,
.detail-body td {
  border: 1px solid rgba(3, 7, 18, 0.12);
  padding: 10px 14px;
  text-align: left;
}

.detail-body th {
  background: #f6f7f8;
  font-weight: 600;
}

.detail-body input[type='checkbox'] {
  margin-right: 8px;
}

/* ---------------------------------------------------------- 详情页尾部 */

.wpr-article-cta {
  max-width: 780px;
  margin: 32px auto 0;
  background: var(--color-heading-1);
  border-radius: 20px;
  padding: 36px clamp(24px, 5vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.wpr-article-cta p {
  margin: 0;
  color: #e6e9ed;
  font-size: 16px;
}

/* ---------------------------------------------------------------- 错误页 */

.wpr-article-error {
  text-align: center;
  padding: 100px 0;
}

.wpr-article-error .code {
  font-family: var(--font-primary);
  font-size: 84px;
  font-weight: 600;
  line-height: 1;
  color: rgba(3, 7, 18, 0.12);
  margin: 0 0 12px;
}

.wpr-article-error h1 {
  font-family: var(--font-primary);
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 12px;
}

.wpr-article-error .desc {
  color: var(--color-body-1);
  margin: 0 0 28px;
}

/* ---------------------------------------------------------------- 页脚 */

.wpr-article-bottom {
  flex: 0 0 auto;
  background: var(--color-white);
  border-top: 1px solid rgba(3, 7, 18, 0.1);
  padding: 28px 0;
}

.wpr-article-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.wpr-article-bottom .links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.wpr-article-bottom .links a {
  color: var(--color-heading-1);
  text-decoration: none;
  font-size: 14px;
}

.wpr-article-bottom .links a:hover {
  opacity: 0.65;
}

.wpr-article-bottom .copyright {
  margin: 0;
  font-size: 13px;
  color: #9aa2ac;
}

.wpr-article-bottom .copyright a {
  color: inherit;
}

@media (max-width: 767px) {
  .wpr-article-topbar .container {
    height: 64px;
  }

  /* 窄屏藏掉次要入口，只留最关键的「进入控制台」，避免页头挤成两行 */
  .wpr-article-topbar .links a:not(.wpr-btn) {
    display: none;
  }

  .wpr-article-main {
    padding: 40px 0 64px;
  }

  .wpr-article-detail {
    border-radius: 16px;
    padding: 32px 20px 44px;
  }

  .wpr-article-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}