/* ============================================================
   base.css · 悦礼婚嫁 · 全站基础层
   源出 docs/design-spec.md §2.1「全局基础样式（照抄）」+ §9 无障碍硬项。
   ------------------------------------------------------------
   本文件只放：重置、排版基线、焦点、容器、跨区块复用的原子组件
   （按钮 / 文字链 / 待补占位块 / 占位图块）。
   区块专属样式一律在 sections.css，按 #区块 分节。
   ============================================================ */

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

/* hidden 属性必须真的不渲染：作者样式里的 display 会盖掉 UA 的 [hidden] */
[hidden] { display: none !important; }

/* 无 JS / 有 JS 双版本内容（html.js 由 head 内联脚本加上） */
.js-only { display: none; }
.js .js-only { display: block; }
.js .no-js-only { display: none; }

/* 少量间距工具类，避免行内 style 写死数值 */
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;          /* 顶部无导航，留 16px 呼吸 */
  scroll-padding-bottom: calc(var(--tabbar-h) + var(--sab) + 16px);
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--tabbar-h) + var(--sab));  /* 给吸底条让位 */
}

@media (min-width: 1024px) {
  body { padding-bottom: 0; }        /* 桌面无吸底条 */
}

/* 减弱动效：全站动效归零 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 屏读可见、视觉隐藏 */
.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;
}

/* ------------------------------------------------------------
   焦点可见：全站禁用裸 outline:none
   outline 2px 主色 + 4px 纸色外环，保证任意底色上都能看见
   ------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--c-primary-600);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--c-bg);
}

/* 深底区块（页脚）焦点环必须换金色：主色在 #1F1A16 上只有 2.08:1 */
.footer :focus-visible {
  outline-color: var(--c-accent-400);
  box-shadow: 0 0 0 4px var(--c-ink);
}

/* 跳转链接：body 第一个元素 */
.skip-link {
  position: absolute; left: 8px; top: -100px;
  z-index: var(--z-skip);
  display: inline-flex;              /* 配 min-height 才生效 */
  align-items: center;
  min-height: var(--tap-min);        /* 命中区 ≥44px（实测只有 8+16+16=41） */
  background: var(--c-primary-600); color: var(--c-surface);
  padding: 8px 16px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* ------------------------------------------------------------
   布局容器与区块节奏（design-spec §5.2 / §5.3）
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 768px) {
  .container { max-width: 720px; }
}
@media (min-width: 1024px) {
  .container { max-width: var(--container-max); }
}

.section {
  padding-block: var(--section-y);
}

/* 区块底色序列：纸 → 砂 → 纸 → 砂 → 白 → 砂 → 白 → 砂 → 白 → 砂 → 墨 */
.section--paper { background: var(--c-bg); }
.section--sand  { background: var(--c-bg-alt); }
.section--white { background: var(--c-surface); }

/* ------------------------------------------------------------
   排版
   ------------------------------------------------------------ */
h1, h2, h3, h4, p, dl, dd, dt, figure, blockquote { margin: 0; }

/* 衬线只给 H1 / H2 */
h1, h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-h1);
  letter-spacing: .01em;
  text-wrap: balance;
}
h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
}
h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-h2);
}
/* H3 及以下全部黑体：小字号宋体在 Windows/安卓上渲染毛糙 */
h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: .01em;
}
h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-h4);
}

.section__title { margin-bottom: var(--sp-4); }
@media (min-width: 768px) { .section__title { margin-bottom: var(--sp-7); } }
@media (min-width: 1024px) { .section__title { margin-bottom: var(--sp-8); } }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--c-text);
  max-width: var(--measure);
}
.body-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--c-text-3);
}
.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--c-text-3);
}

/* eyebrow：金色小标。白/纸底用 600，砂底用 700（4.25 → 6.20） */
.eyebrow {
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: var(--lh-micro);
  letter-spacing: .12em;
  color: var(--c-accent-600);
}
.section--sand .eyebrow { color: var(--c-accent-700); }

/* 价格数字：黑体 + tabular-nums，三档等宽对齐（design-spec §10.9） */
.price-num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--c-primary-600);
}

/* ------------------------------------------------------------
   按钮（design-spec §6.1 / §6.2）
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--btn-h);
  padding: 0 var(--sp-6);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--fs-btn);
  font-weight: 600;
  line-height: var(--lh-btn);
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) linear, border-color var(--dur-fast) linear, color var(--dur-fast) linear;
}

.btn--primary {
  background: var(--c-primary-600);
  color: var(--c-surface);
  border: 1px solid var(--c-primary-600);
}
.btn--primary:hover { background: var(--c-primary-700); border-color: var(--c-primary-700); }
.btn--primary:active { background: var(--c-primary-500); border-color: var(--c-primary-500); transform: translateY(1px); }
.btn--primary[disabled],
.btn--primary[aria-disabled="true"] {
  background: var(--c-neutral-300);
  border-color: var(--c-neutral-300);
  color: var(--c-neutral-500);      /* 3.09:1 on #D2C6B8，达标 */
  cursor: not-allowed;
  transform: none;
}

