/*
 * 博客与文章 —— 把 Blocksy 的文章列表、单篇、评论拉进 --pm-* 设计体系。
 *
 * ## 为什么单独一个文件
 *
 * pm-base.css 是「全站通用件」(令牌、按钮、卡片、表单)。
 * 这里管的是「文章类内容」—— 结构完全是 Blocksy 的,只有皮肤是我们的,
 * 两者的耦合点(选择器、覆盖策略)完全不同,混在一起会互相污染。
 *
 * ## 覆盖策略
 *
 * Blocksy 的文章样式**全部由 CSS 变量驱动**(见父主题 static/bundle/entries.min.css):
 *
 *   [data-cards=boxed] .entry-card {
 *     padding: var(--card-inner-spacing, 30px);
 *     border: var(--card-border, none);
 *     box-shadow: var(--theme-box-shadow);
 *     border-radius: var(--theme-border-radius);
 *   }
 *
 * 也就是说:**改这几个变量就能改卡片形态,一行 HTML 都不用碰。**
 * 父主题给的默认值是「30px 内边距 + 无边框 + 蓝色调阴影 + 0~2px 圆角」——
 * 跟我们的 20px 圆角、暖白底、细边框完全不是一路。
 *
 * ⚠️ 加载顺序:本文件在 `ct-entries-styles`(父主题的 entries.min.css)
 *    **之后**打印 —— 见 functions.php 里 playmate_child_enqueue_blog_styles()
 *    的优先级 20。同特异性后来者胜,所以顺序就是优先级。
 */

/* ==========================================================================
 * 归档页头(博客首页 / 分类 / 标签 / 搜索)
 * ========================================================================== */

.pm-archive-head {
  padding: clamp(40px, 5vw, 72px) 0 clamp(22px, 2.5vw, 36px);
  margin-bottom: clamp(22px, 2.5vw, 36px);
  border-bottom: 1px solid var(--pm-line);
}

/* 眉标:跟首页 Hero 一样,前面挂一条 lime 小色块 */
.pm-archive-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}

.pm-archive-eyebrow::before {
  content: '';
  width: 26px;
  height: 10px;
  border-radius: var(--pm-radius-pill, 999px);
  background: var(--pm-pulse, #d6f54a);
}

.pm-archive-title {
  margin: 0 0 10px;
  font-family: var(--pm-font-display);
  font-size: clamp(34px, 5.2vw, 62px);
  font-weight: 600;
  /* 大标题紧字距 —— 与首页 Hero 同一套语言 */
  letter-spacing: -0.035em;
  line-height: 1.02;
  font-variation-settings: 'opsz' 100, 'SOFT' 20, 'WONK' 1;
  text-wrap: balance;
}

.pm-archive-desc {
  margin: 0 0 12px;
  max-width: 52ch;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--pm-ink-2);
}

.pm-archive-meta {
  margin: 0;
  font-size: var(--pm-micro-size, 13px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--pm-ink-3);
}

/* ==========================================================================
 * 文章列表 —— 卡片
 * ========================================================================== */

/*
 * 容器宽度对齐。
 *
 * `.ct-container` 的宽度是 Blocksy 算的(流体 + edge spacing),
 * 比全站的 `.pm-wrap`(1120px 上限 + 20px 内边距)窄一圈 ——
 * 文章卡片会比首页的内容列短,看着像没对齐。
 *
 * 这里把文章归档的容器换成与 `.pm-wrap` 同一套算法。
 */
.pm-post-archive .ct-container {
  width: 100%;
  max-width: var(--pm-container-max, 1120px);
  margin-inline: auto;
  padding-inline: 20px;
}

/* --- 卡片形态:靠覆盖 Blocksy 的变量,不改 HTML --- */

