/**
 * 板块顶部 banner（hero）视觉升级 —— 2026-09-15 · 开发员13号（第 2 版）
 *
 * ── 第 1 版走错了路（用户退回：「还不如升级之前的好看，起码是 LOGO 主图色」）──
 * 我上一版把底换成了深炭黑 + 一点光晕，以为"深色 = 高级"。
 * 结果是把整站的**品牌识别度抹掉了** —— 页面顶部本来是品牌色大块，
 * 改完变成一片黑，反而不像一个正经产品。教训：**"高级"≠"深色"**，
 * 品牌色是资产，不能为了"看起来克制"就丢掉。
 *
 * ── 本版思路：底子还是原来的品牌色/板块色，只把「质感」和「排版」做精 ──
 *   ① 三层背景：顶部柔和高光（模拟顶光）+ 右上同色系光斑 + 主渐变 → 从"平铺色块"变成"有光泽的面"
 *   ② 1px 白色内描边 → 边缘有一道精致亮线（原来没有）
 *   ③ 阴影改成"带方向、更收敛"的品牌色投影（原来是 0 10px 26px 的大面积晕开，显脏）
 *   ④ 排版：改左对齐、字号字重收敛（36→23px / 900→800）、用透明度拉层级
 *   ⑤ slogan：纯白胶囊 → 半透明玻璃标签（不再抢焦点）
 *   ⑥ 去掉三个绝对定位乱飞的 emoji（保留 HTML 节点，不动结构）
 *
 * 为什么单独一个文件：style.css 有 437KB、是同事改动最频繁的文件。
 * 新样式单独成表、在 index.html 里**排在 style.css 之后**加载，
 * 靠「同特异性 → 后出现者胜出」整体覆盖，做到零改 style.css、零改 HTML。
 *
 * ⚠️ 本文件注释内禁止出现「星号紧跟斜杠」的序列，那会提前结束注释。
 * ⚠️ 兜底变量必须写在 base 规则内、板块规则之前 —— 同特异性下后出现者胜出，
 *    写在板块之后会把所有板块的颜色刷成同一个（第 1 版就踩过这个坑）。
 */

/* ---------------------------------------------------- 尺寸基准（全局） */

/* ⚠️ 必须定义在 :root —— banner(.hero) 和头牌大卡(.combo-card) 都要用，
   而大卡不在 .hero 内部、继承不到定义在 .hero 上的变量。
   **同一断点内，banner 与所有头牌大卡必须等大**（用户 2026-09-15 要求）。
     手机 170px = **平衡点**：banner 内容（大标题 + 副标题）约占 50% → 不空；
                 大卡靠「描述最多 2 行 + 九宫格那张的流程按钮排成一行」压到这个高度，
                 并留 ~10px 余量（不同设备字体渲染有差异，顶格容易被撑破）。
     平板 178 / 桌面 189：大屏文字不折行，banner 就是最高元素，取它的自然高度。
   ⚠️ 手机端 200 → 170 的来由（2026-09-15 用户决策）：
     200 时 banner 内容只占 40%，用户嫌「太空旷」；但再降到 160 大卡就顶格没余量。
     170 是「banner 不空」与「大卡不挤」的折中 —— 用户原话：「找个平衡点」。
   实测工具：tools/measure-hero.cjs（banner）、tools/measure-combo.cjs（大卡）。 */
:root { --hero-min: 170px; }

/* ---------------------------------------------------------------- 底座 */

