/* Page Banner */
.page-banner {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff; text-align: center; padding: 80px 16px 64px;
}
.page-banner h1 {
  font-family: var(--font-heading);
  font-size: 40px; letter-spacing: 3px; margin-bottom: 12px;
}
.page-banner .sub { font-size: 15px; opacity: .85; }

/* 公司简介 */
.about-intro { padding-top: 64px; padding-bottom: 64px; }
.intro-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: center;
}
.intro-image img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.intro-text i {
  display: block; font-style: normal;
  font-family: var(--font-heading);
  font-size: 14px; letter-spacing: 3px;
  color: var(--color-accent); margin-bottom: 8px;
}
.intro-text h2 {
  font-family: var(--font-heading);
  font-size: 32px; color: var(--color-primary);
  margin-bottom: 20px; position: relative; padding-left: 16px;
}
.intro-text h2::before {
  content: ''; position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 26px;
  background: var(--color-primary); border-radius: 2px;
}
.intro-text p { font-size: 15px; line-height: 2; color: #555; margin-bottom: 16px; }
.intro-text .content h2,
.intro-text .content h3 {
  font-family: var(--font-heading);
  color: var(--color-primary);
  margin: 20px 0 10px;
}
.intro-text .content p { margin-bottom: 14px; }
.intro-text .content img { border-radius: var(--radius); margin: 16px 0; }

/* 企业文化 */
.about-culture { background: #fff; }
.culture-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.culture-item {
  text-align: center; padding: 32px 20px;
  background: var(--color-bg); border-radius: var(--radius-lg);
  transition: var(--transition);
}
.culture-item:hover {
  background: #fff; box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.culture-item .icon { font-size: 40px; margin-bottom: 12px; line-height: 1; }
.culture-item h3 {
  font-size: 17px; color: var(--color-primary);
  margin-bottom: 10px; font-family: var(--font-heading);
}
.culture-item p { font-size: 14px; color: var(--color-muted); line-height: 1.8; }

/* 数据亮点、工厂图、CTA 复用 home.css */

/* ============ 响应式 ============ */
@media (max-width: 1024px) {
  .page-banner h1 { font-size: 32px; }
  .intro-grid { gap: 32px; }
  .intro-text h2 { font-size: 26px; }
  .culture-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 768px) {
  .page-banner { padding: 56px 16px 40px; }
  .page-banner h1 { font-size: 24px; letter-spacing: 2px; }
  .page-banner .sub { font-size: 13px; }

  .about-intro { padding-top: 32px; padding-bottom: 32px; }
  .intro-grid { grid-template-columns: 1fr; gap: 24px; }
  .intro-image img { aspect-ratio: 16 / 10; border-radius: var(--radius); }
  .intro-text h2 { font-size: 22px; margin-bottom: 14px; }
  .intro-text p { font-size: 14px; line-height: 1.8; }

  .culture-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .culture-item { padding: 20px 12px; }
  .culture-item .icon { font-size: 32px; }
  .culture-item h3 { font-size: 15px; }
  .culture-item p { font-size: 12px; }
}
@media (max-width: 480px) {
  .page-banner h1 { font-size: 20px; }
  .intro-text h2 { font-size: 20px; padding-left: 12px; }
  .intro-text h2::before { height: 20px; width: 3px; }
  .culture-grid { grid-template-columns: 1fr; gap: 10px; }
  .culture-item { padding: 16px; }
  .culture-item .icon { font-size: 28px; }
}
/* ============================================================
   资质证书：缩略图，一行 3 张
   ============================================================ */

.about-certs {
  background: var(--color-bg);
  padding: 48px 0;
}

.cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* ← 一行 3 张 */
  gap: 20px;
}

.cert-item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--color-border);
  transition: var(--transition);
}
.cert-item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
  transform: translateY(-3px);
}

.cert-item img {
  width: 100%;
  aspect-ratio: 3 / 4;                     /* ← 证书竖版比例 */
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.cert-item:hover img { transform: scale(1.05); }

.cert-item .caption {
  padding: 12px;
  text-align: center;
  background: #fff;
}
.cert-item .caption h4 {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;                   /* 最多 2 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============ 响应式 ============ */

/* 平板：一行 2 张 */
@media (max-width: 1024px) {
  .cert-grid { gap: 16px; }
  .cert-item .caption h4 { font-size: 13px; }
}

/* 手机：一行 2 张 */
@media (max-width: 768px) {
  .about-certs { padding: 32px 0; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cert-item img { aspect-ratio: 3 / 4; }
  .cert-item .caption { padding: 10px; }
  .cert-item .caption h4 { font-size: 12px; }
}

/* 小屏：一行 2 张，间距更小 */
@media (max-width: 480px) {
  .cert-grid { gap: 8px; }
  .cert-item .caption h4 { font-size: 11px; }
}