/* ======================================================================
 * site.css —— 站点壳样式（header + footer + 顶级容器 + 三套件变体）
 * ----------------------------------------------------------------------
 * 仅写站点级布局与外观，组件细节复用 components.css。
 * 所有颜色/字号/间距/圆角/阴影必须 var(--zai-*)，禁止硬编码。
 * ====================================================================== */

/* ---- 0. 字体栈兜底（tokens.css 已定义，这里只继承）---- */
.zai-wrap {
  font-family: var(--zai-font-sans);
  font-size:   var(--zai-font-body);
  line-height: 1.7;
  color:       var(--zai-text-primary);
  background:  var(--zai-bg);
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
}

/* ---- 1. 三套件主色变体 ----
 * 用法：<body class="zai-wrap is-beauty"> 或 <body class="zai-wrap is-edu">
 * Beauty 线：主色从蓝 #2563EB 切到暖橙 #D85A30（通过 accent 变量）
 * Edu / Knowledge：保持默认蓝，留 .is-edu / .is-knowledge 占位供未来定制
 */
.zai-wrap.is-beauty {
  --zai-color-primary:       var(--zai-color-accent);
  --zai-color-primary-hover: var(--zai-color-accent-hover);
  --zai-color-primary-soft:  var(--zai-color-accent-soft);
}
.zai-wrap.is-edu {
  /* 主色保持蓝，暂不覆盖；未来若 Edu 线要专属色在此写 */
}
.zai-wrap.is-knowledge {
  --zai-color-primary:       var(--zai-color-accent-purple);
  --zai-color-primary-hover: var(--zai-color-accent-purple-hover);
  --zai-color-primary-soft:  var(--zai-color-accent-purple-soft);
}

/* ---- 2. 顶级容器 ---- */
.zai-wrap-inner {
  width:       100%;
  max-width:   var(--zai-container-max, 1120px);
  margin:      0 auto;
  padding:     0 var(--zai-space-lg);
  flex:        1;     /* 把 footer 顶到页面底 */
}

/* ---- 3. 顶部导航 ---- */
.zai-header {
  position:       sticky;
  top:            0;
  z-index:        var(--zai-z-sticky);
  background:     rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom:  1px solid var(--zai-border);
  transition:     box-shadow var(--zai-duration-base) var(--zai-ease-out);
}
.zai-header.is-scrolled {
  box-shadow:     var(--zai-shadow-sm);
}

.zai-header-inner {
  max-width:      var(--zai-container-max, 1120px);
  margin:         0 auto;
  padding:        0 var(--zai-space-lg);
  display:        flex;
  align-items:    center;
  height:         var(--zai-header-h, 56px);
  gap:            var(--zai-space-lg);
}

/* 品牌 Logo */
.zai-brand {
  display:        flex;
  align-items:    center;
  gap:            var(--zai-space-sm);
  font-size:      var(--zai-font-h3);
  font-weight:    700;
  color:          var(--zai-text-primary);
  text-decoration:none;
  white-space:    nowrap;
}
.zai-brand:hover { color: var(--zai-link-hover); }
.zai-brand-mark {
  width:          28px;
  height:         28px;
  border-radius:  var(--zai-radius-md);
  background:     var(--zai-color-primary);
  color:          #fff;
  display:        flex;
  align-items:    center;
  justify-content:center;
  font-size:      var(--zai-font-label);
  font-weight:    800;
}

/* 导航链接 */
.zai-nav {
  display:        flex;
  align-items:    center;
  gap:            var(--zai-space-md);
  margin:         0;
  padding:        0;
  list-style:     none;
  flex:           1;
}
.zai-nav a {
  display:        inline-block;
  padding:        var(--zai-space-xs) var(--zai-space-sm);
  font-size:      var(--zai-font-body);
  font-weight:    500;
  color:          var(--zai-text-secondary);
  text-decoration:none;
  border-radius:  var(--zai-radius-sm);
  position:       relative;
  transition:     color var(--zai-duration-fast) var(--zai-ease-out);
}
.zai-nav a:hover    { color: var(--zai-text-primary); }
.zai-nav a.is-active {
  color:          var(--zai-color-primary);
}
/* active 下划线 */
.zai-nav a.is-active::after {
  content:        "";
  position:       absolute;
  bottom:         -16px;
  left:           50%;
  transform:      translateX(-50%);
  width:          24px;
  height:         2px;
  background:     var(--zai-color-primary);
  border-radius:  1px;
}

