/* ============================================================================
 * 运营板块头牌大卡「短视频 IP 策划」· 独立样式表
 * 2026-09-19 开发员19号
 * ----------------------------------------------------------------------------
 * 用户原话：「运营板块里，哪个功能它不带 banner？没有 banner 介绍的，你根据这个功能
 *            的内容，写出引眼球的文案且搭配上颜色醒目的 banner」
 *            （与同事做视频板块 funcbanner.css 时是同一句话，同一把尺子）
 *
 * 🔍 排查结果（运营板块 15 个功能 / 15 个子页，逐页量过底色）：
 *    15 个子页**全部已有彩色横幅**（gz-hero / ip-hero / ht-hero / tp-hero / em-hero /
 *    ac-hero / bw-hero / pc-intro / ad-hero / vr-banner / ir-banner / bd-banner / xh-hero /
 *    wn-hero）—— 所以"没有 banner"的不是子页，而是**板块首屏**：
 *
 *    · 「短视频 IP 策划」的头牌大卡**在 DOM 里内容齐全（tag/名称/副标/流程四件套），
 *      却被 hero.css:231 的 `#view-ops .combo-card.ip-entry { display: none }` 隐藏** ——
 *      那是用户 2026-09-15 要求去掉的。结果：运营板块首屏只剩「九宫格表情包」一张 banner，
 *      IP 策划落单成网格里的一个小图标。
 *
 * 本文件做三件事（**不改 hero.css / style.css / index.html 之外的任何文件**）：
 *   ① 解除隐藏（放在本文件而不是删 hero.css 那条规则 —— 站内惯例：改别人的样式用
 *      "新建独立 css、排在它之后加载"，同特异性后者胜。hero.css 里那条规则原注释也写着
 *      "将来想恢复只需删掉这一条"）
 *   ② 换一套**醒目**的新配色：翠绿（色相 152°）
 *      · 与上方橙色 hero（25°）相差 127°、与下方「九宫格表情包」玫红紫（320°）相差 168°
 *        → 上下都拉开，是这张卡能被一眼看到的前提
 *      · 全站五张头牌大卡原本占的色相是 270/320/40/185/20 —— **152° 是没人用的**
 *   ③ 补上**视觉主体**：旧卡只放了一个 emoji 🎬（技能 chanmai-promo-entry-card 铁律 3
 *      明写"必须有自己的视觉主体，不能只放 emoji"）→ 改成「一沓写好的方案纸 + 绿色对勾」，
 *      一眼看懂"交到你手上的是成品"，与「照着拍」的文案互相咬合。
 *
 * 🔴 硬约束
 *   ① 类名前缀 `ip-art-` 全局唯一（写前已 grep 全站：0 处占用）
 *   ② 自带底色，不依赖任何主题变量
 *   ③ 含 absolute 装饰 → 容器必须 position: relative（漏了会撑宽 document，
 *      手机端整页被缩成 77%，站内踩过的老坑）
 *   ④ 副标题手机端只有 236px 宽（约 2 行 / 38 字）→ 文案写长会把卡顶高、
 *      破坏「头牌大卡 == hero 等高」这条铁律（实测 170/178/189）
 * ========================================================================== */

/* ---------------- ① 解除隐藏（hero.css:231 的 display:none 在这里被覆盖） ---------------- */
#view-ops .combo-card.ip-entry { display: flex; }

/* ---------------- ② 醒目新配色：翠绿 152° ---------------- */
.combo-card.ip-entry {
  background: linear-gradient(118deg, #032a1c 0%, #0a5c38 44%, #13b063 100%);
  box-shadow: 0 12px 28px rgba(5, 74, 45, .44);
}
.ip-entry-glow {
  background: radial-gradient(circle, rgba(122, 255, 186, .36), transparent 68%);
}
.ip-entry-tag {
  color: #a9f7cd; border: 1px solid rgba(112, 240, 176, .44); background: rgba(64, 224, 148, .15);
}
.ip-entry-sub b {
  color: #fff; font-weight: 800;
  white-space: nowrap;   /* 「九章方案照着拍」不能断行 —— 实测会在「九 / 章」之间断，很难看 */
}
.ip-entry-flow span { color: #d4ffe9; }

/* 缓缓扫过的一道柔光（移动端最划算的高级感来源，只动 transform/opacity） */
.combo-card.ip-entry::after {
  content: ''; position: absolute; top: -60%; left: -34%; width: 30%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15), transparent);
  transform: rotate(16deg); pointer-events: none;
  animation: ipEntryShine 6.5s ease-in-out infinite;
}
@keyframes ipEntryShine {
  0%, 58%   { left: -34%; opacity: 0; }
  66%       { opacity: 1; }
  86%, 100% { left: 116%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .combo-card.ip-entry::after { animation: none; opacity: 0; }
}

/* 桌面端 hover 用自己的强调色投影，别继承 .combo-card 的品牌橙 */
.combo-card.ip-entry:hover { box-shadow: 0 16px 32px rgba(5, 74, 45, .58); }

/* ---------------- ③ 视觉主体：一沓方案纸 + 绿色对勾 ---------------- */
.ip-entry-art {
  position: relative;                 /* 🔴 硬约束 ③ */
  flex: 0 0 auto; align-self: center; margin-left: 12px;
  width: 62px; height: 72px;
}
.ip-art-sheet { position: absolute; border-radius: 8px; }
/* 后面那张：只露一角，表示"不止一份" */
.ip-art-sheet.s2 {
  left: 7px; top: 7px; width: 100%; height: 100%;
  background: linear-gradient(150deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .14));
  border: 1px solid rgba(255, 255, 255, .24);
}
/* 前面那张：白纸 + 章节横线，右下角一个绿色对勾（"已交付成品"） */
.ip-art-sheet.s1 {
  left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box;
  padding: 8px 9px; display: flex; flex-direction: column; gap: 5px;
  background: linear-gradient(162deg, #ffffff 0%, #e9fff4 100%);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .30);
}
.ip-art-bar { display: block; height: 4px; border-radius: 2px; background: rgba(6, 76, 46, .28); }
.ip-art-bar.b1 { width: 80%; background: rgba(6, 76, 46, .62); }
.ip-art-bar.b2 { width: 56%; }
.ip-art-bar.b3 { width: 70%; }
.ip-art-bar.b4 { width: 38%; }
.ip-art-check {
  position: absolute; right: -7px; bottom: -7px;
  width: 21px; height: 21px; border-radius: 50%;
  background: linear-gradient(140deg, #8bffc4, #14c46c);
  color: #03301e; font-size: 11.5px; font-weight: 800; line-height: 21px; text-align: center;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .32);
}

/* ---------------- ④ 窄屏：art 收窄，给文字让位 ---------------- */
@media (max-width: 380px) {
  .ip-entry-art { width: 54px; height: 64px; margin-left: 9px; }
  .ip-art-sheet.s1 { padding: 7px 8px; gap: 4px; }
  .ip-art-bar { height: 3.5px; }
  .ip-entry-name { font-size: 18px; }
}