/* ============================================================
   layout.css — 页头 / 页脚 / 页面横幅 / 网格骨架
   ============================================================ */

/* ---- Site Header ---- */
.site-header {
  position:sticky;
  top:0;
  z-index:1000;
  height:var(--header-h);
  background:var(--c-surface);
  border-bottom:2px solid var(--c-border);
  box-shadow:var(--shadow-nav);
  transition:height var(--duration) var(--ease),
             box-shadow var(--duration) var(--ease),
             background var(--duration) var(--ease),
             border-color var(--duration) var(--ease);
}
.site-header.is-scrolled {
  height:var(--header-h-scrolled);
  background:color-mix(in srgb,var(--c-surface) 82%,transparent);
  border-bottom-color:transparent;
  box-shadow:var(--shadow-hard);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
[data-theme="dark"] .site-header.is-scrolled {
  background:color-mix(in srgb,var(--c-surface) 78%,transparent);
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
  max-width:var(--max-width);
  margin-inline:auto;
  padding-inline:var(--space-lg);
  gap:var(--space-lg);
}

/* Logo */
.header-logo {
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  flex-shrink:0;
}
.header-logo img {
  width:40px;
  height:40px;
  border-radius:var(--radius);
}
.header-logo .logo-text {
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.header-logo .logo-cn {
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--c-heading);
  white-space:nowrap;
}
.header-logo .logo-en {
  font-size:var(--fs-xs);
  font-family:var(--font-mono);
  color:var(--c-text-muted);
  letter-spacing:.02em;
}

/* Navigation */
.header-nav { display:flex; align-items:center; gap:.25rem; }
.header-nav a {
  display:inline-flex;
  align-items:center;
  padding:.5rem .85rem;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--c-text);
  border-radius:var(--radius);
  transition:color var(--duration),background var(--duration);
  white-space:nowrap;
}
.header-nav a:hover,
.header-nav a:focus-visible {
  color:var(--c-primary);
  background:var(--c-surface-2);
}
.header-nav a.is-active {
  color:var(--c-primary);
  background:var(--c-surface-2);
  box-shadow:inset 0 -2px 0 var(--c-primary);
}

/* Header actions */
.header-actions {
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  flex-shrink:0;
}

/* Theme toggle */
.theme-toggle {
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;
  border:2px solid var(--c-border);
  border-radius:var(--radius);
  background:var(--c-surface-2);
  cursor:pointer;
  font-size:1.1rem;
  transition:background var(--duration),border var(--duration);
}
.theme-toggle:hover { border-color:var(--c-primary); background:var(--c-surface); }

/* Hamburger */
.hamburger {
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:40px; height:40px;
  border:2px solid var(--c-border);
  border-radius:var(--radius);
  background:var(--c-surface-2);
  cursor:pointer;
  gap:5px;
  padding:0;
}
.hamburger span {
  display:block;
  width:20px; height:2px;
  background:var(--c-text);
  border-radius:1px;
  transition:transform var(--duration),opacity var(--duration);
}
.hamburger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity:0; }
.hamburger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.mobile-nav {
  position:fixed;
  top:0; right:0; bottom:0; left:0;
  background:var(--c-surface);
  z-index:999;
  padding:calc(var(--header-h) + var(--space-md)) var(--space-xl) var(--space-xl);
  display:flex;
  flex-direction:column;
  gap:var(--space-sm);
  overflow-y:auto;
  pointer-events:none;
  opacity:0;
  transform:translateY(-12px);
  transition:opacity .2s ease-out,transform .2s ease-out,visibility .2s;
  visibility:hidden;
}
.mobile-nav.is-open {
  pointer-events:auto;
  opacity:1;
  transform:translateY(0);
  visibility:visible;
}
.mobile-nav a {
  display:block;
  padding:.85rem 1rem;
  font-size:1.1rem;
  font-weight:600;
  border-radius:var(--radius);
  transition:background var(--duration),color var(--duration);
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .18s ease-out,transform .18s ease-out,background var(--duration),color var(--duration);
}
.mobile-nav.is-open a { opacity:1; transform:translateY(0); }
.mobile-nav.is-open a:nth-child(1) { transition-delay:.04s; }
.mobile-nav.is-open a:nth-child(2) { transition-delay:.07s; }
.mobile-nav.is-open a:nth-child(3) { transition-delay:.10s; }
.mobile-nav.is-open a:nth-child(4) { transition-delay:.13s; }
.mobile-nav.is-open a:nth-child(5) { transition-delay:.16s; }
.mobile-nav.is-open a:nth-child(6) { transition-delay:.19s; }
.mobile-nav a:hover,
.mobile-nav a.is-active {
  background:var(--c-surface-2);
  color:var(--c-primary);
}
.mobile-nav .mobile-cta { margin-top:var(--space-md); }

