/* ==========================================================================
   responsive.css — 窄屏适配补丁
   --------------------------------------------------------------------------
   原主题对主列宽度、缩略图尺寸使用固定像素值（如 .main-w{width:818px}、
   .article-thumb{width:195px}、列表图 w-[280px]），在窄屏下会撑破视口，
   导致正文被裁切、出现横向滚动条。

   本文件只做「覆盖」，不修改主题原始文件，方便日后单独更新主题样式。
   加载顺序：必须排在两套主题的 CSS 之后。
   ========================================================================== */

/* 兜底：防止任何元素撑破视口（只加在 html 上，避免影响 position:sticky） */
html { overflow-x: hidden; }
img { max-width: 100%; }


/* ==========================================================================
   〇、补齐主题 Tailwind 包里缺失的响应式工具类
   --------------------------------------------------------------------------
   ⚠️ 两套主题的 tailwind.min.css / postnews.tailwind.min.css 里**都没有生成**
   `.md\:hidden` 和 `.lg\:hidden`（`grep -rn 'md\\:hidden\|lg\\:hidden' assets/css/`
   一处都搜不到），但模板偏偏用它们控制顶部那颗 ☰ 菜单按钮：

       index.html   → <button id="menuBtn" class="md:hidden …">
       内页          → <button id="menuBtn" class="lg:hidden …">

   类名不存在 = 条件永远不成立 → ☰ 在**桌面端也一直显示**，点开就是本该只在
   窄屏出现的抽屉菜单（而且和已经显示出来的顶部导航重复）。这里按 Tailwind 的
   断点语义补上（md = 768px、lg = 1024px），不动主题原文件。
   ========================================================================== */
@media (min-width: 768px)  { .md\:hidden { display: none; } }
@media (min-width: 1024px) { .lg\:hidden { display: none; } }


/* ==========================================================================
   一、首页（kunpeng 主题）
   ========================================================================== */

/* 主列固定 818px → 空间不足时改为流式伸缩 */
.main-w { min-width: 0; }
@media (max-width: 1420px) {
  .main-w { width: auto; flex: 1 1 auto; }
}

/* 轮播 + 右侧两张小卡：窄屏改为上下堆叠 */
@media (max-width: 900px) {
  .hero-row { flex-direction: column; }
  .hero-row > .carousel-container { flex: none; width: 100%; }
  .hero-row > .flex-1 { flex: none; width: 100%; flex-direction: row; }
  .hero-row > .flex-1 > a { min-height: 132px; }
}

/* 友情链接网格：1fr 的「自动最小宽度」= min-content，会被长标签顶宽。
   ------------------------------------------------------------------
   index.css 写的是 repeat(4, 1fr)，而 1fr 等价于 minmax(auto, 1fr)：
   auto 这个下限取该列内容的 min-content。于是 375px 下实测列宽是
   104px / 75.6px / 93px / 71px —— **四列完全不等**，合计 362px，
   而容器只有 343px，整行溢出视口 3px。
   （html 的 overflow-x:hidden 把滚动条藏了，只在量 scrollWidth 时才看得见，
     所以这个问题一直没人发现。）

   .flink-name 本来就带 text-overflow:ellipsis + min-width:0 —— 说明原设计
   意图就是「挤了就出省略号」，只是 1fr 的内容下限让省略号永远轮不到生效。
   改成 minmax(0, 1fr) 把下限拿掉：列宽均分，超长标签走省略号。

   放在这里而不是改 index.css，是为了让主题文件保持原样、方便日后单独更新主题
   （见本文件顶部说明）。四个断点要跟 index.css 一一对应。 */
