/**
 * 布局层 · 页面骨架
 * ------------------------------------------------------------------
 * 容器、栅格、板块节奏、页头与页脚的结构（不含装饰，装饰在 components.css）
 * 依赖：tokens.css
 */

/* ================= 容器与栅格 ================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 12 栏栅格 */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* 常用跨栏：不对称编辑式版面的基础 */
.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-9 { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* ================= 板块 ================= */
.section {
  position: relative;
  padding-block: var(--section-y);
}

/* 板块之间的通栏细线（左右出血到容器边缘） */
.section + .section::before {
  content: "";
  position: absolute;
  inset-inline: var(--gutter);
  top: 0;
  height: var(--rule-w);
  background: var(--c-rule);
}

/* 板块头：kicker + 标题 + 说明 */
.section-head {
  margin-bottom: clamp(40px, 6vh, 72px);
}

.section-head .kicker {
  display: block;
  margin-bottom: var(--s-6);
}

.section-head h2 {
  max-width: 18em;
}

.section-head .desc {
  margin-top: var(--s-6);
  max-width: 34em;
  color: var(--c-ink-2);
  line-height: var(--lh-lede);
}

/* 板块头 + 右侧「查看全部」的不对称排布 */
.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-8);
  flex-wrap: wrap;
}

/* ================= 页头 ================= */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: var(--rule-w) solid transparent;
  transition:
    height var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

/* 滚动后：白底 + 金色底线 + 高度收缩 */
.site-header.is-scrolled {
  height: var(--header-h-scrolled);
  background: var(--c-bg);
  border-bottom-color: var(--c-gold-line);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  width: 100%;
}

/* 标志 */
.site-logo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}

.site-logo svg,
.site-logo img {
  height: 26px;
  width: auto;
  background: none;
}

/* 主导航 */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  margin-inline: auto;
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* 保证移动端/触屏 44px 触控高度 */
  min-height: 44px;
  padding-block: var(--s-3);
  font-size: var(--f-nav);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--c-ink-2);
  white-space: nowrap;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: var(--rule-w);
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}

.site-nav a:hover,
.site-nav a.is-active {
  color: var(--c-ink);
}

.site-nav a:hover::after,
.site-nav a.is-active::after {
  transform: scaleX(1);
}

/* 页头右侧工具区 */
.site-tools {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-shrink: 0;
  margin-left: auto;
}

/* 语言切换：两个字母，当前语言为实心 */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding-inline: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  color: var(--c-ink-3);
}

.lang-switch button {
  padding: var(--s-2) var(--s-1);
  color: var(--c-ink-3);
  transition: color var(--dur-fast) var(--ease);
}

.lang-switch button:hover {
  color: var(--c-ink);
}

.lang-switch button.is-active {
  color: var(--c-ink);
  border-bottom: var(--rule-w) solid var(--c-gold);
}

.lang-switch .sep {
  color: var(--c-rule);
}

/* 移动端菜单按钮（桌面隐藏） */
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.menu-toggle span {
  display: block;
  width: 20px;
  height: var(--rule-w);
  background: var(--c-ink);
  position: relative;
}

.menu-toggle span::before,
.menu-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: var(--rule-w);
  background: var(--c-ink);
  transition: transform var(--dur-fast) var(--ease);
}

.menu-toggle span::before { top: -6px; }
.menu-toggle span::after { top: 6px; }

/* ================= 移动端抽屉 ================= */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  padding: var(--s-6) var(--gutter) var(--s-12);
  /* 默认不可见且不拦截点击 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    visibility var(--dur-fast) var(--ease);
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  margin-bottom: var(--s-12);
}

.drawer-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--c-ink);
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.drawer-nav a {
  font-size: clamp(24px, 6vw, 32px);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-h2);
  line-height: 1.6;
  color: var(--c-ink);
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
}

.drawer-nav a .idx {
  font-family: var(--f-mono);
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  color: var(--c-gold);
}

.drawer-foot {
  margin-top: auto;
  padding-top: var(--s-8);
  border-top: var(--rule-w) solid var(--c-rule);
}

/* ================= 首屏 ================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* 移动端浏览器地址栏收起时不跳动 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--header-h) + var(--s-16));
  padding-bottom: var(--s-24);
  overflow: hidden;
}

.hero-inner {
  position: relative;
  z-index: var(--z-content);
}

/* 首屏底部的滚动指示 */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: var(--s-8);
  transform: translateX(-50%);
  z-index: var(--z-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

/* ================= 页脚 ================= */
.site-footer {
  position: relative;
  background: var(--c-ink);
  color: var(--c-on-dark);
  padding-top: clamp(56px, 8vh, 96px);
  padding-bottom: var(--s-8);
}

/* 页脚顶部一条金色细线 */
.site-footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: var(--rule-w);
  background: var(--c-gold);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-12);
  padding-bottom: var(--s-16);
}

.footer-brand .site-logo svg,
.footer-brand .site-logo img {
  height: 30px;
}

.footer-brand .slogan {
  margin-top: var(--s-6);
  max-width: 22em;
  font-size: var(--f-meta);
  line-height: var(--lh-body);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--c-on-dark-2);
}

.footer-col h4 {
  font-size: var(--f-micro);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--c-gold-soft);
  margin-bottom: var(--s-6);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.footer-col li,
.footer-col .line {
  font-size: var(--f-meta);
  line-height: var(--lh-meta);
  color: var(--c-on-dark-2);
}

.footer-col a {
  color: var(--c-on-dark-2);
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.footer-col a:hover {
  color: var(--c-gold-soft);
}

/* 页脚底部：备案 / 版权 / 域名 */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  padding-top: var(--s-6);
  border-top: var(--rule-w) solid var(--c-on-dark-rule);
  font-size: var(--f-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--c-on-dark-3);
}

.footer-bottom a {
  color: var(--c-on-dark-3);
}

.footer-bottom a:hover {
  color: var(--c-gold-soft);
}

/* ================= 响应式 ================= */

/* Tablet：栅格降为 6 栏语义（用两列表达） */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .col-3,
  .col-4 { grid-column: span 3; }

  .col-5,
  .col-6,
  .col-7,
  .col-8 { grid-column: span 6; }

  .col-9 { grid-column: span 6; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-12) var(--s-8);
  }

  .site-nav {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .site-header .container {
    gap: var(--s-4);
  }
}

/* Mobile：全部单列 */
@media (max-width: 640px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9 {
    grid-column: 1 / -1;
  }

  .section-head--split {
    align-items: flex-start;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--s-12);
  }

  .site-tools .btn {
    display: none; /* 移动端主 CTA 收进抽屉，避免页头拥挤 */
  }
}