/* ============================================================
   JBoltAI 布局：容器 / 节奏 / 吸顶导航与 mega / 移动抽屉 / 页脚
   依赖 tokens.css base.css
   ============================================================ */

/* ============ 双档容器（v2：1200 / 1440） ============ */
.jb-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.jb-container--wide { max-width: var(--container-wide); }

/* ============ 区块节奏 ============ */
.jb-section { padding-block: var(--section-y); }
.jb-section--tight { padding-block: var(--sp-xxxl); }
.jb-section--flush-top { padding-top: 0; }
.jb-section--paper { background: var(--paper); }
.jb-section--surface { background: var(--surface); border-block: 1px solid var(--line); }

/* 区块头（eyebrow + h2 + lede） */
.jb-shead { max-width: 56em; margin-bottom: var(--sp-xxl); }
.jb-shead .jb-h2 { margin-block: var(--sp-md) var(--sp-md); }
.jb-shead--center { margin-inline: auto; text-align: center; }
.jb-shead--center .jb-eyebrow { justify-content: center; }
.jb-shead__action { margin-top: var(--sp-lg); }

@media (max-width: 768px) {
  .jb-section { padding-block: var(--section-y-mobile); }
  .jb-shead { margin-bottom: var(--sp-xl); }
}

/* ============ 通用网格 ============ */
.jb-grid { display: grid; gap: var(--sp-lg); }
.jb-grid--2 { grid-template-columns: repeat(2, 1fr); }
.jb-grid--3 { grid-template-columns: repeat(3, 1fr); }
.jb-grid--4 { grid-template-columns: repeat(4, 1fr); }
.jb-grid--5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 1024px) {
  .jb-grid--4, .jb-grid--5 { grid-template-columns: repeat(3, 1fr); }
  .jb-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .jb-grid--4, .jb-grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .jb-grid--2, .jb-grid--3, .jb-grid--4, .jb-grid--5 { grid-template-columns: 1fr; }
}

/* ============================================================
   吸顶导航（浅层：一级单行铺开 + mega 二级，最多两级）
   ============================================================ */
.jb-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250, 250, 248, 0.92);
  transition: box-shadow var(--dur) var(--ease);
}
.jb-header.is-stuck { box-shadow: var(--shadow-overlay); }

.jb-header__inner {
  display: flex; align-items: center; gap: var(--sp-lg);
  height: 64px;
}

/* 品牌字标：蓝图蓝 / 700 / 字距 0.04em（DESIGN.md logo-wordmark） */
.jb-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.jb-brand__icon { width: 32px; height: 32px; }
.jb-brand__word {
  font-size: var(--fs-logotype); line-height: var(--lh-logotype);
  letter-spacing: var(--ls-logotype);
  font-weight: 800;
  -webkit-text-stroke: 0.4px var(--primary);
  color: var(--primary);
}

.jb-nav { display: flex; align-items: stretch; align-self: stretch; gap: 2px; margin-right: auto; }
.jb-nav__link {
  display: inline-flex; align-items: center; gap: 4px;
  height: 100%; padding: 0 8px; border-radius: 0;
  color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  border: none; background: none; cursor: pointer;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  white-space: nowrap;
}
.jb-nav__link:hover { color: var(--ink); background: rgba(21, 24, 30, 0.04); }
.jb-nav__item { position: relative; }
.jb-nav__item.is-open .jb-nav__link { color: var(--primary); }
.jb-nav__item.is-open .jb-nav__chev { transform: rotate(180deg); }
.jb-nav__chev { transition: transform var(--dur) var(--ease); }
.jb-nav__link.is-current { color: var(--ink); position: relative; }
.jb-nav__link.is-current::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 2px; background: var(--primary); border-radius: 1px;
}
.jb-nav__item { display: flex; position: relative; }

/* —— mega 面板：横向分组卡片，container-wide 对齐（fixed 对齐视口，随吸顶头部下沿） —— */
.jb-mega {
  position: absolute; top: 100%; left: 0;
  width: max-content;
  min-width: 380px;
  max-width: min(720px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-overlay);
  padding: var(--sp-lg);
  display: grid; gap: var(--sp-xl);
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
  z-index: 99;
}
.jb-nav__item.is-open .jb-mega { opacity: 1; visibility: visible; }
.jb-mega__group { min-width: 0; }
.jb-mega__group-title {
  font-size: var(--fs-cap); color: var(--ink-3); font-weight: var(--fw-semibold);
  padding-block: var(--sp-sm); border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-sm);
  font-family: var(--font-mono); letter-spacing: 0.08em;
}
.jb-mega__item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; margin-inline: -10px; border-radius: var(--r-sm);
  transition: background-color var(--dur) var(--ease);
}
.jb-mega__item:hover { background: var(--paper); }
.jb-mega__item:hover .jb-mega__item-name { color: var(--primary); }
.jb-mega__item-icon { color: var(--primary); flex-shrink: 0; margin-top: 3px; }
.jb-mega__item-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); line-height: 22px; }
.jb-mega__item-desc { font-size: var(--fs-cap); color: var(--ink-3); line-height: 18px; margin-top: 2px; }
.jb-mega__item--ext .jb-mega__item-name { display: inline-flex; align-items: center; gap: 4px; }

/* 头部 CTA */
.jb-header__cta { display: flex; align-items: center; gap: var(--sp-sm); flex-shrink: 0; }
.jb-header__cta .jb-btn--primary { border-radius: var(--r-full); padding-inline: 18px; }

