/* ============================================================================
 * layout.css — 布局层：容器、区块骨架、栅格、Bento、阅读宽度
 * ----------------------------------------------------------------------------
 * 依赖：tokens.css、base.css
 * 原则：本层只决定「位置与尺寸」，不决定「颜色与装饰」。
 *       任何带背景色/边框的选择器都属于越界，应下沉到 components 层。
 * ==========================================================================*/

@layer layout {

  /* --------------------------------------------------------------------------
   * 1. 主内容容器
   * ------------------------------------------------------------------------*/
  .shell {
    width: var(--shell);
    margin-inline: auto;
  }

  .shell--narrow { width: var(--shell-narrow); }
  .shell--full { width: 100%; }

  /* 移动端收窄侧向留白：96px 在窄屏上占比过高 */
  @media (max-width: 1024px) {
    :root {
      --shell: min(100% - 48px, 1440px);
      --shell-narrow: min(100% - 48px, 1080px);
    }
  }

  @media (max-width: 600px) {
    :root {
      --shell: calc(100% - 32px);
      --shell-narrow: calc(100% - 32px);
    }
  }

  /* --------------------------------------------------------------------------
   * 2. 区块（section）
   * ------------------------------------------------------------------------*/
  .section {
    position: relative;
    padding-block: var(--section-y);
    /* 锚点避让统一由 html{scroll-padding-top}（base.css）负责：
       此处若再叠加 scroll-margin-top，落点偏移会被计算两次 */
  }

  .section--tight { padding-block: var(--section-y-sm); }
  .section--flush { padding-block: 0; }

  /* 区块之间的分隔：以细线代替大留白，压缩纵向长度 */
  .section + .section--ruled::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--shell);
    height: 1px;
    background: var(--line);
    transform: translateX(-50%);
  }

  /* --------------------------------------------------------------------------
   * 3. 区块头部（眉标 + 标题 + 说明 + 侧行动作）
   * ------------------------------------------------------------------------*/
  .section-head {
    display: grid;
    gap: var(--sp-4);
    margin-bottom: clamp(var(--sp-8), 4vw, var(--sp-16));
  }

  /* 宽屏时标题居左、导语与动作居右，形成不对称张力，避免整站居中排版；
     右列加宽至 1.45fr：容纳导语 +「查看更多」同行不换行（实测需要约 593px） */
  @media (min-width: 1024px) {
    .section-head {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
      align-items: end;
      gap: var(--sp-12);
    }

    .section-head--center {
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      text-align: center;
    }
  }

  .section-head__title {
    margin: 0;
    max-width: 22ch;
  }

  /* 侧栏导语与「查看更多」在宽屏下同行水平排布，不换行 */
  .section-head__aside {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--sp-6);
  }

  /* 窄屏放不下整行文案，回退为纵向堆叠、导语自然换行 */
  @media (max-width: 1023px) {
    .section-head__aside {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--sp-5);
    }

    .section-head__aside:has(.section-head__more) .section-head__lead {
      white-space: normal;
    }
  }

  .section-head__lead {
    max-width: 52ch;
    color: var(--text-2);
    font-size: var(--fs-md);
  }

  /* 仅当侧栏含「查看更多」链接时导语保持单行，与链接同行排布；
     纯导语侧栏仍按 52ch 自然换行，避免长文案溢出网格列 */
  .section-head__aside:has(.section-head__more) .section-head__lead {
    white-space: nowrap;
    max-width: none;
  }

  /* 链接不参与收缩，防止被长导语挤压换行；margin-left:auto 保持原先贴右列右缘对齐 */
  .section-head__more {
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: auto;
  }

  /* 单行排布时去掉导语下边距，避免 flex 居中按 margin box 计算造成垂直偏差 */
  .section-head__aside:has(.section-head__more) .section-head__lead {
    margin-bottom: 0;
  }

  /* --------------------------------------------------------------------------
   * 4. 通用栅格
   * ------------------------------------------------------------------------*/
  .grid {
    display: grid;
    gap: var(--gap-grid);
  }

  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

  /* 自适应列：卡片宽度不低于 260px，用于数量不定的列表 */
  .grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  }

  /* 逐级降列：桌面列数在窄屏按 3 → 2 → 1 收敛 */
  @media (max-width: 1024px) {
    .grid--4, .grid--5, .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media (max-width: 768px) {
    .grid--3, .grid--4, .grid--5, .grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (max-width: 520px) {
    .grid--2, .grid--3, .grid--4, .grid--5, .grid--6 {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* --------------------------------------------------------------------------
   * 5. Bento 布局
   * ----------------------------------------------------------------------------
   * 竞品首页普遍存在的短板：等分卡片矩阵造成"单调、无重点"。Bento 以
   * 12 列不等跨度建立视觉主次，让核心能力获得 2 倍权重。
   * 子项通过 --col / --row 自定义属性声明跨度，未声明时默认 4 列 1 行。
   * ------------------------------------------------------------------------*/
  .bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    auto-rows: minmax(var(--bento-row, auto), auto);
    gap: var(--gap-grid);
  }

  .bento > * {
    grid-column: span var(--col, 4);
    grid-row: span var(--row, 1);
    min-width: 0;
  }

  /* 平板：12 列退化为 6 列，跨度按比例折半并保证最小 2 */
  @media (max-width: 1024px) {
    .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .bento > * { grid-column: span min(6, max(2, round(down, var(--col, 4) / 2))); }
  }

  /* 手机：全部拉平为单列，跨度声明不再参与布局 */
  @media (max-width: 768px) {
    .bento { grid-template-columns: minmax(0, 1fr); }
    .bento > * { grid-column: 1 / -1; grid-row: auto; }
  }

  /* --------------------------------------------------------------------------
   * 6. 弹性行
   * ------------------------------------------------------------------------*/
  .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
  }

  .row--between { justify-content: space-between; }
  .row--start { align-items: flex-start; }
  .row--end { justify-content: flex-end; }
  .row--tight { gap: var(--sp-2); }

  .stack {
    display: grid;
    gap: var(--sp-4);
  }

  .stack--tight { gap: var(--sp-2); }
  .stack--loose { gap: var(--sp-8); }

  /* --------------------------------------------------------------------------
   * 7. 分栏（图文并置）
   * ------------------------------------------------------------------------*/
  .split {
    display: grid;
    gap: clamp(var(--sp-8), 4vw + var(--sp-4), var(--sp-20));
    align-items: center;
  }

  @media (min-width: 1024px) {
    .split { grid-template-columns: var(--split-cols, minmax(0, 1fr) minmax(0, 1fr)); }
    .split--reverse .split__media { order: -1; }
  }

  @media (max-width: 1023px) {
    /* 移动端默认让配图先行，与阅读顺序一致 */
    .split--reverse { direction: rtl; }
    .split--reverse > * { direction: ltr; }
  }

  /* --------------------------------------------------------------------------
   * 8. 阅读宽度
   * ----------------------------------------------------------------------------
   * 长文（新闻正文、企业简介）单行字符数控制在 38–75ch，超出会显著降低
   * 中文可读性。所有富文本容器统一走 .prose，禁止逐页手写 max-width。
   * ------------------------------------------------------------------------*/
  .prose {
    max-width: 68ch;
    color: var(--text-2);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
  }

  .prose > * + * { margin-top: var(--sp-5); }
  .prose h3 { margin-top: var(--sp-10); color: var(--text-1); }
  .prose img { margin-inline: auto; }

  /* --------------------------------------------------------------------------
   * 9. 粘性侧栏（内页目录 / 筛选器）
   * ------------------------------------------------------------------------*/
  .sticky-col {
    position: sticky;
    top: var(--scroll-offset);
    align-self: start;
  }

  /* --------------------------------------------------------------------------
   * 10. 溢出滚动轨道（横向案例条 / 标签条）
   * ----------------------------------------------------------------------------
   * 用原生滚动而非 JS 轮播：移动端手势自然、无需额外脚本、可被键盘操作。
   * ------------------------------------------------------------------------*/
  .rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 42%);
    gap: var(--gap-grid);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding-block-end: var(--sp-5);
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .rail > * {
    scroll-snap-align: start;
    min-width: 0;
  }

  .rail::-webkit-scrollbar { height: 6px; }
  .rail::-webkit-scrollbar-track { background: transparent; }
  .rail::-webkit-scrollbar-thumb {
    background: var(--slate-200);
    border-radius: var(--r-pill);
  }

  /* 手机：轨道项拉满宽度，避免"露半张卡"造成的误触 */
  @media (max-width: 768px) {
    .rail {
      grid-auto-columns: minmax(78%, 1fr);
      margin-inline: calc(50% - var(--shell) / 2 * -1);
      padding-inline: max(var(--gutter), calc(50vw - var(--shell) / 2));
      width: 100vw;
      justify-self: stretch;
    }
  }
}