/* ==========================================================================
   Linkshing 官网 · 内页公共样式（Sub-page Common）
   适用范围：business / business-ads / business-operation / about / contact / news
   含：内页 Hero / 面包屑 / 服务列表 / 团队表 / 表单 / 时间轴 / 分页
   说明：index.css 中的 .biz-card / .process / .cta-band 在全站复用，
        本文件只补充内页独有组件，避免与 index.css 重复定义。
   ========================================================================== */

/* ==========================================================================
   一、内页 Hero（比首页 Hero 更克制，突出标题与路径）
   ========================================================================== */

.page-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 88% -20%, rgba(0, 98, 242, .10), transparent 62%),
    radial-gradient(700px 380px at 4% 116%, rgba(240, 96, 0, .08), transparent 64%),
    linear-gradient(135deg, #F5F9FF 0%, #EBF2FE 55%, #FDF1E7 100%);
  padding-block: 64px 56px;
  border-bottom: 1px solid var(--color-border);
}

/* 细网格底纹（与首页 Hero 一致的视觉语言），右下渐隐 */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 98, 242, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 98, 242, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 120% at 12% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(120% 120% at 12% 0%, #000 0%, transparent 70%);
  pointer-events: none;
}

/* 橙色光晕（右下），与首页呼应 */
.page-hero::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  bottom: -190px;
  right: -80px;
  border-radius: 50%;
  background: rgba(240, 96, 0, .10);
  filter: blur(72px);
  pointer-events: none;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero__eyebrow {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}

.page-hero__title {
  position: relative;
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-ink);
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
}

/* 与全站统一的橙色短下划线 */
.page-hero__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 80px;
  height: 4px;
  background-color: var(--color-accent);
  border-radius: 2px;
}

.page-hero__desc {
  max-width: 760px;
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--color-text);
}

/* ==========================================================================
   二、面包屑
   ========================================================================== */

.breadcrumb {
  margin-bottom: var(--space-3);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  /* 英文面包屑（如英文站 "Home / Business"）改用 Inter。
     中文站点文字为中文，不在 Inter 字集内，会自动回落系统字体，
     因此可安全地对整条面包屑声明，无需按语言分支。 */
  font-family: var(--font-family-latin);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
}

/* 分隔符 */
.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  color: var(--color-border);
}

.breadcrumb__link {
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
  color: var(--color-primary);
}

/* ==========================================================================
   三、服务项列表（业务详情页子服务卡片）
   ========================================================================== */

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.service-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base);
}

.service-card:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(0, 98, 242, .3);
}

.service-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-md);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.service-card--accent .service-card__icon {
  background-color: var(--color-accent-light);
  color: var(--color-accent);
}

.service-card__icon svg {
  width: 24px;
  height: 24px;
}

.service-card__title {
  font-size: 18px;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-bottom: 8px;
}

.service-card__desc {
  font-size: var(--fs-small);
  color: var(--color-text);
}

/* 子服务标签墙（用于罗列大量子服务项） */
.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.feature-tags .tag {
  padding: 8px 16px;
  font-size: var(--fs-small);
}

/* 标签墙与上方卡片列表拉开距离 */
.feature-tags--spaced {
  margin-top: var(--space-4);
}

/* 合作模式卡标题（card 内的 h3） */
.mode-card__index {
  display: inline-block;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: .04em;
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border-radius: var(--radius-pill);
}

.mode-card__index--accent {
  color: var(--color-accent);
  background-color: var(--color-accent-light);
}

.mode-card__title {
  margin-top: var(--space-2);
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

/* 板块下方的补充说明（居中、小字、弱化） */
.section-note {
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  text-align: center;
  color: var(--color-text-muted);
}

/* ==========================================================================
   四、双栏图文（业务介绍 / 优势说明）
   ========================================================================== */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.split--top {
  align-items: start;
}

.split__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}

.split__text {
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.split__text:last-child {
  margin-bottom: 0;
}

/* 双栏中的要点列表 */
.check-list {
  display: grid;
  gap: 12px;
}

.check-list__item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--color-text);
}

.check-list__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 5px;
  color: var(--color-primary);
}

.check-list__icon svg {
  width: 100%;
  height: 100%;
}

/* 强调色勾选（橙色） */
.check-list--accent .check-list__icon {
  color: var(--color-accent);
}