.btn--secondary {
  background: transparent;
  border: 1px solid var(--c-line-control);
  color: var(--c-text-2);
}
.btn--secondary:hover { background: var(--c-bg-alt); border-color: var(--c-accent-700); color: var(--c-text); }
.btn--secondary:active { background: var(--c-line); }

/* 移动端 hero 次按钮：文字式，44px 命中区（design-spec §6.2 末段） */
.btn--text {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  padding: 13px 0;
  background: none;
  border: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--c-primary-600);       /* 纸底 7.77:1 */
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn--text:focus-visible { outline: 2px solid var(--c-primary-600); outline-offset: 2px; border-radius: 6px; }
@media (min-width: 768px) { .btn--text { display: none; } }

/* 全宽按钮 */
.btn--block { width: 100%; }

@media (min-width: 768px) {
  .btn--block-md-auto { width: auto; min-width: 200px; }
}

/* ------------------------------------------------------------
   文字链 / 文字按钮（design-spec §6.3）
   可点击区靠 padding:12px 0 撑到 44px
   ------------------------------------------------------------ */
.link,
.link-btn {
  /* 13px 字 + 12px×2 padding 实测 43.99px（差 0.01 也不达标），
     补 min-height 钉死到 44px，别指望行高凑整 */
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 12px 0;
  color: var(--c-primary-600);       /* 纸底 7.77:1 */
  font-size: var(--fs-caption);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-primary-200);
  background: none;
  border: 0;
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
}
.link:hover,
.link-btn:hover { text-decoration-color: var(--c-primary-600); }
.link:active,
.link-btn:active { color: var(--c-primary-700); }
.link:focus-visible,
.link-btn:focus-visible { outline: 2px solid var(--c-primary-600); outline-offset: 3px; border-radius: 2px; }

/* ------------------------------------------------------------
   电话链接 / 微信号（客户补齐资料后新增）
   ------------------------------------------------------------
   裸 <a href="tel:"> 会拿到 UA 默认蓝色下划线，与暖纸+绛红体系冲突，统一走 .tel-link。
   行内链接的命中区靠上下 padding 撑到 44px。
   ------------------------------------------------------------ */
.tel-link {
  display: inline-block;
  padding: 12px 0;
  color: var(--c-primary-600);        /* 纸底 7.77:1 */
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--c-primary-200);
}
.tel-link:hover { text-decoration-color: var(--c-primary-600); }
.tel-link:active { color: var(--c-primary-700); }
.tel-link:focus-visible {
  outline: 2px solid var(--c-primary-600);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* 深底（页脚）里主色只有 2.08:1，必须换金色 */
.footer .tel-link {
  color: var(--c-accent-300);         /* 深底 9.65:1 */
  text-decoration-color: var(--c-accent-700);
  padding: 12px 0;
}
.footer .tel-link:hover { text-decoration-color: var(--c-accent-300); }

.wechat-id {
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--c-text);               /* 纸/砂/白底上都是近黑，可读 */
  user-select: all;                   /* 一次点选整个号，长按可复制 */
}
/* ★ 页脚是深底：#1F1A16 的字压在 #1F1A16 上等于隐形（实测截图里整串消失）。
   深底必须换金色，9.65:1。这条是照着截图抓出来的，不是靠 grep。 */
.footer .wechat-id { color: var(--c-accent-300); }

/* ------------------------------------------------------------
   待补占位（客户资料未提供）
   设计意图：看起来是「工人在等素材」，不是「网站坏了」。
   正文里的 {{待补:xxx}} 一律渲染成这个 span，不许原样输出花括号。
   样式取自 design-spec §10.8 的虚线占位块规范。
   ------------------------------------------------------------ */
.tbd {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 6px;
  border: 1px dashed var(--c-neutral-300);
  border-radius: var(--r-xs);
  background: var(--c-neutral-100);
  color: var(--c-neutral-600);       /* 砂底 6.04:1 */
  font-size: .92em;
  font-weight: 600;
  letter-spacing: 0;
  white-space: normal;               /* 长占位文案在 375 屏不许撑出横向滚动 */
  overflow-wrap: anywhere;
}
.tbd::before {
  content: "";
  width: 2px; height: .9em;
  background: var(--c-accent-600);
  border-radius: 1px;
  transform: translateY(1px);
}

/* 占位图块（真实照片未到时；当前用 assets/img/ 下的 SVG，二者视觉一致） */
.ph {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-2);
  background: var(--c-neutral-100);
  border: 1px dashed var(--c-neutral-300);
  border-radius: var(--r-sm);
  color: var(--c-neutral-600);
  text-align: center;
  padding: var(--sp-4);
}
.ph__label { font-size: var(--fs-caption); font-weight: 600; letter-spacing: .01em; }
.ph__meta  { font-size: 11px; color: var(--c-neutral-600); }  /* 砂底不能用 500 */

/* ------------------------------------------------------------
   滚动进场：只用 CSS + IntersectionObserver 加类名
   内容默认完全可见，绝不初始 opacity:0（design-spec §9 #13）
   ------------------------------------------------------------ */
[data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }
  .js [data-reveal].is-before {
    opacity: 0;
    transform: translateY(12px);
  }
}