.flinks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 640px) { .flinks { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 768px) { .flinks { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .flinks { grid-template-columns: repeat(8, minmax(0, 1fr)); } }


/* 文章行缩略图：窄屏整体收小 */
@media (max-width: 640px) {
  .article-thumb { width: 116px; height: 82px; }
  .recommend-thumb { width: 84px; height: 56px; }
  .headline-title { font-size: 20px; line-height: 1.4; }
  .max-w-site { padding-left: 1rem; padding-right: 1rem; }
}


/* 轮播 / 侧栏小卡的标题块：改成「不透明文字条」，别再盖半透明渐变。
   ------------------------------------------------------------------
   封面图是 2560×1440 的 16:9，自带大字标题。量过封面里各段文字的纵向位置：
     CS50X(2026)                        16% ~ 28%
     计算机科学导论（封面主标题）        38% ~ 49%
     Introduction to Computer Science   53% ~ 61%
     2026 | David J. Malan              68% ~ 75%
   底部 25% 是空白。

   ⚠️ 「字叠字」的根源**不是**标题块太高，而是原来的半透明遮罩
   （bg-gradient-to-t from-black/50）：它让封面的大字和我们的标题各露一半，
   两边都读不清。只要把遮罩换成不透明底，被盖住的部分就干净消失、
   没被盖住的完整可见，**不存在中间态**。所以下面先解决透明度，再谈高度。

   实现：标题块自带 rgba(15,23,42,.92) 实底（跟页脚同色系），
   上沿再用 ::before 铺 18px 的渐隐做柔和过渡（硬切边看着太生硬）。
   ::before 是 absolute 且 bottom:100%，正好贴在标题块上沿之上。

   尺寸上仍要压一压：三栏并存时主列会被挤窄，标题块占比过大。
   实测（轮播标题块高 / 封面高，>49% 就会压到封面主标题）：
     375px 45%  640px 20%  768px 23%  900px 20%
     1024px 54%  1280px 50%  1600px 42%      ← 1024~1420 最惨
   1024~1420 是「左导航 + 主列 + 右侧栏」三栏同时在的档位，主列只剩 415px，
   轮播仅 415×245，而标题块还是满尺寸 132px。办法是把摘要收掉、只留标题：
     375px 35%  640px 20%  1024px 39%  1280px 36%  1600px 31%   ← 全部进安全区
   摘要没丢：同一篇文章在下方列表里带着摘要，侧栏小卡也有。
   想恢复摘要就把 `.carousel-caption p` 那条删掉，同时把标题块字号再降一档。 */
.carousel-caption,
.side-caption {
  background: rgba(15, 23, 42, .92);
}
/* 底部留出一条给轮播指示点。原来的 p-5 是配半透明遮罩的：那时点和文字
   都在遮罩里，视觉上分不开也无所谓。现在标题块是不透明条，点（bottom-3，
   高 8px，占距底 12~20px）会正好压到文字末行的下沿，所以要抬高文字。 */
.carousel-caption { padding: 1.25rem 1.25rem 1.75rem; }
/* 渐隐只给轮播：小卡只有 117~150px 高，18px 的过渡带会直接压暗
   封面主标题（它就在标题块上方几个像素处），反而更糊。小卡用硬边。 */
.carousel-caption::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 18px;
  background: linear-gradient(to top, rgba(15, 23, 42, .92), rgba(15, 23, 42, 0));
  pointer-events: none;
}
.carousel-caption p { display: none; }

/* 窄屏：标题块字号再收一档；侧栏小卡也压低 */
@media (max-width: 640px) {
  .carousel-caption { padding: 0.75rem 0.75rem 1.5rem; }
  .carousel-caption h3 { font-size: 1rem; line-height: 1.35; }
  /* 卡片高度要贴着封面比例：375px 下两张卡并排各 166px 宽，
     原来的 min-height:152px 让盒子变成 166×152（1.09），
     16:9 的封面被 object-cover 裁掉 38%，封面上的字切在半截。
     压到 120px（1.38）后裁切降到 22%，标题块占比仍是安全的 42%。 */
  .hero-row > .flex-1 > a { min-height: 120px; }
  .side-caption h4 { font-size: 0.8125rem; line-height: 1.3; }

  /* 列表行的元信息（作者/日期/浏览/评论）：原来是不换行的 flex + gap-4，
     375px 下正文列只剩 167px，四个 span 各自被挤到折行，
     变成「👤 / admin / 2026- / 09-23 / 09:50:00 / 741 / 5」这样一团。
     改成「允许整体换行 + 每项内部不折行 + 字号降到 10px」：
     日期一项 92px + 作者 42px = 146px 能排进第一行，第二行放浏览/评论。
     注意 0.625rem 是跟着 .text-xs(12px) 往下调，不是随手写的值 ——
     12px 时「2026-09-23 09:50:00」要 110px，加作者就超过 167px 了。 */
  .post-meta { flex-wrap: wrap; gap: 0.25rem 0.625rem; font-size: 0.625rem; }
  .post-meta > span { white-space: nowrap; }
}

/* 三栏挤压档（1024~1420）：侧栏小卡只有 117~136px 高，带上「分类 + 阅读数」
   那一行后标题块占到 63~68%，会把封面主标题切一半。收掉那行装饰信息 +
   收窄内边距，标题块降到 50px / 117px ≈ 43%，封面主标题（38%~49%）完整露出。
   分类和阅读数在下方列表行里都有，不算丢信息。 */
@media (max-width: 1420px) {
  .side-caption { padding: 0.5rem 0.625rem; }
  .side-caption p { display: none; }
}


/* ==========================================================================
   二、列表页 / 文章页 / 标签页 / 关于页（postnews 主题）
   ========================================================================== */

/* 页面容器与正文卡片的内边距：窄屏收窄 */
@media (max-width: 768px) {
  .page-wrap { padding-left: 1rem; padding-right: 1rem; padding-top: 1.25rem; padding-bottom: 2rem; gap: 1.5rem; }
  .post-card { padding: 1.25rem; border-radius: 1rem; }
}

/* 列表缩略图：固定 16:9，避免封面被居中裁掉两侧内容。
   ------------------------------------------------------------------
   原主题是 w-[280px] + flex 垂直拉伸，容器高度由右侧正文撑开，
   比例随正文长短在 1.56~1.78 之间浮动。封面多为 16:9，object-cover
   居中裁切就会切掉左右两侧 —— CS50x 这类封面文字贴右边缘，标题被切掉。

   做法：把比例钉死为 16:9（主流封面比例），16:9 封面零裁切。
   - align-self:center 让它垂直居中（不能 stretch，否则 aspect-ratio 失效）
   - 同时把正文上下内边距由 24px 收到 13px，使正文最高（摘要 2 行时
     约 131px）也压到 157.5px 以内，行高便恒等于缩略图高度，
     卡片既不留白边、也不裁图；正文靠 justify-center 自行居中。
   - 若将来正文变高（例如标题换行），最坏结果是缩略图上下留白，
     仍然不会裁切封面。 */
.list-thumb { aspect-ratio: 16 / 9; align-self: center; }
.list-body { padding: 0.8125rem 1.5rem; }

/* 列表卡片：窄屏由「左图右文」改为「上图下文」 */
@media (max-width: 640px) {
  .list-item { flex-direction: column; }
  .list-thumb { width: 100%; height: 188px; }
  .list-body { padding: 1rem; }
  .list-body h2 { font-size: 1.0625rem; }
}
/* 文章正文排版：窄屏微调标题 */
/* ⚠️ 这里**不要**再改 #article-body / #article-body p 的 font-size ——
   正文观感已对齐原笔记（content.css 第 4 节：14px / 1.85），
   responsive.css 排在 content.css 之后，在这里写字号会把「与原笔记一致」直接覆盖掉。 */
@media (max-width: 640px) {
  .post-card h1 { font-size: 1.4375rem; line-height: 1.35; }
}

/* 页脚导航在窄屏换行更自然 */
@media (max-width: 640px) {
  footer .flex-wrap { gap: 0.75rem 1rem; }
}

/* ==========================================================================
   合集（collections）：合集页顶部的横幅
   --------------------------------------------------------------------------
   ⚠️ 这块是**新组件**，样式刻意写在这里 —— responsive.css 是最后加载的补丁表，
      排最后就一定生效；不要去赌那两份「按用量生成」的 Tailwind bundle 里有没有
      对应的工具类（bundle 里没覆盖到的类会**整个缺失**，加了也没样式）。
   ⚠️ 首页**不用**这里的东西：首页是「原版式 + 合集内容」（轮播/小卡/文章流），
      全部复用主题原有的工具类（`flex-[2]`/`carousel-caption`/`side-caption`…），
      见 `build.py::render_index()`。原来那套 `.col-grid` / `.col-card*` 卡片式首页
      已于 2026-10-09 删除（用户要求改回原版式），别再加回来。
   ========================================================================== */

/* 合集页顶部横幅 */
.col-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 220px;
  border-radius: 18px;
  overflow: hidden;
  background: #0f172a;
}
.col-hero-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
/* ⚠️ 文字只压在**不透明**的那一段上：下半段恒为 .96，往上渐隐。
   「字叠字」的根源是半透明 —— 封面自带的大字和我们的标题会各露一半。
   所以不透明段要足够高（55%），盖住正文块；正文再高就交给下面 ≤640 的堆叠版式。 */
