/* ============================================================
   DPH 首页视觉层 v2（2026-10-20 · 老板「首页杂乱不美观」）
   ------------------------------------------------------------
   改前实测（1440×900）：
     · 11 个 widget，9 个是同款文章块，全部 4 列、卡片恒 289×143
     · 卡片内部：32×32 小图标 + 1~2 行标题 = 45px 内容，卡片却 143px
       ⇒ 下方压着 98px 空白。九块全这样，就是「表格感 / 杂乱」的根因
     · 摘要一律 clamp 1 行，全是省略号，占位不产生信息
     · 九块同节奏，眼睛分不出主次；页高 2936px

   🔴 两个先踩到的坑（已避开，勿再犯）：
     ① 「6 张块」是假象：widget 配 count=6，但 `tb_widget_hide_cls()` 生成
        `hide-5-1`，实测第 5、6 张 `display:none` ⇒ **实际只显示 4 张**，
        本来就是满行。按 6 张去改 3 列 → 变成 3+1，反而破坏满行。
     ② 「图卡化」不能一刀切：shangye(商业实战) 与 licai(投资理财) 的缩略图
        **全部是 default-thumb.jpg 占位图**（320×200 灰底），32px 时看不出，
        放大到卡片宽就是一片空白，比原来更难看。
        ⇒ 只有缩略图是真内容的块才图卡化。实测真图情况：
           renzhi-wen 8/8 真图（250×250 杂志封面）✓
           tushuo     3/4 真图（第 4 张是占位）△
           shangye    0/4 ✗   licai 0/4 ✗

   定稿：**一主八辅**，不是九块拉平。
     · 主推档：认知文章（8 张全真图）→ 上图卡，4 列 2 行，成为视觉焦点
     · 辅档：其余八块 → 统一小图标卡 + 4 列满行 + 无摘要 + 等高
     · 认知基础四块 → 无图文字目录（第三级，压在最后两屏）
   ⚠️ 只动样式，不改模板、不改数据、不改 footer。
   【回滚】删本文件 + mu-plugins/dph-home-style.php 即完全复原。
   ============================================================ */

/* ---------- 1. 摘要收敛：只有外链货架保留一句话 ----------
   依据 dph-ui.css §12.3 老板 09-24 定版的**原意**：
     「全部网址有一句话介绍可以了 你怎么给我其他也莫名其妙加上了很乱」
   当时按 .post-site / .post-news 分型，但首页八块全走 tb-widget-sites
   渲染成 .post-site，分型失效 ⇒ 文章块全部冒出摘要。这里按 data-dph-blk 收敛。 */
body.home .tb-sidebar-h > .widget[data-dph-blk]:not([data-dph-blk="wangzhi"]) .post-site .tb-excerpt {
  display: none !important;
}

/* ---------- 2. 主推档：认知文章 + 图说认知 图卡化 ----------
   原结构是「32px 图标 + 标题」的水平列表行，硬塞进 289px 网格卡；
   改成上图下题：缩略图占满卡宽 118px 高，标题移图下。
   原图是 250×250 方图，object-fit:cover 裁成横条（封面本身是插画，裁切安全）。

   为什么只这两块：实测缩略图真假 —— renzhi-wen 8/8 真图、tushuo 3/4 真图、
   shangye 0/4、licai 0/4（后两者全是 default-thumb.jpg 占位，放大即白块）。 */
body.home .tb-sidebar-h > .widget[data-dph-blk="renzhi-wen"] .post-site .s-info,
body.home .tb-sidebar-h > .widget[data-dph-blk="tushuo"] .post-site .s-info {
  flex-direction: column;
  align-items: stretch;
}
body.home .tb-sidebar-h > .widget[data-dph-blk="renzhi-wen"] .post-site .info-wraper,
body.home .tb-sidebar-h > .widget[data-dph-blk="tushuo"] .post-site .info-wraper {
  padding: 0 0 30px;
}
body.home .tb-sidebar-h > .widget[data-dph-blk="renzhi-wen"] .post-site .tb-thumb,
body.home .tb-sidebar-h > .widget[data-dph-blk="tushuo"] .post-site .tb-thumb {
  flex: none;
  width: 100%;
  height: 118px;
  margin: 0 0 9px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}