.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 22px;
  padding: 24px 20px 22px;
  margin-bottom: 16px;
  color: #fff;
  /* 用户 2026-09-15 要求：banner 文字改成**居中**（原来是左对齐）。
     flex column 下子元素默认 stretch（占满整行），所以这里 text-align 就能让
     title / sub 的文字居中；胶囊类（slogan）另外用 align-self 控制。 */
  text-align: center;
  /* 边缘一道细亮线：这是"精致感"最省成本的一招 */
  border: 1px solid rgba(255, 255, 255, 0.20);

  /* ── 尺寸统一：四个板块的 banner 必须一样大 ──
     实测（tools/measure-hero.cjs，三断点）：宽度本来就全一致（=功能网格宽），
     但高度不一致 —— 首页 banner 多一个 slogan、标题也大一号，比另外三个板块高 40px。
     这里用「内容垂直居中 + min-height 兜底」把四个板块拉齐：
     有 slogan 的板块自然撑满，没 slogan 的板块居中留白，视觉尺寸完全一致。
     ⚠️ --hero-min 的来源 = 首页 banner 的**自然高度**（含 slogan）。
     若调整了 padding / 字号 / 行高，必须重新实测这三个值，否则这里的留白会失配。 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--hero-min);

  /* 默认配色 = 品牌橙（兜底，写在板块规则之前） */
  --c1: #ffa95e;
  --c2: #f95901;
  --c3: #cc3500;
  --spot: rgba(255, 232, 190, 0.55);
  --glow: rgba(249, 89, 1, 0.45);

  /* 三层叠加：顶光 → 右上光斑 → 主渐变。
     顺序就是图层顺序，第一层在最上。 */
  background-image:
    radial-gradient(122% 78% at 50% -26%, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 56%),
    radial-gradient(70% 58% at 92% 4%, var(--spot) 0%, rgba(255, 255, 255, 0) 64%),
    linear-gradient(155deg, var(--c1) 0%, var(--c2) 52%, var(--c3) 100%);

  /* 阴影：带品牌色、带方向、范围收敛 —— 不是原来那种四面晕开的大糊影 */
  box-shadow:
    0 16px 34px -14px var(--glow),
    0 2px 6px rgba(90, 45, 10, 0.06);
}

/* ------------------------------------------------- 各板块配色（只换色，不换结构） */

/* 首页主 banner：品牌橙，直接取自 LOGO 主色系 */
.hero-home {
  --c1: #ffa95e;
  --c2: #f95901;
  --c3: #cc3500;
  --spot: rgba(255, 236, 198, 0.55);
  --glow: rgba(249, 89, 1, 0.45);
}

/* 文案：蓝 */
.hero-copy {
  --c1: #7ab2ff;
  --c2: #3b7bff;
  --c3: #1f47cf;
  --spot: rgba(214, 233, 255, 0.50);
  --glow: rgba(59, 123, 255, 0.42);
}

/* 图片：紫 */
.hero-image {
  --c1: #c79cff;
  --c2: #8b5cf6;
  --c3: #6127d6;
  --spot: rgba(236, 222, 255, 0.50);
  --glow: rgba(139, 92, 246, 0.42);
}

/* 视频：玫红 */
.hero-video {
  --c1: #ff94ae;
  --c2: #f9445e;
  --c3: #cc1a45;
  --spot: rgba(255, 220, 232, 0.50);
  --glow: rgba(249, 68, 94, 0.42);
}

/* 代理后台：深红 */
.hero-agent,
.oem-hero {
  --c1: #dc5f5f;
  --c2: #b81f1f;
  --c3: #7d0f0f;
  --spot: rgba(255, 214, 214, 0.42);
  --glow: rgba(170, 30, 30, 0.40);
}

/* ---------------------------------------------------------------- 文字 */

.hero .hero-title {
  /* 四个板块一个规格：原来子页板块比首页小一号（23 vs 26），
     并排切着看会觉得子页的 banner"单薄/窄"，这里统一到首页字号。
     ⚠️ 2026-09-15 二次调整：删掉首页 slogan 后，banner 只剩两行字、200px 里太空旷
     （内容仅占 31%）→ 字号整体做大（26 → 34），把版面"撑"起来。 */
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.24;
  /* 极淡的投影只为可读性，不是原来那种 0 2px 8px 的"土味立体字" */
  text-shadow: 0 1px 2px rgba(120, 40, 0, 0.14);
}

