/**
 * ==========================================================================
 * 海纳云仓 — 全局自适应网页布局规范 (Layout System)
 * ==========================================================================
 *
 * 设计基准视口：1920px（27 寸常见宽屏）
 * 所有 vw 数值 = 设计稿像素值 ÷ 1920 × 100
 *
 * 核心概念：
 *   page-wrap     — 全屏根容器，100% 宽 + max 1920px + 左右 padding
 *   page-inner    — 内容区（与 .container 等价），不再重复加 padding
 *   section-bleed — 全宽出血区块（Banner/Hero 背景铺满视口）
 *   vw 字号       — 窗口拉宽/收窄时文字等比缩放
 *
 * 使用顺序：layout-system.css → style.css → pages.css
 * ==========================================================================
 */

/* --------------------------------------------------------------------------
   1. 设计令牌（Design Tokens）— 全部基于 vw，1920px 基准
   -------------------------------------------------------------------------- */
:root {
  /* --- 页面宽度 --- */
  --page-max-width: 1920px;           /* 超大屏内容上限，防止 27 寸+ 无限拉伸 */

  /*
   * 全局左右内边距：120px @ 1920px → 120/1920*100 = 6.25vw
   * 窗口变窄时 padding 同比缩小；768px 以下改用更大 vw 系数保证窄屏可读边距
   */
  --page-padding-x: 6.25vw;

  /* --- 字号（vw）@ 1920 设计稿 --- */
  --fs-display:    3.333vw;  /* 64px — 超大展示数字/水印 */
  --fs-h1:         2.708vw;  /* 52px — 一级标题 / Hero */
  --fs-h2:         1.875vw;  /* 36px — 二级标题 / 区块标题 */
  --fs-h3:         1.146vw;  /* 22px — 三级标题 / 卡片标题 */
  --fs-body:       0.833vw;  /* 16px — 正文 */
  --fs-small:      0.729vw;  /* 14px — 辅助说明 */
  --fs-caption:    0.625vw;  /* 12px — 注释/版权 */

  /*
   * 区块统一上下间距 — 全站唯一控制点（改此处即可全局生效）
   * 2000px 视口 ≈ 180px（9vw）；随窗口缩小等比缩减；上限 180px
   * 窄屏（≤767px）固定 20px
   */
  --section-spacing-y: clamp(20px, 9vw, 180px);

  /* 别名，向后兼容旧引用 */
  --section-py:    var(--section-spacing-y);
  --section-py-lg: var(--section-spacing-y);

  --section-gap:   2.5vw;    /* 48px — 区块内元素间距 */
  --stack-sm:      0.833vw;  /* 16px */
  --stack-md:      1.667vw;  /* 32px */
  --stack-lg:      3.333vw;  /* 64px */

  /* --- 圆角 / 边框（vw，微缩放）--- */
  --radius-sm:     0.208vw;  /* 4px */
  --radius-md:     0.417vw;  /* 8px */
  --radius-lg:     0.625vw;  /* 12px */

  /* 兼容旧变量名（style.css 等模块可继续引用） */
  --max-w: var(--page-max-width);
  --fs-base: var(--fs-body);
  --fs-large-num: var(--fs-display);
}

/* --------------------------------------------------------------------------
   2. 窄屏适配 — 仍使用 vw，仅调整系数（非 px 硬编码）
   逻辑：小屏同样等比缩放，但提高 vw 系数避免文字过小
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    /* 375px 宽时约 20px 边距 */
    --page-padding-x: 5.333vw;

    --fs-display:    10.667vw; /* ~40px @ 375 */
    --fs-h1:         8.533vw;  /* ~32px @ 375 */
    --fs-h2:         6.4vw;    /* ~24px @ 375 */
    --fs-h3:         4.8vw;    /* ~18px @ 375 */
    --fs-body:       4.267vw;  /* ~16px @ 375 */
    --fs-small:      3.733vw;  /* ~14px @ 375 */
    --fs-caption:    3.2vw;    /* ~12px @ 375 */

    --section-spacing-y: 20px;
    --section-gap:   5.333vw;
    --stack-sm:      4.267vw;
    --stack-md:      6.4vw;
    --stack-lg:      10.667vw;
  }
}

/* 平板：介于手机与桌面之间，沿用桌面 vw 或略放大 */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --page-padding-x: 5vw; /* ~38px @ 768 */
  }
}

