/* K-Flow 页面样式补丁
   在 header_kflow.html 里 kflow.css 之后加载，只做覆盖，不动 kflow.css 本体。

   2026-08-31 重写：之前那版"图片半透明叠加"（img position:absolute;inset:0）跟
   kflow.css 原有的绝对定位布局打架，导致次级图卡的图片塌陷不显示（客户报"图片消失了"）。
   原版设计本来就是对的——大卡=图片铺满+底部半透明文字面板（本身就是叠加效果），
   次级卡=图片在上+文字在下。所以这一版不再动图片定位，只保留真正需要的改动。 */

/* ==========================================================================
   1. 六个版块底部那排小卡：错位浅紫色衬底（向右下偏移），保留卡片自身边框
   ========================================================================== */
.kf26-card-text{border:1px solid #19007c}
.kf26-section-grid .kf26-card-text{box-shadow:6px 6px 0 #e2dbeb}

/* ==========================================================================
   2. 导航栏与栏目标题首字母大写
   导航 span 和它的隐藏 data-label 副本（::before）都要 capitalize，否则悬停变粗会抖动。
   ========================================================================== */
.kf26-channel-nav a>span,.kf26-channel-nav a::before{text-transform:capitalize}
.kf26-category-head h1,.kf26-section>header h2{text-transform:capitalize}

/* ==========================================================================
   3. 卡片标题超出 3 行用省略号；同排卡片等高
   标题限 3 行截断。文字区给一个 min-height，让 2 行标题和 3 行标题的卡片一样高，
   同排对齐。small（分类+日期）用 margin-top:auto 贴到文字区底部。
   ========================================================================== */
.kf26-card-copy strong,.kf26-top-copy strong{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
/* 次级图卡（图在上、文字在下）文字区等高：标题 3 行约 84px + meta 一行，取 min-height 兜底 */
.kf26-layout-left .kf26-card:nth-child(2) .kf26-card-copy,
.kf26-layout-right .kf26-card:nth-child(1) .kf26-card-copy,
.kf26-layout-three .kf26-card:nth-child(-n+3) .kf26-card-copy{
  display:flex;flex-direction:column}
.kf26-layout-left .kf26-card:nth-child(2) .kf26-card-copy small,
.kf26-layout-right .kf26-card:nth-child(1) .kf26-card-copy small,
.kf26-layout-three .kf26-card:nth-child(-n+3) .kf26-card-copy small{margin-top:auto}

/* ==========================================================================
   4. 卡片标题下划线去掉（<a> 链接默认下划线透出来了）
   ========================================================================== */
.kf26-card a,.kf26-card-inner,.kf26-card-copy strong,.kf26-top-card a,.kf26-top-copy strong{text-decoration:none}

/* ==========================================================================
   5. 左边大卡片文字面板毛玻璃效果（客户要求"透明毛玻璃"）
   layout-left 第 1 张、layout-right 第 2 张是大卡，文字面板原本是 rgba(255,255,255,.83)，
   改成半透明白底 + backdrop-filter 模糊，呈磨砂玻璃质感。

   2026-09-02 补：这一条一直没生效。kflow.css 第 60 行有
     .kf26-top-copy,.kf26-card-copy,...{background:#f9f8fb!important}
   带 !important，把下面的半透明背景压成了不透明的 #f9f8fb。backdrop-filter 其实一直在跑，
   但背后被不透明色挡住，看不出任何模糊，观感就是「图片被截断 + 下面一块灰」。
   所以这里的 background 也必须带 !important 才能压回去。
   ========================================================================== */
.kf26-layout-left .kf26-card:nth-child(1) .kf26-card-copy,
.kf26-layout-right .kf26-card:nth-child(2) .kf26-card-copy{
  background:rgba(255,255,255,.55)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}

/* ==========================================================================
   6. 文章详情页：Image Credits 单行浅灰
   7. 文章详情页 hero：图片防变形 + 右下角淡紫图块

   2026-09-04：这两节整段收进 @media(min-width:761px)，桌面/平板表现不变，手机端交回
   kflow.css 接管。

   原因（手机端配图被锁死 606px）：本文件在 header_kflow.html 里排在 kflow.css 之后加载，
   而这两节原来写在媒体查询外面，于是无条件覆盖了 kflow.css 的手机端规则：
     kflow.css @media(max-width:760px) → .kf26-article-media{position:relative;width:100%;height:auto}
     本文件（无条件）                  → .kf26-article-media{width:606px;height:404px}
   两条选择器特异性相同（都是 0,1,0），而媒体查询本身不增加权重，所以源顺序在后的这一条胜出。
   结果 375px 屏上 hero 图仍按 606px 渲染，又被 kflow.css 的 .kf26-main{overflow:hidden}
   裁掉右侧，既看不到也滑不动。:after 里的 calc((100vw - 606px) * .237) 在窄屏还会算出负值，
   装饰块随之失效或错位。
   .kf26-image-credit 的 white-space:nowrap 同理会在窄屏顶出横向溢出，
   color:#999!important 还会压掉 kflow.css 给手机端准备的白字（手机上这行落在深紫 hero 内）。

   加上 min-width:761px 之后，≤760px 自动落回 kflow.css 已经写好的手机端规则：
     .kf26-article-media{position:relative;width:100%;height:auto}
     .kf26-article-media img{height:auto;aspect-ratio:1.515}   ← object-fit:cover 仍由 kflow.css 基础规则提供
     .kf26-image-credit{position:relative;width:auto;margin:10px 20px 0;color:#fff}
   .kf26-article-hero:after 在 kflow.css 里没有对应声明，≤760px 不再渲染，
   这正是预期——那是设计稿里的桌面端装饰块。
   ========================================================================== */
@media(min-width:761px){
  .kf26-image-credit{width:auto!important;max-width:none;white-space:nowrap;color:#999!important;font-size:13px}
  .kf26-article-media{width:606px;height:404px}
  .kf26-article-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:606/404}
  .kf26-article-hero:after{
    content:"";position:absolute;z-index:1;pointer-events:none;
    left:calc(606px + (100vw - 606px) * .763);
    top:400px;
    width:calc((100vw - 606px) * .237);
    height:46px;
    background:rgba(223,214,241,.8)}
}
/* 手机端 Image Credits：颜色沿用 kflow.css 的白字（背景是深紫 hero），这里只保证长文案能换行、
   字号与桌面一致。别在这里再加回 nowrap，会重新引入横向溢出。 */
@media(max-width:760px){
  .kf26-image-credit{white-space:normal;font-size:13px}
}
/* ==========================================================================
   8. 2026-09-01：栏目名在页面里的写法统一成首字母大写（客户："页面中出现了3个描述方式，
      统一成 Brands"）
      后台栏目名本身是小写（brands / culture / style / travel / food / wellness，
      客户文档就是这么拼的），所以三处显示各不相同：
        导航栏      → 上面第 2 条已经 capitalize，显示 Brands（对的）
        文章 hero   → kflow.css 里是 text-transform:uppercase，显示 BRANDS
        RELATED 卡片 → 原样输出，显示 brands
        列表页标签  → kflow.css 里 .kf26-meta-category 也是 uppercase
      这里统一改成 capitalize。用 CSS 而不是改后台栏目名，是为了不动栏目数据、
      不影响 URL 目录名（客户要求跳转链接不变）。
      RELATED 的 meta 是「作者 | 栏目名」同一个 span，capitalize 只补首字母、
      不会把已经大写的字母改小，所以 KnowWell 不受影响。
   ========================================================================== */
.kf26-article-category{text-transform:capitalize}
.kf26-meta-category{text-transform:capitalize}
.kf26-related small>span{text-transform:capitalize}
/* ==========================================================================
   9. 2026-09-02：同排纯文字卡等高 + 标题与底部信息之间留间距

   客户反馈：同一排三张卡片高度不一样（标题 2 行的那张明显矮一截），
   「不管内容，高度要一致，中间应该做一个间距」。

   原因：.kf26-section-grid 上写了 align-items:start，网格项默认的 stretch 被关掉了，
   每张卡各自缩到自己内容的高度，所以 2 行标题和 3 行标题的卡片高度不同。
   align-items:start 是给第一排图片卡用的（那几张在设计稿里本来就是不同高度的错落构图），
   所以这里不动它，只对纯文字卡单独用 align-self:stretch 覆盖。

   拉伸之后要让卡片内部也撑满，否则边框和底色只包住内容那一截：
     card-inner 变成纵向 flex 并撑满卡片高度
     card-copy 占满剩余空间
     底部的「作者 | 栏目 + 日期」用 margin-top:auto 顶到卡片底部
   这样标题 2 行的卡片，标题和底部信息之间自然留出空白（就是客户要的"中间的间距"），
   三张卡的底部信息始终在同一条水平线上。padding-top 保证标题占满 3 行时也不会贴住。
   ========================================================================== */
.kf26-section-grid .kf26-card-text{align-self:stretch}
.kf26-section-grid .kf26-card-text .kf26-card-inner{display:flex;flex-direction:column;height:100%}
.kf26-section-grid .kf26-card-text .kf26-card-copy{flex:1 1 auto;justify-content:flex-start}
.kf26-section-grid .kf26-card-text .kf26-card-copy small{margin-top:auto;padding-top:14px}
/* ==========================================================================
   10. 2026-09-02：次卡（图片在上 + 文字在下）文字区顶部补一条分割线

   客户反馈「右边的卡片整体上方少了一个分割线，按着图3（设计稿）」。
   次卡的图片和文字区原来是直接相接的，没有任何分隔。这里在文字区顶部加一条 1px 细线，
   把图片和文字分开。

   选的是两种布局下的「次卡」，也就是图片在上、文字在下那一种：
     layout-left  的第 2 张（在右边）
     layout-right 的第 1 张（在左边）
   大卡不加——大卡是「图片铺满 + 半透明面板叠在底部」，加线会压在图片上很脏。

   如果客户要的线其实在别的位置（比如卡片最顶部、或者标题与日期之间），
   改这一条的选择器即可，成本很低。
   ========================================================================== */
.kf26-layout-left .kf26-card:nth-child(2) .kf26-card-copy,
.kf26-layout-right .kf26-card:nth-child(1) .kf26-card-copy{
  border-top:1px solid rgba(25,0,124,.18)}

/* ==========================================================================
   11. 2026-09-04：文章正文里粘进来的表格 / 嵌入 / 代码块不要撑破正文列

   kflow.css 只给正文的 <img> 限了 max-width:100%，table / iframe / video / pre 一个都没约束。
   编辑器插入的宽表格或嵌入视频会直接顶破 588px 正文列，手机上再被
   .kf26-main{overflow:hidden} 裁掉，右侧内容既看不到也滑不动。

   处理方式与 K-Insight 正文（kinsight.css 的 .kid26-content）保持一致：
     统一限宽 100%，表格改块级 + 横向滚动，长英文单词 / 粘进来的长 URL 允许断行。
   pre 额外给 overflow-x:auto —— 单靠 max-width 不会让长代码行折行，仍然会溢出。
   只加宽度与溢出约束，不动字号、字体、行高，正文排版（home.css 里那套 !important 的
   Inter/16px/1.875 规则）完全不受影响。
   ========================================================================== */
.kf26-article-content{overflow-wrap:break-word}
.kf26-article-content img,
.kf26-article-content table,
.kf26-article-content iframe,
.kf26-article-content video,
.kf26-article-content pre{max-width:100%}
.kf26-article-content table{display:block;overflow-x:auto}
.kf26-article-content pre{overflow-x:auto}
/* 表格/代码块横滑到头时不要把手势传给页面（iOS 上会误触发返回） */
.kf26-article-content table,
.kf26-article-content pre{overscroll-behavior-x:contain}