/* 视觉图形：AI 生成品牌色系配图 + 关键能力清单（叠在图片下沿） */
.visual-figure {
  position: relative;
  padding-bottom: var(--space-6);
}

.visual-figure__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 48px rgba(0, 40, 110, .18);
}

/* 深色半透明清单卡：与图片形成叠加层次，替代原纯色面板 */
.visual-figure__list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  width: calc(100% - var(--space-4));
  margin: calc(var(--space-6) * -1) auto 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(0, 62, 165, .96) 0%, rgba(0, 40, 110, .96) 100%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 32px rgba(0, 30, 90, .28);
}

.visual-figure__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .94);
  line-height: 1.6;
}

.visual-figure__list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

/* 橙色变体：清单卡改为品牌橙深底 */
.visual-figure--accent .visual-figure__list {
  background: linear-gradient(135deg, rgba(200, 76, 0, .96) 0%, rgba(150, 55, 0, .96) 100%);
}

.visual-figure--accent .visual-figure__list li::before {
  background-color: var(--color-white);
}

/* 视觉面板：无照片时的品牌色装饰块（避免使用未授权素材） */
.visual-panel {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #0062F2 0%, #0047B3 100%);
  color: var(--color-white);
}

.visual-panel--accent {
  background: linear-gradient(135deg, #F06000 0%, #C24E00 100%);
}

.visual-panel__num {
  font-size: 40px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-white);
}

.visual-panel__label {
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .85);
}

.visual-panel__list {
  display: grid;
  gap: 12px;
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, .25);
}

.visual-panel__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .92);
  line-height: var(--lh-body);
}

.visual-panel__list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

.visual-panel--accent .visual-panel__list li::before {
  background-color: var(--color-white);
}

/* ==========================================================================
   五、团队表（代运营孵化 N对1五角色）
   ========================================================================== */

.team-list {
  display: grid;
  gap: var(--space-2);
}

.team-item {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.team-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-card);
}

/* alternate 角色用橙色左边条区分 */
.team-item:nth-child(even) {
  border-left-color: var(--color-accent);
}

.team-item__role {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.team-item__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  background-color: var(--color-primary);
  border-radius: 50%;
}

.team-item:nth-child(even) .team-item__badge {
  background-color: var(--color-accent);
}

.team-item__duty {
  font-size: var(--fs-small);
  color: var(--color-text);
  line-height: var(--lh-body);
}

/* ==========================================================================
   六、核心维度（4 个关键词卡）
   ========================================================================== */

.dimension-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.dimension-item {
  padding: var(--space-4);
  text-align: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.dimension-item:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: var(--shadow-card-hover);
}

.dimension-item__num {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  color: var(--color-accent);
  margin-bottom: 8px;
}

.dimension-item__title {
  font-size: 18px;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

/* ==========================================================================
   七、报告频率表（服务保障）
   ========================================================================== */

.report-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.report-table th,
.report-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--fs-small);
  border-bottom: 1px solid var(--color-border);
}

.report-table th {
  background-color: var(--color-primary-light);
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.report-table tbody tr:last-child td {
  border-bottom: none;
}

.report-table td:first-child {
  font-weight: var(--fw-medium);
  color: var(--color-ink);
}

.report-table td {
  color: var(--color-text);
}

/* ==========================================================================
   八、发展历程时间轴（关于页，含占位）
   ========================================================================== */

.timeline {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding-left: 32px;
}

/* 纵向主轴 */
.timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 7px;
  width: 2px;
  background-color: var(--color-border);
}

.timeline__item {
  position: relative;
}

/* 轴点 */
.timeline__item::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 3px solid var(--color-primary);
}

.timeline__year {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin-bottom: 4px;
}

.timeline__title {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-bottom: 4px;
}

.timeline__desc {
  font-size: var(--fs-small);
  color: var(--color-text);
}

/* ==========================================================================
   九、表单（联系页）
   ========================================================================== */

.form {
  display: grid;
  gap: var(--space-3);
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
}

/* 必填星号 */
.form__required {
  color: var(--color-error);
  margin-left: 2px;
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 12px 16px;
  font-size: var(--fs-body);
  font-family: inherit;
  color: var(--color-ink);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form__textarea {
  min-height: 120px;
  resize: vertical;
}

.form__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 44px;
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 98, 242, .14);
  outline: none;
}