.col-hero-mask {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  background: linear-gradient(to top,
    rgba(15, 23, 42, .96) 0%,
    rgba(15, 23, 42, .96) 55%,
    rgba(15, 23, 42, 0) 100%);
}
.col-hero-body { position: relative; padding: 24px; color: #fff; }
.col-hero-name { font-size: 24px; font-weight: 800; line-height: 1.3; }
.col-hero-meta { margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .78); }
.col-hero-desc { margin-top: 10px; max-width: 720px; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .88); }

/* ⚠️ 窄屏改「封面在上、纯色文案区在下」的堆叠版式。
   为什么不能继续叠：窄屏下 desc 会折成 4~5 行，正文块高度超过遮罩的不透明段，
   顶部几行落到渐隐区 → 封面自带的大字直接透出来「字叠字」（375px 实测踩到）。
   叠不了就不叠 —— 堆叠之后这一整类问题在结构上不可能发生。 */
@media (max-width: 640px) {
  .col-hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    background: #0f172a;
  }
  .col-hero-img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .col-hero-mask { display: none; }
  .col-hero-body { padding: 18px; }
  .col-hero-name { font-size: 20px; }
}

/* ==========================================================================
   合集目录（.col-toc）+ 文章页的「上一篇 / 下一篇」（.col-nav）
   --------------------------------------------------------------------------
   ⚠️ 和 .col-* 一样写在这里（responsive.css = 最后加载的补丁表），**不去改主题原文件**。
   ⚠️ 全部是**新类名**，首页与其它页面一个都不引用 → 加这些规则不会动到任何既有版式。
      改完请务必确认 `index.html` 逐字节没变（git diff 应看不到它）。
   ========================================================================== */

