/* ==========================================================
   国风课堂 · 前台国风装饰层（gf-guofeng.css）
   ------------------------------------------------------------
   叠加在 gf.css 之上，只做「装饰 + 版式层次」增强：
     · 宣纸纤维底纹 + 淡墨晕染（水墨意境）
     · 题头引首区（远山剪影 + 回纹饰带 + 祥云角饰）
     · 侧栏「目录」题签 + 册页式视频卡
     · 分页器回纹花饰、空态祥云水印
   不改变任何核心内容结构（分类导航 / 搜索 / 网格 / 分页语义与 class 全部保留）。

   规范：docs/02-design-spec.md §3（纹样克制原则 · 修订版）
   回退：删除本文件 + 移除 base.html 中本文件的一行 <link> 即完全复原。
   ========================================================== */

/* ---------- 传统色扩展 token ---------- */
:root {
  --gf-c-mo: #1C1C1E;                 /* 墨 */
  --gf-c-mo-soft: #3A3A38;            /* 淡墨 */
  /* ⚠️ 黛青三档必须齐全：主色此前遗漏，导致 7 处 var(--gf-c-dai) 全部失效
     （最明显的是顶栏「登录」按钮 hover 背景透明 + 白字 = 按钮消失）。 */
  --gf-c-dai: #2B4A55;                /* 黛青（主）= 基础层 --gf-color-dai */
  --gf-c-dai-deep: #1E3A44;           /* 深黛 */
  --gf-c-dai-soft: #6F8E97;           /* 淡黛 */
  --gf-c-tenghuang: #C8963E;          /* 藤黄 */
  --gf-c-tenghuang-soft: #E8D2A4;     /* 淡藤黄 */
  --gf-c-zhe: #9A5B3A;                /* 赭石 */

  --gf-border-dai: rgba(43, 74, 85, .14);
  --gf-border-dai-strong: rgba(43, 74, 85, .28);

  /* 回纹（24×8 单元，横向平铺） */
  --gf-tex-meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8' viewBox='0 0 24 8'%3E%3Cpath d='M0 4H24V0H8V4' fill='none' stroke='%232B4A55' stroke-opacity='.55' stroke-width='1'/%3E%3C/svg%3E");
  /* 远山（三层叠墨，520×200） */
  --gf-tex-mountain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='200' viewBox='0 0 520 200'%3E%3Cpath d='M0 132 L60 92 L104 112 L164 66 L228 108 L284 78 L340 116 L396 74 L452 106 L520 88 L520 200 L0 200 Z' fill='%232B4A55' opacity='.11'/%3E%3Cpath d='M0 158 L48 130 L92 148 L150 114 L210 144 L268 120 L322 152 L382 118 L440 146 L520 126 L520 200 L0 200 Z' fill='%231C1C1E' opacity='.10'/%3E%3Cpath d='M0 180 L70 158 L132 174 L196 150 L258 172 L322 154 L388 178 L452 158 L520 172 L520 200 L0 200 Z' fill='%231C1C1E' opacity='.08'/%3E%3C/svg%3E");
  /* 祥云（80×40） */
  --gf-tex-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cpath d='M6 32c-4 0-6-4-3-7 2-3 7-2 8 1 0-8 6-14 14-14 5 0 10 3 12 8 3-6 8-9 14-9 9 0 16 6 16 15 6 1 10 5 10 11 0 6-5 11-12 11H6z' fill='none' stroke='%232B4A55' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M46 33c5 0 9-4 9-8s-4-8-8-8-8 3-8 8 3 7 7 7 6-2 6-6-3-5-5-5' fill='none' stroke='%232B4A55' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  /* 宣纸纤维（feTurbulence 噪声，240×240 平铺） */
  --gf-tex-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)' opacity='.30'/%3E%3C/svg%3E");
}

/* ==========================================================
   一、宣纸底纹与水墨氛围
   ========================================================== */

/* 宣纸纤维：叠在纸色之上，极轻（.30 内部透明度 × 低背景色） */
body {
  background-image: var(--gf-tex-paper);
  background-size: 240px 240px;
  background-repeat: repeat;
}

/* 淡墨晕染：右上淡黛、左下赭石，极低透明度营造水墨空气感 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 88% -12%, rgba(43, 74, 85, .06), transparent 62%),
    radial-gradient(95% 60% at 4% 106%, rgba(154, 91, 58, .05), transparent 60%);
}

/* 内容层浮于墨晕之上 */
.gf-main { position: relative; z-index: 1; }

/* ==========================================================
   二、题头引首区（P2 列表页新增，纯装饰 + 页面标题）
   ========================================================== */
