/* ===========================================================================
 * Journal —— 列表页 / 归档页 / 文章页
 * ---------------------------------------------------------------------------
 * 只在 Journal 语境加载（见 inc/assets.php 的 luyun_is_journal_context()）：
 *   single.php                     文章页（设计稿 14:743）
 *   archive.php                    分类 / 标签 / 作者 / 日期归档（无设计稿）
 *   page-templates/journal.php     Journal 列表页（无设计稿）
 *
 * ★ 三页共用一套尺码，因为它们是同一条阅读动线上的三站。
 *   但这三页的**信息量**不同，所以卡片有两种变体：
 *     .lu-post-card           列表页 / 归档页 —— 卡底 + 描边 + 摘要（在推销）
 *     .lu-post-card--bare     文章页 Keep reading —— 无底无边无摘要（在辨认）
 *   两种变体都在 components.css 里（首页也用得上），本文件只管版面。
 *
 * ★ 文章页的关键数字（实测自 1440 画板 14:743）
 *   页头满宽 1200，H1 左对齐到 120 的容器边；正文**居中 720**（左右各 240）。
 *   这个不对称是故意的：先用宽标题接住人，再让他落进窄栏里读。
 *   主图 1200×512（约 2.34:1）—— 比正文宽一圈，是这一页唯一的大图。
 *   正文 17/30，见 tokens.css 的 --fs-article-* 注释。
 *
 * ★ 下面出现的 28 / 40 / 44 / 512 不在 8 档间距刻度里
 *   它们是画板上量出来的原值。按项目规则「设计稿有的必须可追溯」，
 *   就地写值并注明出处，不要为了凑刻度改成 24 或 48 —— 那会让页头
 *   的五段间距全部差 4px，肉眼看得出来「挤在一起」。
 * =========================================================================== */

/* ===========================================================================
 * 1. Journal 列表页 / 归档页
 * =========================================================================== */

.lu-journal-page {
  background: var(--bg-page);
  padding-bottom: var(--sp-8);
}

.lu-journal-page__head {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-7);
}
.lu-journal-page__head .lu-eyebrow {
  display: block;
  margin: 0 0 var(--sp-3);
}
.lu-journal-page__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display-2);
  line-height: var(--lh-display-2);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}
.lu-journal-page__lead,
.lu-journal-page__desc {
  max-width: 640px;
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-article-deck);
  line-height: var(--lh-article-deck);
  color: var(--fg-body);
}
/* 归档页的分类描述来自后台，可能是多段 */
.lu-journal-page__desc p { margin: 0 0 var(--sp-3); }
.lu-journal-page__desc p:last-child { margin-bottom: 0; }

/* 栏目 chips —— h32 圆角药丸，选中态墨绿实心 */
.lu-journal-page__topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}
.lu-journal-page__topics .lu-chip.is-active {
  background: var(--action-primary-bg);
  border-color: var(--action-primary-bg);
  color: var(--action-primary-fg);
}

/* 列表网格：3 列。components.css 的 .lu-post-grid 已有 1023 断点，
   这里只补 1024–1279 的 2 列 —— 那个区间 3 列会让标题挤成两行半。 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .lu-journal-page .lu-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===========================================================================
 * 2. 文章页 · 页头
 * =========================================================================== */

.lu-article {
  background: var(--bg-page);
}

.lu-article__head {
  padding-top: 32px;   /* 画板 14:743：页头下沿到面包屑 28，留 32 更稳 */
}

/* 面包屑：12px，当前项用墨色 —— 灰色的是「可以去的」，墨色的是「你在这」 */
.lu-article__crumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
}
.lu-article__crumb a {
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.lu-article__crumb a:hover { color: var(--fg-accent); }
.lu-article__crumb a:last-of-type { color: var(--fg-primary); }
.lu-article__crumb-sep { color: var(--fg-ghost); }

.lu-article__eyebrow {
  display: block;
  margin: 32px 0 0;
}

.lu-article__title {
  max-width: 900px;
  margin: 32px 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-display-2);
  line-height: var(--lh-display-2);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}

