/* ==========================================================================
   理嘉 · 布局层
   --------------------------------------------------------------------------
   对应：视觉规范 §5.1（间距）· §5.2（容器与栅格）· §7（11 种区块节奏模板）
        信息架构 §6.1（断点）· §6.2（移动端重组）· §6.4（DOM 顺序 = 视觉顺序）

   ★ 最重要的一条（视觉规范 §7「节奏规则」/ 附录第 5 条）：
     **每个区块自带它的 padding 与底色，不允许在父级用 space-y / gap 统一管。**
     区块节奏是设计决策，交给工具类的默认行为就会破功。

   ★ 全出血（full-bleed）的实现：区块本身就是 <section>，是块级元素，
     背景色天然铺满视口宽度。**不要写 width: 100vw**——100vw 包含滚动条宽度，
     会在有纵向滚动条的桌面浏览器上产生横向滚动。所有区块宽度保持 auto。

   ★ 断点三档，不新增：≥1024（桌面）/ 768–1023（平板）/ <768（移动）。
     1024–1279 不设断点，只让容器随视口收缩——这一区间没有任何列数变化。
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

@layer layout {
  /* ══════════════════════════════════════════════════════════════════════
     容器与文本栏｜视觉规范 §5.2「三档宽度，只能选一档，不得自定义」
     用法约定（全站唯一一种写法，不要混用第二种）：
       <section class="band-xxx">          ← 负责底色 + 纵向 padding + 全出血
         <div class="container">           ← 负责 1280 上限 + gutter
           <div class="measure">…</div>    ← 需要长文/单栏时再套一层
         </div>
       </section>
     ══════════════════════════════════════════════════════════════════════ */
  .container {
    /* 1280 标准容器。gutter 随断点变化，见文件末尾。 */
    width: min(calc(100% - var(--lj-gutter) * 2), var(--lj-container));
    margin-inline: auto;
  }

  /* 680 文本栏：长段正文、引述。中文正文单行 30–36 字（680 ÷ 19 ≈ 35.8）。
     默认左对齐——这是视觉规范 §7 对类型 1 / 3 的要求，不是疏漏。 */
  .measure {
    max-width: var(--lj-measure);
  }

  /* 560 窄栏：单列说明、/contact/。中文正文单行 ≈29 字。 */
  .measure--narrow {
    max-width: var(--lj-measure-narrow);
  }

  /* 居中变体：只给类型 8（引述）与类型 10（页尾 CTA）。 */
  .measure--center {
    margin-inline: auto;
  }

  /* 12 栏栅格｜视觉规范 §5.2。列间距 24（desktop）/ 16（mobile）。 */
  .grid-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--lj-grid-gap);
    row-gap: var(--lj-gap-paragraph);
  }

  /* 卡片列布局：类型 5（3–4 列 → 2 列 → 1 列）与类型 9（3 列 → 1 列）。
     移动端卡片间距 24｜信息架构 §6.2「B4 卡片间距 24」。 */
  .grid-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }

  .grid-cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ══════════════════════════════════════════════════════════════════════
     11 种区块类型｜视觉规范 §7 表格逐行落地
     每个类 = 底色 + 上下 padding（桌面值；平板 / 移动在文件末尾折算）
     ══════════════════════════════════════════════════════════════════════ */

  /* ── 类型 1｜首屏 canvas 128 / 96 ─────────────────────────────────── */
  .band-hero {
    background-color: var(--lj-canvas);
    padding-block: 128px 96px;
  }

  /* 内页页头 = 类型 1 的降级变体：h1 40 / zh-h1 32 替换 display-hero，
     padding 96 / 64｜视觉规范 §7「三个按端分叉的细则」。**不新增区块类型。** */
  .band-hero--inner {
    padding-block: 96px 64px;
  }

  /* ── 类型 2｜信任条 canvas + 上下 hairline 48 / 48 ─────────────────── *
     本交付**未启用**（无可公开客户 logo，信息架构 §3.10）。
     保留类定义，客户提供 ≥6 个可授权 logo 后直接插入 B1 与 B2 之间；
     届时 B2 之后的底色序列需重排。 */
  .band-trust {
    background-color: var(--lj-canvas);
    padding-block: 48px;
    border-block: 1px solid var(--lj-border-hairline);
  }

  /* ── 类型 3｜论点区 canvas 96 / 96 ─────────────────────────────────── */
  .band-argument {
    background-color: var(--lj-canvas);
    padding-block: 96px;
  }

  /* T2 留白变体｜视觉规范 §8 T2：上 160 / 下 128，留白必须**不对称**。
     ★ 全站最多 3 个区块使用 160 档，否则整页会拖沓。本交付未启用，保留备用。 */
  .band-argument--deep {
    padding-block: 160px 128px;
  }

  /* ── 类型 4｜全出血深色视觉区 #000000 128 / 128 ────────────────────── *
     用 --lj-surface-black（#000000），**不是** #141413：
     视觉规范 §7 永久禁止「用 #141413 做全出血区块底」，#141413 只给页脚与深色区内的卡片。 */
  .band-dark {
    background-color: var(--lj-surface-black);
    color: var(--lj-canvas-on-dark);
    padding-block: 128px;
  }

  /* ── 类型 5｜能力 / 服务卡片区 surface 全出血 band 96 / 96 ─────────── */
  .band-cards {
    background-color: var(--lj-surface);
    padding-block: 96px;
  }

  /* ── 类型 6｜数据条 canvas + 上下 hairline 64 / 64 ─────────────────── *
     条件启用：客户提供 ≥3 个可核实数字后插在 B5 之后（首页变 9 块，
     需重算底色连续重复）。本交付未启用。 */
  .band-stats {
    background-color: var(--lj-canvas);
    padding-block: 64px;
    border-block: 1px solid var(--lj-border-hairline);
  }

  /* ── 类型 7｜案例 / 能力详述 canvas 1280 左右交替 96 / 96 ──────────── */
  .band-detail {
    background-color: var(--lj-canvas);
    padding-block: 96px;
  }

  /* 变量：/approach/ 三步详述放在 surface band 上（信息架构 §5.3 第 3 位）。
     底色是布局属性，所以用变体类表达，而不是内联 style。 */
  .band-detail--surface {
    background-color: var(--lj-surface);
  }

  /* ── 类型 8｜引述 surface-warm 全出血 band 96 / 96 ─────────────────── */
  .band-quote {
    background-color: var(--lj-surface-warm);
    color: var(--lj-ink);
    padding-block: 96px;
  }

  /* ── 类型 9｜列表 canvas 1280 3 列 96 / 96 ─────────────────────────── */
  .band-list {
    background-color: var(--lj-canvas);
    padding-block: 96px;
  }

  /* 变量：/about/ 团队区块在 surface band 上（信息架构 §5.4 第 3 位）。 */
  .band-list--surface {
    background-color: var(--lj-surface);
  }

  /* ── 类型 10｜页尾 CTA #000000 全出血 128 / 128 居中 ───────────────── *
     与页脚同为深色，读作一个 merged 收尾区，两者靠 128 → 96 的 padding 落差区分，
     **不加分隔线**｜视觉规范 §7 第 10 / 11 位 + 信息架构 §3 首页底色序列。 */
  .band-cta {
    background-color: var(--lj-surface-black);
    color: var(--lj-canvas-on-dark);
    padding-block: 128px;
    text-align: center;
  }

  /* ── 类型 11｜页脚 #141413 全出血 96 / 48 ──────────────────────────── */
  .site-footer {
    background-color: var(--lj-surface-dark);
    color: var(--lj-text-on-dark);
    padding-block: 96px 48px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     类型 7 的左右交替｜信息架构 §6.4「DOM 顺序 = 视觉顺序」硬约束
     ----------------------------------------------------------------------
     ★ 只能靠 grid-template-columns 的**列位置**实现。
       **禁止** flex-direction: row-reverse、order: n、grid-row 反转。
       DOM 顺序固定为「视觉件 → 标题 → 正文 → 链接」，
       这样移动端降为单列时天然是「图在上、文字在下」，无需任何重排。
     ★ 交替只发生在 ≥768px；<768px 全部单列，顺序不变。
     ══════════════════════════════════════════════════════════════════════ */
  .detail-list {
    display: grid;
    row-gap: 96px;
  }

  .detail {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--lj-grid-gap);
    align-items: center;
  }

  /* 奇数行：视觉件在左（第 1–5 栏），文字在右（第 7–12 栏） */
  .detail__visual {
    grid-column: 1 / span 5;
    grid-row: 1;
  }

  .detail__body {
    grid-column: 7 / span 6;
    grid-row: 1;
  }

  /* 类型 7 组内的行间节奏：眉标 → 标题 12（由 .eyebrow 自带），
     标题 → 正文 16，正文 → 独立链接 24。 */
  .detail__body .zh-h3 + .prose,
  .detail__body .zh-h2 + .prose {
    margin-block-start: 16px;
  }

  .detail__link {
    margin-block-start: 24px;
  }

  /* /approach/ 三条判断的锚点长文｜信息架构 §5.3 第 4 位
     「类型 9 卡片 + 卡片下方的锚点段落」——长文只需要文本栏约束，不需要新类型。
     ★ scroll-margin-top 88px（导航 72 + 16）：不加的话 /approach/#judgment-01
       的标题会被吸顶导航盖住｜信息架构 §1.3 / §7.4-5。 */
  .anchor-block {
    max-width: var(--lj-measure);
    scroll-margin-top: var(--lj-scroll-margin);
  }

  .anchor-block .zh-h3 + .prose {
    margin-block-start: 16px;
  }

  .anchor-block + .anchor-block {
    margin-block-start: 48px;
  }

  .grid-cards + .anchor-block {
    margin-block-start: 48px;
  }

  /* 偶数行：文字在左（第 1–6 栏），视觉件在右（第 8–12 栏） */
  .detail:nth-child(even) .detail__visual {
    grid-column: 8 / span 5;
  }

  .detail:nth-child(even) .detail__body {
    grid-column: 1 / span 6;
  }

  /* 视觉件（State 0）｜视觉规范 §8「T3 第 7 位视觉件的无素材做法（具体到数值）」
     surface-warm 色块 + 左上 56px 编号 + 左下 ≤6 字场景名。
     视觉重量与 4/5 摄影接近，且**不需要任何素材，不是占位框**。
     ⚠ 禁止出现虚线框 / 图标 +「待补充」这类图片占位形态（§7 永久禁止）。

     选色判据（IA §3 B5）：① 与所在 band 相对亮度差 ≥ 0.09；② 两者不得同属暖麦色系。
       canvas(0.947) + #e3dacc(0.708) → 差 0.238 ✓、canvas 非暖麦 ✓
       surface(0.854) + #e3dacc → 差 0.146 过线，但同属暖麦 ✗ → 必须改用 #faf9f5
     所以 /approach/ 的三步详述（在 surface band 上）用 .visual-plate--on-surface。 */
  .visual-plate {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;   /* 编号在左上、场景名在左下 */
    align-items: flex-start;
    aspect-ratio: 4 / 5;              /* 桌面 / 平板：竖构图 */
    padding: 32px;                    /* §8 T3：距边 32px */
    background-color: var(--lj-surface-warm);
    border-radius: var(--lj-radius-lg);   /* 16，与卡片配图同值 */
    overflow: hidden;
  }

  /* /approach/ 的三步视觉件在 surface band 上，改用 card-feature 的白底。
     判据见上方注释：warm 与 surface 同属暖麦色系，叠上去读作「脏了一块」。 */
  .visual-plate--on-surface {
    background-color: var(--lj-canvas);
    border: 1px solid var(--lj-border-hairline);
  }

  /* 编号：number-stat 56px / 600 / Inter tnum / #141413。
     Clay 不做数字色｜视觉规范 §2.7 第 18 项。 */
  .visual-plate__num {
    color: var(--lj-ink);
  }

  /* 场景名：一行 ≤6 字，zh-h3 21px 宋体 500 / #141413｜§8 T3 表。
     注意它属于论述层（21px ≥ 19px），所以页面里用 .zh-h3 而不是 .zh-body-sm。 */
  .visual-plate__label {
    color: var(--lj-ink);
  }

  /* T4 极细线构成｜视觉规范 §8 T4
     线宽恒 1px 不随屏幕缩放；浅底 #d1cfc5 / #e6e3d8，深底 #3d3d3a。
     网格密度上限：单区块竖向分栏线 ≤ 4 条，横向通线 ≤ 3 条。
     **禁止用线围合成封闭盒子**（会立刻变成数据表）。 */
  .ruled {
    --rule-color: var(--lj-border-hairline);
    border-block-start: 1px solid var(--rule-color);
  }

  .on-dark .ruled,
  .band-dark .ruled,
  .band-cta .ruled,
  .site-footer .ruled {
    --rule-color: var(--lj-border-on-dark);
  }

  /* T4 的竖向装饰线：dark 区块里唯一允许的 Clay 图形（§7 State 0 第 4 条）。
     ★ 尺寸按 DECISIONS V22 判形态：本条**独占一行**（下方 margin 40px，不与文字并排），
       属"独立竖线"，区间 2 × 48–64px，取**下限 48px**——B3 标题是 38px，48px 约 1.26 倍字高，
       到"比字高"这个读作书签的临界；取 64px 会把视线从标题上拉走。
       视觉规范 §7 落点表写的 48–64px 与本条一致，V10 早期写的 24–32px 是"前置短线"形态，不适用。 */
  .clay-rule {
    display: block;
    width: 2px;
    height: 48px;
    background-color: var(--lj-accent);
    border-radius: 0;
  }

  /* ══════════════════════════════════════════════════════════════════════
     区块内部节奏｜视觉规范 §5.1
     ----------------------------------------------------------------------
     写法说明：**不加任何间距工具类**，用「区块类 + 既有元素类」的相邻兄弟
     选择器表达。这样间距属于区块定义的一部分（跟着区块走），
     HTML 里也不会出现 class="mt-6" 一类无法 review 的堆叠。
     三段值：标题 → 正文 24；正文 → 按钮组 32；页尾 CTA 的按钮组 40。
     ══════════════════════════════════════════════════════════════════════ */
  .band-hero .prose,
  .band-hero--inner .prose {
    margin-block-start: var(--lj-gap-paragraph);
  }

  .band-hero .hero-actions,
  .band-hero .btn-group {
    margin-block-start: 32px;
  }

  .band-argument .prose {
    margin-block-start: var(--lj-gap-paragraph);
  }

  .band-dark .prose {
    margin-block-start: var(--lj-gap-paragraph);
  }

  /* T4 极细线构成｜dark 区块必须叠一条几何结构，否则读作「空色块」
     （视觉规范 §7 State 0 第 5 条）。这里用：1 条横向通线 + 1 条 2px Clay 竖线。
     网格密度上限是横线 ≤3、竖线 ≤4，此处远低于上限。 */
  .band-dark__inner {
    border-block-start: 1px solid var(--lj-border-on-dark);
    padding-block-start: 48px;
  }

  .band-dark .clay-rule {
    margin-block-end: 40px;
  }

  .band-cta .prose {
    margin-block-start: var(--lj-gap-paragraph);
  }

  .band-cta .btn-group {
    margin-block-start: 40px;
    justify-content: center;   /* 类型 10 是居中收束区 */
  }

  /* 类型 5 / 类型 9 的卡区：区块标题组之后留 48（已由 .section-head 承担），
     卡片内部间距由卡片自己负责，这里只补列间距之外的组间距。 */
  .grid-cards + .grid-cards {
    margin-block-start: 24px;
  }

  /* ══════════════════════════════════════════════════════════════════════
     断点内折算
     ----------------------------------------------------------------------
     规范只给了「常规档 96 / 72 / 56」与「首屏·页尾档 128 / 96 / 64」两组三档值。
     其余按同比例折算，并在注释里标出，便于核对：
       类型 2（48）→ 平板 40 / 移动 32   （×0.85 / ×0.67）
       类型 6（64）→ 平板 56 / 移动 48   （×0.875 / ×0.75）
       类型 7 组间距（96）→ 平板 72 / 移动 48
     这三处为折算值，已记入 README「待裁决 D-5」，如有正式值以正式值为准。
     ══════════════════════════════════════════════════════════════════════ */
  @media (max-width: 1023px) {
    :root {
      --lj-gutter: 24px;   /* tablet 仍是 24｜信息架构 §6.1 容器 100% − 48 */
      --lj-grid-gap: 16px;
    }

    .band-hero { padding-block: 96px 72px; }
    .band-hero--inner { padding-block: 72px 56px; }
    .band-argument { padding-block: 72px; }
    .band-argument--deep { padding-block: 128px 96px; }
    .band-dark { padding-block: 96px; }
    .band-cards { padding-block: 72px; }
    .band-detail { padding-block: 72px; }
    .band-quote { padding-block: 72px; }
    .band-list { padding-block: 72px; }
    .band-cta { padding-block: 96px; }
    .site-footer { padding-block: 72px 40px; }
    .band-trust { padding-block: 40px; }
    .band-stats { padding-block: 56px; }

    /* 类型 5 与类型 9：3 列 → 2 列｜信息架构 §6.1 */
    .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .detail-list { row-gap: 72px; }
  }

  @media (max-width: 767px) {
    :root {
      --lj-gutter: 20px;   /* mobile 容器 100% − 40｜信息架构 §6.1 */
      --lj-grid-gap: 16px;
    }

    .band-hero { padding-block: 64px 56px; }        /* B1：128/96 → 64/56 */
    .band-hero--inner { padding-block: 56px 48px; }
    .band-argument,
    .band-argument--deep { padding-block: 56px; }
    .band-dark { padding-block: 96px; }             /* B3：128 → 96 */
    .band-cards { padding-block: 56px; }
    .band-detail { padding-block: 56px; }
    .band-quote { padding-block: 56px; }
    .band-list { padding-block: 56px; }
    .band-cta { padding-block: 64px; }              /* B8：128 → 64 */
    .site-footer { padding-block: 56px 32px; }
    .band-trust { padding-block: 32px; }
    .band-stats { padding-block: 48px; }

    /* 全部单列｜信息架构 §6.2 */
    .grid-cards,
    .grid-cards--2 { grid-template-columns: minmax(0, 1fr); }

    .grid-12 { grid-template-columns: minmax(0, 1fr); }

    /* 类型 7 降为单列：视觉件在上、文字在下，顺序不变。
       ★ 视觉件的 aspect-ratio 4/5 → 16/9：4/5 在 375px 宽下高约 419px，
         加 padding 后占掉近一屏，会把文字挤出首屏｜信息架构 §6.2 / §7.2-1 */
    .detail-list { row-gap: 48px; }

    .detail {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 24px;
    }

    .detail__visual,
    .detail__body,
    .detail:nth-child(even) .detail__visual,
    .detail:nth-child(even) .detail__body {
      grid-column: 1 / -1;
      grid-row: auto;
    }

    .visual-plate {
      aspect-ratio: 16 / 9;
      padding: var(--lj-pad-card-mobile);
    }
  }
}