.gf-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FCFAF4 0%, #F3EFE4 100%);
  border-bottom: 1px solid var(--gf-border-dai);
}
.gf-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--gf-space-6) var(--gf-space-5) var(--gf-space-6);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gf-space-6);
}
.gf-hero__eyebrow {
  margin: 0 0 var(--gf-space-2);
  font-family: var(--gf-font-serif);
  font-size: 13px;
  letter-spacing: 6px;
  color: var(--gf-c-dai);
  opacity: .82;
}
.gf-hero__title {
  margin: 0;
  font-family: var(--gf-font-serif);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.35;
  letter-spacing: 4px;
  color: var(--gf-c-mo);
}
.gf-hero__title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 26px;
  margin-right: var(--gf-space-3);
  vertical-align: -3px;
  background: var(--gf-c-dai);
  border-radius: 1px;
}
.gf-hero__sub {
  margin: var(--gf-space-3) 0 0;
  font-size: var(--gf-fs-body-sm);
  letter-spacing: 2px;
  color: var(--gf-color-ink-2);
}
/* 远山 + 祥云：右下方水墨配景 */
.gf-hero__art {
  position: relative;
  flex: none;
  width: 520px;
  height: 190px;
  margin-right: calc(var(--gf-space-6) * -1);
  pointer-events: none;
}
.gf-hero__art::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gf-tex-mountain) no-repeat right bottom / 100% 100%;
}
.gf-hero__art::after {
  content: "";
  position: absolute;
  right: 8px;
  top: -6px;
  width: 80px;
  height: 40px;
  background: var(--gf-tex-cloud) no-repeat right top / 80px 40px;
  opacity: .55;
}
/* 回纹饰带：题头底边 */
.gf-hero__band {
  height: 8px;
  background: var(--gf-tex-meander) repeat-x;
  background-size: 24px 8px;
  opacity: .5;
}

/* ---------- 题头照片模式（后台「站点设置」可更换图） ---------- */
/* 有图时：照片完整铺满——高度随图片比例（宽 100%、高按比例），
   整张图完整呈现且铺满全宽（用户终态要求：完整 + 铺满 + 文字叠画）；
   文字层覆盖左上，白纱左实右透保对比。
   竖图兜底：max-height 限幅（70vh）防撑爆首屏，超限时 cover 裁切。
   ⚠️ 想要矮题头请上传更扁的横幅图（比例越扁题头越矮）。
   移动（<768）：照片全宽在上，文字退至照片下方纸底上，见响应式段落。 */
.gf-hero--photo .gf-hero__photo {
  position: relative;
  height: auto; /* 高度随图片比例：整张图完整 + 铺满全宽 */
  max-height: 94vh; /* 仅竖图兜底（94vh 下常规横幅图不触发裁切） */
  overflow: hidden;
  pointer-events: none;
}
.gf-hero--photo .gf-hero__photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 94vh;
  object-fit: cover; /* 兜底限幅时裁切，常规横图不受影响 */
  object-position: center;
}
/* 白纱：左实右透 —— 左上文字区提亮保对比，向右渐隐露出画面（z:2 盖画作、居文字下） */
.gf-hero--photo .gf-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    90deg,
    rgba(252, 250, 244, .62) 0%,
    rgba(252, 250, 244, .30) 40%,
    rgba(252, 250, 244, .04) 72%,
    rgba(252, 250, 244, 0) 100%
  );
}
.gf-hero--photo .gf-hero__art { display: none; }
/* 文字叠于照片上部（用户样张形态）：inner 绝对定位覆盖，z:3 居最上 */
.gf-hero--photo .gf-hero__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3; /* 高于白纱(z:2) */
}
.gf-hero--photo .gf-hero__band { position: relative; z-index: 1; opacity: .42; }

/* ==========================================================
   三、侧栏「目录」题签（P2）
   —— 用 ::before 伪元素承载，不向 nav 插入 DOM 节点，
      以免影响依赖兄弟索引的既有断言（qa-shots 的 :nth-child(2)）
   ========================================================== */
.gf-side-cats {
  background: var(--gf-color-surface);
  border: 1px solid var(--gf-border-dai);
  border-radius: var(--gf-radius-md);
  padding: var(--gf-space-3) var(--gf-space-3) var(--gf-space-3);
  box-shadow: var(--gf-shadow-s1);
}
/* 横排「目录」题签（用户定稿：不用竖排；回纹花饰仅保留底部细线，
   24px 回纹单元在横排下会卡进两字之间形成"目-录"观感，故不再平铺） */
.gf-side-cats::before {
  content: "目 录";
  display: block;
  align-self: stretch;
  margin: 0 auto var(--gf-space-2);
  letter-spacing: 10px;
  text-indent: 10px; /* 抵消末字 letter-spacing，使视觉居中 */
  font-family: var(--gf-font-serif);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: var(--gf-c-mo);
  text-align: center;
  padding-bottom: var(--gf-space-2);
  border-bottom: 1px solid var(--gf-border-dai);
}
/* 分类项：hover 转淡黛，识别核心（朱红左条）保持不变 */
.gf-cat-item:hover {
  background: rgba(43, 74, 85, .06);
  color: var(--gf-c-dai-deep);
}
.gf-cat-item.is-current { background: var(--gf-color-surface-tint); }

