/* ============================================================================
 * base.css — 基础层：重置、元素默认样式、排版节奏、占位图系统
 * ----------------------------------------------------------------------------
 * 依赖：tokens.css（必须先行加载）
 * 原则：只处理「裸元素」，不出现任何组件类名。类选择器一律留给
 *       layout / components 层。
 * ----------------------------------------------------------------------------
 * 层叠约定：本文件整体归入 @layer base（层序见 tokens.css 的
 *   `@layer tokens, base, layout, components, pages;`）。此前 base.css 未包层，
 *   按 CSS 层叠规则「未分层的普通声明优先于任何分层规则」，其裸元素规则会
 *   跨层压制 components / blocks / pages 中写好的同类声明（例：a{color} 覆盖
 *   .nav__link / .btn 的既定文字色，img{height:auto} 覆盖 .case__img 的 height:100%）。
 *   包层后恢复既定优先级：tokens < base < layout < components < pages。
 * 缩进说明：为避免整份文件产生 350 行的空白变更干扰审阅，内部规则保持原有
 *   零缩进，仅在最外层加 @layer base 包裹。
 * ==========================================================================*/

@layer base {

/* ----------------------------------------------------------------------------
 * 1. 重置
 * --------------------------------------------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 锚点跳转时为固定导航让位，避免目标区块被遮挡 */
  scroll-padding-top: var(--scroll-offset);
  /* 平滑滚动仅在 JS 未接管时生效；JS 会在此属性上覆盖为 auto 以支持
     滚动进度定位（见 main.js 的 NavigationController） */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text-1);
  background-color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 横向溢出兜底：轮询式 transform 动效在部分安卓机上会撑出滚动条 */
  overflow-x: hidden;
}

[hidden] {
  display: none !important;
}

/* ----------------------------------------------------------------------------
 * 2. 排版
 * --------------------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5, h6 { font-size: var(--fs-md); }

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

p:last-child { margin-bottom: 0; }

a {
  color: var(--link);
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover { color: var(--brand-700); }

strong, b { font-weight: 700; }

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

/* 英文小标签：全站统一的板块眉标（eyebrow）排印 */
.caps {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-3);
}

/* 技术型文本：坐标、编号、规格 */
.num,
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

blockquote {
  margin: 0;
  padding: var(--sp-5) 0 var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--accent-500);
  font-size: var(--fs-md);
  color: var(--text-2);
}

ul[class], ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

hr {
  height: 1px;
  margin: var(--sp-8) 0;
  border: 0;
  background: var(--line);
}

/* ----------------------------------------------------------------------------
 * 3. 媒体与图形
 * --------------------------------------------------------------------------*/
img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

img { border-style: none; }

svg { fill: none; }

/* 图标：以当前文字色描绘，尺寸随字号 */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ----------------------------------------------------------------------------
 * 4. 表单元素
 * ----------------------------------------------------------------------------
 * 重置浏览器默认外观，交由 components 层定义视觉，避免出现"半原生半自绘"。
 * --------------------------------------------------------------------------*/
button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
  appearance: button;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

select {
  -webkit-appearance: none;
  appearance: none;
}

/* 数值与单位输入去掉原生微调箭头（Firefox / WebKit） */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ----------------------------------------------------------------------------
 * 5. 可访问性
 * --------------------------------------------------------------------------*/
:focus-visible {
  outline: 2px solid var(--electric);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* 仅供屏幕阅读器：视觉隐藏但保留在无障碍树中 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 跳转到主内容：默认隐藏，键盘聚焦时显现 */
.skip-link {
  position: fixed;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--ink-900);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-base) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
  color: #fff;
}

/* ----------------------------------------------------------------------------
 * 6. 占位图系统（Placeholder）
 * ----------------------------------------------------------------------------
 * 现状：V3 产物中经核实可安全使用的实拍素材仅 1 张，其余素材内容归属无法
 *       确认，错配比缺图更糟。故所有图片位先由本系统占位，后期替换方式为：
 *       在占位元素上补 data-src（由 JS 升级为 <img>）或直接写入 <img>，
 *       无需改动任何样式与结构。
 *
 * 视觉取向：工程图纸质感 —— 网格 + 对角线 + 中央标注，让"缺图"看起来
 *           是一张待填的图纸，而非加载失败的破图。
 * --------------------------------------------------------------------------*/
.ph {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  aspect-ratio: var(--ph-ratio, 4 / 3);
  background-color: var(--ink-800);
  color: var(--text-invert-dim);
  /* 网格：40px 见方的图纸底纹 */
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
}

/* 对角标线：提示该区域为待替换素材位 */
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top right, transparent calc(50% - .6px), rgba(255, 255, 255, .08) 50%, transparent calc(50% + .6px)),
    linear-gradient(to bottom right, transparent calc(50% - .6px), rgba(255, 255, 255, .08) 50%, transparent calc(50% + .6px));
}

/* 角标：显示素材槽位名，便于与设计/摄影对接 */
.ph::after {
  content: attr(data-slot);
  position: absolute;
  top: 0;
  left: 0;
  padding: 3px var(--sp-2);
  background: rgba(9, 136, 255, .16);
  color: var(--brand-200);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
}

.ph-label {
  display: grid;
  gap: var(--sp-1);
  justify-items: center;
  padding: var(--sp-4);
  text-align: center;
}

.ph-label strong {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: rgba(255, 255, 255, .82);
}

.ph-label span {
  font-size: 11px;
  color: rgba(255, 255, 255, .42);
}

/* 常用比例修饰符 */
.ph--wide   { --ph-ratio: 16 / 9; }
.ph--ultra  { --ph-ratio: 2.5 / 1; }
.ph--square { --ph-ratio: 1 / 1; }
.ph--portrait { --ph-ratio: 3 / 4; }

/* 浅色占位：用于白底卡片内，避免深色块打断版面呼吸 */
.ph--light {
  background-color: var(--slate-100);
  background-image:
    linear-gradient(rgba(5, 17, 27, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5, 17, 27, .05) 1px, transparent 1px);
  color: var(--slate-400);
}

.ph--light::before {
  background:
    linear-gradient(to top right, transparent calc(50% - .6px), rgba(5, 17, 27, .07) 50%, transparent calc(50% + .6px)),
    linear-gradient(to bottom right, transparent calc(50% - .6px), rgba(5, 17, 27, .07) 50%, transparent calc(50% + .6px));
}

.ph--light::after {
  background: rgba(5, 17, 27, .06);
  color: var(--slate-400);
}

.ph--light .ph-label strong { color: var(--ink-600); }
.ph--light .ph-label span { color: var(--slate-300); }

/* 已升级为真实图片后，隐藏占位内容 */
.ph[data-filled="true"] {
  background-image: none;
  background-color: var(--slate-100);
}

.ph[data-filled="true"]::before,
.ph[data-filled="true"]::after,
.ph[data-filled="true"] .ph-label {
  display: none;
}

/* ----------------------------------------------------------------------------
 * 7. 打印样式：官网常被"打印为 PDF"用于内部传阅，保留关键信息
 * --------------------------------------------------------------------------*/
@media print {
  :root { --shell: 100%; }

  .site-header,
  .site-footer,
  .hero,
  .reveal {
    display: none !important;
  }

  body { background: #fff; }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 10px;
    color: var(--slate-400);
  }
}

}/* /@layer base */