/* ============================================================
   根目录统一布局与间距系统 (Root Layout & Spacing System)
   仅作用于根目录页面，加载于 style.css 之后，建立统一间距规范：
   1) 标题与内容区间距   2) 元素留白   3) 层级区分   4) 响应式自适应
   桌面端取值与原 style.css 对齐，不改变既有外观；仅在移动端收紧、
   并在相邻栏目间补一条细分隔线以增强视觉区分。
   ============================================================ */

/* ---- 1. 间距比例尺 (4px 基准) ---- */
:root {
    --space-3xs: 0.25rem;   /* 4px  */
    --space-2xs: 0.5rem;    /* 8px  */
    --space-xs:  0.75rem;   /* 12px */
    --space-sm:  1rem;      /* 16px */
    --space-md:  1.5rem;    /* 24px */
    --space-lg:  2rem;      /* 32px */
    --space-xl:  3rem;      /* 48px */
    --space-2xl: 4rem;      /* 64px */
    --space-3xl: 5rem;      /* 80px */
    --space-4xl: 6.5rem;    /* 104px */

    /* 语义化间距令牌 */
    --section-gap:    var(--space-3xl);  /* 区块之间垂直间距 */
    --section-gap-lg: var(--space-4xl);
    --section-gap-sm: var(--space-2xl);
    --header-gap:     var(--space-2xl);  /* 标题块到内容的间距 */
    --title-gap:      var(--space-sm);   /* 标题与描述间距 */
    --content-gap:    var(--space-md);   /* 内容块之间 */
    --element-gap:    var(--space-sm);   /* 元素之间 */
    --divider-gap:    var(--space-lg);   /* 分隔线两侧留白 */
}

/* ---- 2. 区块统一垂直间距 ---- */
.section-padding {
    padding: var(--section-gap) 0;
}
.section-padding--lg { padding: var(--section-gap-lg) 0; }
.section-padding--sm { padding: var(--section-gap-sm) 0; }

/* ---- 3. 统一标题间距系统 ---- */
.section-header {
    margin-bottom: var(--header-gap);
}
.section-tag {
    margin-bottom: var(--space-sm);
}
.section-title {
    margin-bottom: var(--title-gap);
}
.section-desc {
    margin-bottom: 0;
}
/* 标题与其后首段之间的呼吸 */
h1 + p,
h2 + p,
h3 + p {
    margin-top: var(--space-2xs);
}

/* ---- 4. 栏目区域分隔线（清晰的视觉区分）---- */
/* 相邻 .section-padding 之间补一条细线，避免长页面栏目粘连 */
.section-padding + .section-padding {
    border-top: 1px solid var(--border-color);
}

/* 通用分隔线工具类，供页面按需使用 */
.divider {
    height: 0;
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: var(--divider-gap) 0;
}
.divider--lg { margin: var(--space-xl) 0; }
.divider--sm { margin: var(--element-gap) 0; }
.divider--gradient {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
    margin: var(--divider-gap) 0;
}

/* ---- 5. 内容层级留白 ---- */
.section-block + .section-block {
    margin-top: var(--content-gap);
}

/* ---- 6. 响应式间距自适应 ---- */
@media (max-width: 1024px) {
    :root {
        --section-gap: 4.5rem;
        --section-gap-lg: 5.5rem;
        --header-gap: var(--space-xl);
    }
}

@media (max-width: 768px) {
    :root {
        --section-gap:    var(--space-2xl);
        --section-gap-lg: var(--space-3xl);
        --section-gap-sm: var(--space-xl);
        --header-gap:     var(--space-xl);
        --title-gap:      var(--space-xs);
        --content-gap:    var(--space-md);
        --divider-gap:    var(--space-md);
    }
    .section-padding {
        padding: var(--section-gap) 0;
    }
}

@media (max-width: 480px) {
    :root {
        --section-gap:    var(--space-xl);
        --section-gap-lg: var(--space-2xl);
        --header-gap:     var(--space-lg);
        --content-gap:    var(--space-sm);
    }
    .section-padding {
        padding: var(--section-gap) 0;
    }
}