/* ==========================================================
   四、内容区标题条
   ========================================================== */
.gf-list-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gf-space-4);
  margin-bottom: var(--gf-space-5);
  padding-bottom: var(--gf-space-2);
  border-bottom: 1px solid var(--gf-border-dai);
}
.gf-list-bar__title {
  margin: 0;
  font-family: var(--gf-font-serif);
  font-weight: 600;
  font-size: var(--gf-fs-h3);
  letter-spacing: 3px;
  color: var(--gf-c-mo);
}
.gf-list-bar__meta {
  font-size: var(--gf-fs-caption);
  letter-spacing: 1px;
  color: var(--gf-color-ink-3);
  white-space: nowrap;
}
/* 标题条右侧动作区：计数 + 返回首页（图文列表页；顶栏站内导航移除后的显式回首页入口） */
.gf-list-bar__aside {
  display: flex;
  align-items: baseline;
  gap: var(--gf-space-4);
  flex-shrink: 0;
}
.gf-list-bar__home {
  font-size: var(--gf-fs-caption);
  letter-spacing: 1px;
  color: var(--gf-c-dai-deep);
  white-space: nowrap;
  /* 与左侧计数用细竖线分隔，避免读成「共 5 篇 ← 返回首页」一整体 */
  padding-left: var(--gf-space-4);
  border-left: 1px solid var(--gf-border-dai);
  transition: color .15s ease;
}
.gf-list-bar__home:hover { color: var(--gf-c-zhe); }

/* ==========================================================
   五、册页式视频卡
   ========================================================== */
.gf-card-video {
  padding: 10px;
  background: var(--gf-color-surface);
  border: 1px solid var(--gf-border-dai);
  border-radius: var(--gf-radius-md);
  box-shadow: var(--gf-shadow-s1);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.gf-card-video:hover {
  transform: translateY(-2px);
  box-shadow: var(--gf-shadow-s2);
  border-color: var(--gf-border-dai-strong);
}
.gf-card-video__cover {
  border-radius: var(--gf-radius-sm);
  box-shadow: inset 0 0 0 1px rgba(28, 28, 30, .10);
}
/* 墨色叠层：让封面（含真实图片）带一层宣纸淡墨罩 */
.gf-card-video__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(28, 28, 30, .04) 40%, rgba(28, 28, 30, .22) 100%);
}
/* hover 浮现的播放圆章 */
.gf-card-video__cover::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .8);
  background-color: rgba(28, 28, 30, .42);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cpath d='M18 14l15 9-15 9z' fill='rgba(255,255,255,.92)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.gf-card-video:hover .gf-card-video__cover::before { opacity: 1; }
/* 无封面占位：水墨底 + 远山 */
.gf-card-video__placeholder {
  z-index: 1;
  background:
    var(--gf-tex-mountain) no-repeat center bottom / 100% 62%,
    linear-gradient(160deg, #3B5A63 0%, #1C1C1E 78%);
  font-size: 15px;
  letter-spacing: 5px;
  color: rgba(255, 255, 255, .34);
}
.gf-card-video__duration { z-index: 4; }
/* 标题：黛青竖线书脊标 */
.gf-card-video__title {
  margin: var(--gf-space-3) 0 var(--gf-space-1);
  padding-left: 10px;
  border-left: 3px solid var(--gf-border-dai-strong);
  font-size: 15px;
  letter-spacing: .5px;
}
.gf-card-video:hover .gf-card-video__title {
  border-left-color: var(--gf-c-dai);
  color: var(--gf-c-dai-deep);
}
.gf-card-video__meta {
  padding-left: 13px;
  letter-spacing: .5px;
}

/* ==========================================================
   六、分页器：回纹花饰
   ========================================================== */
.gf-pager { position: relative; margin-top: var(--gf-space-8); }
.gf-pager::before {
  content: "";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 8px;
  background: var(--gf-tex-meander) repeat-x;
  background-size: 24px 8px;
  opacity: .5;
}

/* ==========================================================
   七、空态：祥云水印
   ========================================================== */
.gf-empty { position: relative; }
.gf-empty::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 160px;
  height: 80px;
  margin: -40px 0 0 -80px;
  background: var(--gf-tex-cloud) no-repeat center / 160px 80px;
  opacity: .1;
  pointer-events: none;
}
.gf-empty > * { position: relative; z-index: 1; }
/* 空态多入口并排（图文列表空态：返回全部分类 + 返回首页） */
.gf-empty__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gf-space-5);
}

/* ==========================================================
   八、响应式（对齐 docs/02 §1.4 三档断点）
   ========================================================== */

