/* components.css — nav / card / modal / icon-tile / qrcode-fab / 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: var(--text-xl); }
.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: var(--text-nav); 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__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: var(--text-nav); min-height: 48px; display: flex; align-items: center; }
  .nav__link.is-active::after { display: none; }
  .nav__link.is-active { background: var(--color-accent-soft); }
}

/* ── 卡片（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__body { margin-top: var(--space-lg); }
.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); }
}

/* ── 右下角固定二维码组件（竖排，hover 左侧放大预览）────── */
.qrcode-fab {
  --qrcode-size: 3.75rem;
  position: fixed; right: var(--space-md); bottom: var(--space-md); z-index: 90;
  display: flex; flex-direction: column; gap: var(--space-3xs);
  padding: var(--space-2xs);
  background: var(--color-white);
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  /* 首屏隐藏，滚过 hero 后由 main.js 加 .is-visible 显示 */
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out), visibility var(--dur-long);
}
.qrcode-fab.is-visible { opacity: 1; visibility: visible; transform: none; }

.qrcode-fab__item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3xs);
  width: var(--qrcode-size);
  padding: var(--space-2xs);
  border-radius: var(--radius-sm);
  transition: background var(--dur-micro) var(--ease-out);
}
.qrcode-fab__item:hover,
.qrcode-fab__item:focus-within { background: var(--color-paper-2); }

.qrcode-fab__img {
  width: 100%; aspect-ratio: 1 / 1; height: auto;
  border-radius: var(--radius-sm);
  border: var(--rule-w) solid var(--color-rule);
  background: var(--color-paper);
}
.qrcode-fab__label {
  font-family: var(--font-mono); font-size: var(--text-sm);
  color: var(--color-ink-3); letter-spacing: 0.04em; white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
.qrcode-fab__item:hover .qrcode-fab__label,
.qrcode-fab__item:focus-within .qrcode-fab__label { color: var(--color-accent); }

/* hover 时在组件左侧弹出放大 3 倍的预览 */
.qrcode-fab__preview {
  position: absolute; right: calc(100% + var(--space-sm)); bottom: 0;
  width: max-content;
  transform: scale(0.9); transform-origin: right bottom;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs);
  padding: var(--space-xs);
  background: var(--color-white);
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility var(--dur-short);
}
.qrcode-fab__preview img {
  width: calc(var(--qrcode-size) * 3);
  max-width: none;
  aspect-ratio: 1 / 1; height: auto; display: block;
  border-radius: var(--radius-sm);
}
.qrcode-fab__preview-label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-ink-2); letter-spacing: 0.04em; white-space: nowrap;
}
.qrcode-fab__item:hover .qrcode-fab__preview,
.qrcode-fab__item:focus-within .qrcode-fab__preview {
  opacity: 1; visibility: visible; transform: scale(1);
}

@media (max-width: 48rem) { .qrcode-fab { display: none; } }   /* 手机隐藏：避免遮挡且无 hover */