/* ---- Page Hero Banner ---- */
.page-hero {
  position:relative;
  padding-block:var(--space-3xl) var(--space-2xl);
  background:var(--c-bg-2);
  background-image:var(--pixel-grid);
  text-align:center;
  border-bottom:2px solid var(--c-border);
}
.page-hero .hero-icon {
  margin-bottom:var(--space-md);
}
.page-hero h1 {
  margin-bottom:var(--space-sm);
}
.page-hero .hero-sub {
  color:var(--c-text-muted);
  font-size:var(--fs-lg);
  max-width:600px;
  margin-inline:auto;
}

/* Breadcrumb */
.breadcrumb {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-sm);
  font-size:var(--fs-sm);
  color:var(--c-text-muted);
  margin-top:var(--space-md);
}
.breadcrumb a { color:var(--c-primary); }
.breadcrumb a:hover { text-decoration:underline; }

/* ---- Site Footer ---- */
.site-footer {
  background:var(--c-surface);
  border-top:2px solid var(--c-border);
  padding-block:var(--space-3xl) var(--space-lg);
  margin-top:var(--space-3xl);
}
.footer-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:var(--space-2xl);
  max-width:var(--max-width);
  margin-inline:auto;
  padding-inline:var(--space-lg);
}
.footer-col h4 {
  font-size:var(--fs-sm);
  font-family:var(--font-mono);
  color:var(--c-text-muted);
  text-transform:uppercase;
  letter-spacing:0;
  margin-bottom:var(--space-md);
}
.footer-col p,
.footer-col li {
  font-size:var(--fs-sm);
  color:var(--c-text-muted);
  margin-bottom:var(--space-sm);
}
.footer-contact-link {
  display:inline-flex !important;
  align-items:center;
  gap:var(--space-sm);
}
.footer-contact-link .iconfont {
  font-size:18px;
  opacity:.65;
  transition:opacity var(--duration);
}
.footer-contact-link:hover .iconfont { opacity:1; }
.footer-col a {
  color:var(--c-text);
  transition:color var(--duration);
}
.footer-col a:hover { color:var(--c-primary); }
.footer-logo {
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  margin-bottom:var(--space-md);
}
.footer-logo img { width:32px; height:32px; border-radius:4px; }
.footer-logo span { font-weight:700; color:var(--c-heading); }
.footer-badges { display:flex; gap:var(--space-sm); flex-wrap:wrap; margin-top:var(--space-md); }
.footer-badge {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:.3rem .6rem;
  font-size:var(--fs-xs);
  font-weight:600;
  border:2px solid var(--c-border);
  border-radius:var(--radius);
  background:var(--c-surface-2);
  color:var(--c-text-muted);
  font-family:var(--font-mono);
  letter-spacing:0;
  text-decoration:none;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s ease;
}
a.footer-badge:hover,
a.footer-badge:focus-visible {
  background:var(--c-primary);
  color:#fff;
  border-color:var(--c-primary);
  transform:translateY(-1px);
}
.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-md);
  max-width:var(--max-width);
  margin-inline:auto;
  padding-inline:var(--space-lg);
  margin-top:var(--space-2xl);
  padding-top:var(--space-lg);
  border-top:1px solid var(--c-border);
  font-size:var(--fs-xs);
  color:var(--c-text-muted);
}

/* ---- Grid skeletons ---- */
.grid-auto {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--space-lg);
}
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-lg); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-lg); }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-lg); }

/* ---- Back to top ---- */
.back-to-top {
  position:fixed;
  bottom:var(--space-xl);
  right:var(--space-xl);
  width:44px; height:44px;
  border:2px solid var(--c-border);
  border-radius:var(--radius);
  background:var(--c-surface);
  box-shadow:var(--shadow-hard-sm);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  z-index:900;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity var(--duration),transform var(--duration);
}
.back-to-top.is-visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top:hover { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }

/* ---- Reveal on scroll ---- */
.reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.reveal.in { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }

/* ---- Responsive ---- */
@media (max-width:992px) {
  .header-nav { display:none; }
  .header-actions .btn { display:none; }
  .hamburger { display:flex; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; text-align:center; }
  .footer-logo, .footer-badges { justify-content:center; }
  .footer-bottom { flex-direction:column; text-align:center; }
}

@media (max-width:480px) {
  .container { padding-inline:1rem; }
  .section { padding-block:var(--space-2xl); }
  .page-hero { padding-block:var(--space-2xl) var(--space-xl); }
}