/* ============================================================
   layout.css — 页面骨架：页头 / 导航 / 页脚 / 区块 / 网格 / 响应式
   依赖 base.css 的变量。引入顺序：base → layout → components
   ============================================================ */

/* ---------- 页头 / 导航 ---------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
}
.brand {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--accent); }

.nav-toggle { display: none; }
.site-nav { display: none; }
.nav-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  margin-left: auto;
  user-select: none;
  padding: 4px 8px;
}
.nav-burger:hover { color: var(--accent); }

/* 移动端展开菜单 */
.nav-toggle:checked ~ .site-nav {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 56px;
  left: 0;
  right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 8px 20px 14px;
}
.site-nav a { padding: 8px 4px; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.site-nav a.active { color: var(--accent); font-weight: 700; }
/* Bilibili 导航按钮：蓝色高亮，尺寸同其他导航项 */
.bili-nav { color: var(--accent); }
.nav-toggle:checked ~ .site-nav a { border-bottom: 1px solid var(--line); }
/* 仅移动端展开菜单内，搜索框与上方链接之间留间距；
   注意不能写成 .site-nav form（桌面端会把这个 margin 带进 flex 居中，导致搜索框偏下） */
.nav-toggle:checked ~ .site-nav .search-form { margin-top: 10px; }
.nav-toggle:checked ~ .site-nav .nav-auth-entry,
.nav-toggle:checked ~ .site-nav .nav-ask-entry { margin-top: 10px; }
.site-nav .inline-form a { border: none; }

/* 前台登录/注册合并入口：竖向「登录 ─ 注册」，整块指向统一登录页（小字号低调，契合游客友好主题） */
.nav-auth-entry {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 10px;
  line-height: 1.15;
  font-size: 0.72rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.nav-auth-entry:hover { color: var(--accent); background: var(--hover-bg); text-decoration: none; }
.nav-auth-entry .nav-auth-sep { width: 100%; border-top: 1px solid var(--line); }

/* 「向我/提问」入口：竖向两行合一（同登录/注册样式），但两行之间无分隔线；登录与否均显示 */
.nav-ask-entry {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 10px;
  line-height: 1.15;
  font-size: 0.72rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.nav-ask-entry:hover { color: var(--accent); background: var(--hover-bg); text-decoration: none; }

/* 已登录：导航栏显示「用户」图标入口（点击进入账号页，不再有退出按钮） */
.nav-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  color: var(--ink-soft);
}
/* 悬停转蓝 + 灰底，与 .settings-act-icon（edit icon）保持一致 */
.nav-user:hover { background: var(--hover-bg); color: var(--accent); text-decoration: none; }

/* 搜索框：固定高度 + 内部垂直居中，保证与导航项中线对齐 */
.search-form { display: flex; align-items: center; gap: 6px; }
.inline-search { display: flex; align-items: center; gap: 6px; }
.search-form input,
.inline-search input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  appearance: none;
  -webkit-appearance: none;
}
.inline-search select {
  height: 36px;
  padding: 0 8px;
  font: inherit;
  font-size: 0.92rem;
  font-family: Georgia, "Times New Roman", "Source Han Serif SC",
               "Noto Serif CJK SC", "Songti SC", "SimSun", serif;
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
}
.inline-search select:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.inline-search select:focus { outline: none; border-bottom-color: var(--accent); }
.inline-search select option {
  background: #ffffff;
  color: #111111;
}
.inline-search select option:checked {
  background: #f3f3f3 linear-gradient(#f3f3f3, #f3f3f3);
  color: #111111;
}
.search-form input:focus,
.inline-search input:focus { outline: none; border-color: var(--accent); }
.search-form button,
.inline-search button,
.ask-create-link,
.ask-action-button {
  /* 与 .btn-icon 同款：灰框白底黑图标，悬停转蓝，保持输入框高度对齐 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  padding: 0;
  font: inherit;
  line-height: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  cursor: pointer;
}
.search-form button:hover,
.inline-search button:hover,
.ask-create-link:hover,
.ask-create-link:focus-visible,
.ask-action-button:hover,
.ask-action-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}
.ask-create-link,
.ask-action-button {
  width: auto;
  padding: 0 14px;
  flex: none;
}
.ask-create-link:focus-visible,
.ask-action-button:focus-visible { outline: none; }
.ask-create-link:active,
.ask-action-button:active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface);
}

/* ---------- 页脚 ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 16px 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 0.78rem;
  text-align: left;
}
.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #888888;
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: right;
}
.footer-legal a { color: inherit; }
.footer-legal a:hover { color: #666666; }

/* ---------- 页面骨架 ---------- */
/*
 * flex: 1 撑满剩余高度，把页脚推到底部（body 为纵向 flex，min-height 100vh）。
 * 注意：必须显式 width: 100% —— 作为 flex 子项时，.container 的 margin: 0 auto
 * 会禁用交叉轴 stretch，width: auto 退化为 fit-content（内容窄时主列会缩窄居中）。
 */
/* 水平边距写在这里：main 同时带 .container，若只靠 .container 的
   padding，会被本规则的整体 padding 覆盖，窄视口下内容会贴屏幕边缘。
   手机端上下边距也收紧，避免首屏空白过大；桌面端仍维持舒适留白。 */
.page { flex: 1 0 auto; width: 100%; padding: 16px var(--container-px) 32px; }
.page-head {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.page-head h1 { margin: 0; font-size: clamp(1.3rem, 4vw, 1.6rem); }
/* 标签页标题：徽章外框高度 = 「标签」二字行高（h1 line-height: 1.3）
   badge font-size 0.85em × line-height 1.529 ≈ 1.3em（父级），无垂直 padding */
.tag-page-title .badge.tag {
  font-size: 0.85em;
  font-weight: 400;
  line-height: 1.529;
  padding: 0 8px;
  margin-left: 6px;
}
.page-desc { color: var(--ink-soft); margin: 4px 0 0; }
.section { margin: 28px 0; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.section-head h2, .section > h2 { margin: 0; font-size: clamp(1.05rem, 2.5vw, 1.25rem); }
.more { font-size: 0.9rem; padding: 2px 6px; }
.more:hover { background: var(--hover-bg); }
.breadcrumb {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.empty { color: var(--ink-soft); padding: 18px 0; }

/* ---------- 首页布局：左栏介绍 / 右栏内容 ---------- */
/* 首页正文与导航栏留出更充裕的上边距（页面默认 24px 基础上再加） */
.home-layout { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 12px; }
.home-side { min-width: 0; }
.home-heading {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.home-title {
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 800;
  margin: 0 0 4px;
  letter-spacing: 0.05em;
}
.home-tagline { color: var(--ink-soft); margin: 0; }
.home-intro {
  color: var(--ink);
  font-size: 0.98rem;
  margin-top: 24px;
}
.home-intro p { margin: 0 0 6px; }
.home-main { min-width: 0; }
/* 首栏顶部与左栏“乐谱站”上边缘对齐（去掉首段 section 的上外边距） */
.home-main .section:first-child { margin-top: 0; }

/* ---------- 卡片网格 ---------- */
/* 手机端默认：minmax(260px, 1fr)——解决原 400px 在 375px 窄屏被强行拉满导致
   "卡片突出宽度"的视觉膨胀感；260px 既能单列不拥挤，两列时也不细碎。
   桌面端 ≥720px 再覆盖回 300px（原设定）。 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* ---------- 归档布局 ---------- */
.archive-layout { display: grid; grid-template-columns: 1fr; gap: 24px; }
.archive-side h3 { font-size: 0.95rem; margin: 18px 0 8px; }
.archive-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
}
.archive-tabs a {
  padding: 8px 16px;
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.archive-tabs a:hover { color: var(--accent); background: var(--hover-bg); text-decoration: none; }
.archive-tabs a.active { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); }

/* ---------- 桌面端增强 ---------- */
@media (min-width: 720px) {
  /* 恢复桌面端 15vw 宽边距留白风格 */
  :root { --container-px: max(20px, 15vw); }

  /* 恢复桌面端宽松的垂直间距与 section 留白 */
  .page { padding: 24px var(--container-px) 48px; }
  .page-head { margin-bottom: 20px; gap: 16px; }
  .section { margin: 36px 0; }
  .section-head { margin-bottom: 14px; }
  .home-layout { gap: 32px; margin-top: 16px; }
  .home-intro { margin-top: 32px; }

  .nav-burger { display: none; }
  .site-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
  }
  .site-nav a {
    border: none !important;
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 10px;
    border-radius: 0;
    white-space: nowrap;
  }
  .site-nav a:hover { background: var(--hover-bg); text-decoration: none; }
  .site-nav .search-form { margin-left: 8px; }
  .site-nav a.nav-auth-entry,
  .site-nav a.nav-ask-entry { height: auto; padding: 3px 10px; }
  .archive-layout { grid-template-columns: 220px 1fr; }
  .form-row { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 2fr 1fr; }
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
  }
}

/* ---------- 首页桌面双栏 ---------- */
@media (min-width: 900px) {
  .home-layout {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
  }
  .home-side {
    border-right: 1px solid var(--line);
    padding-right: 32px;
  }
}