/* ============================================================================
   逐页精讲 · 双栏阅读布局（P12）
   - 桌面 / 平板（≥768px）：PPT 在左（sticky 常驻），AI 解析在右滚动
   - 手机（<768px）：单列，原图默认展开但可「收起原图 / 展开原图」，翻页条固定底部
   - 本文件在 views.css 之后加载，仅覆盖 .pageview 内的布局；不改其它视图样式
   ========================================================================== */

/* ---------------- 原图 caption 行：原图标签 + 折叠按钮位 ---------------- */
.pageview .pagecap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-3);
}
.pageview .pagecap-main { flex: 1 1 auto; min-width: 0; }
.pagefig-tag {
  display: inline-block;
  margin-right: 5px;
  padding: 0 6px;
  border-radius: 6px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.7;
}
.pagecap-toggle { display: none; }   /* 桌面：左栏 PPT 常驻，无需折叠原图 */

/* 右栏「跳到章末总结」：轻量右对齐链接（不再独占整行） */
.pageview-endjumprow { display: flex; justify-content: flex-end; }
.pageview-endjumprow[hidden] { display: none !important; }
.pageview-endjumprow .pageview-endjump {
  display: inline-flex;
  width: auto;
  min-height: 40px;
  padding: 0 8px;
}

/* ============================================================================
   ≥768px：两栏布局（左栏 sticky，右栏滚动）
   ========================================================================== */
@media (min-width: 768px) {
  /* 逐页精讲独占视图时放宽阅读区；:has 不支持时退回原 760px，功能不受影响 */
  #view:has(.pageview) { max-width: 1200px; }
  #view:has(.pageview) .chaptercontent { max-width: none; }
  .pageview { max-width: 1160px; padding-bottom: 12px; }

  .pageview > .pageview-cols {
    display: grid;
    /* 左栏（PPT）占大头，右栏解析收窄：图更大更清楚 */
    grid-template-columns: minmax(300px, 54%) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }

  /* 左栏整列 sticky：右栏解析滚动时 PPT / 页码 / 翻页常驻可见。
     高度按内容自适应（不撑满视口），避免 16:9 幻灯片下方出现大片空白。 */
  .pageview-left {
    position: sticky;
    top: 68px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: auto;
    min-height: 0;
  }
  /* 左栏内部改用 flex gap，覆盖 views.css 的堆叠 margin */
  #view .pageview-left > * { margin-top: 0 !important; flex: 0 0 auto; }
  #view .pageview-left .pageview-top { padding: 12px 14px; }

  /* 原图卡：左侧色条强调 + 图片按原始比例显示（缩放不超视口） */
  .pageview-left > .pagecard-fig {
    flex: 0 0 auto !important;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-left: 4px solid var(--brand);
  }
  .pagecard-fig .pagefigwrap {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    margin: 0;
  }
  .pagecard-fig .pageimg-holder {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    min-height: 120px;
    max-width: none;
    max-height: none;
    margin: 0;
    display: block;
    background: #f8fafc;
  }
  /* 图片加载完就收起骨架屏：留白处不再闪灰 */
  .pagecard-fig .pageimg-holder:has(.pageimg.loaded) .pageimg-sk { display: none; }
  .pagecard-fig .pageimg-link {
    position: static;
    display: block;
    border-radius: 12px;
  }
  .pagecard-fig .pageimg {
    position: static;
    inset: auto;
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 240px);
    object-fit: contain;
    margin: 0 auto;
  }
  .pagecard-fig .pageimg-fallback { width: 100%; }

  /* 左栏翻页条：常驻左栏（不再悬浮在视口底部） */
  #view .pageview-left .pagenavbar {
    position: static;
    bottom: auto;
    margin-top: 0;
    box-shadow: var(--shadow);
  }
  #view .pageview-left .pageactions { margin-top: 0; }

  /* 右栏：AI 讲解 → 本页原文 → 章末总结，纵向排布 */
  .pageview-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  #view .pageview-right > * { margin-top: 0 !important; }
  .pagecard-ai .pagesec-ai { margin-top: 0; }
}

/* 桌面（≥1000px）：PPT 更大，解析栏更窄 */
@media (min-width: 1000px) {
  #view:has(.pageview) { max-width: 1560px; }
  .pageview { max-width: 1480px; }
  .pageview > .pageview-cols {
    /* 约 58/42：1440 屏左栏 ≈650px（16:9 图约 590×332），1920 屏左栏 ≈820px */
    grid-template-columns: minmax(320px, 58%) minmax(0, 1fr);
  }
  .pageview-left .pageview-counter { font-size: 17px; }
  /* 右栏解析限一点宽度，避免大屏上行太长 */
  .pageview-right { max-width: 760px; }
}

/* ============================================================================
   <768px：单列（原图可折叠 + 底部固定翻页条）
   ========================================================================== */
@media (max-width: 767.98px) {
  .pageview { display: block; padding-bottom: 96px; }
  .pageview > .pageview-cols {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  /* 两栏外壳在手机上不生成盒子，内部卡片进入同一个单列 flex，用 order 排序 */
  .pageview-left,
  .pageview-right { display: contents; }

  .pageview-cols .pageview-top { order: 1; }
  .pageview-cols .pagecard-fig { order: 2; }
  .pageview-cols .pagecard-ai { order: 3; }
  .pageview-cols .pagesec-text { order: 4; }
  .pageview-cols .pageactions { order: 5; }
  .pageview-cols .pageview-endjumprow { order: 6; }
  .pageview-cols .pagesentinel { order: 7; }
  .pageview-cols .chapterend { order: 8; }

  /* 单列间距统一交给 flex gap */
  .pageview-cols .pageview-top,
  .pageview-cols .pagecard,
  .pageview-cols .pagesec-text,
  .pageview-cols .pageactions,
  .pageview-cols .pageview-endjumprow,
  .pageview-cols .pagesentinel,
  .pageview-cols .chapterend { margin-top: 0 !important; }

  .pageview-cols .pageview-endjumprow { justify-content: flex-start; }
  .pageview-cols .pageview-endjumprow .pageview-endjump {
    width: 100%;
    justify-content: center;
  }

  /* caption 行里的「收起原图 / 展开原图」 */
  .pagecap-toggle {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    min-height: 36px;
    padding: 0 4px;
    font-size: 12.5px;
  }
  .pagecard-fig.is-imgcollapsed .pageimg-holder { display: none; }
  .pagecard-fig.is-imgcollapsed .pagecap-hint { display: none; }

  /* 翻页条固定底部（浮在主导航之上），单列滚动时随手可翻 */
  #view .pageview .pagenavbar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(var(--tab-h) + var(--safe-b) + 10px);
    max-width: 560px;
    margin: 0 auto;
    z-index: 36;
  }
}