/* 校验错误态 */
.form__field.has-error .form__input,
.form__field.has-error .form__select,
.form__field.has-error .form__textarea {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(217, 45, 32, .12);
}

/* 错误提示文字 */
.form__error {
  display: none;
  font-size: var(--fs-small);
  color: var(--color-error);
}

.form__field.has-error .form__error {
  display: block;
}

/* 提交按钮 + 状态提示 */
.form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.form__status {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.form__status--success {
  color: var(--color-success);
}

.form__status--error {
  color: var(--color-error);
}

/* 提交中：按钮内联 spinner */
.btn__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}

.btn.is-loading .btn__spinner {
  display: inline-block;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* 尊重动效偏好：关闭 spinner 旋转 */
@media (prefers-reduced-motion: reduce) {
  .btn__spinner {
    animation-duration: 2s;
  }
}

/* ==========================================================================
   十、联系页分栏
   ========================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--space-6);
  align-items: start;
}

/* 左侧联系信息分栏 */
.contact-info {
  display: grid;
  gap: var(--space-3);
}

.contact-info__card {
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.contact-info__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-md);
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

.contact-info__icon svg {
  width: 22px;
  height: 22px;
}

.contact-info__label {
  display: block;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.contact-info__value {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  /* 邮箱等长串允许断行；地址等正常句子按词断行，避免出现 "H / angzhou" 这类断字 */
  overflow-wrap: anywhere;
  word-break: normal;
}

/* 邮箱链接：与正文同色，下划线随 hover 出现，避免长邮箱撑破卡片 */
.contact-info__link {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base);
}

.contact-info__link:hover,
.contact-info__link:focus-visible {
  border-bottom-color: currentColor;
}

/* ==========================================================================
   十一、新闻列表（列表流 + 分页）
   ========================================================================== */

.news-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.news-tab {
  padding: 8px 20px;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  background-color: transparent;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base);
}

.news-tab:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.news-tab.is-active {
  color: var(--color-white);
  background-color: var(--color-primary);
}

/* 卡片流布局：首条特稿跨两列 */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.news-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.news-card:hover {
  transform: translateY(var(--hover-lift));
  box-shadow: var(--shadow-card-hover);
}

/* 首条特稿：横向跨两列，左图右文
   不随同行普通卡等高拉伸（否则图片比例会把整卡撑高、文字区留大片空白） */
.news-card--feature {
  grid-column: span 2;
  align-self: start;
  flex-direction: row;
  align-items: stretch;
  min-height: 340px;
  max-height: 380px;
}

/* 缩略图：默认为真实配图（16:9 定比例，避免 CLS）；无配图时回退图标块 */
.news-card__thumb {
  position: relative;
  flex-shrink: 0;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, #0B2A63 0%, #123E8C 100%);
}

.news-card__thumb picture {
  display: block;
  width: 100%;
  height: 100%;
}

.news-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

/* 悬停时图片轻微放大，强化「可点」反馈 */
.news-card:hover .news-card__thumb img {
  transform: scale(1.05);
}

/* 首条特稿：配图占左半，纵向铺满（由 flex 拉伸决定高度，忽略自身比例） */
.news-card--feature .news-card__thumb {
  width: 45%;
  aspect-ratio: auto;
  align-self: stretch;
  min-height: 100%;
}

.news-card--feature .news-card__thumb picture {
  position: absolute;
  inset: 0;
}

.news-card--feature .news-card__thumb img {
  height: 100%;
  /* 忽略 16:10 比例，完全填充左侧区域 */
  aspect-ratio: auto;
  object-fit: cover;
}

/* 无配图降级：图标块 */
.news-card__thumb--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  aspect-ratio: auto;
  background: linear-gradient(135deg, #E8F1FE 0%, #D6E6FD 100%);
  color: var(--color-primary);
}

.news-card--feature .news-card__thumb--icon {
  width: 45%;
  min-height: 100%;
  aspect-ratio: auto;
}

.news-card__thumb--icon svg {
  width: 48px;
  height: 48px;
  opacity: .5;
}