body.home .tb-sidebar-h > .widget[data-dph-blk="renzhi-wen"] .post-site .tb-thumb img,
body.home .tb-sidebar-h > .widget[data-dph-blk="tushuo"] .post-site .tb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.home .tb-sidebar-h > .widget[data-dph-blk="renzhi-wen"] .post-site .p-t-w,
body.home .tb-sidebar-h > .widget[data-dph-blk="tushuo"] .post-site .p-t-w {
  padding: 0 12px;
  font-weight: 600;
}
body.home .tb-sidebar-h > .widget[data-dph-blk="renzhi-wen"] .post-site .-metas,
body.home .tb-sidebar-h > .widget[data-dph-blk="tushuo"] .post-site .-metas {
  left: 12px;
  right: 12px;
}

/* ---------- 3. 辅档：认知基础四块转「无框文字目录」 ----------
   这四块连续排列、每块 4 条，是全页最单调的一段。
   去掉 32px 图标与卡片描边（outline + 巡游亮弧），只留标题 ⇒ 读起来是一份目录，
   而不是四张「表格」。卡片压到 44px，四块加起来仍比原来矮一半。 */
@media (min-width: 883px) {
  body.home .tb-sidebar-h > .widget[data-dph-blk="xinzhi"] .post-site,
  body.home .tb-sidebar-h > .widget[data-dph-blk="siwei"] .post-site,
  body.home .tb-sidebar-h > .widget[data-dph-blk="jiaoyan"] .post-site,
  body.home .tb-sidebar-h > .widget[data-dph-blk="dise"] .post-site {
    outline: none;
    background: transparent;
    min-height: 0;
  }
  body.home .tb-sidebar-h > .widget[data-dph-blk="xinzhi"] .post-site::before,
  body.home .tb-sidebar-h > .widget[data-dph-blk="siwei"] .post-site::before,
  body.home .tb-sidebar-h > .widget[data-dph-blk="jiaoyan"] .post-site::before,
  body.home .tb-sidebar-h > .widget[data-dph-blk="dise"] .post-site::before {
    display: none;
  }
  body.home .tb-sidebar-h > .widget[data-dph-blk="xinzhi"] .post-site .tb-thumb,
  body.home .tb-sidebar-h > .widget[data-dph-blk="siwei"] .post-site .tb-thumb,
  body.home .tb-sidebar-h > .widget[data-dph-blk="jiaoyan"] .post-site .tb-thumb,
  body.home .tb-sidebar-h > .widget[data-dph-blk="dise"] .post-site .tb-thumb {
    display: none;
  }
  body.home .tb-sidebar-h > .widget[data-dph-blk="xinzhi"] .post-site .p-t-w,
  body.home .tb-sidebar-h > .widget[data-dph-blk="siwei"] .post-site .p-t-w,
  body.home .tb-sidebar-h > .widget[data-dph-blk="jiaoyan"] .post-site .p-t-w,
  body.home .tb-sidebar-h > .widget[data-dph-blk="dise"] .post-site .p-t-w {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    min-height: 0;
    font-weight: 500;
  }
  body.home .tb-sidebar-h > .widget[data-dph-blk="xinzhi"] .post-site .info-wraper,
  body.home .tb-sidebar-h > .widget[data-dph-blk="siwei"] .post-site .info-wraper,
  body.home .tb-sidebar-h > .widget[data-dph-blk="jiaoyan"] .post-site .info-wraper,
  body.home .tb-sidebar-h > .widget[data-dph-blk="dise"] .post-site .info-wraper {
    padding: 8px 4px 26px;
  }
  /* 四块标题降一级：它们是「目录分组名」，不是并列主块 */
  body.home .tb-sidebar-h > .widget[data-dph-blk="xinzhi"] > .tb-title,
  body.home .tb-sidebar-h > .widget[data-dph-blk="siwei"] > .tb-title,
  body.home .tb-sidebar-h > .widget[data-dph-blk="jiaoyan"] > .tb-title,
  body.home .tb-sidebar-h > .widget[data-dph-blk="dise"] > .tb-title {
    margin-bottom: 2px;
  }
  body.home .tb-sidebar-h > .widget[data-dph-blk="xinzhi"],
  body.home .tb-sidebar-h > .widget[data-dph-blk="siwei"],
  body.home .tb-sidebar-h > .widget[data-dph-blk="jiaoyan"],
  body.home .tb-sidebar-h > .widget[data-dph-blk="dise"] {
    margin-bottom: 6px;
  }
}

