/* ==========================================================================
   千岛出海 · 内页
   沿用首页的设计令牌与组件（tokens / base / components），
   这一层只放内页特有的区块：页首带、正文、特性网格、机构卡、新闻列表、问答
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页首带
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--bg-soft);
  border-bottom-left-radius: var(--r-xl);
  border-bottom-right-radius: var(--r-xl);
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
}

/* 极淡的红色弧光，与首页同一语言 */
.page-head::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 26rem;
  height: 26rem;
  top: -14rem;
  right: -8rem;
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(circle, var(--accent-glow), transparent 68%);
  opacity: 0.5;
}

.page-head__title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: var(--ls-hero);
  color: var(--ink);
  margin-block: var(--space-4) var(--space-5);
  max-width: 18em;
}

.page-head__lead {
  max-width: var(--measure);
  font-size: 1.0625rem;
  line-height: var(--lh-body);
  color: var(--ink-2);
}










/* --------------------------------------------------------------------------
   7. 数据行（关于千岛复用首页的 2×2，但这里排成一行）
   -------------------------------------------------------------------------- */
.stat-row {
  grid-column-end: span 12;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 767px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 399px) { .stat-row { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   8. 上一页 / 下一页导航
   -------------------------------------------------------------------------- */
.page-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
}

/* .pager__link / .pager__status 以前根本没有样式 —— 导航容器有壳，
   里面的「上一页 / 下一页」和页码是浏览器默认链接。补齐，
   并给到 --tap-min 的点击高度。 */
.pager__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background-color: var(--surface);
  color: var(--ink-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.pager__link:hover { color: var(--ink); border-color: var(--line-2); background-color: var(--bg-soft); }
.pager__link:active { transform: translateY(1px); }

.pager__status {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--ink-3);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
}









/* --------------------------------------------------------------------------
   15. Page head: business photo band on the right
   Left edge fades to transparent, right edge fully opaque.
   Only inner pages use .page-head, so the homepage is untouched.

   每页的图通过 --page-head-img 定制（各页在 <section class="page-head"> 上
   以内联 style 给出），变量缺省时回落到下面这张通用图。
   用图依据源站：6 个栏目页用源站自己那张区块背景图；13 个文章页用该文章
   自己的正文首图，同时移除了正文里重复的那张（见 README 第 13 节）。
   -------------------------------------------------------------------------- */
.page-head::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset-block: 0;
  right: 0;
  width: min(46%, 42rem);
  background-image: var(--page-head-img, url("/media/2023/04/event-venue-1597531_1920-1024x682.jpg"));
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.92;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.18) 34%, rgba(0,0,0,0.62) 68%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.18) 34%, rgba(0,0,0,0.62) 68%, #000 100%);
}

.page-head__title { max-width: min(18em, 60%); }

@media (max-width: 899px) {
  .page-head::before {
    width: min(64%, 24rem);
    opacity: 0.8;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.3) 45%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.3) 45%, #000 100%);
  }
}