/* =========================================
   文章页样式 (homesite)
   - 完整参考 http://127.0.0.1:8765/a6z0wk80.html 设计值
   - 作用域:.article-content (内容) + .page-article (方框外壳)
   - 内容独立放一个 HTML 文件,通过 iframe 嵌入方框
   - 内容文件可单独打开(直接 URL 访问),样式自动套用
   - 必须 link 在 main.css 之后
   ========================================= */

/* ---------- Page wrapper (fills viewport below sticky header) ---------- */
.article-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h));
}

/* ---------- Back link (outside article box, vertically centered between header and box) ----------
   max-width 跟方框一致,back-link 落左侧 = 跟方框左边缘对齐 */
.page-article-back {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: var(--space-4) 0;  /* 上下 padding;左右 0,back-link 跟方框同 max-width 自动对齐 */
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  font-size: 14px;
  color: #667650;
  text-decoration: none;
  border-radius: 8px;
  margin-bottom: 22px;
  transition: background-color 0.18s ease;
}
.back-link:hover { background: #eef1e5; }
.back-link:focus-visible {
  outline: 2px solid #667650;
  outline-offset: 4px;
}

/* ---------- Article box (外壳 inline 内容,不再用 iframe 嵌入) ----------
   2026-10-09 改: 内容直接 inline 进外壳 HTML (.page-article.article-content 二合一),
   取消 iframe 嵌入,根除 Chrome iframe 边缘 1px 装饰线 bug */
.page-article {
  width: 100%;
  max-width: 980px;
  margin: 0 auto var(--space-7);
}

/* =========================================
   Inner content (apply in BOTH contexts:
   - <main class="article-content"> inside xue-li-geng-content.html
   - same selector when the same HTML is opened standalone)
   设计值完整对齐源 HTML
   ========================================= */

.article-content {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #2f352b;
  /* 源 main 设计:bg #FAFAFA + radius 20,无 shadow;padding 48/56 */
  background: #FAFAFA;
  border-radius: 20px;
  padding: 48px 56px;
}

/* ---------- Standalone body (only when content.html opened directly) ---------- */
.article-content-body {
  margin: 0;
  background: #f7f4ee;       /* 源 body 米色 */
  min-height: 100vh;
}
.article-content-body .article-content {
  max-width: 980px;
  margin: 48px auto;         /* 源 main margin: 48px auto */
}

/* ---------- Embedded mode (when loaded inside iframe) ----------
   撤销 standalone 的 max-width 限制,让 .article-content 撑满 iframe */
.article-content-body--embedded {
  background: transparent;
}
.article-content-body--embedded .article-content {
  max-width: none;
  margin: 0;
  /* bg / radius / shadow 不重置,继承 .article-content base (跟源 main 一致) */
}

/* ---------- Article shell (parent page body bg,跟源 body 一致) ---------- */
.article-shell {
  background: #f7f4ee;
}
/* 隐藏文章页视口滚动条 (Chrome 真实渲染会在右侧画槽式滚动条占位 ~17px 宽,即使浮动模式
   也会在 hover/scroll 时画一条;文章页内容长,但用户应该用触控板/滚轮/键盘滚,不需要鼠标拖滚动条。
   Firefox: scrollbar-width: none; Chrome/Safari: ::-webkit-scrollbar { display: none }。
   滚动行为仍正常 — 鼠标滚轮、触控板滑动、键盘 PageDown 都生效,只是看不到滚动条而已) */
.article-shell {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge legacy */
}
.article-shell::-webkit-scrollbar { display: none; }   /* Chrome/Safari body */
html.article-html::-webkit-scrollbar { display: none; }   /* Chrome/Safari html 视口滚动条 */
html.article-html { scrollbar-width: none; }

/* ---------- Header (article hero) ---------- */
.article-content .article-header .kicker {
  display: inline-block;
  color: #6d7860;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.article-content .article-header h1 {
  font-size: 38px;
  line-height: 1.4;
  letter-spacing: -0.03em;
  margin: 16px 0 24px;
  color: #2f352b;
  text-wrap: balance;
}
.article-content .article-header p {
  font-size: 17px;
  line-height: 1.9;
  color: #626858;
  text-wrap: pretty;
}

/* ---------- Cover ---------- */
.article-content .article-cover {
  margin: 32px 0 44px;
}
.article-content .article-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  outline-offset: -1px;
}
.article-content .article-cover figcaption {
  font-size: 12px;
  color: #7f826f;
  margin-top: 10px;
}
/* 竖图封面 (.article-cover 套 .portrait):限宽 660 + 居中,避免竖图顶满整行 */
.article-content figure.portrait {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Body typography ---------- */
.article-content p,
.article-content li {
  font-size: 17px;
  line-height: 1.9;
}
.article-content p { margin: 8px 0 16px; }

/* H2 分组标题 (清甜入门 / 软糯花香 / 暖香果味) */
.article-content h2.article-group {
  font-size: 25px;
  color: #596b44;
  margin: 44px 0 8px;
}
.article-content h2.article-group:first-of-type {
  margin-top: 32px;          /* 紧跟 cover 之后,源 main 直接是 figure→h2,间距自然形成 */
}

/* 单个配方卡 */
.article-content section.recipe {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 26px 0;           /* 源 HTML padding:26px 0,左右 0 靠外层 56px 留白 */
  border-bottom: 1px solid #e5e6dc;
}
.article-content section.recipe:last-of-type {
  border-bottom: none;
}
.article-content .recipe .number {
  font-size: 23px;
  color: #899474;
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
}
.article-content .recipe h3 {
  font-size: 23px;
  margin: 0 0 12px;
  color: #2f352b;
  text-wrap: balance;
}

/* 食材段 */
.article-content .recipe .ingredients {
  background: #f0f2e9;
  padding: 14px 18px;
  border-radius: 10px;
  margin: 8px 0 16px;        /* 跟 section p 一致 */
}
.article-content .recipe .ingredients strong { color: #536846; }

/* 步骤列表 */
.article-content .recipe ol {
  padding-left: 24px;
  margin: 0 0 0;             /* 源 ol margin-bottom: 0 */
  list-style: decimal;
}

/* 总结 aside */
.article-content aside.article-summary {
  background: #f0f2e9;
  padding: 20px 24px;
  border-radius: 12px;
  margin-top: 32px;
}
.article-content aside.article-summary h2 {
  font-size: 21px;
  margin: 0;
  color: #2f352b;
}
.article-content aside.article-summary p {
  margin: 0;
  color: #626858;
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  .page-article-back { padding: var(--space-3) 0; }
  .page-article { margin: 0; }
  .article-content {
    border-radius: 0;       /* 移动端贴边,radius 删 */
    padding: 28px 22px;
  }
  .article-content-body .article-content {
    margin: 0;
    border-radius: 0;
    padding: 28px 22px;
  }
  .article-content .article-header h1 { font-size: 28px; }
  .article-content h2.article-group { font-size: 23px; }
  .article-content .recipe h3 { font-size: 21px; }
  .article-content section.recipe {
    grid-template-columns: 30px 1fr;
    gap: 10px;
  }
  .article-content p,
  .article-content li { font-size: 16px; }
}

/* ---------- Print ---------- */
@media print {
  .page-article-back { display: none; }
  .article-content {
    background: white;
    border-radius: 0;
    box-shadow: none;
  }
  .article-content section.recipe { break-inside: avoid; }
}

/* =========================================
   文章列表卡 (index.html #articles section 复用)
   - index.html 用 .articles__grid--home:固定 4 列 × 2 行 = 8 张 + 「查看更多」按钮
   - articles/index.html 用 .articles__grid:3 列自适应,展示全量文章
   ========================================= */
.articles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-5);
}

/* index.html #articles 用,4 列 × 2 行 = 8 张卡片,
   其余文章通过底部「查看更多」按钮跳 articles/index.html */
.articles__grid--home {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}

/* 「查看更多」按钮:胶囊形,主色描边,hover 实底 */
.articles__cta {
  display: block;
  width: max-content;
  margin: var(--space-6) auto 0;
  padding: 14px 36px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  background: #fff;
  border: 1.5px solid var(--color-primary);
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.articles__cta:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-1px);
}
.articles__cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.article-card {
  display: flex;
  flex-direction: column;
  background: var(--color-card-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.article-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.article-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.article-card__media {
  aspect-ratio: 16 / 9;
  background: var(--color-primary-softer);
  overflow: hidden;
}
.article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.article-card__tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #596b44;
  text-transform: uppercase;
}
.article-card__title {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  text-wrap: balance;
}
.article-card__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-soft);
  margin: 0;
  flex: 1;
}
.article-card__cta {
  margin-top: var(--space-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}

@media (max-width: 960px) {
  .articles__grid,
  .articles__grid--home {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
}

@media (max-width: 600px) {
  .articles__grid,
  .articles__grid--home {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .articles__cta {
    width: 100%;
  }
}