/* ============================================================
   南泥湾移动端官网 · 媒体增强层（配图体系 v1）
   在 mobile.css 之后加载，负责：
   ① 移动端专用竖版配图（Hero / 栏目页头）
   ② 章节题图 Band、双图卡、图注
   ③ 图片比例、暗部、懒加载骨架、阅读节奏
   Version: 2026-09-21
   ============================================================ */

/* ------------------------------------------------------------
   0. 图标描边兜底（P0 修复）
   mobile.css 内多处 svg 规则只声明了 stroke-width / fill:none，
   未声明 stroke 颜色，SVG 默认 stroke=none 会导致图标整体不可见。
   此处统一兜底为 currentColor：已有显式 stroke 的规则优先级更高，
   不会被覆盖。
   ------------------------------------------------------------ */
svg { stroke: currentColor; }
.brand-mark,
.lightbox .lb-close { stroke: none; }

/* ------------------------------------------------------------
   1. 首页 Hero：移动端专用竖版稻田图
   ------------------------------------------------------------ */
.hero { min-height: 92vh; min-height: 92dvh; }
.hero-bg {
  background-image: url("../img/m-hero.jpg");
  background-position: center 34%;
  background-size: cover;
}
.hero h1 { text-shadow: 0 3px 24px rgba(0, 0, 0, .58); }
.hero-lead { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }

/* ------------------------------------------------------------
   2. 栏目页头：竖图裁切 + 更强暗部层次
   ------------------------------------------------------------ */
.phero { min-height: 238px; padding: 44px var(--pad) 30px; }
.phero-bg { background-position: center 44%; }
.phero-bg::after {
  background: linear-gradient(180deg, rgba(8, 6, 3, .3) 0%, rgba(8, 6, 3, .52) 40%, rgba(8, 6, 3, .93) 100%);
}
.phero h1 { font-size: 29px; }
.phero .sub { color: rgba(255, 255, 255, .82); }

/* ------------------------------------------------------------
   3. 图片基础：骨架底色 + 更饱满比例
   ------------------------------------------------------------ */
img { background-color: var(--bg-warm); }
.feat .fig img { aspect-ratio: 4 / 3; object-position: center 44%; }
.feat .fig::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 6, 3, 0) 52%, rgba(8, 6, 3, .46) 100%);
}
.feat .fig .badge { z-index: 2; }
/* 米机图沿用 PC 端正方形原图：以 1:1 完整呈现，避免 4:3 裁掉机身标识 */
.feat .fig.sq img { aspect-ratio: 1 / 1; object-position: center 50%; }

/* ------------------------------------------------------------
   4. 章节题图 Band（图 + 叠加文案）
   ------------------------------------------------------------ */
.band {
  position: relative; overflow: hidden; margin-bottom: 18px;
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
  min-height: 200px; display: flex; align-items: flex-end; color: #fff;
  background: var(--ink);
}
.band > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 46%;
}
.band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 6, 3, .08) 0%, rgba(8, 6, 3, .44) 46%, rgba(8, 6, 3, .92) 100%);
}
.band-in { position: relative; z-index: 2; padding: 18px 18px 19px; width: 100%; }
.band-in .k {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--gold);
}
.band-in h3 {
  font-size: 19px; font-weight: 800; letter-spacing: .3px; line-height: 1.42;
  margin-top: 6px; text-shadow: 0 2px 16px rgba(0, 0, 0, .45);
}
.band-in p {
  margin-top: 7px; font-size: 12.5px; line-height: 1.74;
  color: rgba(255, 255, 255, .8);
}
.band-in .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.band-in .chips span {
  font-size: 10.5px; color: var(--gold); border: 1px solid rgba(212, 175, 55, .45);
  background: rgba(0, 0, 0, .3); border-radius: 999px; padding: 4px 11px;
  backdrop-filter: blur(4px);
}
.band.sm { min-height: 174px; }
.band.sm .band-in h3 { font-size: 17.5px; }
.band.tall { min-height: 268px; }

/* ------------------------------------------------------------
   5. 双图并排（3:4 竖图 + 图注）
   ------------------------------------------------------------ */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 18px; }
.duo figure {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  box-shadow: var(--sh-1); aspect-ratio: 3 / 4; background: var(--bg-warm);
}
.duo figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.duo figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 12px;
  font-size: 12.5px; font-weight: 700; color: #fff; line-height: 1.5;
  background: linear-gradient(180deg, rgba(8, 6, 3, 0), rgba(8, 6, 3, .88));
}
.duo figure figcaption small {
  display: block; margin-top: 3px; font-size: 10px; font-weight: 400;
  letter-spacing: .6px; color: rgba(255, 255, 255, .6);
}
.duo.tri figure { aspect-ratio: 3 / 4; }

/* ------------------------------------------------------------
   6. 单图卡（16:11 横图 + 底部图注）
   ------------------------------------------------------------ */
