/* ============================================================
 * 板块标题统一样式（section-title.css）
 * ------------------------------------------------------------
 * 作用：让各页面的板块小标题「居中显示」，左右各带一条渐隐横线，
 *       并把标题字色调浅，使版面更柔和不刺眼。
 *
 * 用法：
 *   1) 纯标题（无右侧附加信息）：
 *        <h2 class="section-title">标题</h2>
 *   2) 标题行右侧还有附加信息（如「全部 →」「共 N 门」）：
 *        <div class="section-head">
 *          <h2 class="section-title">标题</h2>
 *          <span class="section-extra">附加信息</span>
 *        </div>
 *      附加信息吸附在标题行右端，并用 --section-mask（默认透明）
 *      遮住其下方的横线，保证标题视觉居中。卡片内请把它设成卡片底色。
 * ============================================================ */

.section-head {
  position: relative;
  display: flex;
  align-items: center;
}

/* 标题占据整行剩余宽度，从而让两侧横线铺满 */
.section-head > .section-title {
  flex: 1 1 auto;
  min-width: 0;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  color: #475569; /* 浅于正文主色 #0f172a，观感更柔和 */
}

/* 左右横线：等分剩余空间，外端渐变淡出 */
.section-title::before,
.section-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  border-radius: 1px;
}

.section-title::before {
  background: linear-gradient(to right, rgba(148, 163, 184, 0), rgba(148, 163, 184, .7));
}

.section-title::after {
  background: linear-gradient(to left, rgba(148, 163, 184, 0), rgba(148, 163, 184, .7));
}

/* 标题行右端的附加信息：绝对定位，不影响标题居中 */
.section-head > .section-extra {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  padding-left: 10px;
  background: var(--section-mask, transparent);
  white-space: nowrap;
}