/* 768–1439：侧栏转 chip，隐藏「目录」竖题签 */
@media (max-width: 1439px) {
  .gf-side-cats {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }
  .gf-side-cats::before { display: none; }

  .gf-hero__inner { padding: var(--gf-space-5) var(--gf-space-5) var(--gf-space-5); }
  .gf-hero__title { font-size: 28px; }
  /* 768 文字层置顶于配景之上，保证副标题可读 */
  .gf-hero__text { position: relative; z-index: 1; max-width: 62%; }
  /* 768 远山收敛到右后方并下移，避免压住副标题 */
  .gf-hero__art {
    width: 260px;
    height: 100px;
    margin-right: calc(var(--gf-space-5) * -1);
    margin-bottom: -6px;
    opacity: .7;
  }
  .gf-hero__art::after { width: 56px; height: 28px; background-size: 56px 28px; right: 4px; top: -4px; }
}

/* <768：单列，题头压缩，祥云退隐 */
@media (max-width: 767px) {
  .gf-hero__inner {
    padding: var(--gf-space-5) var(--gf-space-4);
    align-items: flex-start;
    position: relative;
  }
  /* 375 文字层置顶于配景之上，保证可读性 */
  .gf-hero__text { position: relative; z-index: 1; }
  .gf-hero__eyebrow { font-size: 11px; letter-spacing: 4px; }
  .gf-hero__title { font-size: 23px; letter-spacing: 2px; }
  .gf-hero__title::before { height: 20px; margin-right: var(--gf-space-2); }
  /* 副标题在 375 端折行且不得溢出：改为两行截断显示 */
  .gf-hero__sub {
    font-size: 13px;
    letter-spacing: .5px;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  /* 375 配景退到文字后方，弱化为水墨底衬 */
  .gf-hero__art {
    position: absolute;
    right: -30px;
    bottom: -10px;
    width: 220px;
    height: 90px;
    opacity: .35;
  }
  .gf-hero__art::after { display: none; }
  .gf-hero__band { background-size: 24px 8px; opacity: .35; }
  /* 375 照片模式：照片全宽在上（自然比例、完整呈现），文字退至照片下方纸底上，
     不再叠压画面 —— 小屏以可读性优先；轻纱匀罩使照片与宣纸底过渡自然 */
  .gf-hero--photo .gf-hero__photo { height: auto; }
  .gf-hero--photo .gf-hero__photo img {
    height: auto;
    max-height: 260px; /* 竖图限高，完整显示不裁切 */
    object-fit: contain; /* 移动端始终完整：全宽自然比例 */
    object-position: center;
  }
  .gf-hero--photo .gf-hero__inner { position: static; }
  .gf-hero--photo .gf-hero__photo::after {
    background: rgba(252, 250, 244, .14);
  }

  .gf-list-bar { margin-bottom: var(--gf-space-4); }
  .gf-list-bar__title { font-size: 15px; letter-spacing: 2px; }
  .gf-list-bar__meta { font-size: 12px; }
  /* 窄屏：计数与返回首页并排但收紧间距，长分类名可换行而非撑破 */
  .gf-list-bar { align-items: flex-end; }
  .gf-list-bar__aside { gap: var(--gf-space-3); }
  .gf-list-bar__home {
    font-size: 12px;
    padding-left: var(--gf-space-3);
  }

  .gf-card-video { padding: 8px; }
  .gf-card-video__title { font-size: 15px; }

  .gf-pager::before { width: 80px; top: -18px; }
}

/* ==========================================================
   九、图文模块（附录四）：顶栏导航 / 图文页分栏 / 讲义正文
   ------------------------------------------------------------
   全部新增类，不改动以上任何既有规则；回退随装饰层整体删除。
   ========================================================== */

/* ---------- 顶栏站内导航（"图文"入口，全前台页共用） ---------- */
.gf-topbar__nav {
  display: flex;
  align-items: center;
  margin-right: auto; /* 靠左跟随品牌，右侧组仍贴右（topbar inner 为 space-between） */
  padding-left: var(--gf-space-6);
}
.gf-topbar__navlink {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--gf-radius-sm);
  font-size: var(--gf-fs-body-sm);
  letter-spacing: 3px;
  color: var(--gf-color-ink-2);
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.gf-topbar__navlink:hover {
  color: var(--gf-c-dai-deep);
  background: rgba(43, 74, 85, .06);
  text-decoration: none;
}

/* ---------- 图文列表页容器（无侧栏，窄心居中） ---------- */
.gf-gwrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--gf-space-6) var(--gf-space-5) var(--gf-space-7);
}
.gf-gwrap__content { min-width: 0; }

/* 图文卡不显示 hover 播放圆章：播放语义仅属于课程卡，图文卡共享
   .gf-card-video 结构但无播放动作，用 .gf-gcard 限定关闭 */
.gf-card-video.gf-gcard .gf-card-video__cover::before { display: none; }