.mfig {
  position: relative; overflow: hidden; margin-bottom: 18px;
  border-radius: var(--r-lg); box-shadow: var(--sh-2); background: var(--bg-warm);
}
.mfig img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: center 44%; }
.mfig::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 6, 3, 0) 50%, rgba(8, 6, 3, .58) 100%);
}
.mfig figcaption {
  position: absolute; left: 14px; right: 14px; bottom: 13px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}
.mfig figcaption i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none;
  box-shadow: 0 0 8px var(--gold);
}

/* ------------------------------------------------------------
   7. 三段式图片条（小图 + 文案，用于步骤/能力补充说明）
   ------------------------------------------------------------ */
.mediastrip { display: grid; gap: 10px; margin: 16px 0 4px; }
.mediastrip .ms {
  display: flex; gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 10px; box-shadow: var(--sh-1);
}
.mediastrip .ms img {
  width: 74px; height: 74px; flex: none; border-radius: 12px;
  object-fit: cover; object-position: center 46%;
}
.mediastrip .ms .mt { min-width: 0; }
.mediastrip .ms .mt b { display: block; font-size: 14px; font-weight: 800; letter-spacing: .2px; }
.mediastrip .ms .mt span { display: block; margin-top: 4px; font-size: 11.8px; color: var(--muted); line-height: 1.62; }
.sec-dark .mediastrip .ms { background: rgba(255, 255, 255, .045); border-color: rgba(255, 255, 255, .08); box-shadow: none; }
.sec-dark .mediastrip .ms .mt b { color: #fff; }
.sec-dark .mediastrip .ms .mt span { color: rgba(255, 255, 255, .62); }

/* ------------------------------------------------------------
   8. 登录页：淡化背景图提升质感
   ------------------------------------------------------------ */
.auth-wrap {
  background:
    linear-gradient(180deg, rgba(250, 248, 242, .95) 0%, rgba(250, 248, 242, .985) 100%),
    url("../img/m-hero.jpg") center 28% / cover no-repeat;
}

/* ------------------------------------------------------------
   9. 图片呼吸动效（滚动淡入时轻微放大，尊重 reduced-motion）
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .band > img, .duo figure img, .mfig img, .feat .fig img {
    transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
  }
  .reveal.in .band > img,
  .reveal.in .duo figure img,
  .reveal.in .mfig img,
  .reveal.in .feat .fig img,
  .band.reveal.in > img,
  .duo.reveal.in figure img,
  .mfig.reveal.in img,
  .feat.reveal.in .fig img { transform: scale(1.03); }
}

/* ------------------------------------------------------------
   10. 小屏微调
   ------------------------------------------------------------ */
@media (max-width: 360px) {
  .band { min-height: 184px; }
  .band-in h3 { font-size: 17.5px; }
  .duo { gap: 9px; }
  .duo figure figcaption { font-size: 11.5px; padding: 22px 10px 10px; }
}

/* ------------------------------------------------------------
   11. 图片灯箱（点击图片放大查看，二维码尤其实用）
   ------------------------------------------------------------ */
.lightbox {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(8, 6, 3, .95);
  display: grid; place-items: center; padding: 22px;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 100%; max-height: 84vh; border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .7);
  transform: scale(.94); transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.lightbox.open img { transform: scale(1); }
.lightbox .lb-close {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 16px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; font-size: 24px; line-height: 1; display: grid; place-items: center;
}
.lightbox .lb-tip {
  position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom));
  text-align: center; font-size: 11.5px; letter-spacing: 1px; color: rgba(255, 255, 255, .5);
}

/* ------------------------------------------------------------
   12. 栏目上一篇 / 下一篇（多页结构浏览连续性）
   ------------------------------------------------------------ */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 4px var(--pad) 26px; background: #0d0b07;
}
.pager .pg {
  display: block; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(212, 175, 55, .2); border-radius: 14px;
  padding: 13px 14px; color: #fff;
  transition: background .2s, border-color .2s, transform .18s;
}
.pager .pg:active { background: rgba(212, 175, 55, .12); border-color: rgba(212, 175, 55, .45); transform: scale(.985); }
.pager .pg .k { display: block; font-size: 10px; letter-spacing: 1.4px; color: var(--gold); }
.pager .pg b { display: block; margin-top: 5px; font-size: 14.5px; font-weight: 700; }
.pager .pg .ar { display: inline-block; margin-top: 3px; font-size: 11px; color: rgba(255, 255, 255, .38); }
.pager .pg.next { text-align: right; }
.pager .pg:only-child { grid-column: 1 / -1; }

/* ------------------------------------------------------------
   13. 阅读进度条（顶部金色细线）
   ------------------------------------------------------------ */
.readbar {
  position: fixed; top: 0; left: 0; right: 0; height: 2.5px;
  z-index: 200; pointer-events: none; background: rgba(212, 175, 55, .1);
}
.readbar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold-3), var(--gold));
  box-shadow: 0 0 10px rgba(212, 175, 55, .55);
  transition: width .12s linear;
}
@media (prefers-reduced-motion: reduce) { .readbar i { transition: none; } }