/* 导语（deck）：设计稿是 H1 下两行灰文，行宽 690 左右就换行 */
.lu-article__deck {
  max-width: 700px;
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-article-deck);
  line-height: var(--lh-article-deck);
  color: var(--fg-body);
}

/* —— 署名行 + 分享 —— */
.lu-article__byline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-top: 28px;   /* 画板：导语下沿到署名 29 */
}
.lu-article__author-line {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.lu-article__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--bg-inverse);
  color: var(--fg-on-inverse);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
}
.lu-article__author-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lu-article__author-name {
  font-size: var(--fs-byline);
  line-height: var(--lh-byline);
  font-weight: var(--fw-medium);
  color: var(--fg-primary);
}
.lu-article__author-meta {
  font-size: var(--fs-byline);
  line-height: var(--lh-byline);
  color: var(--fg-muted);
}

/* 分享：三个 16px 图标，hover 变琥珀。复制成功后就地出一行小字，
   不做 toast —— 这一页不该为一句提示浮起一个层。 */
.lu-article__share {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: none;
}
.lu-article__share-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: none;
  color: var(--fg-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.lu-article__share-btn:hover { color: var(--fg-accent); }
.lu-article__share-note {
  font-size: var(--fs-caption);
  color: var(--fg-accent);
  white-space: nowrap;
}

/* ===========================================================================
 * 3. 文章页 · 主图
 * =========================================================================== */

.lu-article__hero {
  margin: 44px 0 0;   /* 画板：署名下沿到主图 45 */
}
.lu-article__hero img {
  display: block;
  width: 100%;
  height: 512px;      /* 画板 14:743 实测 1200×512 */
  object-fit: cover;
  border-radius: var(--r-md);
  background: var(--c-skeleton);
}

/* ===========================================================================
 * 4. 文章页 · 正文
 * ---------------------------------------------------------------------------
 * 只对 `.lu-article__body` 这一层生效，`.lu-prose`（政策页）不受影响。
 * 用双类提高特异性，压住 base.css 里 `.entry-content > * + *` 的 24。
 * =========================================================================== */

.lu-article__body {
  max-width: 720px;
  margin: 72px auto 0;
  font-size: var(--fs-article-body);
  line-height: var(--lh-article-body);
  color: var(--fg-body);
}

/* 首段用墨色：它是文章的「第二标题」，读者的第一口气从它开始 */
.lu-article__body.entry-content > p:first-of-type {
  color: var(--fg-primary);
}

.lu-article__body.entry-content > * + * { margin-block-start: 24px; }

.lu-article__body h2 {
  margin-block: 48px 16px;
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-article-h2);
  line-height: var(--lh-article-h2);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}
.lu-article__body h3 {
  margin-block: var(--sp-6) var(--sp-3);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--fg-primary);
}

/* 引言：22/32 的 Fraunces 斜体 + 3px 琥珀竖线（--bw-rule，编辑性引用线） */
.lu-article__body blockquote {
  margin-block: 40px;
  padding-left: var(--sp-5);
  border-left: var(--bw-rule) solid var(--c-amber);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-article-quote);
  line-height: var(--lh-article-quote);
  color: var(--fg-primary);
}
.lu-article__body blockquote p { margin: 0; }
.lu-article__body blockquote cite {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-label);
  color: var(--fg-muted);
}

/* 图：正文里的图与正文同宽，16:9；图注 13/20 在下方 */
.lu-article__body figure {
  margin-block: 40px 12px;
}
.lu-article__body figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-md);
}
.lu-article__body figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-article-fig);
  line-height: var(--lh-article-fig);
  color: var(--fg-muted);
  text-align: left;
}

/* 列表：琥珀实心小圆点 + 悬挂缩进（不用 list-style —— 它的大小和颜色
   都受浏览器摆布，改不动） */
