@charset "UTF-8";
/* =============================================================================
   hebang-pages.css —— 页面层：页面横幅与兜底列表

   页面横幅是各路由共用的页面头（标题加面包屑），放在始终加载的这一层。
   取值只来自 token，与组件层保持同一套节奏。
   ============================================================================= */

/* --- 页面横幅 --- */

/*
 * 横幅只承载标题与面包屑；版面盒子的尺寸都由内层容器的内边距给出。
 */
.hebang-page-banner {
  font-size: var(--hebang-fs-17);
  font-weight: var(--hebang-weight-regular);
  line-height: 1.7;
}

.hebang-page-banner-outer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-inline: 20px;
}

/*
 * 横幅背景由调用方或主题设置给出，尺寸由修饰类控制。
 * 圆角与内边距在这里给出，背景图不会溢出到圆角之外。
 */
/* 单行标题不能把纵向 flex 容器撑宽，背景盒仍随版心收缩。 */
.hebang-page-banner-box {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding-block: 120px;
  border-radius: var(--hebang-radius-xl);
  background-image: var(--hebang-page-banner-image);
  background-position: top center;
  background-repeat: no-repeat;
}

.hebang-page-banner-box--cover {
  background-size: cover;
}

.hebang-page-banner-box--auto {
  background-size: auto;
}

.hebang-page-banner--plain .hebang-page-banner-box {
  background-color: var(--hebang-color-primary);
  background-image: none;
}

/* 不支持 image-set 的浏览器沿用上方的 WebP 背景。 */
.hebang-page-banner-box--avif {
  background-image: image-set(
    var(--hebang-page-banner-image-avif) type("image/avif"),
    var(--hebang-page-banner-image) type("image/webp")
  );
}

.hebang-page-banner-row {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding-inline: 10px;
}

.hebang-page-banner-row-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: min(100%, 1362px);
  margin-inline: auto;
  padding-block: 10px;
}

.hebang-page-banner-col {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: 10px;
}

.hebang-page-banner-title-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-bottom: 10px;
}

.hebang-page-banner-title {
  margin: 0;
  max-width: 100%;
  font-family: var(--hebang-font-heading);
  font-size: clamp(36px, 6vw, 62px);
  line-height: 1.15;
  font-weight: var(--hebang-weight-bold);
  color: var(--hebang-color-white);
  overflow-wrap: anywhere;
}

.hebang-page-banner-crumbs {
  margin-top: 10px;
}

.hebang-breadcrumbs {
  line-height: 1.7;
}

.hebang-breadcrumbs-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
}

/* 分隔箭头跟随后一项换行，长标题可在同一项内继续折行。 */
.hebang-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  font-size: var(--hebang-fs-16);
  font-weight: var(--hebang-weight-medium);
}

.hebang-breadcrumb-link,
.hebang-breadcrumb-current {
  display: block;
  min-width: 0;
  color: var(--hebang-color-white);
  overflow-wrap: anywhere;
}

.hebang-breadcrumb-item > .hebang-icon {
  flex: none;
  width: 19px;
  height: 19px;
  margin-right: 8px;
  color: var(--hebang-color-white);
}

.hebang-breadcrumb-link {
  text-decoration: none;
}

/* 浅色背景下标题与导航使用深色以保持可读性。 */
.hebang-page-banner--light .hebang-page-banner-title,
.hebang-page-banner--light .hebang-breadcrumb-link,
.hebang-page-banner--light .hebang-breadcrumb-current,
.hebang-page-banner--light .hebang-breadcrumb-item > .hebang-icon {
  color: var(--hebang-color-primary-ink);
}

/* --- 页面横幅断点 --- */

@media (max-width: 1024px) {
  .hebang-page-banner-box {
    padding-block: 80px;
  }

  .hebang-page-banner-row-inner {
    max-width: min(100%, 1024px);
  }
}

@media (width < 768px) {
  /* 窄档容器改成可换行的纵向堆叠 */
  .hebang-page-banner-outer,
  .hebang-page-banner-box,
  .hebang-page-banner-col {
    flex-wrap: wrap;
  }

  .hebang-page-banner-box {
    background-position: center left;
    padding-block: var(--hebang-mobile-banner-space);
  }

  .hebang-page-banner-outer { padding-inline: var(--hebang-gutter); }
  .hebang-page-banner-row { padding-inline: 0; }
  .hebang-page-banner-row-inner { padding-block: 0; }
  .hebang-page-banner-col { padding: 0; }

  .hebang-page-banner-row-inner {
    max-width: min(100%, 767px);
  }

  .hebang-page-banner-title {
    font-size: var(--hebang-mobile-page-title);
    line-height: 1.25;
  }
}

/* --- 兜底列表 --- */

.hebang-post-list {
  display: grid;
  gap: var(--hebang-space-8);
}

/*
 * 列表项的类名与别处的文章卡片重名，规则全部收在 `.hebang-post-list` 之内：
 * 不收进来时，这里的下内边距与下边框会落到同名卡片上，改变那些卡片的盒模型。
 */
.hebang-post-list .hebang-post-item {
  padding-bottom: var(--hebang-space-7);
  border-bottom: var(--hebang-border);
}

.hebang-post-list .hebang-post-title {
  margin-bottom: var(--hebang-space-3);
  font-size: var(--hebang-fs-h4);
}

.hebang-post-list .hebang-post-title a {
  color: var(--hebang-color-ink);
}

.hebang-post-list .hebang-post-title a:hover,
.hebang-post-list .hebang-post-title a:focus {
  color: var(--hebang-color-primary-text);
}

.hebang-post-list .hebang-post-excerpt {
  color: var(--hebang-color-text);
}

/* --- 分页 --- */

.hebang-pagination {
  margin-top: var(--hebang-space-10);
}

.hebang-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hebang-space-2);
}

/*
 * 分页项是触屏目标，因此最小 44px。只给文字不设尺寸会让移动端难以点准。
 * 当前页用实心底加字重标记，不只换颜色。
 */
.hebang-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--hebang-hit-min);
  min-height: var(--hebang-hit-min);
  padding: 0 var(--hebang-space-3);
  border: var(--hebang-border-input);
  border-radius: var(--hebang-radius);
  color: var(--hebang-color-ink);
  font-weight: var(--hebang-weight-medium);
  transition: var(--hebang-transition-fast);
}

.hebang-pagination a.page-numbers:hover,
.hebang-pagination a.page-numbers:focus {
  border-color: var(--hebang-color-ink);
  background: var(--hebang-color-surface-soft);
}

.hebang-pagination .page-numbers.current {
  border-color: var(--hebang-color-primary);
  background: var(--hebang-color-primary);
  color: var(--hebang-color-primary-ink);
  font-weight: var(--hebang-weight-semibold);
}