.hero .hero-sub {
  /* 间距从 7 拉到 18：内容少的时候，靠"呼吸感"把版面撑开，而不是堆元素 */
  margin-top: 18px;
  /* ⚠️ 字号有上限：副标题最长 22 字（「种草 · 口播 · 标题 一键生成，爆款结构直接套用」），
     手机端可用宽 ~318px → 超过 ~14px 就会换行，而且会断出「…直接套 / 用」这种孤字行（很难看）。
     13.5px 是保证 22 字单行的安全值；平板/桌面上限宽松，用下面的 @media 放大。 */
  font-size: 13.5px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.2px;
  opacity: 1;
  color: rgba(255, 255, 255, 0.86);
}

/* slogan：原来是「纯白底 + 橙色字」的实心胶囊，像颗按钮、抢焦点。
   改成半透明玻璃标签 —— 信息还在，但不再跟标题抢。 */
.hero .hero-slogan,
.hero .hero-slogan.red {
  display: inline-block;
  /* ⚠️ .hero 是 flex 容器后，inline-block 子元素会被"块化"（撑满整行）→
     胶囊会变成一条通栏横条。用 align-self 让它保持「收缩到内容宽度」。
     值用 center = 跟着 banner 的居中排版走（原为 flex-start 的左对齐排版）。 */
  align-self: center;
  max-width: 100%;
  margin-top: 11px;
  padding: 4px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.30);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.hero .hero-time {
  font-size: 11.5px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------------- 去掉首页的 slogan */

/* 首页 banner 的「就是现在！」—— 用户 2026-09-15 要求去掉。
   用 display:none 隐藏而**不删 HTML 节点**：不动结构 = 与同事的改动零冲突，
   将来想恢复只需删掉这一条规则。
   ⚠️ 必须用 `#view-ops` 限定作用域：代理后台的 hero 也是 `.hero-home`
   （实际类名 `.hero-home.oem-hero`），按类隐藏会连带把它的
   slogan「拿货 / 推荐 / 提现」一起干掉。 */
#view-ops .hero-slogan { display: none; }

/* ------------------------------------- 去掉首页的「短视频 IP 策划」大卡 */

/* 用户 2026-09-15 要求：把首页顶部这张头牌大卡去掉。
   ⚠️ 只隐藏**这张大卡**（`.combo-card.ip-entry`）；下方「运营工具」网格里的同名功能卡
      （`.func-card[data-action="ipplan"]`）**保留不动** —— 功能入口还在，`sub-ipplan` 子页
      与 `app.js` 的 `case 'ipplan'` 也全部保留。
   与 slogan 同样用 display:none 而非删节点：不动结构 = 与同事的改动零冲突，
   将来想恢复只需删掉这条规则。
   （已核对：`app.js` 是按 `.func-card, .quick-item, .combo-card` 批量绑点击的，与具体卡片无关。） */
#view-ops .combo-card.ip-entry { display: none; }

/* ---------------------------------------------------------------- 去装饰 */

/* 三个绝对定位、半透明、带模糊的 emoji —— 这是"廉价感"的主要来源。
   直接隐藏，但**不动 HTML**（保留节点，避免与同事的改动打架）。 */
.hero-deco { display: none; }

/* ================================================================
   头牌大卡（.combo-card）— 尺寸与 banner 完全对齐
   ================================================================
   用户要求：「这些尺寸都要跟 banner 尺寸一致」（箭头指向各板块的头牌大卡）。

   实测（tools/measure-combo.cjs，三断点）：
     手机   banner 160 ｜ 大卡 190~210   ← 描述换行 3~4 行把卡撑高
     平板   banner 178 ｜ 大卡 154~170   ← 反而比 banner 矮
     桌面   banner 189 ｜ 大卡 150~170
   宽度本来就一致（都 = 容器宽）；差异全在「高」和「圆角」（banner 22px / 大卡 18~20px）。

   两条腿一起走：
   ① min-height = --hero-min ＋ 内容垂直居中 → 大屏自动长到与 banner 等高
   ② 内边距/间距统一收紧 → 各卡的自然高度收敛到同一档（手机端最高的那张决定基准）
   基准值见文件顶部 :root 的说明。
   ================================================================ */

.combo-card,
.combo-card.ip-entry,
.combo-card.em-entry,
.combo-card.hk-entry,
.combo-card.od-entry,
.combo-card.mv-entry {
  box-sizing: border-box;
  min-height: var(--hero-min);
  /* 圆角对齐 banner（原来是 18 / 20px） */
  border-radius: 22px;
  /* 内边距统一（原来 ip/em = 18/16、hk/od/mv = 17/15，各板块不一） */
  padding: 14px 16px 13px;
  /* 卡被 min-height 撑高后，让内容（含右侧图标）在卡内垂直居中，避免上紧下空 */
  align-items: center;
}

/* 手机端：描述最多 2 行（-webkit-line-clamp）。
   大卡原本 3~4 行描述会把卡撑到 190~210，比 160 的 banner 高 30~50 ——
   用户 2026-09-15 拍板选择「宁可截断描述，也要 banner 不空旷」，所以这里截 2 行。
   ⚠️ 代价：部分转化文案会被省略（例如「传一张照片 → 9 张专属表情贴纸：自动配台词、
      可抠透明底，一键存相册」只剩前两句）。**若日后要恢复完整描述，
      必须同步把 --hero-min 抬回 200**，否则卡会被文字撑高、与 banner 对不齐。
   平板/桌面描述本来就只 1~2 行，此规则无影响。 */
.combo-card [class$="-entry-sub"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 间距统一收紧（把各卡压到同一高度，同时让卡片更紧凑） */
.combo-card [class$="-entry-tag"] { margin-bottom: 7px; }
.combo-card [class$="-entry-sub"] { margin-top: 5px; }
.combo-card [class$="-entry-flow"] { margin-top: 9px; }

/* ---------------------------------------------------------------- 大屏 */

@media (min-width: 768px) {
  :root { --hero-min: 178px; }
  .hero { padding: 30px 26px 28px; border-radius: 24px; }
  .hero .hero-title { font-size: 38px; }
  .hero .hero-sub { font-size: 16px; }
}

@media (min-width: 1024px) {
  :root { --hero-min: 189px; }
  .hero { padding: 34px 30px 32px; margin-bottom: 20px; }
  .hero .hero-title { font-size: 42px; }
  .hero .hero-sub { font-size: 16.5px; }
}

/* ------------------------------------------------- 手机端：大卡内部收紧 */

/* 「九宫格表情包」那张卡的流程按钮条有 4 个（上传照片 / 选主题 / 生成九宫格 / 存相册），
   原本总宽 ~245px + 分隔符，在 222px 的可用宽里**必然折成两行** → 卡片被撑到 190px，
   比 170 的基准高出 20，怎么都对齐不了。
   这里把按钮/间距/右侧表情网格各收一档，让它排成一行 → 卡片回落到基准高度。
   （实测：收紧后按钮条 ~239px < 可用宽 252px，留 13px 余量。） */
@media (max-width: 767px) {
  .combo-card.em-entry .em-entry-art { width: 62px; height: 62px; }
  .combo-card.em-entry .em-entry-art i { font-size: 13px; }
  /* 按钮文字保持 10px（再小就影响可读），靠"收内边距 + 收间距"腾出宽度 */
  .combo-card.em-entry .em-entry-flow { gap: 2px; }
  .combo-card.em-entry .em-entry-flow span { font-size: 10px; padding: 2px 5px; }
  .combo-card.em-entry .em-entry-flow i { font-size: 8px; }
}