/* ==========================================================================
   BASE.CSS — 基础层
   重置 + 排版基线 + 栅格原语 + 通用工具类
   依赖：tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 现代重置 Modern Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 平滑滚动需避让吸顶导航 */
  scroll-padding-top: calc(var(--header-h) + var(--space-5));
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-primary);
  background-color: var(--bg-page);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  overflow-x: hidden;
  min-height: 100dvh;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: none; cursor: pointer; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

ul, ol { list-style: none; }

/* 焦点可见性：键盘导航友好，且不破坏整体克制感 */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--color-accent-500);
  color: var(--color-neutral-950);
}

/* 尊重系统「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   2. 排版基线 Typography Baseline
   每一级标题的字号/行高/字距都已配对，直接使用类名即可，不要局部覆写。
   -------------------------------------------------------------------------- */

.t-display,
.t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  text-wrap: balance;          /* 标题自动平衡断行，避免孤字 */
}

/* 首屏主标题：极紧行高 + 微负字距，气场最强 */
.t-display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.t-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading-cn);
}

.t-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading-cn);
}

.t-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-subhead);
  letter-spacing: var(--ls-heading-cn);
}

.t-h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-subhead);
  letter-spacing: 0.01em;
}

/* 正文层级 */
.t-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.t-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

.t-body-sm {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-dense);
  color: var(--text-secondary);
}

.t-caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-label);
  color: var(--text-tertiary);
}

/* 标签级：全大写 + 大字距，本系统「精致感」的关键手法 */
.t-label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* 数字/项目数据：等宽字体，突出精密与专业 */
.t-metric {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.t-metric-label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--text-tertiary);
  text-transform: uppercase;
}

/* 小标题上方的「眉标」（eyebrow）：小字 + 大黄铜短线，建立视觉引导 */
.t-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-accent);
}

.t-eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--border-accent);
  flex-shrink: 0;
}

/* 正文长文里的富文本元素 */
.prose > * + * { margin-top: var(--space-5); }
.prose p  { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); }
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-subhead);
  letter-spacing: var(--ls-heading-cn);
  color: var(--text-primary);
  margin-top: var(--space-8);
}
.prose h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  margin-top: var(--space-7);
}
.prose blockquote {
  padding-left: var(--space-5);
  border-left: var(--stroke-hairline) solid var(--border-accent);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-subhead);
  color: var(--text-primary);
}
.prose ul, .prose ol { padding-left: var(--space-5); }
.prose li { margin-top: var(--space-2); color: var(--text-secondary); }
.prose ul li { list-style: none; position: relative; }
.prose ul li::before {
  content: "";
  position: absolute;
  left: calc(var(--space-4) * -1);
  top: 0.7em;
  width: 4px; height: 1px;
  background: var(--text-accent);
}

/* --------------------------------------------------------------------------
   3. 布局原语 Layout Primitives
   -------------------------------------------------------------------------- */

/* 3.1 容器：三种宽度语义 */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }
.container--text   { max-width: var(--container-text); }

@media (min-width: 768px)  { .container { padding-inline: var(--gutter-md); } }
@media (min-width: 1024px) { .container { padding-inline: var(--gutter-lg); } }
@media (min-width: 1440px) { .container { padding-inline: var(--gutter-xl); } }

/* 3.2 区块：统一上下留白节奏 */
.section         { padding-block: var(--section-y); }
.section--tight  { padding-block: var(--section-y-tight); }
.section--flush-t{ padding-top: 0; }
.section--flush-b{ padding-bottom: 0; }

/* 3.3 12 列栅格 */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap);
}
@media (min-width: 1024px) { .grid { gap: var(--grid-gap-lg); } }

/* 常用跨列（桌面端） */
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* 移动端一律满宽，避免挤压 */
@media (max-width: 767px) {
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; }
}