.lu-article__body ul,
.lu-article__body ol {
  margin-block: 0 24px;
  padding-left: 0;
  list-style: none;
}
.lu-article__body ol { counter-reset: lu-ol; }
.lu-article__body li {
  position: relative;
  padding-left: 18px;
}
.lu-article__body li + li { margin-top: 12px; }
.lu-article__body ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 13px;
  width: 4px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--fg-accent);
}
.lu-article__body ol > li { counter-increment: lu-ol; }
.lu-article__body ol > li::before {
  content: counter(lu-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-variant-numeric: tabular-nums;
  color: var(--fg-accent);
}

.lu-article__body a {
  color: var(--fg-primary);
  text-decoration: none;
  border-bottom: var(--bw-hairline) solid var(--border-default);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lu-article__body a:hover {
  color: var(--fg-accent);
  border-bottom-color: currentColor;
}

.lu-article__body hr {
  margin-block: 48px;
  border: 0;
  border-top: var(--bw-hairline) solid var(--border-default);
}

/* ===========================================================================
 * 5. 文章页 · 作者卡 / 标签
 * =========================================================================== */

.lu-author {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--sp-5);
  max-width: 720px;
  margin: 48px auto 0;
  padding: var(--card-padding-lg);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--bg-surface);
}
.lu-author__avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  background: var(--bg-inverse);
  color: var(--fg-on-inverse);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
}
.lu-author__body { min-width: 0; }
.lu-author__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--fg-primary);
}
.lu-author__role {
  margin: 2px 0 0;
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--fg-muted);
}
.lu-author__bio {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-body-lg);
  line-height: 24px;
  color: var(--fg-body);
}
.lu-author__link {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-accent);
  text-decoration: none;
}
.lu-author__link:hover { color: var(--fg-primary); }

.lu-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  max-width: 720px;
  margin: var(--sp-5) auto 0;
  padding: 0;
  list-style: none;
}

/* ===========================================================================
 * 6. 文章页 · 本文提到的茶（THE TEAS IN THIS STORY）
 * ---------------------------------------------------------------------------
 * 与正文同栏（720 居中），不能做成满宽 —— 它属于「读完之后」的一步，
 * 不是一段新章节。造型上是一张卡（卡底 + hairline、无投影），与正文的
 * 无底色形成停顿，读者一眼能看出「这里开始是货架」。
 *
 * ★ 两行式行项目（缩略图 56 + 文本 + 箭头），不是网格卡片
 *   只有 1–2 款，网格会把留白撑得很空；行项目也更好扫读「品类 / 名字 / 价格」。
 * =========================================================================== */

.lu-story {
  margin-top: var(--sp-7);
}

.lu-story__panel {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--sp-5);
  background: var(--bg-surface);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-md);
}

.lu-story__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: var(--bw-hairline) solid var(--border-soft);
}

.lu-story__eyebrow {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow-sm);
  letter-spacing: var(--ls-eyebrow-sm);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.lu-story__all {
  flex: none;
  font-size: var(--fs-body-sm);
  color: var(--fg-accent);
  text-decoration: none;
}
.lu-story__all:hover { text-decoration: underline; }

.lu-story__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lu-story__item + .lu-story__item {
  border-top: var(--bw-hairline) solid var(--border-soft);
}

.lu-story__link {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  text-decoration: none;
  color: inherit;
}

.lu-story__thumb {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: var(--r-xs);
  overflow: hidden;
  background: var(--bg-page);
}
.lu-story__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lu-story__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lu-story__note {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow-sm);
  letter-spacing: var(--ls-eyebrow-sm);
  text-transform: uppercase;
  color: var(--fg-faint);
}

.lu-story__name {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-card-title);
  line-height: 1.3;
  color: var(--fg-primary);
}

.lu-story__price {
  font-size: var(--fs-body-sm);
  color: var(--fg-muted);
}
/* 规格后缀弱化一档：价格是价，规格是单位，两者不是一个信息层。
   但只弱到 --fg-mid（#7B7363）—— --fg-faint(#A9A79A) 落在 #FBF7F1 上
   只有 2.4:1，13px 基本读不清。 */
.lu-story__spec {
  color: var(--fg-mid);
}