.news-card--accent .news-card__thumb--icon {
  background: linear-gradient(135deg, #FFF0E6 0%, #FFE0C7 100%);
  color: var(--color-accent);
}

.news-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: var(--space-4);
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.news-card__cat {
  padding: 2px 10px;
  font-size: 12px;
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  border-radius: var(--radius-pill);
}

.news-card__date {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.news-card__title {
  font-size: 18px;
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
  transition: color var(--transition-base);
}

.news-card:hover .news-card__title {
  color: var(--color-primary);
}

.news-card__desc {
  font-size: var(--fs-small);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  flex-grow: 1;
}

.news-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
}

.news-card__more svg {
  width: 15px;
  height: 15px;
  transition: transform var(--transition-base);
}

.news-card:hover .news-card__more svg {
  transform: translateX(4px);
}

/* 分页 */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-6);
}

.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-base), background-color var(--transition-base),
    border-color var(--transition-base);
}

.pagination__item:hover:not([disabled]) {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.pagination__item.is-active {
  color: var(--color-white);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.pagination__item[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

/* ==========================================================================
   十二、新闻详情
   ========================================================================== */

/* 详情页两栏：正文 + 相关阅读侧栏 */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-6);
  align-items: start;
}

.article {
  min-width: 0;
}

/* 文章头部 */
.article__head {
  margin-bottom: var(--space-4);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.article__body > * + * {
  margin-top: var(--space-3);
}

/* 文章大标题 */
.article__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  color: var(--color-ink);
}

/* 导语：左侧品牌色竖线 */
.article__lead {
  margin-top: var(--space-2);
  padding-left: var(--space-2);
  border-left: 3px solid var(--color-primary);
  font-size: 17px;
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* 文章封面：定比例，避免加载抖动 */
.article__cover {
  margin-bottom: var(--space-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0, 40, 110, .12);
}

.article__cover picture {
  display: block;
}

.article__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article__body p {
  color: var(--color-text);
  line-height: var(--lh-body);
}

.article__body h2 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin-top: var(--space-4);
}

.article__body ul {
  display: grid;
  gap: 10px;
  padding-left: 4px;
}

.article__body li {
  position: relative;
  padding-left: 20px;
  color: var(--color-text);
  line-height: var(--lh-body);
}

.article__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

/* 文末导航：上一篇 / 下一篇 */
.article-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.article-nav__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 46%;
  font-size: var(--fs-small);
  color: var(--color-text);
  transition: color var(--transition-base);
}

.article-nav__link:hover {
  color: var(--color-primary);
}

.article-nav__label {
  color: var(--color-text-muted);
  font-size: 12px;
}

/* 返回列表 */
.article__back {
  margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   相关阅读侧栏
   -------------------------------------------------------------------------- */
.article-side__card {
  padding: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.article-side__title {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}

/* 标题下品牌橙短下划线（全站招牌手法） */
.article-side__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--color-accent);
}

.article-side__list {
  display: grid;
  gap: 4px;
}

.related-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--color-border);
  transition: color var(--transition-base);
}

.related-item:last-child {
  border-bottom: none;
}

.related-item:hover {
  color: var(--color-primary);
}

.related-item__date {
  font-size: 12px;
  color: var(--color-text-muted);
}

.related-item__title {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: inherit;
  /* 最多两行，超出省略 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ==========================================================================
   十三、响应式
   ========================================================================== */

/* 平板 */
@media (max-width: 1023px) {
  .page-hero {
    padding-block: 48px 40px;
  }

  .split {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dimension-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .team-item {
    grid-template-columns: 180px 1fr;
  }

  .contact-layout {
    grid-template-columns: 1fr;
  }

  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .news-card--feature {
    grid-column: span 2;
  }

  /* 详情页：侧栏移到正文下方 */
  .article-layout {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* 移动端 */
@media (max-width: 767px) {
  .page-hero {
    padding-block: 36px 32px;
  }

  .page-hero__desc {
    font-size: 16px;
  }

  .service-grid,
  .dimension-grid,
  .news-grid {
    grid-template-columns: 1fr;
  }

  /* 移动端特稿取消跨列与横向布局 */
  .news-card--feature {
    grid-column: auto;
    flex-direction: column;
  }

  .news-card--feature .news-card__thumb {
    width: 100%;
    min-height: 160px;
  }

  .form__row {
    grid-template-columns: 1fr;
  }

  /* 团队表：移动端上下堆叠 */
  .team-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .form__actions .btn {
    flex-grow: 1;
  }

  .article-nav {
    flex-direction: column;
  }

  .article-nav__link {
    max-width: 100%;
  }

  /* 表格移动端可横向滚动，避免撑破布局 */
  .report-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .report-table {
    min-width: 480px;
  }
}