/* 汉堡按钮（≤768px） */
.jb-burger {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer; color: var(--ink);
}

/* ============ 移动抽屉（≤768px，分组手风琴） ============ */
.jb-drawer-wrap {
  position: fixed; inset: 0; z-index: 150;
  visibility: hidden; pointer-events: none;
}
.jb-drawer-wrap.is-open { visibility: visible; pointer-events: auto; }
.jb-drawer__scrim {
  position: absolute; inset: 0; background: rgba(15, 20, 26, 0.4);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.jb-drawer-wrap.is-open .jb-drawer__scrim { opacity: 1; }
.jb-drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(360px, 88vw);
  background: var(--paper); border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 240ms var(--ease);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}
.jb-drawer-wrap.is-open .jb-drawer { transform: none; }
.jb-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-md); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--paper); z-index: 1;
}
.jb-drawer__close {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  cursor: pointer; color: var(--ink);
}
.jb-drawer__body { padding: var(--sp-md); display: flex; flex-direction: column; gap: 2px; }
.jb-drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--ink); font-weight: var(--fw-semibold); font-size: var(--fs-body);
}
.jb-drawer__link:hover { background: rgba(21, 24, 30, 0.04); color: var(--ink); }
.jb-drawer__link.is-current { color: var(--primary); }
.jb-drawer__group summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; padding: 8px 12px; border-radius: var(--r-sm);
  font-weight: var(--fw-semibold); font-size: var(--fs-body); color: var(--ink);
}
.jb-drawer__group summary::-webkit-details-marker { display: none; }
.jb-drawer__group summary:hover { background: rgba(21, 24, 30, 0.04); }
.jb-drawer__group[open] > summary { color: var(--primary); }
.jb-drawer__group[open] > summary .jb-nav__chev { transform: rotate(180deg); }
.jb-drawer__sub { padding: 2px 0 8px 12px; display: flex; flex-direction: column; }
.jb-drawer__sub a {
  min-height: 44px; display: flex; align-items: center; padding: 6px 12px;
  border-radius: var(--r-sm); color: var(--ink-2); font-size: var(--fs-sm);
}
.jb-drawer__sub a:hover { background: rgba(21, 24, 30, 0.04); color: var(--primary); }
.jb-drawer__foot { margin-top: auto; padding: var(--sp-md); border-top: 1px solid var(--line); display: grid; gap: var(--sp-sm); }

@media (max-width: 1200px) {
  /* 导航增至 8 项后平板区间装不下，汉堡折叠断点从 768 提至 1200 */
  .jb-nav { display: none; }
  .jb-header__cta .jb-btn { display: none; }
  .jb-header__cta { margin-left: auto; } /* nav 隐藏后失去其 margin-right:auto，需自行靠右 */
  .jb-burger { display: inline-flex; }
}
@media (max-width: 768px) {
  .jb-header__inner { height: 56px; gap: var(--sp-md); }
}

/* ============================================================
   页脚
   ============================================================ */
.jb-footer { border-top: 1px solid var(--line); background: var(--paper); }
.jb-footer__brand {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-lg);
  padding-block: var(--sp-xxl);
}
.jb-footer__brand-main { display: flex; flex-direction: column; gap: var(--sp-sm); }
.jb-footer__pos { color: var(--ink-2); font-size: var(--fs-sm); max-width: 34em; }
.jb-footer__qr {
  margin-left: auto; display: flex; align-items: center; gap: var(--sp-md);
}
.jb-footer__qr img { width: 96px; height: 96px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 4px; }
.jb-footer__cols {
  display: grid; grid-template-columns: repeat(4, 1fr) minmax(180px, 1.2fr);
  gap: var(--sp-xl); padding-block: var(--sp-xl) var(--sp-xxl);
  border-top: 1px solid var(--line);
}
.jb-footer__col-title {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.14em;
  color: var(--ink-3); font-weight: var(--fw-semibold); margin-bottom: var(--sp-md);
}
.jb-footer__col ul { display: grid; gap: 10px; }
.jb-footer__col a { color: var(--ink-2); font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 4px; }
.jb-footer__col a:hover { color: var(--primary); }
.jb-footer__col a .jb-icon { opacity: 0.5; }
.jb-footer__legal {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-lg);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-md) var(--sp-xl);
  color: var(--ink-3); font-size: var(--fs-cap);
}
.jb-footer__legal a { color: var(--ink-3); }
.jb-footer__legal a:hover { color: var(--primary); }
.jb-footer__beian { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: var(--sp-lg); }

@media (max-width: 1024px) {
  .jb-footer__cols { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .jb-footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg); }
  .jb-footer__brand { flex-direction: column; align-items: flex-start; }
  .jb-footer__qr { margin-left: 0; }
}
@media (max-width: 640px) {
  .jb-footer__cols { grid-template-columns: 1fr 1fr; }
}

/* ============ 面包屑 ============ */
.jb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-cap); color: var(--ink-3); margin-bottom: var(--sp-xl); }
.jb-crumbs a { color: var(--ink-3); }
.jb-crumbs a:hover { color: var(--primary); }
.jb-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.jb-crumbs li + li::before { content: "/"; color: var(--line-strong); }

/* ============ 回到顶部 ============ */
.jb-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 44px; height: 44px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), visibility var(--dur), transform var(--dur) var(--ease), color var(--dur) var(--ease);
  cursor: pointer;
}
.jb-top.is-show { opacity: 1; visibility: visible; transform: none; }
.jb-top:hover { color: var(--primary); }