/* ==========================================================================
   关于我们（/about）
   01 页头与档案卡 · 02 公司简介 · 03 发展历程 · 04 做事方式
   05 团队 · 06 资质 · 07 响应式
   只放本页独有的类，通用排版走 site.css。
   ========================================================================== */

/* ---------------------------------------------------------- 01 页头 */

.ab-hero {
  padding: var(--sp-6) 0 var(--sp-5);
}
.ab-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 396px;
  gap: var(--sp-6);
  align-items: start;
}
.ab-hero__title {
  font-size: var(--fs-h1);
  line-height: 1.2;
  max-width: 16em;
  margin-bottom: var(--sp-3);
}
.ab-hero__lead {
  margin: 0;
  max-width: 40em;
  font-size: var(--fs-h4);
  line-height: 1.8;
  color: var(--c-text-2);
  text-wrap: pretty;
}

/* 档案卡：仿纸质档案，标签左、值右，行间虚线
   顶边一条深色粗线压住整张卡，替代阴影，跟站内其他卡片区分 */
.ab-card {
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-ink);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
}
.ab-card__cap {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--c-text-3);
}
.ab-card__list {
  margin: 0;
}
.ab-card__row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: var(--sp-2);
  padding: 11px 0;
  border-bottom: 1px dashed var(--c-line);
}
.ab-card__row:last-child { border-bottom: 0; }
.ab-card__row dt {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text-3);
}
.ab-card__row dd {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--c-ink);
}
.ab-card__foot {
  margin: var(--sp-2) 0 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-text-3);
}

/* ------------------------------------------------------ 02 公司简介 */

/* 左侧标题吸顶，右侧正文按自然行宽排，避免整页都读满 1200px */
.ab-story__grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}
.ab-story__side {
  position: sticky;
  top: calc(var(--h-header) + var(--sp-4));
}
.ab-story__title {
  font-size: var(--fs-h2);
  line-height: 1.3;
  margin: 0;
  text-wrap: balance;
}
.ab-story__body {
  max-width: 46em;
  font-size: 17px;
  line-height: 1.9;
  color: var(--c-text);
}
.ab-story__body p {
  margin: 0;
  text-wrap: pretty;
}
.ab-story__body p + p { margin-top: var(--sp-3); }
.ab-story__body .ab-story__first {
  font-size: 19px;
  line-height: 1.8;
  color: var(--c-ink);
}

/* ------------------------------------------------------ 03 发展历程 */

.ab-line {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 三列：年份 / 竖线 / 内容。竖线是独立一列，行高变化时不会错位。
   行间距放在 body 的 padding 上而不是 li：li 带 padding 时 grid 轨道不含它，
   竖线（rail）撑不到行尾，两条之间会出现 48px 的空缺。 */
.ab-line__item {
  display: grid;
  grid-template-columns: 132px 22px minmax(0, 1fr);
}
.ab-line__body { padding-bottom: var(--sp-4); }
.ab-line__item:last-child .ab-line__body { padding-bottom: 0; }

/* 年份右对齐：长短不一的年份（2015.06 / 至今）左对齐时，
   与圆点的距离会随字数变化，看起来像没对齐 */
.ab-line__year {
  padding-top: 1px;
  padding-right: 14px;
  text-align: right;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.ab-line__item.is-now .ab-line__year { color: var(--c-accent-ink); }
.ab-line__rail { position: relative; }
.ab-line__rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 15px;
  bottom: 0;
  width: 1px;
  margin-left: -.5px;
  background: var(--c-line-2);
}
.ab-line__item:last-child .ab-line__rail::before { display: none; }
.ab-line__dot {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border: 2px solid var(--c-line-2);
  border-radius: var(--r-full);
  background: var(--c-bg-2);
}
/* 「至今」这一条用橙点收尾，表示还在继续 */
.ab-line__item.is-now .ab-line__dot {
  border-color: var(--c-accent);
  background: var(--c-accent);
  box-shadow: 0 0 0 4px var(--c-accent-soft);
}

.ab-line__body { padding-top: 1px; }
.ab-line__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.ab-line__head h3 {
  font-size: var(--fs-h4);
  line-height: 1.45;
  margin: 0;
}
.ab-tag {
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-xs);
  background: var(--c-bg);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--c-text-2);
}
.ab-line__note {
  margin: 0;
  max-width: 40em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-text-2);
  text-wrap: pretty;
}

/* ------------------------------------------------------ 04 做事方式 */

/* 深色底 + 田字格：靠 1px 线分格，不用卡片阴影 */
.ab-rules__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-dark-line);
}
.ab-rule {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-dark-line);
}
.ab-rule:nth-child(odd) {
  padding-right: var(--sp-5);
  border-right: 1px solid var(--c-dark-line);
}
.ab-rule:nth-child(even) { padding-left: var(--sp-5); }
.ab-rule:nth-last-child(-n+2) { border-bottom: 0; }
.ab-rule__no {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.ab-rule h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-1);
}
.ab-rule p {
  margin: 0;
  max-width: 34em;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-dark-text);
  text-wrap: pretty;
}