/* ---------- 4. 辅档压高 + 清占位图 ----------
   改前卡片 143px = 45px 内容 + 19.5px 摘要 + padding + 31px 标签行。
   摘要一去掉，卡片变 120px 但内容还是那 45px ⇒ 中段空出一大块。
   压到 88px：45px 内容 + 26px 底部内边距（给 -metas 的 18px 高 + 8px 内距）。

   另：商业实战 / 投资理财的缩略图全部是 default-thumb.jpg（320×200 灰底占位），
   缩到 32px 就是一个模糊灰点，纯属视觉噪音 ⇒ 隐藏，改纯文字卡。
   它们与「认知基础四块」仍有区别：本档标题 2 行 + 分类标签，那四块是单行目录。 */
@media (min-width: 883px) {
  body.home .tb-sidebar-h > .widget[data-dph-blk="wangzhi"] .post-site,
  body.home .tb-sidebar-h > .widget[data-dph-blk="ai"] .post-site,
  body.home .tb-sidebar-h > .widget[data-dph-blk="shangye"] .post-site,
  body.home .tb-sidebar-h > .widget[data-dph-blk="licai"] .post-site {
    min-height: 88px;
  }
  body.home .tb-sidebar-h > .widget[data-dph-blk="wangzhi"] .post-site .info-wraper,
  body.home .tb-sidebar-h > .widget[data-dph-blk="ai"] .post-site .info-wraper,
  body.home .tb-sidebar-h > .widget[data-dph-blk="shangye"] .post-site .info-wraper,
  body.home .tb-sidebar-h > .widget[data-dph-blk="licai"] .post-site .info-wraper {
    padding: 11px 10px 26px;
  }
  body.home .tb-sidebar-h > .widget[data-dph-blk="shangye"] .post-site .tb-thumb,
  body.home .tb-sidebar-h > .widget[data-dph-blk="licai"] .post-site .tb-thumb {
    display: none;
  }
}

/* ---------- 5. 护住「3 列区间」的孤卡 ----------
   实况：tushuo / shangye / licai 三块配 count=6，但 dph-ui.css 的
   `.bnm-5,.bnm-6,.bnm-7 li:nth-child(n+5){display:none}` 让它们**恒显 4 条**（既有设计，不动）。
   而主题在 883–1158 与 1227–1360 两个区间给的是 3 列 ⇒ 4 张排出「3+1」，
   末行只剩 1 张，是改前就存在的刺眼处（不是本次引入）。
   处置：就这两个区间把这三块提到 4 列，4 张正好一行满。
   其余区间本就有 4/5/6 列，4 张不会落单，不动。 */
@media (min-width: 883px) and (max-width: 1158px),
       (min-width: 1227px) and (max-width: 1360px) {
  body.home .tb-sidebar-h > .widget[data-dph-blk="tushuo"] .post-list > li,
  body.home .tb-sidebar-h > .widget[data-dph-blk="shangye"] .post-list > li,
  body.home .tb-sidebar-h > .widget[data-dph-blk="licai"] .post-list > li {
    width: calc(25% - 12px);
  }
}

/* ---------- 6. hero「直达入口」行：补齐 1280 档 ----------
   dph-ui.css §10d（2026-10-13）已修过这个症状 ——「投资理财孤行」，
   但只写了 `@media (min-width: 1300px)`。而 1280×800 是笔记本最常见分辨率，
   区间 883–1299 没覆盖：主题在 1280 给 `.menu-hot` 宽 80%（≈816px），
   而 11 个胶囊实需 ≈800px，正好卡在边界 ⇒ 折行，末行只剩「学习地图」一个。
   （胶囊从 10 个涨到 11 个是菜单重构时新增了「商业实战/工具/投资理财/学习地图」）
   药：同一条 fit-content 规则下延到 883；max-width 100% 兜底，真放不下时回落换行，
       不会横向溢出。 */
@media (min-width: 883px) and (max-width: 1299px) {
  .menu-hot { width: fit-content; max-width: 100%; }
}

/* ---------- 7. 区块呼吸：柱与柱之间拉开 ----------
   改前九块等距，没有段落感。三大柱（认知 / AI / 商业理财）之间加分隔距离，
   让「认知 → AI → 商业理财」在滚动时读得出换柱。 */
@media (min-width: 883px) {
  body.home .tb-sidebar-h > .widget[data-dph-blk="ai"],
  body.home .tb-sidebar-h > .widget[data-dph-blk="shangye"] {
    margin-top: 34px;
  }
}