/* 图文卡角标："图文"字样（黛青底白字，与时长角标同位异色，克制不抢朱红） */
.gf-gcard__badge {
  position: absolute;
  left: var(--gf-space-2);
  top: var(--gf-space-2);
  z-index: 4;
  padding: 2px 8px;
  background: rgba(43, 74, 85, .82);
  color: rgba(255, 255, 255, .92);
  font-size: var(--gf-fs-badge);
  letter-spacing: 2px;
  border-radius: var(--gf-radius-sm);
  line-height: 1.4;
}

/* ---------- 附录十：视频卡「需授权」角标（内容可见 / 播放受限的视觉标识） ----------
   位置：封面右上角（图文角标在左上、时长在右下，三者不重叠）。
   用赭石而非朱红：朱红全站仅限印章与主按钮，此处属状态提示。 */
.gf-card-video__lock {
  position: absolute;
  right: var(--gf-space-2);
  top: var(--gf-space-2);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(154, 91, 58, .88);
  color: rgba(255, 255, 255, .95);
  font-size: var(--gf-fs-badge);
  letter-spacing: 1px;
  border-radius: var(--gf-radius-sm);
  line-height: 1.4;
}
/* 锁定态仍可点击进详情浏览内容：仅轻微压暗封面，避免误读为"不可访问" */
.gf-card-video--locked .gf-card-video__cover img { filter: saturate(.72) brightness(.86); }

/* 免登录可看（is_public）视频卡「免费」角标：与「需授权」同位互斥出现，
   用藤黄而非赭石——金色示"开放可看"，与锁定态的警示语义区分。 */
.gf-card-video__free {
  position: absolute;
  right: var(--gf-space-2);
  top: var(--gf-space-2);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: rgba(200, 150, 62, .92);
  color: rgba(255, 255, 255, .96);
  font-size: var(--gf-fs-badge);
  letter-spacing: 1px;
  border-radius: var(--gf-radius-sm);
  line-height: 1.4;
}

/* 侧栏分类锁标：分类内课程需授权才能播放（文字仍全对比度可读） */
.gf-cat-item__lock {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  color: var(--gf-c-zhe);
  vertical-align: middle;
}
.gf-cat-item.is-current .gf-cat-item__lock { color: var(--gf-color-vermilion); }

/* 列表条「N 门需授权」：与计数同排，赭石弱提示 */
.gf-list-bar__lock { color: var(--gf-c-zhe); }

/* 详情页元信息「需授权播放」chip（沿用基础层 .gf-chip 尺寸，仅换色） */
.gf-chip--locked {
  border-color: var(--gf-c-zhe);
  color: var(--gf-c-zhe);
}

/* 详情页元信息「免费观看」chip（免登录可看；与「需授权播放」互斥出现） */
.gf-chip--free {
  border-color: var(--gf-c-tenghuang);
  color: var(--gf-c-tenghuang);
}

/* 详情页落款说明：明确「内容可见、播放需授权」的差别，给出行动指引 */
.gf-detail__locknote {
  margin: var(--gf-space-5) 0 0;
  padding: var(--gf-space-3) var(--gf-space-4);
  border-left: 3px solid var(--gf-c-zhe);
  background: var(--gf-color-surface-tint);
  color: var(--gf-color-ink-2);
  font-size: var(--gf-fs-body-sm);
  line-height: 1.8;
  letter-spacing: .5px;
}
.gf-detail__locknote strong { color: var(--gf-c-zhe); font-weight: 600; }

/* 首页「图文讲义」模块：默认居中于视频网格之下；分栏态由下方 --split 覆盖 */
.gf-graphics-block { margin-top: var(--gf-space-8); }
/* 「查看全部图文 →」已移入标题条右侧动作区（.gf-list-bar__aside 内，
   样式复用 .gf-list-bar__home；类名 gf-graphics-block__more 保留供 QA 脚本定位） */

/* ---------- 图文分类切换（附录七：图文自有分类的独立筛选） ----------
   2026-10-24 用户定稿（三次反馈）：与左侧课程「目录」完全同款 ——
   同 200px 窄卡、同竖排分类列表、同款分类项（朱红左条识别位），仅题签
   作「分 类」以区分两卡所辖内容；卡在图文列内 sticky，页面级与模块级
   均为「窄目录卡 + 右侧内容」同构布局。<1440 同步目录「去卡壳转横滚
   pills」形态。类名沿用 gf-gcat-chip（测试/QA 依赖）。 */