/* 右侧：用户区 / 按钮区 */
.zai-header-actions {
  display:        flex;
  align-items:    center;
  gap:            var(--zai-space-sm);
}

/* 移动端汉堡（640px 以下显示）*/
.zai-nav-toggle {
  display:        none;
  background:     transparent;
  border:         none;
  width:          40px;
  height:         40px;
  cursor:         pointer;
  color:          var(--zai-text-secondary);
  padding:        8px;
  border-radius:  var(--zai-radius-sm);
}
.zai-nav-toggle:hover { background: var(--zai-neutral-100); color: var(--zai-text-primary); }

/* ---- 4. 主内容区 ---- */
.zai-main {
  padding-top:    var(--zai-space-xl);
  padding-bottom: var(--zai-space-2xl);
}

/* ---- 5. 页脚 ---- */
.zai-footer {
  background:     var(--zai-neutral-800);
  color:          var(--zai-neutral-300);
  font-size:      var(--zai-font-caption);
  line-height:    1.7;
  margin-top:     auto;   /* 把 footer 推到底 */
}
.zai-footer-inner {
  max-width:      var(--zai-container-max, 1120px);
  margin:         0 auto;
  padding:        var(--zai-space-2xl) var(--zai-space-lg);
  display:        grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:            var(--zai-space-xl);
}
.zai-footer-col h4 {
  font-size:      var(--zai-font-label);
  font-weight:    600;
  color:          #fff;
  margin:         0 0 var(--zai-space-sm) 0;
}
.zai-footer-col a {
  display:        block;
  color:          var(--zai-neutral-400);
  text-decoration:none;
  padding:        var(--zai-space-xs) 0;
  transition:     color var(--zai-duration-fast) var(--zai-ease-out);
}
.zai-footer-col a:hover { color: #fff; }
.zai-footer-bottom {
  border-top:     1px solid var(--zai-neutral-700);
  padding:        var(--zai-space-lg) var(--zai-space-lg);
  text-align:     center;
  max-width:      var(--zai-container-max, 1120px);
  margin:         0 auto;
  color:          var(--zai-neutral-500);
}

/* ---- 6. 全局焦点环（components.css 已定义 .zai-btn:focus-visible，这里兜底）---- */
.zai-wrap :focus-visible {
  outline:        2px solid var(--zai-color-primary);
  outline-offset: 2px;
  border-radius:  var(--zai-radius-xs);
}

/* ---- 7. 响应式 ---- */

/* 980px 以下：导航折行 */
@media (max-width: 980px) {
  .zai-header-inner { gap: var(--zai-space-md); }
  .zai-nav { gap: var(--zai-space-sm); }
  .zai-nav a { font-size: var(--zai-font-label); padding: 4px 8px; }
}

/* 640px 以下：汉堡菜单 + 导航抽屉 */
@media (max-width: 640px) {
  .zai-header-inner {
    height:       auto;
    padding:      var(--zai-space-sm) var(--zai-space-md);
    flex-wrap:    wrap;
  }
  .zai-nav-toggle { display: block; }
  .zai-nav {
    display:      none;
    flex-basis:   100%;
    flex-direction: column;
    gap:          0;
    padding:      var(--zai-space-sm) 0;
    border-top:   1px solid var(--zai-border);
    margin-top:   var(--zai-space-sm);
  }
  .zai-nav.is-open { display: flex; }
  .zai-nav a {
    display:      block;
    padding:      var(--zai-space-sm) var(--zai-space-md);
    border-radius:0;
    border-left:  3px solid transparent;
  }
  .zai-nav a.is-active {
    border-left-color: var(--zai-color-primary);
    background:    var(--zai-color-primary-soft);
  }
  .zai-nav a.is-active::after { display: none; }
  .zai-footer-inner {
    grid-template-columns: 1fr;
    gap:         var(--zai-space-lg);
  }
}

/* 375px 以下：极限压缩 */
@media (max-width: 375px) {
  .zai-wrap-inner { padding: 0 var(--zai-space-md); }
  .zai-main { padding-top: var(--zai-space-lg); }
}

/* 打印：隐藏导航/汉堡/footer，只打正文 */
@media print {
  .zai-header, .zai-footer, .zai-nav-toggle { display: none !important; }
  .zai-wrap { background: #fff; }
  .zai-main { padding: 0; }
}

/* ---- 8. 降低动效 ---- */
@media (prefers-reduced-motion: reduce) {
  .zai-header,
  .zai-nav a,
  .zai-nav a::after,
  * {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}

/* ---- 9. 站点门户首页（site 包） ---- */
.zai-hero {
  padding:      var(--zai-space-16) 0 var(--zai-space-12);
  text-align:   center;
}
.zai-hero-title {
  margin:       0;
  font-size:    var(--zai-font-h1);
  line-height:  1.25;
  color:        var(--zai-text-primary);
}
.zai-hero-subtitle {
  margin:       var(--zai-space-4) 0 0;
  font-size:    var(--zai-font-body-lg);
  color:        var(--zai-text-secondary);
}
.zai-home-section { padding-bottom: var(--zai-space-16); }
.zai-home-grid {
  margin-top:   var(--zai-space-6);
}
.zai-home-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--zai-space-2);
  min-height:     132px;
  text-decoration:none;
}
.zai-home-card-title {
  font-size:    var(--zai-font-h3);
  font-weight:  600;
  color:        var(--zai-text-primary);
}
.zai-home-card-path {
  font-family:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:    12px;
  color:        var(--zai-text-secondary);
  word-break:   break-all;
}
.zai-home-card-go {
  margin-top:   auto;
  color:        var(--zai-link);
  font-size:    13px;
  font-weight:  600;
}
.zai-home-card:hover .zai-home-card-go { color: var(--zai-link-hover); }

@media (max-width: 640px) {
  .zai-hero { padding: var(--zai-space-12) 0 var(--zai-space-8); }
}

/* ==========================================================================
 * 首页 hero 视觉增强（对齐老站 zai-home.css 的 hero 语言，2026-10-26 移植）
 * 只加视觉层次：渐变底 + 两枚径向光斑 + 标题层级，不改 DOM、不加交互
 * ========================================================================== */
.zai-hero {
  position:   relative;
  overflow:   hidden;
  background: linear-gradient(180deg, var(--zai-surface-sunken, #f6f7fb) 0%, var(--zai-bg, #fff) 100%);
}
.zai-hero::before,
.zai-hero::after {
  content:       "";
  position:      absolute;
  border-radius: 50%;
  pointer-events: none;
  background:    radial-gradient(circle, var(--zai-color-primary-soft, #ffe4dc), transparent 70%);
}
.zai-hero::before { top: -140px; right: -90px; width: 520px; height: 520px; opacity: .65; }
.zai-hero::after  { bottom: -170px; left: -120px; width: 460px; height: 460px; opacity: .45; }
.zai-hero > * { position: relative; z-index: 1; }
.zai-hero-title { font-size: clamp(30px, 4.2vw, 46px); font-weight: 700; letter-spacing: -.5px; }
.zai-hero-subtitle { max-width: 760px; margin-left: auto; margin-right: auto; font-size: 17px; }

/* ==========================================================================
 * 首页内容流（课程更新）：左封面 + 右文字的单列流，桌面端双列
 * ========================================================================== */
.zai-feed { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .zai-feed { grid-template-columns: 1fr 1fr; } }
.zai-feed-item {
  display: flex; gap: 14px; padding: 14px;
  background: var(--zai-surface, #fff);
  border: 1px solid var(--zai-border, rgba(20,30,60,.1));
  border-radius: var(--zai-radius-lg, 12px);
  text-decoration: none; color: inherit;
  transition: box-shadow .16s, transform .16s, border-color .16s;
}
.zai-feed-item:hover {
  box-shadow: var(--zai-shadow-md, 0 6px 18px rgba(20,30,60,.08));
  border-color: var(--zai-color-primary-soft, #ffe4dc);
  transform: translateY(-1px);
}
.zai-feed-cover {
  flex: 0 0 auto; width: 96px; height: 72px; border-radius: 9px;
  background: var(--zai-color-primary-soft, #ffe4dc) center/cover no-repeat;
  display: flex; align-items: center; justify-content: center;
  color: var(--zai-color-primary, #ff6f61); font-weight: 700; font-size: 22px;
}
.zai-feed-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.zai-feed-title {
  font-size: 15px; font-weight: 600; color: var(--zai-text-primary, #1c2333);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zai-feed-desc {
  font-size: 13px; color: var(--zai-text-secondary, #5b6472); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.zai-feed-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--zai-text-muted, #8a93a3); }
.zai-feed-tag {
  color: var(--zai-color-primary, #ff6f61);
  background: var(--zai-color-primary-soft, #ffe4dc);
  border-radius: 999px; padding: 0 8px; line-height: 18px;
}