/* ──────────────────────────────────────────────────────────────────
   section-head 组件 · 首页板块标题区统一样式
   结构：
     <div class="section-head">
       <span class="section-head__eyebrow">[svg?] kicker</span>
       <h2 class="section-head__title">标题</h2>      (pd/qproof 用 h3，样式一致)
       <p  class="section-head__lede">描述</p>
     </div>
   断点：基线(≤520) / ≥521 / ≥901，与原 #index17 一致。
   选择器都附 :not(#_) 提升 specificity 一个 id 槽（不存在的 id，匹配
   不变），让组件能稳定压过散落在各 variants 里的 `#indexN h2/p` 这
   类 (1,0,1) 旧规则，无需 !important。

   视觉来源：
   - kicker      → 胶囊风格 (border-radius 999px, 12px/900, 红底浅色)
   - title       → token 化：font-* 全部走 --section-title-* (common.css)
                   桌面 34px / 移动 27px，已在 common.css @media 切换
   - lede        → #5e6370 / 15px (mobile) → 16px (≥901)
   ────────────────────────────────────────────────────────────────── */

/* ── 容器 ───────────────────────────────────────────────── */
.section-head:not(#_) {
    max-width: 780px;
    margin: 0 0 18px;
    text-align: left;
}

/* ── kicker 胶囊 ────────────────────────────────────────── */
.section-head__eyebrow:not(#_) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    min-height: 0;
    margin: 0 0 9px;
    padding: 5px 10px;
    border: 0;
    border-radius: 999px;
    color: var(--clr-primary);
    background: rgba(var(--clr-primary-rgb), .09);
    box-shadow: none;
    font-family: inherit;
    font-size: var(--font-size-14);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}

.section-head__eyebrow:not(#_)::before,
.section-head__eyebrow:not(#_)::after {
    display: none;
    content: none;
}

.section-head__eyebrow svg {
    flex: none;
    width: 14px;
    height: 14px;
}

/* ── 标题 h2/h3 ─────────────────────────────────────────── */
.section-head__title:not(#_) {
    max-width: 11em;
    margin: 0;
    color: #17191f;
    font-family: var(--section-title-font-family);
    font-size: var(--section-title-font-size);
    font-weight: var(--section-title-font-weight);
    line-height: var(--section-title-line-height);
    letter-spacing: var(--section-title-letter-spacing);
    text-align: left;
}

/* ── 描述 lede ──────────────────────────────────────────── */
.section-head__lede:not(#_) {
    max-width: 52em;
    margin: 12px 0 0;
    color: #5e6370;
    font-size: var(--font-size-16);
    font-weight: 400;
    line-height: 1.7;
    text-align: left;
}

/* ── ≥521：保留断点位（标题字号由 common.css 的 token 切换） ── */
@media (min-width: 521px) {
    /* 无独立规则；title token 由 common.css 控制 */
}

/* ── ≥901：桌面终态（容器底距 + lede 字号/行高加大） ────── */
@media (min-width: 901px) {
    .section-head:not(#_) {
        margin-bottom: 24px;
    }

    .section-head__title:not(#_) {
        max-width: 12em;
    }

    .section-head__lede:not(#_) {
        margin-top: 28px;
        font-size: var(--font-size-16);
        line-height: 1.78;
    }
}