.gf-gcat-body {
  display: flex;
  gap: var(--gf-space-5);
  align-items: flex-start;
}
.gf-gcat-filter {
  flex: 0 0 200px;
  width: 200px;
  position: sticky;
  top: calc(64px + var(--gf-space-5));
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: var(--gf-space-3);
  background: var(--gf-color-surface);
  border: 1px solid var(--gf-border-dai);
  border-radius: var(--gf-radius-md);
  box-shadow: var(--gf-shadow-s1);
}
/* 题签：与 .gf-side-cats::before「目 录」同款（竖排容器同用 align-self:stretch） */
.gf-gcat-filter::before {
  content: "分 类";
  display: block;
  align-self: stretch;
  margin: 0 auto var(--gf-space-2);
  letter-spacing: 10px;
  text-indent: 10px; /* 抵消末字 letter-spacing，使视觉居中 */
  font-family: var(--gf-font-serif);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: var(--gf-c-mo);
  text-align: center;
  padding-bottom: var(--gf-space-2);
  border-bottom: 1px solid var(--gf-border-dai);
}
/* 分类项：与 .gf-cat-item 同款（竖排整行、左 4px 条识别位） */
.gf-gcat-chip {
  display: block;
  padding: 10px var(--gf-space-3);
  border-left: 4px solid transparent;
  border-radius: 0 var(--gf-radius-sm) var(--gf-radius-sm) 0;
  color: var(--gf-color-ink-2);
  font-size: var(--gf-fs-body);
  letter-spacing: 1px;
  text-decoration: none;
  transition: background-color .12s ease;
}
.gf-gcat-chip:hover {
  background: rgba(43, 74, 85, .06);
  color: var(--gf-c-dai-deep);
  text-decoration: none;
}
.gf-gcat-chip.is-current {
  border-left-color: var(--gf-color-vermilion);
  color: var(--gf-color-vermilion);
  background: var(--gf-color-surface-tint);
  font-weight: 600;
}
/* 行内分栏右列：图文网格吃满目录卡以外的宽度 */
.gf-gcat-body .gf-grid { flex: 1; min-width: 0; }

/* <1440：与课程目录同款响应式 —— 去卡壳、隐藏题签、转横排滚动 pills */
@media (max-width: 1439px) {
  .gf-gcat-body { display: block; }
  .gf-gcat-filter {
    position: static;
    flex: none;
    width: auto;
    margin: 0 0 var(--gf-space-4);
    flex-direction: row;
    gap: var(--gf-space-2);
    overflow-x: auto;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    -webkit-overflow-scrolling: touch;
  }
  .gf-gcat-filter::before { display: none; }
  .gf-gcat-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    padding: 0 var(--gf-space-4);
    height: 36px;
    border: var(--gf-border-width) solid var(--gf-color-border);
    border-left-width: var(--gf-border-width);
    border-radius: 18px;
    background: var(--gf-color-surface);
  }
  .gf-gcat-chip.is-current {
    border-color: var(--gf-color-vermilion);
    border-left-color: var(--gf-color-vermilion);
    background: var(--gf-color-surface);
  }
}
/* 空分类提示（首页图文模块内）：跨满整行，弱化为说明文字 */
.gf-graphics-block__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--gf-space-4) 0;
  color: var(--gf-color-ink-3);
  font-size: var(--gf-fs-caption);
  letter-spacing: 1px;
}

/* ---------- 宽屏全宽：目录贴最左、内容区铺满（用户 2026-10-24 定稿） ----------
   基础层 .gf-list-layout 是 max-width:1200px 居中容器，1440+ 宽屏时两侧各留
   一大块空白、分类目录远离左边缘。此处放开上限：目录（200px）贴着左侧仅留
   space-5 呼吸，内容区自动吃满剩余宽度，两栏分栏随之等比例铺满。 */
@media (min-width: 768px) {
  .gf-list-layout {
    max-width: none;
    padding-left: var(--gf-space-5);
    padding-right: var(--gf-space-5);
  }
}
@media (min-width: 1440px) {
  .gf-list-layout { gap: var(--gf-space-5); }
}

/* ---------- 首页左右分栏：视频在左、图文在右，两栏各占一半（用户 2026-10-24 定稿） ----------
   触发条件：模板在「有视频且有图文」时给 .gf-list-content 加 --split。
   口径（用户要求）：两栏等分 1fr:1fr，卡片撑满各自栏宽，不残留空白；
   间距统一 space-5（栏间）／space-4（卡间），两列标题条同一水平线。 */
.gf-list-content--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gf-space-5);
  align-items: start;
}
.gf-list-content--split .gf-video-col,
.gf-list-content--split .gf-graphics-col { min-width: 0; }
/* 左列视频 / 右列图文：卡片随栏宽自适应
   —— 用 repeat(auto-fill, minmax(min(100%, 260px), 1fr))：
      栏宽 572（1440）→ 2 列（各 274）；栏宽 812（1920）→ 3 列；
      窄屏栏宽不足 260 时回落单列。两列规则完全一致 ⇒ 两栏卡片同宽同高。 */