/* ---- 合集页：目录结构 ---- */
.col-toc {
  margin-top: 24px;
  background: #fff;
  border: 1px solid #f1f5f9;
  border-radius: 18px;
  overflow: hidden;
}
.col-toc-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 22px;
  border-bottom: 1px solid #f8fafc;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}
.col-toc-count { font-size: 12px; font-weight: 400; color: #94a3b8; }
.col-toc-list { margin: 0; padding: 6px 0; list-style: none; }
.col-toc-item a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 22px;
  text-decoration: none;
  transition: background .18s;
}
.col-toc-item a:hover { background: #f8fafc; }
/* 等宽数字：两位/三位编号混排时左边缘才对得齐 */
.col-toc-num {
  flex-shrink: 0;
  min-width: 26px;
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.col-toc-item a:hover .col-toc-num { color: #3b82f6; }
.col-toc-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.col-toc-item a:hover .col-toc-title { color: #3b82f6; }
.col-toc-date {
  flex-shrink: 0;
  font-size: 12px;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
}

/* ---- 文章页末尾：上一篇 / 下一篇 ---- */
.col-nav {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #f1f5f9;
}
.col-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 12px;
  color: #94a3b8;
}
.col-nav-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
}
.col-nav-back { flex-shrink: 0; font-weight: 600; color: #3b82f6; }
.col-nav-col {
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.col-nav-link:hover .col-nav-col { color: #3b82f6; }
.col-nav-pos { flex-shrink: 0; font-variant-numeric: tabular-nums; }
/* minmax(0,1fr) 而不是 1fr：1fr 的自动最小宽度是 min-content，长标题会把格子顶宽 */
.col-nav-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.col-nav-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 18px;
  border: 1px solid #f1f5f9;
  border-radius: 14px;
  background: #f8fafc;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}
.col-nav-item:not(.col-nav-empty):hover {
  background: #eff6ff;
  border-color: #dbeafe;
  transform: translateY(-2px);
}
.col-nav-label { font-size: 12px; font-weight: 600; color: #3b82f6; }
.col-nav-title {
  font-size: 14px;
  line-height: 1.5;
  color: #1e293b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 首篇没有「上一篇」、末篇没有「下一篇」→ 那一侧留**等宽空块**，
   免得另一侧的按钮被挤到中间、位置还跟着当前篇跳。 */
.col-nav-empty { background: transparent; border-color: transparent; }
.col-nav-next { align-items: flex-end; text-align: right; }

@media (max-width: 640px) {
  /* 窄屏：日期让位给标题（日期在别处也有），标题允许折行，编号列收窄 */
  .col-toc-head { padding: 13px 16px; }
  .col-toc-item a { padding: 9px 16px; gap: 10px; }
  .col-toc-date { display: none; }
  .col-toc-title { white-space: normal; overflow: visible; }
  /* 翻页条改单列：占位空块就没意义了，留着只多一块空白 */
  .col-nav-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .col-nav-empty { display: none; }
  .col-nav-next { align-items: flex-start; text-align: left; }
  .col-nav-title { white-space: normal; }
  .col-nav-item { padding: 12px 14px; }
}

/* ==========================================================================
   可见面包屑（.crumb）
   --------------------------------------------------------------------------
   ⚠️ 与页面里的 JSON-LD `BreadcrumbList` 必须**同源同层级** —— Google 明确要求
      结构化数据要对应**用户看得见**的内容（「不要标记用户看不到的内容」），
      否则面包屑富结果不展示，结构化数据等于白做。
   ⚠️ 样式写在这里而不是用 Tailwind 类：bundle 是**按用量生成**的，没用到的类整个缺失
      （约定 24）。这两张补丁表排在最后，能稳定覆盖。
   ⚠️ 文章页原本就有一行「首页 / 分类」的可见轨迹（用的 Tailwind 类），
      现在统一换成 .crumb —— 颜色/字号刻意与原样式对齐，视觉上无变化。
   ========================================================================== */
.crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  line-height: 1.6;
  color: #9ca3af;
}
.crumb a {
  color: #9ca3af;
  text-decoration: none;
  transition: color .15s;
}
.crumb a:hover { color: #3b82f6; }
.crumb-cur { color: #9ca3af; }
.crumb-sep { color: #d1d5db; }
/* 分类页/标签页/合集页的面包屑与下方标题之间留一点距离；
   文章页那一行本来就在卡片里、紧接标题，不用额外间距 */
.crumb-block { margin-bottom: 14px; }