/* Project-specific responsive rules derived from the selected Figma frame. */
:root {
  --wuling-container-max-width: 1440px;
  --wuling-content-max-width: 1280px;
  --wuling-container-gutter: 24px;
  /* Models 三列在 1920px 设计稿下的基准宽度，窄屏按视口比例收缩。 */
  --wuling-models-cats-width: 360px;
  --wuling-models-list-width: 600px;
  --wuling-models-panel-pad: 80px;
  --wuling-models-row-height: 72px;
  /* Models 右侧参数区参考 Chery 的 rem 逻辑：以 1920px 为基准连续缩放。 */
  --wuling-models-feature-body-gap: clamp(12px, 1.25vw, 27.6px);
  --wuling-models-feature-body-pad-top: clamp(8px, 0.833333vw, 18.4px);
  --wuling-models-feature-body-pad-x: clamp(20px, 2.083333vw, 46px);
  --wuling-models-feature-body-pad-bottom: clamp(20px, 2.083333vw, 46px);
  --wuling-models-feature-stats-row-gap: clamp(8px, 0.833333vw, 18.4px);
  --wuling-models-feature-stats-column-gap: clamp(40px, 4.166667vw, 92px);
  --wuling-models-feature-stat-gap: clamp(4px, 0.364583vw, 8.05px);
  --wuling-models-feature-stat-size: clamp(20px, 2.083333vw, 46px);
  --wuling-models-feature-label-size: clamp(8px, 0.833333vw, 18.4px);
  --wuling-models-feature-action-size: clamp(10px, 1.041667vw, 23px);
  --wuling-models-feature-action-gap: clamp(8px, 0.833333vw, 18.4px);
  --wuling-models-feature-action-pad-y: clamp(8px, 0.833333vw, 18.4px);
  --wuling-models-feature-action-pad-x: clamp(12px, 1.25vw, 27.6px);
  --wuling-models-feature-action-tracking: clamp(1px, 0.104167vw, 2.3px);
  --wuling-models-feature-arrow-width: clamp(18px, 1.822917vw, 40.25px);
  --wuling-models-feature-arrow-height: clamp(5px, 0.46875vw, 10.35px);
  /* 桌面导航二级菜单与语言面板：保留卡片宽度，收紧字号、行高和内边距。 */
  --wuling-subnav-panel-row: clamp(48px, 3.125vw, 60px);
  --wuling-subnav-panel-row-first: clamp(52px, 3.333333vw, 64px);
  --wuling-subnav-panel-pad-y: clamp(10px, 0.625vw, 12px);
  --wuling-subnav-panel-pad-x: clamp(20px, 2.083333vw, 40px);
  --wuling-subnav-panel-size: clamp(16px, 1.041667vw, 20px);
  --wuling-subnav-panel-line: 1.3;
  --wuling-lang-current-row: clamp(52px, 3.333333vw, 64px);
  --wuling-lang-current-size: clamp(18px, 1.145833vw, 22px);
  --wuling-lang-current-line: 1.3;
  --wuling-lang-check-size: clamp(24px, 1.5625vw, 30px);
  --wuling-lang-other-size: clamp(11px, 0.677083vw, 13px);

  /* 1920px is the reference frame; ultra-wide screens may scale modestly. */
  --wuling-font-scale: 0.86;
  --hz-font-scale: var(--wuling-font-scale);

  /* Figma reference sizes. Components should consume the calculated tokens below. */
  --wuling-fs-body-base: 18px;
  --wuling-fs-nav-base: 13px;
  /* Models 巨型菜单保持大字号层级；紧凑字号只用于其他移动子项。 */
  --wuling-fs-model-subnav-base: 32px;
  --wuling-fs-model-subnav-small-base: 14px;
  --wuling-fs-caption-base: 14px;
  --wuling-fs-label-base: 20px;
  --wuling-fs-navstat-base: 24px;
  --wuling-fs-subtitle-base: 28px;
  --wuling-fs-title-base: 32px;
  --wuling-fs-unit-base: 60px;
  --wuling-fs-stat-base: 88px;
  --wuling-fs-hero-base: 190px;
  --wuling-fs-display-base: 240px;
  --wuling-fs-small-base: 12px;
  --wuling-fs-tiny-base: 11px;
  --wuling-fs-micro-base: 8px;

  --wuling-fs-body: calc(var(--wuling-fs-body-base) * var(--wuling-font-scale));
  --wuling-fs-nav: calc(var(--wuling-fs-nav-base) * var(--wuling-font-scale));
  --wuling-fs-model-subnav: calc(var(--wuling-fs-model-subnav-base) * var(--wuling-font-scale));
  --wuling-fs-model-subnav-small: calc(var(--wuling-fs-model-subnav-small-base) * var(--wuling-font-scale));
  --wuling-fs-caption: calc(var(--wuling-fs-caption-base) * var(--wuling-font-scale));
  --wuling-fs-label: calc(var(--wuling-fs-label-base) * var(--wuling-font-scale));
  --wuling-fs-navstat: calc(var(--wuling-fs-navstat-base) * var(--wuling-font-scale));
  --wuling-fs-subtitle: calc(var(--wuling-fs-subtitle-base) * var(--wuling-font-scale));
  --wuling-fs-title: calc(var(--wuling-fs-title-base) * var(--wuling-font-scale));
  --wuling-fs-unit: calc(var(--wuling-fs-unit-base) * var(--wuling-font-scale));
  --wuling-fs-stat: calc(var(--wuling-fs-stat-base) * var(--wuling-font-scale));
  --wuling-fs-hero: calc(var(--wuling-fs-hero-base) * var(--wuling-font-scale));
  --wuling-fs-display: calc(var(--wuling-fs-display-base) * var(--wuling-font-scale));
  --wuling-fs-small: calc(var(--wuling-fs-small-base) * var(--wuling-font-scale));
  --wuling-fs-tiny: calc(var(--wuling-fs-tiny-base) * var(--wuling-font-scale));
  --wuling-fs-micro: calc(var(--wuling-fs-micro-base) * var(--wuling-font-scale));
}