.pm-post-archive .entries .entry-card {
  /* 内边距:30px(父主题默认)对纯文字卡片太挤,24px 更平衡 */
  --card-inner-spacing: 24px;
  /* 细边框代替厚阴影 —— 与全站卡片一致 */
  --card-border: 1px solid var(--pm-line, #e7dfd3);
  /* 常态几乎无阴影,hover 才抬起(与 .pm-card 同一套) */
  --theme-box-shadow: 0 1px 2px rgba(18, 16, 14, 0.04);
  --theme-border-radius: var(--pm-radius, 20px);
  --card-element-spacing: 14px;

  position: relative;
  background: var(--pm-card, #ffffff);
  border-radius: var(--pm-radius, 20px);
  transition:
    transform var(--pm-motion-base, 240ms) var(--pm-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    box-shadow var(--pm-motion-base, 240ms) var(--pm-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color var(--pm-motion-fast, 140ms) ease;
}

/* hover:抬起 + 边框染上品牌色 —— 与 .pm-card-hover 同一套动效 */
.pm-post-archive .entries .entry-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--pm-clay, #f04e23) 28%, var(--pm-line, #e7dfd3));
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--pm-ink, #12100e) 45%, transparent);
}

.pm-post-archive .entries .entry-card:focus-within {
  border-color: color-mix(in srgb, var(--pm-clay, #f04e23) 40%, var(--pm-line, #e7dfd3));
}

.pm-post-archive .entries .entry-meta {
  gap: 8px;
}

/* --- 分类标签:lime chip --- */

.pm-post-archive .entries .entry-meta .meta-categories a {
  display: inline-flex;
  align-items: center;
  border-radius: var(--pm-radius-pill, 999px);
  padding: 4px 11px;
  font-size: var(--pm-micro-size, 13px);
  font-weight: 500;
  line-height: 1.3;
  background: var(--pm-pulse, #d6f54a);
  border: 1px solid color-mix(in srgb, var(--pm-pulse, #d6f54a) 70%, var(--pm-ink, #12100e));
  color: var(--pm-pulse-ink, #12100e);
  text-decoration: none;
  transition:
    background-color var(--pm-motion-fast, 140ms) ease,
    transform var(--pm-motion-fast, 140ms) var(--pm-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.pm-post-archive .entries .entry-meta .meta-categories a:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--pm-pulse, #d6f54a) 82%, var(--pm-ink, #12100e));
}

/* --- 标题 --- */

.pm-post-archive .entries .entry-title {
  margin: 0;
  font-family: var(--pm-font-display);
  font-size: var(--pm-card-title-size, 19px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.22;
  font-variation-settings: 'opsz' 30, 'SOFT' 20, 'WONK' 0;
  color: var(--pm-ink, #12100e);
}

.pm-post-archive .entries .entry-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--pm-motion-fast, 140ms) ease;
}

.pm-post-archive .entries .entry-title a:hover {
  color: var(--pm-clay, #f04e23);
}

/* --- 摘要 --- */

.pm-post-archive .entries .entry-excerpt {
  color: var(--pm-ink-2, #57534e);
  font-size: var(--pm-small-size, 14px);
  line-height: 1.6;
}

.pm-post-archive .entries .entry-excerpt p {
  margin: 0;
}

/* --- 元信息行(作者 / 日期 / 评论数) ---
 *
 * ⚠️ 不要用 `.entry-meta:not(.meta-categories)` 来排除分类那一行 ——
 *   `meta-categories` 这个类在 **`<li>`** 上,不在 `<ul>` 上,
 *   所以 `:not(.meta-categories)` 两个 `<ul>` 都命中,
 *   后面那条 `color: inherit` 会把分类 chip 的深色文字覆盖成灰色 ——
 *   浅灰字压在 lime 底上,基本读不出来。
 *
 *   直接按 `<li>` 的类来写,不跟 `<ul>` 较劲。
 */
.pm-post-archive .entries .entry-meta .meta-author,
.pm-post-archive .entries .entry-meta .meta-date,
.pm-post-archive .entries .entry-meta .meta-comments {
  font-size: var(--pm-micro-size, 13px);
  color: var(--pm-ink-3, #8a8178);
}

.pm-post-archive .entries .entry-meta .meta-author a,
.pm-post-archive .entries .entry-meta .meta-date a,
.pm-post-archive .entries .entry-meta .meta-comments a {
  color: inherit;
  text-decoration: none;
  transition: color var(--pm-motion-fast, 140ms) ease;
}

.pm-post-archive .entries .entry-meta .meta-author a:hover,
.pm-post-archive .entries .entry-meta .meta-comments a:hover {
  color: var(--pm-clay, #f04e23);
}

/* --- 网格间距 --- */

.pm-post-archive .entries[data-layout*='grid'] {
  --grid-columns-gap: clamp(16px, 2vw, 26px);
}

/* ==========================================================================
 * 单篇文章
 * ========================================================================== */

/*
 * 正文列的宽度。
 *
 * 父主题的 `.entry-content` 是**全宽**的(实测 985px ≈ 100 字符一行),
 * 读起来太长 —— 每行超过 75 字符眼睛就容易跳行。
 * 这里收窄到 ~70ch,跟首页正文的舒适区一致。
 */
.pm-single-post .entry-content {
  max-width: 72ch;
  margin-inline: auto;
  font-size: 16px;
  line-height: 1.72;
  color: var(--pm-ink-2, #57534e);
}

/*
 * 单篇文章的外层容器跟全站内容列对齐。
 *
 * `.ct-container-full` 默认是满宽的,在超宽屏上标题区会贴着屏幕边缘,
 * 而首页/城市页的内容列封顶 1120px —— 同一个站,两套宽度。
 */
.pm-single-post .ct-container-full {
  width: 100%;
  max-width: var(--pm-container-max, 1120px);
  margin-inline: auto;
}

/*
 * 标题区 —— 归档页(分类/标签/搜索)与单篇文章共用 Blocksy 的
 * `.hero-section` 结构。
 *
 * 为什么两处都要管:
 * - 博客首页(articles)用的是**我们自己**的 `.pm-archive-head`(父主题的
 *   hero 对 blog 前缀默认是关的);
 * - 分类 / 标签 / 搜索页用的是**父主题的 hero**(`.hero-section`);
 * - 单篇文章用的也是父主题的 hero。
 *
 * 后两种如果不管,标题就是父主题的默认样子 —— system-ui 30px、灰色、
 * 字距 normal —— 跟站内其它标题完全不是一路。
 *
 * 两处的结构一样,所以规则写成并列选择器,一次改完。
 */
.pm-post-archive .hero-section,
.pm-single-post .hero-section {
  padding-bottom: 4px;
  margin-bottom: clamp(20px, 2.5vw, 34px);
  border-bottom: 1px solid var(--pm-line, #e7dfd3);
}

.pm-post-archive .hero-section .page-title,
.pm-single-post .hero-section .page-title {
  margin: 0 0 12px;
  font-family: var(--pm-font-display);
  font-size: clamp(30px, 4.4vw, 54px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.06;
  font-variation-settings: 'opsz' 90, 'SOFT' 20, 'WONK' 1;
  color: var(--pm-ink, #12100e);
  text-wrap: balance;
}

/*
 * 父主题的 `.ct-title-label` 是分类页标题前面的「Category」标签,
 * 它在 `<h1>` **里面**且是 inline —— 直接显示就是一个 54px 的灰字。
 * 这里把它提成眉标:独立成行 + 小字 + lime 色块,跟 `.pm-archive-eyebrow` 一致。
 */
.pm-post-archive .hero-section .ct-title-label,
.pm-single-post .hero-section .ct-title-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-family: var(--pm-font-sans);
  font-size: var(--pm-micro-size, 13px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--pm-ink-3, #8a8178);
}

.pm-post-archive .hero-section .ct-title-label::before,
.pm-single-post .hero-section .ct-title-label::before {
  content: '';
  width: 26px;
  height: 10px;
  border-radius: var(--pm-radius-pill, 999px);
  background: var(--pm-pulse, #d6f54a);
}

.pm-post-archive .hero-section .page-description,
.pm-single-post .hero-section .page-description {
  margin: 0 0 14px;
  max-width: 56ch;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--pm-ink-2, #57534e);
}

.pm-post-archive .hero-section .page-description p,
.pm-single-post .hero-section .page-description p {
  margin: 0;
}

/* 标题区的元信息行 */
.pm-post-archive .hero-section .entry-meta,
.pm-single-post .hero-section .entry-meta {
  gap: 8px 12px;
  font-size: var(--pm-micro-size, 13px);
  color: var(--pm-ink-3, #8a8178);
}

.pm-post-archive .hero-section .entry-meta a,
.pm-single-post .hero-section .entry-meta a {
  color: inherit;
  text-decoration: none;
}

.pm-post-archive .hero-section .entry-meta a:hover,
.pm-single-post .hero-section .entry-meta a:hover {
  color: var(--pm-clay, #f04e23);
}

/* 分类标签:lime chip(与列表页一致) */
.pm-post-archive .hero-section .entry-meta .meta-categories a,
.pm-single-post .hero-section .entry-meta .meta-categories a {
  display: inline-flex;
  align-items: center;
  border-radius: var(--pm-radius-pill, 999px);
  padding: 4px 11px;
  font-size: var(--pm-micro-size, 13px);
  font-weight: 500;
  background: var(--pm-pulse, #d6f54a);
  border: 1px solid color-mix(in srgb, var(--pm-pulse, #d6f54a) 70%, var(--pm-ink, #12100e));
  color: var(--pm-pulse-ink, #12100e);
}

/* --- 正文排版 --- */

.pm-single-post .entry-content h2 {
  margin: 40px 0 12px;
  font-family: var(--pm-font-display);
  font-size: clamp(21px, 2.1vw, 26px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.2;
  font-variation-settings: 'opsz' 40, 'SOFT' 20, 'WONK' 0;
  color: var(--pm-ink, #12100e);
}

.pm-single-post .entry-content h3 {
  margin: 28px 0 10px;
  font-family: var(--pm-font-display);
  font-size: clamp(17px, 1.7vw, 20px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--pm-ink, #12100e);
}

.pm-single-post .entry-content p {
  margin: 0 0 18px;
}

.pm-single-post .entry-content ul,
.pm-single-post .entry-content ol {
  margin: 0 0 20px;
  padding-left: 1.35em;
}

.pm-single-post .entry-content li {
  margin-bottom: 8px;
}

.pm-single-post .entry-content li::marker {
  color: var(--pm-clay, #f04e23);
}

.pm-single-post .entry-content strong {
  color: var(--pm-ink, #12100e);
  font-weight: 600;
}

.pm-single-post .entry-content blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--pm-pulse, #d6f54a);
  font-size: 1.05em;
  color: var(--pm-ink, #12100e);
}

/* 链接:从左往右扫出来的下划线 —— 与 .pm-prose 同一套 */
.pm-single-post .entry-content a {
  position: relative;
  color: var(--pm-clay, #f04e23);
  text-decoration: none;
  background-image: linear-gradient(var(--pm-clay, #f04e23), var(--pm-clay, #f04e23));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1.5px;
  transition:
    background-size var(--pm-motion-base, 240ms) var(--pm-ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    color var(--pm-motion-fast, 140ms) ease;
}

.pm-single-post .entry-content a:hover,
.pm-single-post .entry-content a:focus-visible {
  background-size: 0% 1.5px;
}

/* ==========================================================================
 * 评论
 * ========================================================================== */

.pm-single-post .ct-comments-container {
  margin-top: clamp(36px, 4vw, 60px);
  padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--pm-line, #e7dfd3);
}

.pm-single-post .ct-comments-title {
  margin: 0 0 20px;
  font-family: var(--pm-font-display);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--pm-ink, #12100e);
}

.pm-single-post .ct-comment-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.pm-single-post .ct-comment-inner {
  padding: 18px 20px;
  background: var(--pm-card, #ffffff);
  border: 1px solid var(--pm-line, #e7dfd3);
  border-radius: var(--pm-radius, 20px);
}

.pm-single-post .ct-comment-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.pm-single-post .ct-comment-meta .ct-media-container {
  flex-shrink: 0;
  width: 40px;
}

.pm-single-post .ct-comment-meta .ct-media-container img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: none;
}

.pm-single-post .ct-comment-author {
  margin: 0;
  font-family: var(--pm-font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--pm-ink, #12100e);
}

.pm-single-post .ct-comment-author a {
  color: inherit;
  text-decoration: none;
}

.pm-single-post .ct-comment-author a:hover {
  color: var(--pm-clay, #f04e23);
}

.pm-single-post .ct-comment-meta-data {
  margin-left: auto;
  font-size: var(--pm-micro-size, 13px);
  color: var(--pm-ink-3, #8a8178);
}

.pm-single-post .ct-comment-meta-data a {
  color: inherit;
  text-decoration: none;
}

.pm-single-post .ct-comment-meta-data a:hover {
  color: var(--pm-clay, #f04e23);
}

.pm-single-post .ct-comment-content {
  font-size: 15px;
  line-height: 1.65;
  color: var(--pm-ink-2, #57534e);
}

.pm-single-post .ct-comment-content p {
  margin: 0 0 10px;
}

.pm-single-post .ct-comment-content p:last-child {
  margin-bottom: 0;
}

/* --- 评论区表单 --- */

.pm-single-post .comment-respond {
  margin-top: 28px;
  padding: 22px;
  background: var(--pm-paper-2, #f4ede3);
  border: 1px solid var(--pm-line, #e7dfd3);
  border-radius: var(--pm-radius, 20px);
}

.pm-single-post .comment-reply-title {
  margin: 0 0 14px;
  font-family: var(--pm-font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--pm-ink, #12100e);
}

.pm-single-post .comment-form p {
  margin: 0 0 12px;
}

.pm-single-post .comment-form label {
  display: block;
  margin-bottom: 5px;
  font-size: var(--pm-micro-size, 13px);
  font-weight: 500;
  color: var(--pm-ink-2, #57534e);
}

.pm-single-post .comment-form input[type='text'],
.pm-single-post .comment-form input[type='email'],
.pm-single-post .comment-form input[type='url'],
.pm-single-post .comment-form textarea {
  width: 100%;
  background: var(--pm-card, #ffffff);
  border: 1px solid var(--pm-line, #e7dfd3);
  border-radius: var(--pm-radius-sm, 12px);
  padding: 10px 12px;
  font-size: var(--pm-small-size, 14px);
  font-family: inherit;
  color: var(--pm-ink, #12100e);
  transition:
    border-color var(--pm-motion-fast, 140ms) ease,
    box-shadow var(--pm-motion-fast, 140ms) ease;
}

.pm-single-post .comment-form input:focus,
.pm-single-post .comment-form textarea:focus {
  outline: none;
  border-color: var(--pm-clay, #f04e23);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-clay, #f04e23) 14%, transparent);
}

.pm-single-post .comment-form .form-submit {
  margin: 16px 0 0;
}

.pm-single-post .comment-form .submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--pm-radius-pill, 999px);
  padding: 11px 22px;
  background: var(--pm-clay, #f04e23);
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition:
    background-color var(--pm-motion-fast, 140ms) ease,
    transform var(--pm-motion-fast, 140ms) var(--pm-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.pm-single-post .comment-form .submit:hover {
  background: color-mix(in srgb, var(--pm-clay, #f04e23) 88%, var(--pm-ink, #12100e));
}

.pm-single-post .comment-form .submit:active {
  transform: translateY(1px) scale(0.985);
}

.pm-single-post .comment-notes,
.pm-single-post .comment-form-cookies-consent {
  font-size: var(--pm-micro-size, 13px);
  color: var(--pm-ink-3, #8a8178);
}

/* ==========================================================================
 * 响应式
 * ========================================================================== */

/* 平板:两列 */
@media (max-width: 999.98px) {
  .pm-post-archive .entries[data-layout*='grid'] {
    --grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 手机:一列 */
@media (max-width: 689.98px) {
  .pm-post-archive .ct-container {
    padding-inline: 16px;
  }

  .pm-post-archive .entries[data-layout*='grid'] {
    --grid-template-columns: minmax(0, 1fr);
  }

  .pm-post-archive .entries .entry-card {
    --card-inner-spacing: 20px;
  }

  .pm-single-post .ct-comments-container,
  .pm-single-post .comment-respond {
    padding-inline: 0;
  }

  .pm-single-post .comment-respond {
    padding: 18px;
  }
}