/* components.css — nav / btn / eyebrow / card / modal / badge / hamburger */

/* ── 导航栏（N1b · Cobalt flush bar）──────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-height);
  background: var(--color-white);
  border-bottom: var(--rule-w) solid var(--color-rule);
  transition: box-shadow var(--dur-short) var(--ease-out);
}
.nav.is-scrolled { box-shadow: var(--shadow-card); }
.nav__inner {
  max-width: var(--container-max); margin-inline: auto;
  height: 100%; padding-inline: var(--container-pad);
  display: flex; align-items: center; gap: var(--space-md);
}
.nav__brand { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-display); font-weight: 600; color: var(--color-ink); letter-spacing: -0.02em; font-size: 1.875rem; }
.nav__brand img { height: var(--nav-height); width: auto; display: block; }   /* 撑满导航栏高度，白底与白色导航融合 */
.nav__brand:hover { text-decoration: none; color: var(--color-ink); }

.nav__links { display: flex; align-items: center; gap: var(--space-xs); margin-left: auto; }
.nav__link {
  font-size: 1.2rem; color: var(--color-ink-2); padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm); line-height: 1.2; white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out);
}
.nav__link:hover { color: var(--color-ink); text-decoration: none; background: var(--color-paper-3); }
.nav__link.is-active { color: var(--color-accent); }
.nav__link.is-active::after {
  content: ""; display: block; height: 2px; background: var(--color-accent);
  border-radius: 1px; margin-top: var(--space-3xs);
}
.nav__cta {
  margin-left: var(--space-xs);
  font-family: var(--font-mono); font-size: 1.2rem;
  color: var(--color-ink-2); padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-w) solid var(--color-rule-2); border-radius: var(--radius-sm);
  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
  white-space: nowrap;
}
.nav__cta:hover { color: var(--color-accent); border-color: var(--color-accent); text-decoration: none; }

/* 汉堡按钮 */
.nav__toggle {
  display: none; width: 48px; height: 48px; margin-left: auto;
  align-items: center; justify-content: center; border-radius: var(--radius-sm);
}
.nav__toggle:hover { background: var(--color-paper-3); }
.nav__toggle svg { width: 22px; height: 22px; stroke: var(--color-ink); }

@media (max-width: 48rem) {  /* ≤768px 折叠 */
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute; top: var(--nav-height); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-paper); border-bottom: var(--rule-w) solid var(--color-rule);
    padding: var(--space-xs) var(--container-pad);
    box-shadow: var(--shadow-card);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
  }
  .nav__links.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav__link { padding: var(--space-sm) var(--space-xs); font-size: 1.15rem; min-height: 48px; display: flex; align-items: center; }
  .nav__link.is-active::after { display: none; }
  .nav__link.is-active { background: var(--color-accent-soft); }
  .nav__cta { display: none; }   /* 移动端后台入口收进页脚，右侧让位给汉堡 */
}

/* ── 按钮 ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm);
  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-sm); border: var(--rule-w) solid transparent;
  cursor: pointer; white-space: nowrap; min-height: 40px;
  transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; pointer-events: none; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--primary:hover { background: var(--color-accent-hover); color: var(--color-accent-ink); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-rule-2); }
.btn--ghost:hover { color: var(--color-accent); border-color: var(--color-accent); text-decoration: none; }

/* ── Eyebrow（mono UPPERCASE 标签）────────────────────────── */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink-3);
}
.eyebrow::before { content: ""; width: 6px; height: 6px; background: var(--color-accent); border-radius: 1px; }
.section--dark .eyebrow { color: var(--color-graphite-muted); }

/* ── 卡片（hairline，无阴影）────────────────────────────── */
.card {
  background: var(--color-paper);
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: border-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.card--clickable { cursor: pointer; display: block; }
.card--clickable:hover { border-color: var(--color-accent); transform: translateY(-4px); text-decoration: none; }
.card--media { padding: 0; overflow: hidden; }
.card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-paper-3); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-long) var(--ease-out); }
.card--clickable:hover .card__media img { transform: scale(1.04); }
.card__body { padding: var(--space-md); }

/* ── 图标容器 ─────────────────────────────────────────────── */
.icon-tile {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); border: var(--rule-w) solid var(--color-rule);
  color: var(--color-accent); flex-shrink: 0;
}
.icon-tile svg { width: 22px; height: 22px; }
.section--dark .icon-tile { border-color: var(--color-rule-dark); color: var(--color-accent); }

/* ── 文章弹窗 ─────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: flex-start; justify-content: center;
  padding: var(--space-md);
}
.modal.is-open { display: flex; }
.modal__overlay { position: absolute; inset: 0; background: color-mix(in oklch, var(--color-graphite) 55%, transparent); opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.modal.is-open .modal__overlay { opacity: 1; }
.modal__dialog {
  position: relative; width: 100%; max-width: 56rem; max-height: calc(100vh - 2 * var(--space-md));
  background: var(--color-paper); border-radius: var(--radius-lg);
  border: var(--rule-w) solid var(--color-rule); box-shadow: var(--shadow-modal);
  overflow: hidden; display: flex; flex-direction: column;
  transform: scale(0.96) translateY(8px); opacity: 0;
  transition: transform var(--dur-long) var(--ease-out), opacity var(--dur-long) var(--ease-out);
}
.modal.is-open .modal__dialog { transform: none; opacity: 1; }
.modal__close {
  position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 2;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-paper); border: var(--rule-w) solid var(--color-rule);
  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.modal__close:hover { color: var(--color-accent); border-color: var(--color-accent); }
.modal__close svg { width: 18px; height: 18px; }
.modal__scroll { overflow-y: auto; padding: var(--space-xl) var(--space-xl) var(--space-2xl); }
.modal__hero { aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--radius-md); margin-bottom: var(--space-lg); background: var(--color-paper-3); }
.modal__hero img { width: 100%; height: 100%; object-fit: cover; }
.modal__title { font-size: var(--text-2xl); }
.modal__meta { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-3); margin-top: var(--space-2xs); }

@media (max-width: 40rem) {   /* 手机接近全屏 */
  .modal { padding: 0; align-items: stretch; }
  .modal__dialog { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; border: none; }
  .modal__scroll { padding: var(--space-xl) var(--space-md) var(--space-2xl); }
}

/* ── Badge / chip（钴蓝极淡底）───────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em;
  padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-sm);
  background: var(--color-accent-soft); color: var(--color-accent);
}
.chip--ok { background: var(--color-accent-soft); color: var(--color-accent); }

/* 右下角悬浮二维码组件已迁移为底部横排模块 .qr-section（见 sections.css）*/