.lu-story__go {
  flex: none;
  margin-left: auto;
  font-size: var(--fs-body-lg);
  color: var(--fg-faint);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lu-story__link:hover .lu-story__go {
  color: var(--fg-accent);
  transform: translateX(3px);
}

/* ===========================================================================
 * 7. 文章页 · Keep reading
 * =========================================================================== */

.lu-article__more {
  padding-block: var(--sp-8);
  margin-top: var(--sp-7);
}
.lu-article__more .lu-section-head { margin-bottom: var(--sp-6); }
.lu-article__more .lu-section-head__title {
  font-size: var(--fs-article-h2);
  line-height: var(--lh-article-h2);
}

/* ===========================================================================
 * 8. 分页（归档页）
 * ---------------------------------------------------------------------------
 * ★ 这里有一份与 archive.css 相似的规则，不是抄漏：
 *   archive.css 只挂在**商品**档案页上（inc/assets.php 的 luyun_is_product_archive），
 *   文章归档不会加载它。要合并就得把分页样式提到 components.css 去，
 *   那会让首页也多背一套它用不到的分页规则 —— 权衡后留在各自文件里，
 *   改分页外观时两个文件都要看。
 * =========================================================================== */

.lu-journal-page .woocommerce-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-7);
}
.lu-journal-page .page-numbers {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lu-journal-page .page-numbers li { margin: 0; }
.lu-journal-page .page-numbers a,
.lu-journal-page .page-numbers span {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--sp-2);
  border: var(--bw-hairline) solid var(--border-default);
  border-radius: var(--r-xs);
  font-size: var(--fs-body-sm);
  color: var(--fg-body);
  text-decoration: none;
}
.lu-journal-page .page-numbers a:hover {
  border-color: var(--fg-primary);
  color: var(--fg-primary);
}
.lu-journal-page .page-numbers .current {
  background: var(--action-primary-bg);
  border-color: var(--action-primary-bg);
  color: var(--action-primary-fg);
}

/* ===========================================================================
 * 9. 移动端（375）
 * ---------------------------------------------------------------------------
 * 标题降一档、正文降一档、页头五段间距按 3/4 收；
 * 主图改成 16:10 自适应高度 —— 512 的定高在 335 宽上会变成一根竖条。
 * =========================================================================== */

@media (max-width: 767px) {
  .lu-journal-page__head { padding-top: var(--sp-7); padding-bottom: var(--sp-6); }
  .lu-journal-page__title { font-size: var(--fs-h1-mobile); line-height: 1.15; }

  .lu-article__head { padding-top: var(--sp-5); }
  .lu-article__eyebrow { margin-top: var(--sp-6); }
  .lu-article__title {
    margin-top: var(--sp-5);
    font-size: var(--fs-h1-mobile);
    line-height: 1.15;
  }
  .lu-article__deck {
    margin-top: var(--sp-4);
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body-lg);
  }
  .lu-article__byline {
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: var(--sp-5);
  }
  .lu-article__share { order: 2; }
  .lu-article__hero { margin-top: var(--sp-6); }
  .lu-article__hero img {
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .lu-article__body {
    margin-top: var(--sp-7);
    font-size: var(--fs-article-deck);
    line-height: var(--lh-article-deck);
  }
  .lu-article__body h2 {
    margin-block: var(--sp-6) var(--sp-3);
    font-size: var(--fs-h2-mobile);
    line-height: 1.25;
  }
  .lu-article__body blockquote {
    margin-block: var(--sp-6);
    font-size: var(--fs-h4);
    line-height: 30px;
  }
  .lu-article__body ul > li::before { top: 11px; }

  .lu-author {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
    margin-top: var(--sp-6);
    padding: var(--sp-5);
  }

  /* 本文提到的茶：内衬收到 16，缩略图保持 56 —— 再小就认不出茶类了。
     眉标与「Shop all teas」在 335 宽上会并排放不下，改成上下两行。 */
  .lu-story { margin-top: var(--sp-6); }
  .lu-story__panel { padding: var(--sp-4); }
  .lu-story__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
  }

  .lu-article__more { padding-block: var(--sp-7); margin-top: var(--sp-6); }
}