/* ============================================================================
 * clib-skin-growth-v1.css — 换皮 · 成长页「苹果语言」第一刀（设计线 · 2026-10-15）
 * ----------------------------------------------------------------------------
 * 依据：兄弟「把平台做成苹果官网的效果 · 一切都要有秩序 · 要有惊喜」
 *      原型 notes/项目资料/设计/20261015-全站苹果语言-多页原型/growth.html
 *      口径：CTO 2026-10-15 答复 —— 动效走「纯 CSS，不引 GSAP」；实心按钮按
 *            「改外观、不删元素」执行，验收同时给「DOM 按钮总数」与「视觉实心数」两个数。
 * 范围：**只作用 #page-growth**，且**只在 ≥901px 生效**（移动端保持原样）。
 * 只做什么：间距与节奏、层级与主次、字号令牌对齐、每张卡片的呼吸。
 * 不做什么：**不删任何元素/按钮/数据行、不改任何文案、不改既有令牌值、不碰 CSP、
 *           不碰生成物 JS**（成长页结构由脚本渲染，本文件只覆写外观）。
 * 唯一回退点：删掉 index.html 里指向本文件的那一行 <link>。
 * ========================================================================== */

@media (min-width: 901px) {

  /* ── 1 · 版心与节奏：一屏一个主张，段落之间用 24 而不是现在的巨大空档 ───── */
  #page-growth .v17-growth-wrap {
    max-width: 1080px;   /* 2026-10-15 CTO 撤回：站点统一层 site-unify.css 已用 --page-max(+!important) 定为 1400，这行本就不生效，按最小改动原则还原原值 */
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;                     /* clib-ui 间距阶梯：4/8/12/16/24/32/48/64 */
  }
  #page-growth .v17-growth-wrap > * { margin-top: 0 !important; margin-bottom: 0 !important; }

  /* ── 2 · 首屏（等级 + 打卡）：379px → 收紧到 ~260px，信息一条线读完 ───── */
  #page-growth .p9-hero { padding: 24px !important; }
  #page-growth .p9-hero-top { margin-bottom: 8px !important; }
  #page-growth .p9-hero-bar { margin: 12px 0 !important; }
  #page-growth .p9-hero-foot { margin-top: 8px !important; }
  #page-growth .p9-road { margin: 16px 0 0 !important; gap: 12px !important; }
  #page-growth .p9-checkin-bar { margin-top: 16px !important; padding: 12px 16px !important; }

  /* ── 3 · Bento：统一四列网格（含既有 p9-span2 语义），空隙 16 ─────────── */
  #page-growth .p9-bento {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #page-growth .p9-bento > * { margin: 0 !important; }
  #page-growth .p9-bento .p9-span2 { grid-column: span 2; }
  #page-growth .p9-bento .p9-span-full { grid-column: 1 / -1; }

  /* ── 4 · 卡片呼吸：上下 > 左右（clib-ui：中文行高更高，约 1.2 比 1） ──── */
  #page-growth .p9-card,
  #page-growth .p9-rules-card,
  #page-growth .jp-card,
  #page-growth .rl-entry { padding: 24px 24px 20px !important; }
  #page-growth .p9-card-h,
  #page-growth .lp-h,
  #page-growth .rl-entry__t,
  #page-growth .growth-page-head { margin: 0 0 12px !important; }
  #page-growth .growth-page-head { padding: 12px 0 !important; }

  /* ── 5 · 主操作唯一：页内 7 个实心 → 只留「今日打卡」一个实心 ──────────── */
  /* 降级的是**外观**：元素、onclick、文案全部保留（红线：不得减少功能按钮） */
  #page-growth .rl-entry__acts button,
  #page-growth .fc-cta button,
  #page-growth .lp-cta button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    color: #4F6BED !important;             /* 品牌主色（规范值，非自造） */
    font-weight: 400 !important;
  }
  #page-growth .rl-entry__acts button:hover,
  #page-growth .fc-cta button:hover,
  #page-growth .lp-cta button:hover { text-decoration: underline; background: transparent !important; }

  /* ── 6 · 唯一的一条动效：卡片悬停微抬 2px（180ms）───────────────────────
   * 为什么：成长页信息块多，抬 2px 是最短的"可点/可读到这里"的反馈；
   * 频率低（悬停才有），不打断阅读。━━ 下面 reduced-motion 段落整体关掉。 */
  #page-growth .p9-card,
  #page-growth .jp-card,
  #page-growth .rl-entry {
    transition: transform 180ms cubic-bezier(.2, .7, .2, 1);
  }
  #page-growth .p9-card:hover,
  #page-growth .jp-card:hover,
  #page-growth .rl-entry:hover { transform: translateY(-2px); }

  /* ── 7 · 空态三段式：说明在上、出口在下，别让 CTA 顶到文字中间 ─────────── */
  #page-growth .fc-empty,
  #page-growth .lp-empty { margin-bottom: 12px !important; }
  #page-growth .fc-cta,
  #page-growth .lp-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

  /* ── 8 · 结构收拢（第二刀）：把 bento 以外竖排堆叠的卡片并进同一张网格 ─────
   * 依据：CTO C6 复核——"外观降级做到了，但结构没动：卡片 17 原封不动"。
   * 做法：只改**排布**（grid 落位），不改任何内容、不删任何块。
   * 量到的直接子块：① 复盘库 133px ② 大头(head+hero+bento) 1711px ③ 专业度卡 237px ④ 学习计划 225px
   * 收益：①③④ 由竖排 595px → 并排后取最高者 237px（-358px 结构高度）。 */
  #page-growth .v17-growth-wrap {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
  }
  #page-growth .v17-growth-wrap > div:has(> .rl-entry),
  #page-growth .v17-growth-wrap > div:first-child { grid-column: span 2; }
  #page-growth .v17-growth-wrap > .p9-card.p9-span-full { grid-column: span 2; }
  #page-growth .v17-growth-wrap > .jp-card { grid-column: span 2; }
  /* 大头（含 bento）保持整行；用 :not 排除已定位的三个块，避免 nth 依赖 */
  #page-growth .v17-growth-wrap > div:not(:has(> .rl-entry)):not(.p9-card):not(.jp-card) { grid-column: 1 / -1; }
  /* 并排后卡片自身高度自适应，空隙统一 16 */
  #page-growth .v17-growth-wrap > * { margin: 0 !important; }

  /* ── 9 · 卡片内边距再收一档（上下 18 > 左右 16，保持 clib-ui 的 1.2 比 1）── */
  #page-growth .p9-bento > .p9-card,
  #page-growth .p9-card.p9-span-full,
  #page-growth .jp-card,
  #page-growth .p9-rules-card { padding: 18px 16px !important; }
  #page-growth .p9-card-h { margin: 0 0 8px !important; }
  #page-growth .p9-road { margin-top: 12px !important; }
  #page-growth .p9-hero { padding: 20px !important; }
  #page-growth .p9-checkin-bar { padding: 10px 14px !important; }

  /* ── 10 · 治"同行硬拉齐"的大片空白（CTO 三条新目标里优先级最高的一条）─────
   * 病灶（实测）：卡3「成长值」内容仅 ~86px 却被同行拉到 352px；卡5「进行中」同病。
   * 治法（纯排布，不动内容）：
   *   a) align-items:start —— 卡片高由自身内容决定，不再被同行拉伸；
   *   b) 按"高的挨高的、矮的挨矮的"重排格子（order），把两张矮卡凑成一行。
   * 实测高度：进度352 · 雷达352 · 成长值86(内容) · 案例墙229 · 进行中94(内容) · 徽章322
   *   重排后三行 = [进度+雷达]=352 · [徽章+案例墙]=322 · [成长值+进行中]=94  ⇒ bento 935 → ~800
   */
  /* 注意：这些卡由 JS 渲染并带内联 style，故必须 !important 才能压过内联声明 */
  #page-growth .p9-bento { align-items: start !important; }
  #page-growth .p9-bento > :nth-child(1) { order: 1 !important; grid-column: span 2 !important; }   /* 学习进度总览 */
  #page-growth .p9-bento > :nth-child(2) { order: 2 !important; grid-column: span 2 !important; }   /* 技能雷达 */
  /* 成就徽章：半宽（span2）实测最优——整行会让整页更高（实测 2688 > 2556），故保留半宽 */
  #page-growth .p9-bento > :nth-child(6) { order: 3 !important; grid-column: span 2 !important; }   /* 成就徽章 */
  #page-growth .p9-bento > :nth-child(4) { order: 4 !important; grid-column: span 2 !important; }   /* 我的案例墙 */
  #page-growth .p9-bento > :nth-child(3) { order: 5 !important; grid-column: span 2 !important; }   /* 成长值 */
  #page-growth .p9-bento > :nth-child(5) { order: 6 !important; grid-column: span 2 !important; }   /* 进行中项目 */

  /* ── 11 · 等比缩小撑高的内容件（不裁断、不消失、文案不动）──────────────── */
  /* 雷达图：266 → 200（等比缩放，标签与文字完整保留） */
  #page-growth .p9-bento > :nth-child(2) svg { max-height: 200px !important; height: auto !important; }
  /* 徽章格：118 → 收内部留白与图标尺寸（格与格数一个不少，仍是 9 格）*/
  #page-growth .v17-badge-cell { padding: 10px 12px !important; }
  #page-growth .v17-badge-cell svg,
  #page-growth .v17-badge-cell img,
  #page-growth .v17-badge-cell canvas { max-height: 44px !important; height: auto !important; }
  /* 证书卡：150 → 收内部留白与图标尺寸（两张都在，内容不裁断）*/
  #page-growth .p9-cert { padding: 12px !important; }
  #page-growth .p9-cert svg,
  #page-growth .p9-cert img { max-height: 64px !important; height: auto !important; }

  /* ── 12 · 成就徽章 9 格：3×3 → 5+4（CTO 批的 B 项）─────────────────────
   * 依据：第三刀实测——不治徽章则总高净收益 ≈0（徽章 322→412 把省的吃掉）。
   * 约束（CTO 四条）：①9 格一个不能少 ②格内文字不许裁 ③可点则热区≥44×44 ④给前后对照。
   * 实测前提：格子是 <div> 且 **不可点**（无 onclick、cursor:auto）⇒ 约束③不适用（已量证）。
   * 做法：只把 flex 换成 5 列网格；每格变宽（152 → ~260），文字更不会裁断。
   */
  #page-growth .p9-badges {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  #page-growth .p9-badges > * { width: auto !important; }
}

/* 动效遵从系统偏好：用户要求减少动效时全部关闭（clib-ui 硬禁令第 10 条） */
@media (prefers-reduced-motion: reduce) {
  #page-growth .p9-card,
  #page-growth .jp-card,
  #page-growth .rl-entry { transition: none !important; }
  #page-growth .p9-card:hover,
  #page-growth .jp-card:hover,
  #page-growth .rl-entry:hover { transform: none !important; }
}