/* 3.4 自动分栏（卡片列表用） */
.flow-grid {
  display: grid;
  gap: var(--grid-gap-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .flow-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 3.5 弹性排布工具 */
.stack      { display: flex; flex-direction: column; }
.stack-sm   { gap: var(--space-3); }
.stack-md   { gap: var(--space-5); }
.stack-lg   { gap: var(--space-7); }

.row        { display: flex; align-items: center; }
.row-between{ display: flex; align-items: center; justify-content: space-between; }
.row-sm     { gap: var(--space-2); }
.row-md     { gap: var(--space-4); }
.row-lg     { gap: var(--space-6); }

/* 3.6 区块头部：眉标 + 标题 + 描述的固定编排 */
.section-head { max-width: 44rem; }
.section-head__eyebrow { margin-bottom: var(--space-4); }
.section-head__title   { margin-bottom: var(--space-4); }
.section-head__desc    { max-width: 38rem; }

.section-head--split {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
@media (min-width: 1024px) {
  .section-head--split {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    max-width: none;
  }
  .section-head--split .section-head__desc { max-width: 30rem; text-align: right; }
}

/* --------------------------------------------------------------------------
   4. 通用工具 Utilities
   -------------------------------------------------------------------------- */

/* 4.1 发丝线分隔（本设计主要的分隔手段） */
.hairline       { height: var(--stroke-hairline); background: var(--border-hairline); border: 0; }
.hairline--strong { background: var(--border-strong); }
.hairline--accent { background: var(--border-accent); }
.hairline--inset  { margin-inline: calc(var(--gutter) * -1); }

/* 4.2 标签/徽标（细描边胶囊或方角，按场景选用） */
.tag {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
  padding-inline: var(--space-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  border: var(--stroke-hairline) solid var(--border-hairline);
  border-radius: var(--radius-xs);
  white-space: nowrap;
}
.tag--accent {
  color: var(--text-accent);
  border-color: var(--border-accent);
  background: rgba(180, 155, 107, 0.06);
}

/* 4.3 图片容器：统一宽高比，防止布局抖动 */
.media {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface-alt);
}
.media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--img-filter);
  transition: transform var(--dur-slow) var(--ease-out),
              filter var(--dur-base) var(--ease-out);
}
.media--portrait  { aspect-ratio: var(--ratio-portrait); }
.media--square    { aspect-ratio: var(--ratio-square); }
.media--landscape { aspect-ratio: var(--ratio-landscape); }
.media--wide      { aspect-ratio: var(--ratio-wide); }
.media--cinema    { aspect-ratio: var(--ratio-cinema); }
.media--hero      { aspect-ratio: var(--ratio-hero); }

/* 悬停：极轻的推近 + 恢复饱和，暗示可点击 */
.media--zoom:hover > img,
a:hover .media--zoom > img,
.card:hover .media--zoom > img {
  transform: scale(var(--img-zoom));
  filter: saturate(1) contrast(1.03);
}

/* 图片上的渐变遮罩，用于压住白字 */
.media__scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
  pointer-events: none;
}
.media__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-5);
}

/* 骨架屏：图片未加载时的中性占位 */
.skeleton {
  background: linear-gradient(
    100deg,
    var(--bg-surface-alt) 30%,
    var(--color-neutral-600) 50%,
    var(--bg-surface-alt) 70%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s var(--ease-inout) infinite;
}
@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* 4.4 滚动揭示：默认隐藏，进入视口后淡入上移 */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--dur-reveal) var(--ease-soft),
              transform var(--dur-reveal) var(--ease-soft);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* 交错延迟：同一组元素依次入场，形成节奏 */
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }
.reveal[data-delay="6"] { transition-delay: 480ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* 4.5 无障碍：屏幕阅读器专用 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 4.6 跳转到主内容（键盘可达性） */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-inverse);
  color: var(--text-on-light);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* 4.7 强调色文字/数字 */
.u-accent  { color: var(--text-accent); }
.u-muted   { color: var(--text-tertiary); }
.u-nowrap  { white-space: nowrap; }
.u-center  { text-align: center; }
.u-mx-auto { margin-inline: auto; }

/* 4.8 竖排标签（酒店/设计行业常用的精致细节） */
.u-vertical {
  writing-mode: vertical-rl;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-size: var(--fs-label);
  color: var(--text-tertiary);
}