/* ---------------------------------------------------------- 05 团队 */

.ab-team__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.ab-team__item {
  padding-top: var(--sp-2);
  border-top: 2px solid var(--c-ink);
}
.ab-team__item h3 {
  font-size: var(--fs-h4);
  margin-bottom: var(--sp-1);
}
.ab-team__item p {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: var(--c-text-2);
  text-wrap: pretty;
}
.ab-team__note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-3);
}
.ab-team__note .icon { margin-top: 3px; flex: 0 0 auto; }

/* ---------------------------------------------------------- 06 资质 */

/* 证书墙：四列，竖版图（3:4）在上、名称与编号在下。
   证书原件是竖版 A4 比例，横版裁切会把边框和公章切掉，所以图区固定 3:4 并 contain。 */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cert {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.cert:hover {
  border-color: var(--c-primary);
  box-shadow: 0 8px 24px rgba(15, 76, 129, .10);
}

.cert__fig {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--c-bg-2);
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
}
/* 绝对定位而不是 height:100%：图片自带长宽比会反过来把容器撑高，
   同一排里有图的卡片就会比占位卡高出十几像素，卡身文字对不齐 */
.cert__fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

/* 占位框：虚线 + 一句说明。不做成空白灰块，缺哪张要看得出来 */
.cert__ph {
  position: absolute;
  inset: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  border: 1px dashed var(--c-line-2);
  border-radius: var(--r-sm);
  color: var(--c-text-3);
  text-align: center;
}
.cert__ph em {
  font-style: normal;
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.cert__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--sp-2);
}
.cert__body b {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
  color: var(--c-ink);
}
.cert__org {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-text-3);
}
.cert__codes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.cert__code {
  padding: 1px 6px;
  border-radius: var(--r-xs);
  background: var(--c-bg-2);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--c-text-2);
  word-break: break-all;
}
.cert__period {
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--c-text-3);
}

/* 空位卡：整张虚线，弱到不抢真实证书的注意力 */
.cert--blank {
  border-style: dashed;
  background: transparent;
}
.cert--blank:hover { border-color: var(--c-line-2); box-shadow: none; }
.cert--blank .cert__fig { background: transparent; }
.cert__todo { color: var(--c-text-3); }

.cert-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-1);
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--c-text-3);
}
.cert-note svg { flex: 0 0 auto; margin-top: 3px; }

/* -------------------------------------------------------- 07 响应式 */

@media (max-width: 1080px) {
  .ab-hero__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .ab-story__grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .ab-story__side { position: static; }
  .ab-story__title { max-width: 24em; }
  .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* 单列后卡片横过来：5 项按三列铺开，避免卡片只占一半宽度、右边空一片。
     横排时不画行间虚线，否则最后一行少一格会缺一段线。 */
  .ab-card { max-width: none; }
  .ab-card__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3) var(--sp-4);
  }
  .ab-card__row {
    display: block;
    padding: 0;
    border-bottom: 0;
  }
  .ab-card__row dt { margin-bottom: 2px; }
}

@media (max-width: 860px) {
  .ab-team__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  /* 证书墙两列：单列时竖版图过长，一屏放不下一张 */
  .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .cert__body { padding: var(--sp-1) var(--sp-2); }
}

@media (max-width: 768px) {
  .ab-hero { padding-top: var(--sp-5); }

  /* 时间轴转单列：竖线靠左绝对定位，年份放到标题上方 */
  .ab-line__item {
    display: block;
    position: relative;
    padding-left: 24px;
  }
  .ab-line__body { padding-bottom: var(--sp-4); }
  .ab-line__item:last-child .ab-line__body { padding-bottom: 0; }
  .ab-line__rail {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 9px;
  }
  .ab-line__rail::before { left: 4px; top: 4px; margin-left: 0; }
  .ab-line__dot { left: 0; top: 4px; }
  .ab-line__year {
    font-size: 13px;
    letter-spacing: .04em;
    color: var(--c-accent-ink);
    margin-bottom: 4px;
    padding-right: 0;
    text-align: left;
  }

  .ab-rules__grid { grid-template-columns: 1fr; }
  .ab-rule:nth-child(odd) {
    padding-right: 0;
    border-right: 0;
  }
  .ab-rule:nth-child(even) { padding-left: 0; }
  .ab-rule:nth-last-child(2) { border-bottom: 1px solid var(--c-dark-line); }

  .ab-card { max-width: none; }
  .ab-card__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-cert__row { padding: var(--sp-2) var(--sp-3); }
}