.gf-list-content--split .gf-video-col .gf-grid,
.gf-list-content--split .gf-graphics-block .gf-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  column-gap: var(--gf-space-4);
  row-gap: var(--gf-space-4);
}
/* 右列图文：与左列同一条列宽规则 —— 两栏等宽则列数相同、卡片同宽同高 */
.gf-list-content--split .gf-graphics-col {
  display: flex;
  flex-direction: column;
}
.gf-list-content--split .gf-graphics-block {
  margin-top: 0;
  display: flex;
  flex-direction: column;
}
/* 右列图文卡：封面沿用 16:9；标题略收，纵向节奏更紧凑 */
.gf-list-content--split .gf-graphics-block .gf-card-video__title { font-size: 15px; }

/* 仅图文结果（搜索命中图文、但无匹配课程）：右列独占整行，
   去掉模块在浏览态用于与上方视频网格分隔的顶部间距 */
.gf-list-content--graphics-only .gf-graphics-block { margin-top: 0; }

/* 侧栏转顶部 chip（<1440）后外层是纵向 flex，基础层 align-items:flex-start 会让
   内容区收缩、右侧留白 —— 改为 stretch 让内容区吃满整行宽度 */
@media (max-width: 1439px) {
  .gf-list-layout { align-items: stretch; }
}

/* 窄屏（<900 视口）两列放不下：降级为"视频在上、图文在下"的单列堆叠 */
@media (max-width: 899px) {
  .gf-list-content--split { display: block; }
  /* 分栏撤销后左列恢复整宽：视频网格回到基础层的 280 最小宽自适应 */
  .gf-list-content--split .gf-video-col .gf-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    column-gap: var(--gf-space-5);
  }
  .gf-list-content--split .gf-graphics-block {
    margin-top: var(--gf-space-8);
  }
  .gf-list-content--split .gf-graphics-block .gf-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

/* ---------- 图文页页头（返回 + 标题 + 元信息，全宽于分栏之上） ---------- */
.gf-gdetail-head {
  background: var(--gf-color-paper);
  border-bottom: 1px solid var(--gf-border-dai);
}
.gf-gdetail-head__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--gf-space-6) var(--gf-space-5) var(--gf-space-5);
}
.gf-gdetail-head__title {
  margin: var(--gf-space-3) 0 var(--gf-space-2);
  font-family: var(--gf-font-serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: 3px;
  color: var(--gf-c-mo);
}
.gf-gdetail-head__title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 22px;
  margin-right: var(--gf-space-3);
  vertical-align: -2px;
  background: var(--gf-c-dai);
  border-radius: 1px;
}
.gf-gdetail-head__meta {
  display: flex;
  align-items: center;
  gap: var(--gf-space-3);
  margin: 0;
  font-size: var(--gf-fs-caption);
  letter-spacing: 1px;
  color: var(--gf-color-ink-2);
  flex-wrap: wrap;
}

/* ---------- 上视频 + 下图文（单列堆叠，用户 2026-10-24 定稿） ---------- */
/* 顺序即 DOM 顺序：视频在上、讲义在下，同宽左右边缘对齐。
   用 flex column + gap 而非 block，是为了统一段间距 token；
   列退化为单列后不再需要 sticky（视频不再与长文并排）。 */
.gf-graphic-layout {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--gf-space-6) var(--gf-space-5) var(--gf-space-7);
  display: flex;
  flex-direction: column;
  gap: var(--gf-space-6);
}
.gf-graphic__videocol { min-width: 0; }
/* 播放器：宽度自适应容器，高度由基础层 aspect-ratio 16/9 推导，不设固定高度 */
.gf-player-wrap--side { width: 100%; max-width: none; }

/* ---------- 讲义正文（册页纸面） ---------- */
.gf-graphic__body {
  min-width: 0;
  background: var(--gf-color-surface);
  border: 1px solid var(--gf-border-dai);
  border-radius: var(--gf-radius-md);
  box-shadow: var(--gf-shadow-s1);
  padding: var(--gf-space-6);
}
/* 讲义正文：卡片占满栏宽，正文收在舒适行宽内居中
   （中文长文每行 40–46 字为宜；不限宽时 1072 栏会到 65+ 字/行，易串行。
   用 px 而非 em —— .gf-article 继承 14px，42em 只有 588px，图片会显得偏小） */
.gf-article {
  max-width: 780px;
  margin-inline: auto;
}
.gf-article__p {
  margin: 0 0 var(--gf-space-4);
  font-size: 16px;
  line-height: 2;
  letter-spacing: .5px;
  text-indent: 2em; /* 中文段落首行缩进，讲义文风 */
  color: var(--gf-color-ink);
}
.gf-article__fig {
  margin: var(--gf-space-5) 0;
  text-align: center;
}
.gf-article__fig img {
  max-width: 100%;
  height: auto;
  border-radius: var(--gf-radius-sm);
  border: 1px solid var(--gf-border-dai);
  box-shadow: var(--gf-shadow-s1);
}
.gf-article__cap {
  margin-top: var(--gf-space-2);
  font-size: var(--gf-fs-caption);
  letter-spacing: 1px;
  color: var(--gf-color-ink-3);
}

