/* ============================================================================
   基础层：重置 + 排版 + 通用工具类
   ----------------------------------------------------------------------------
   只放与具体版块无关的东西。版块样式放 layout.css / components.css。
   颜色一律引用 variables.css 的变量，不写字面色值。
   ========================================================================= */

/* ── 重置 ──────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* 兜底防横向滚动。
       ⚠️ 必须用 clip 而不是 hidden —— hidden 会把 html 变成滚动容器，
          直接废掉页头的 position: sticky。clip 不创建滚动容器，两者可共存。 */
    overflow-x: clip;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* ── 哀悼模式（Step D6）────────────────────────────────────────────────────
   整站去色，含图片。由 _Layout 依据 cms_Setting 的 theme.mourning 开关
   挂到 <html> 上，后台可一键切换。

   ⚠️ 三条约束：
   1. **必须挂 html，不能挂 body** —— filter 会让元素成为 fixed 定位的包含块。
      挂 body 会把站内的定位算错；挂 html 时页头 sticky 不受影响（已实测）。
   2. **后台 /admin 不受影响** —— 哀悼是对外形象要求，内部管理界面不在此列，
      变灰还会被误读成"系统故障"。
   3. 这项会改变合成管线（整页走一次滤镜），只在真正需要时开启，
      不要拿它当"灰度主题"长期挂着。
   ────────────────────────────────────────────────────────────────────────── */
html.is-mourning {
    filter: grayscale(1);
}

/* ── 滚动条 ────────────────────────────────────────────────────────────────
   浏览器默认那根太抢眼 —— Windows 上是 17px 宽的实心灰块，还带上下箭头按钮，
   跟站点的整体质感不搭。这里收窄、去按钮、降成半透明，hover 才显出来。

   ⚠️ 两套写法都得留：Chrome / Edge / Safari 认 ::-webkit-scrollbar，
      Firefox 只认 scrollbar-width / scrollbar-color。缺哪套哪边就是原生的。

   ⚠️ 滑块用 transparent 边框 + background-clip 往里收 —— 直接调 width 更省事，
      但那样轨道宽度也跟着变，右侧留白会跳。这样轨道始终 10px，视觉上滑块只有 6px。
   ────────────────────────────────────────────────────────────────────────── */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--scrollbar-thumb);
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    background-clip: padding-box;
}

/* 上下那对小箭头按钮，原生样式在浅色站点里很扎眼，直接去掉 */
::-webkit-scrollbar-button {
    display: none;
}

/* 横向滚动条同理，避免和纵向的粗细不一致 */
::-webkit-scrollbar-corner {
    background: transparent;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.75;
    /* 中文正文行高放宽，1.5 会显得挤 */

    /* ── 页脚贴底 ───────────────────────────────────────────────────────────
       body 撑满视口高度并纵向排列，多余的高度由 .site-main 吸收（见 layout.css）。
       不加这段时，内容少的页面（单页栏目 / 404）body 只有内容那么高，
       视口底部会裸露出一片 html 背景，看着像"页面断了"。

       ⚠️ 用 min-height 不用 height —— 内容超长时必须能正常滚动。
       ⚠️ 100dvh 覆盖 100vh —— 移动端地址栏收起/展开时 vh 不跟随，
          会让页脚忽上忽下；dvh 跟着实际可视高度走。
       ⚠️ 这里加 flex 不影响页头 sticky —— sticky 是相对最近的滚动祖先定位，
          而 html 用的是 overflow-x: clip（不创建滚动容器）。已实测。
       ────────────────────────────────────────────────────────────────────── */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* 长链接 / 长英文单词撑破视口的根治办法（比 overflow 兜底更对症） */
body,
h1, h2, h3, h4, h5, h6,
p {
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
    line-height: 1.35;
}

p {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img, video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--brand);
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

table {
    border-collapse: collapse;
    width: 100%;
}

/* 键盘可达性：鼠标点击不显示轮廓，Tab 导航必须显示 */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* 屏幕阅读器专用文本 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── 布局容器 ──────────────────────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ── 区块 ──────────────────────────────────────────────────────────────── */

.section {
    padding-block: var(--section-gap);
}

.section--subtle {
    background: var(--bg-subtle);
}

.section--dark {
    background: var(--bg-dark);
    color: var(--text-inverse);
}

/* 区块标题：主标题在左，可选的"更多"入口在右，门户各板块统一复用 */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.section-head__title {
    font-size: 32px;
    letter-spacing: 0.02em;
}

.section-head__desc {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 15px;
}

/* 列表类板块的"更多"入口。不与标题抢视觉，悬停才上主色 */
.section-head__more {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: 15px;
}

.section-head__more:hover {
    color: var(--brand);
}

.section-head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ── 排版工具类 ────────────────────────────────────────────────────────── */

.text-muted  { color: var(--text-muted); }
.text-faint  { color: var(--text-faint); }

/* 纵向间距工具类 —— 只在没有语义容器可用时才用 */
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }

/* 多行截断。行数固定时用，避免卡片高度参差。 */
.clamp-2,
.clamp-3,
.clamp-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
.clamp-4 { -webkit-line-clamp: 4; }

/* ── 按钮 ──────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: var(--radius);
    font-size: 15px;
    line-height: 1.4;
    transition: background-color var(--transition), color var(--transition);
}

.btn--primary {
    background: var(--brand);
    color: var(--text-inverse);
}

.btn--primary:hover {
    background: var(--brand-strong);
    color: var(--text-inverse);
}

.btn--ghost {
    border: 1px solid var(--border);
    color: var(--text);
}

.btn--ghost:hover {
    border-color: var(--brand);
    color: var(--brand);
}

/* ── 打印 ──────────────────────────────────────────────────────────────── */

@media print {
    .site-header,
    .site-footer {
        display: none;
    }
}