/* 首页展示共用样式（index.html 与 admin-posts.html 都加载）：
   ① 首页文章卡（高度定死、摘要省略号）+ 轮播翻页按钮（桌面左右侧 · 移动卡片下侧靠右）。
   管理面板样式在 admin.css；轮播/卡片公开样式在此。
   文章卡样式自 styles.css 迁入，全站唯一声明；颜色/字体 token 仍只来自 site-shell.css。 */

/* === 首页文章卡：整卡高度 = art + body，均由管理后台「卡片尺寸」设置（CSS 变量覆盖，
     默认 160 + 275 = 435px）；摘要行数实测后精确省略号截断 === */
.article-grid { margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 12px 10px 26px; }
.article-card {
  height: calc(var(--card-art-h, 160px) + var(--card-body-h, 275px));
  min-width: 0;
  color: var(--ink);
  background: var(--paper);
  transition: transform .3s, box-shadow .3s;
  cursor: default;
}
.article-card.stack-card { position: relative; box-shadow: 0 16px 36px rgba(0,0,0,.23); }
.article-card.stack-card:nth-child(1) { z-index: 4; transform: rotate(-2.2deg) translateY(9px); }
.article-card.stack-card:nth-child(2) { z-index: 3; margin-left: -12px; transform: rotate(.8deg) translateY(-4px); }
.article-card.stack-card:nth-child(3) { z-index: 2; margin-left: -12px; transform: rotate(-.7deg) translateY(5px); }
.article-card.stack-card:nth-child(4) { z-index: 1; margin-left: -12px; transform: rotate(2deg); }
.article-card.stack-card:hover { z-index: 10; transform: translateY(-14px) rotate(0); box-shadow: 0 28px 55px rgba(0,0,0,.35); }
.article-link { height: 100%; display: flex; flex-direction: column; }
.article-art { height: var(--card-art-h, 160px); position: relative; overflow: hidden; background: var(--red-700); }
.art-one { background: linear-gradient(#da6c50, var(--seal-red)); } 
.art-two { background: #d7b064; }
.art-three { display: grid; place-items: center; background: #741317; }
.art-three::before { content: ""; position: absolute; inset: 17px; border: 1px solid rgba(244,216,142,.25); }
.art-four {
  background:
    radial-gradient(circle at 78% 24%, rgba(244, 216, 142, .8) 0 11%, transparent 11.5%),
    linear-gradient(150deg, #8e171c, var(--red-950));
}
.art-one::after,
.art-two::after,
.art-three::after,
.art-four::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, transparent 30%, rgba(63, 4, 7, .34));
}
.post-art-date {
  position: absolute;
  z-index: 2;
  left: 25px;
  bottom: 20px;
  color: rgba(255, 250, 240, .96);
  font: 700 clamp(31px, 4vw, 56px)/1 var(--serif);
  letter-spacing: -.04em;
}
.post-art-kind {
  position: absolute;
  z-index: 2;
  right: 22px;
  top: 20px;
  padding: 6px 9px;
  color: rgba(255, 250, 240, .85);
  border: 1px solid rgba(255, 250, 240, .35);
  font-size: 9px;
  letter-spacing: .16em;
}
.article-body {
  height: var(--card-body-h, 275px);
  display: flex;
  flex-direction: column;
  padding: 18px 22px 16px;
}
.article-link .article-body { flex: 1; }
.article-meta { display: flex; justify-content: space-between; align-items: center; color: var(--faint); font-size: 10px; letter-spacing: .08em; }
.article-meta span { color: var(--red-700); }
.article-body h3 {
  margin: 10px 0 8px;
  font: 700 22px/1.5 var(--serif);
  /* 标题彻底展开，不压缩不省略，可占多行 */
}
.article-body p {
  /* 摘要从标题下方填到「读这一篇」上方，行数随标题长度自适应；超长时省略号截断。
     flex + min-height:0 让布局引擎把剩余空间结算成精确像素（clamp 之前的实际高度），
     行数由 featured-carousel.js 经 clamp-fit.js 实测后写入，不做估算；
     下方的 -webkit-line-clamp: 7 只是 JS 运行前的一次性兜底上限，运行后即被精确行数覆盖。 */
  flex: 1 1 auto;
  min-height: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}
.read-more { margin-top: auto; margin-bottom: 8px; display: inline-flex; gap: 8px; align-items: center; color: var(--red-700); font-size: 12px; }
.read-more b { transition: transform .2s; }
.article-card:hover .read-more b { transform: translateX(5px); }
.feed-error { grid-column: 1 / -1; text-align: center; color: var(--muted); }

/* === 轮播容器与翻页按钮（桌面 4 篇/屏 · 左右外侧；移动 1 篇/屏 · 卡片外下侧靠右） === */
.featured-carousel { position: relative; }
/* 滑动视口：两页绝对定位 + transform 平移进出；overflow 裁掉途中的越界页 */
.featured-viewport { position: relative; overflow: hidden; touch-action: pan-y; }
/* 轮播页模板不继承 flow 版 .article-grid 的 margin-top（桌面 64px / 移动 48px）：
   那个边距是「节标题 → 卡片行」在普通文档流里的外间距；页面进轮播后是绝对定位元素，
   mountPage 会把 margin 计入视口高度（否则倾斜卡片被裁），于是它变成卡片上方
   的死空间——旧布局里卡片上方实际空出 76px、下方只有 26px（用户反馈「上面空白高、
   下面离『查看文章列表』太近」即因此）。此处把 margin 归零，间距改由页面自身
   padding 承担并上下等距（40px/40px），治根本而非调偏置高度。 */
.featured-viewport .carousel-page { margin-top: 0; padding-top: 40px; padding-bottom: 40px; }
.carousel-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* 只保留左右滑动的 transform 过渡（移动端已与桌面统一为滑动，不再有淡入淡出）。
     这里的时长仅是 JS 未运行/首绘兜底：运行时 featured-carousel.js 按来源
     动态写入 inline transition（单击 300ms / 长按连发 150ms），覆盖本值 */
  transition: transform .16s cubic-bezier(.22, .75, .2, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-page { transition: none; }
}
.featured-nav {
  position: absolute;
  z-index: 20;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--gold-bright);
  background: transparent;
  border: 1px solid rgba(244, 216, 142, .5);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, color .2s;
  /* 箭头是成对 SVG chevron（纤细，碳笔画感），长按连翻时不会被选中复制；
     必须禁用文本选择并关掉 iOS 长按 callout；tap-highlight 一并透明 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* hidden 必须显式声明：.featured-nav 的 display:grid 会覆盖 UA 的 [hidden]{display:none}，
   不加这条则「恰好一屏（首页 4 篇 / 移动 1 篇）」时按钮依然显示、点了没反应 */
.featured-nav[hidden] { display: none; }
.featured-nav:hover:not(:disabled) { color: var(--red-950); background: var(--gold-bright); }
/* 首页推荐区现在使用浅色主题，轮播按钮同步切换为红色描边；后台预览仍沿用上面的金色按钮。 */
.journal .featured-nav { color: var(--red-700); border-color: var(--red-line); }
.journal .featured-nav:hover:not(:disabled) { color: var(--white); background: var(--red-800); }
.journal .article-card {
  background: linear-gradient(155deg, var(--white) 0%, #f8f0e3 100%);
}
/* 倾斜卡片最下沿仍需留出阴影空间：负扩散把影子收在卡面附近，
   不触碰轮播视口的裁切线，也就不会在底部突然断成一条直边。 */
.journal .article-card.stack-card {
  box-shadow:
    0 1px 0 rgba(255,255,255,.72) inset,
    0 12px 24px -20px rgba(70,25,20,.34);
}
.journal .article-card.stack-card:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.82) inset,
    0 16px 28px -22px rgba(70,25,20,.38);
}
/* chevron SVG 居中显示；尺寸按按钮场景（桌面 20px / 移动 16px） */
.featured-nav-glyph { display: grid; place-items: center; }
.featured-nav svg { width: 20px; height: 20px; display: block; }
/* 左右按钮的圆圈垂直位置偏下（避开卡面上方的视觉中心） */
.featured-nav--prev { left: -58px; top: 62%; transform: translateY(-50%); }
.featured-nav--next { right: -58px; top: 62%; transform: translateY(-50%); }

/* 管理面板样式在 admin.css；轮播/卡片公开样式在此 */
@media (max-width: 760px) {
  /* 移动端每屏 1 篇（轮播 JS 按 1 计算页码）：单列网格；
     两个左右小按钮并排贴在卡片外的下侧靠右 */
  .article-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 48px; }
  /* 移动端同款根修：页面 margin 归零（48px 死空间消失），上下 padding 收小等距 */
  .featured-viewport .carousel-page { padding-top: 28px; padding-bottom: 28px; }
  .featured-carousel { margin-bottom: 56px; }
  .featured-nav { width: 38px; height: 38px; left: auto; top: auto; transform: none; }
  .featured-nav svg { width: 16px; height: 16px; }
  .featured-nav--prev { right: 46px; bottom: -46px; }
  .featured-nav--next { right: 0; bottom: -46px; }
  /* 移动端单张卡片：去掉叠放用的倾斜/错位/负边距（那是 4 张一屏的排法），直立展示、阴影轻一点 */
  .article-card.stack-card:nth-child(n),
  .article-card.stack-card:hover { transform: none; margin-left: 0; box-shadow: 0 12px 26px rgba(0, 0, 0, .16); }
  .journal .article-card.stack-card:nth-child(n),
  .journal .article-card.stack-card:hover {
    box-shadow: 0 10px 20px -17px rgba(70,25,20,.32), 0 1px 0 rgba(255,255,255,.72) inset;
  }
  .featured-head > div:first-child { display: contents; }
  /* 手机端面板头折四行：标题独占一行、小字独占一行；x篇+按钮在小字之后、下一行靠右 */
  .featured-head p { order: 1; flex: 1 1 100%; }
  .featured-head h2 { order: 2; flex: 1 1 100%; }
  .featured-head > div:first-child span { order: 3; flex: 1 1 100%; margin: 0; font-size: 11px; }
  .featured-actions { order: 4; flex: none; margin-left: auto; }
  /* 移动端行重排：手柄 + 序号 | 正文 | 移出 一行，跳转表单折到第二行（跨到最右） */
  .featured-row { grid-template-columns: 30px 34px minmax(0, 1fr) auto; gap: 10px; }
  .featured-row-handle { grid-column: 1; grid-row: 1; }
  .featured-row-index { grid-column: 2; grid-row: 1; }
  .featured-row-main { grid-column: 3; grid-row: 1; }
  .featured-jump { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  .featured-row-remove { grid-column: 4; grid-row: 1; }
}