/* ---------- 视频详情页 · 关联图文入口 ---------- */
.gf-detail__graphics {
  margin-top: var(--gf-space-5);
  padding-top: var(--gf-space-4);
  border-top: 1px dashed var(--gf-border-dai-strong);
}
.gf-detail__graphics-title {
  margin: 0 0 var(--gf-space-3);
  font-family: var(--gf-font-serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--gf-c-mo);
}
.gf-detail__graphics-title::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 14px;
  margin-right: var(--gf-space-2);
  vertical-align: -1px;
  background: var(--gf-c-dai);
  border-radius: 1px;
}
.gf-detail__graphics-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gf-space-2);
}
.gf-detail__graphics-link {
  display: inline-block;
  font-size: var(--gf-fs-body-sm);
}
.gf-detail__graphics-link::before {
  content: "·";
  margin-right: 6px;
  color: var(--gf-c-dai-soft);
}

/* ---------- 图文模块响应式 ---------- */
/* 平板：单列不变，仅收紧间距与字号，避免视频过高、正文过长 */
@media (min-width: 768px) and (max-width: 1199px) {
  .gf-graphic-layout {
    gap: var(--gf-space-5);
    padding: var(--gf-space-5) var(--gf-space-4) var(--gf-space-6);
  }
  .gf-graphic__body { padding: var(--gf-space-5); }
  .gf-article__p { font-size: 15px; line-height: 1.95; }
}
/* <768：缩进呼吸收窄、标题降档、正文内距收窄 */
@media (max-width: 767px) {
  .gf-topbar__nav { padding-left: var(--gf-space-3); }
  .gf-topbar__navlink { padding: 6px 8px; letter-spacing: 2px; }
  .gf-gwrap { padding: var(--gf-space-4) var(--gf-space-4) var(--gf-space-6); }
  .gf-gdetail-head__inner { padding: var(--gf-space-5) var(--gf-space-4) var(--gf-space-4); }
  .gf-gdetail-head__title { font-size: 20px; letter-spacing: 2px; }
  .gf-graphic-layout { padding: var(--gf-space-4) var(--gf-space-4) var(--gf-space-6); }
  .gf-graphic__body { padding: var(--gf-space-4); }
  .gf-article__p { font-size: 15px; text-indent: 2em; }
}

/* ==========================================================
   十、公开浏览态（附录五）：顶栏登录入口 + 图文页视频锁定浮层
   ========================================================== */

/* 顶栏「登录」入口：黛青描边轻按钮（不占朱红额度），登录后由 base.html 切回用户区 */
.gf-topbar__login {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 var(--gf-space-4);
  border: 1px solid var(--gf-c-dai);
  border-radius: var(--gf-radius-sm);
  color: var(--gf-c-dai-deep);
  font-size: var(--gf-fs-body-sm);
  letter-spacing: 2px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* hover / 键盘聚焦：黛青实底 + 白字（对白底顶栏对比度约 9:1，清晰可见） */
.gf-topbar__login:hover,
.gf-topbar__login:focus-visible {
  background: var(--gf-c-dai);
  border-color: var(--gf-c-dai);
  color: #FFFFFF;
  text-decoration: none;
}
.gf-topbar__login:focus-visible { outline: 2px solid var(--gf-c-dai-deep); outline-offset: 2px; }

/* 图文页锁定浮层：盖在 16:9 播放器位上，宣纸暗纱 + 锁形 + 引导文案/按钮 */
.gf-videolock { overflow: hidden; }
.gf-videolock__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(2px) saturate(.85); /* 海报虚化：内容预览但不可辨 */
  transform: scale(1.04);           /* 抵消模糊边缘 */
}
.gf-videolock__poster--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gf-font-serif);
  font-weight: 600;
  font-size: var(--gf-fs-h3);
  letter-spacing: 4px;
  color: rgba(255, 255, 255, .28);
  background:
    var(--gf-tex-mountain) no-repeat center bottom / 100% 62%,
    linear-gradient(160deg, #3B5A63 0%, #1C1C1E 78%);
  filter: none;
  transform: none;
}
.gf-videolock__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(28, 28, 30, .62);
}
.gf-videolock__body {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gf-space-2);
  padding: 0 var(--gf-space-5);
  text-align: center;
}
.gf-videolock__icon { color: rgba(255, 255, 255, .85); }
.gf-videolock__title {
  margin: 0;
  font-family: var(--gf-font-serif);
  font-weight: 600;
  font-size: var(--gf-fs-h3);
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .94);
}
.gf-videolock__hint {
  margin: 0 0 var(--gf-space-2);
  font-size: var(--gf-fs-caption);
  letter-spacing: 1px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .66);
}
.gf-videolock__body .gf-btn--ghost { height: 40px; padding: 0 var(--gf-space-5); }