/* Optional semantic helpers for future page modules. */
.wuling-text-body { font-size: var(--wuling-fs-body); }
.wuling-text-nav { font-size: var(--wuling-fs-nav); }
.wuling-text-caption { font-size: var(--wuling-fs-caption); }
.wuling-text-label { font-size: var(--wuling-fs-label); }
.wuling-text-subtitle { font-size: var(--wuling-fs-subtitle); }
.wuling-text-title { font-size: var(--wuling-fs-title); }
.wuling-text-unit { font-size: var(--wuling-fs-unit); }
.wuling-text-stat { font-size: var(--wuling-fs-stat); }
.wuling-text-hero { font-size: var(--wuling-fs-hero); }
.wuling-text-display { font-size: var(--wuling-fs-display); }

/* Standard content: fluid width with a capped desktop frame. */
.wuling-container {
  box-sizing: border-box;
  width: calc(100% - 48px);
  max-width: 1440px;
  margin-right: auto;
  margin-left: auto;
}
/* Use this variant for readable text and data blocks inside the standard frame. */
.wuling-container--content {
  max-width: 1280px;
}

/* Hero, gallery and other edge-to-edge media sections stay viewport-width. */
.wuling-full-bleed {
  width: 100%;
  max-width: none;
}

/* Bootstrap-aligned small-screen gutters. */
@media (min-width: 576px) {
  :root {
    --wuling-container-gutter: 32px;
    --wuling-font-scale: 0.9;
  }

  .wuling-container {
    width: calc(100% - 64px);
  }
}

@media (min-width: 768px) {
  :root {
    --wuling-container-gutter: 40px;
    --wuling-font-scale: 0.94;
  }

  .wuling-container {
    width: calc(100% - 80px);
  }
}

/* Bootstrap lg 从 992px 进入桌面导航，Models 三列需提前复用小桌面宽度。 */
@media (min-width: 992px) and (max-width: 1023.98px) {
  :root {
    --wuling-models-cats-width: 220px;
    --wuling-models-list-width: 304px;
    --wuling-models-panel-pad: 48px;
    --wuling-models-row-height: 52px;
  }
}

/* NIO/Figma desktop transition: 1024px is the first desktop layout. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  :root {
    --wuling-container-gutter: 40px;
    --wuling-font-scale: 0.96;
    --wuling-models-cats-width: clamp(220px, 18.75vw, 280px);
    --wuling-models-list-width: clamp(320px, 31.25vw, 400px);
    --wuling-models-panel-pad: clamp(32px, 5vw, 48px);
    --wuling-models-row-height: clamp(52px, 5vw, 60px);
  }
}

/* Intermediate desktop frame. */
@media (min-width: 1280px) and (max-width: 1439.98px) {
  :root {
    --wuling-container-gutter: 64px;
    --wuling-font-scale: 0.98;
    --wuling-models-cats-width: clamp(280px, 20vw, 320px);
    --wuling-models-list-width: clamp(400px, 31.25vw, 520px);
    --wuling-models-panel-pad: clamp(48px, 5.56vw, 64px);
    --wuling-models-row-height: clamp(60px, 5vw, 68px);
  }

  .wuling-container {
    width: calc(100% - 128px);
  }
}

/* Wide desktop: keep 80px breathing room before the 1440px cap applies. */
@media (min-width: 1440px) {
  :root {
    --wuling-container-gutter: 80px;
    --wuling-font-scale: 0.98;
    --wuling-models-cats-width: min(360px, 18.75vw);
    --wuling-models-list-width: min(600px, 31.25vw);
    --wuling-models-panel-pad: min(80px, 4.17vw);
    --wuling-models-row-height: min(72px, 3.75vw);
  }

  .wuling-container {
    width: calc(100% - 160px);
  }
}

@media (min-width: 1600px) and (max-width: 1799.98px) {
  :root {
    --wuling-font-scale: 0.99;
  }
}

@media (min-width: 1800px) and (max-width: 1919.98px) {
  :root {
    --wuling-font-scale: 0.995;
  }
}

/* 1920px is the reference frame; ultra-wide screens scale up in steps.
   注意：--wuling-font-scale 必须是纯数字，不能写成 clamp(1, 100vw/1920, 1.15)
   ——calc 除以数字得到的是长度值，与纯数字混用会导致 clamp 在计算时失效，
   所有 calc(Npx * var(--wuling-font-scale)) 字号会整体跌回继承值。 */
@media (min-width: 1920px) {
  :root {
    --wuling-font-scale: 1;
    --wuling-models-cats-width: 360px;
    --wuling-models-list-width: 600px;
    --wuling-models-panel-pad: 80px;
    --wuling-models-row-height: 72px;
  }
}

/* 超宽屏分档放大（相对 1920 等比，封顶 1.15） */
@media (min-width: 2240px) {
  :root {
    --wuling-font-scale: 1.05;
  }
}

@media (min-width: 2560px) {
  :root {
    --wuling-font-scale: 1.1;
  }
}

@media (min-width: 3440px) {
  :root {
    --wuling-font-scale: 1.15;
  }
}