/* --------------------------------------------------------------------------
   3. 根容器 page-wrap — 全屏外层 DIV
   width: 100% 铺满；max-width 限制超宽屏；padding-inline 全局统一边距
   -------------------------------------------------------------------------- */
.page-wrap {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-padding-x);
  box-sizing: border-box;
}

/*
 * content-rail — 纯内容栏（max 1920 + 左右边距），用于全宽 section 内部。
 * page-wrap — 整页文档型内页（about/news 等）的外层；勿用来包裹 Banner / 全宽色块。
 */

/* 视口级全宽外壳（可选：包在 page-wrap 外层，占满 100vw 背景） */
.page-shell {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

/* 主内容区 */
.page-main {
  display: block;
  width: 100%;
}

.content-rail {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-padding-x);
  box-sizing: border-box;
}

/* 首页：全宽色带 + 内层固定宽度内容 */
.home-section {
  width: 100vw;
  max-width: 100%;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-block: var(--section-spacing-y);
  box-sizing: border-box;
  border-top: 1px solid #e4e8ef;
}

.home-section:first-child {
  border-top: none;
}

.page-main--home,
.page-main--inner {
  width: 100%;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   4. page-inner — 内容列（无额外 padding，宽度 100% 继承 page-wrap 内容区）
   .container 为历史别名，全局统一指向同一规则
   -------------------------------------------------------------------------- */
.page-inner,
.container {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   5. section-bleed — 全宽出血（Hero/Banner 背景铺满浏览器，内容仍对齐 page-inner）
   原理：负 margin 抵消 page-wrap 的 padding，再补回内部 padding 对齐文字
   -------------------------------------------------------------------------- */
.section-bleed {
  width: calc(100% + 2 * var(--page-padding-x));
  max-width: 100vw;
  margin-inline: calc(-1 * var(--page-padding-x));
  box-sizing: border-box;
}

/* 出血区块内的内容仍与全局左对齐 */
.section-bleed > .page-inner,
.section-bleed > .container {
  padding-inline: var(--page-padding-x);
  max-width: var(--page-max-width);
  margin-inline: auto;
}

/* 固定顶栏/页脚：全宽背景 + 内部与 page-wrap 同宽同 padding */
.layout-bar {
  width: 100%;
  box-sizing: border-box;
}

.layout-bar__inner {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-padding-x);
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   6. 全局排版 — 元素默认继承 vw 字号，随窗口缩放
   -------------------------------------------------------------------------- */
html {
  font-size: var(--fs-body);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: var(--fs-body);
  line-height: 1.6;
}

h1, .text-h1 {
  font-size: var(--fs-h1);
  line-height: 1.25;
  font-weight: 800;
}

h2, .text-h2 {
  font-size: var(--fs-h2);
  line-height: 1.3;
  font-weight: 800;
}

h3, .text-h3 {
  font-size: var(--fs-h3);
  line-height: 1.4;
  font-weight: 700;
}

p, .text-body {
  font-size: var(--fs-body);
  line-height: 1.7;
}

.text-small {
  font-size: var(--fs-small);
}

.text-caption {
  font-size: var(--fs-caption);
}

.text-display {
  font-size: var(--fs-display);
  line-height: 1;
  font-weight: 900;
}

/* 区块标准垂直间距 */
.section-block {
  padding-block: var(--section-spacing-y);
  width: 100%;
}

.section-block__head {
  margin-bottom: var(--section-gap);
}

.section-block__head .eyebrow {
  font-size: var(--fs-small);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: var(--stack-sm);
}

/* --------------------------------------------------------------------------
   7. 间距工具类 — 全局复用（margin/padding 均用 vw）
   -------------------------------------------------------------------------- */
.gap-section { gap: var(--section-gap); }
.gap-stack-sm { gap: var(--stack-sm); }
.gap-stack-md { gap: var(--stack-md); }
.gap-stack-lg { gap: var(--stack-lg); }

.py-section { padding-block: var(--section-spacing-y); }
.pt-section { padding-top: var(--section-spacing-y); }
.pb-section { padding-bottom: var(--section-spacing-y); }

.mb-section { margin-bottom: var(--section-gap); }
.mb-stack-sm { margin-bottom: var(--stack-sm); }
.mb-stack-md { margin-bottom: var(--stack-md); }

/* --------------------------------------------------------------------------
   8. 栅格 — 简单响应式列（子项随容器缩放）
   -------------------------------------------------------------------------- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--section-gap);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--section-gap);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--section-gap);
}

@media (max-width: 1023px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   9. 对齐与隐藏
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.text-left { text-align: left; }

@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}