/* =========================================
   about.css (V22.0 全媒体矩阵 · 真实链接版)
   专注：1600px 宽屏、7位矩阵、动态交互
   ========================================= */
:root {
  --brand-blue: #0f3b82;
  --apple-bg: #f5f5f7;
  --apple-text: #1d1d1f;
  --apple-muted: #86868b;
  --shadow: 0 15px 45px rgba(0, 0, 0, 0.05);
  --max: 1600px; 
}

/* 基础容器 */
.about-page { background: var(--apple-bg); padding-bottom: 100px; width: 100%; }
.about-shell { max-width: var(--max); margin: 0 auto; padding: 0 40px; box-sizing: border-box; }

/* 1. Hero 与 2. 团队网格 (保持原样) */
.team-hero-cinematic { padding: 120px 0 60px; text-align: center; }
.hero-cinematic-block { background: #fff; border-radius: 40px; padding: 80px 40px; box-shadow: var(--shadow); }
.team-grid-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 60px; }

/* 3. 猫狗家人 (保持原样) */
.pets-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.team-card-v2 {
  background: #fff; border-radius: 32px; overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.03); display: flex; flex-direction: column;
  transition: transform 0.4s ease;
}
.team-card-v2:hover { transform: translateY(-8px); }
.team-card-v2 .photo { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.team-card-v2 .photo img { width: 100%; height: 100%; object-fit: cover; }
.info { padding: 28px 24px; }
.role { color: var(--brand-blue); font-weight: 700; font-size: 13px; margin-bottom: 10px; display: block; }

/* 4. 【核心升级】新媒体矩阵样式 (支持 7 项居中) */
.social-matrix-section { padding: 80px 0; }
.social-flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 让多出的第 7 个磁贴居中 */
  gap: 20px;
  margin-top: 40px;
}

.social-item-tile {
  background: #fff;
  border-radius: 32px;
  padding: 35px 10px;
  width: calc(25% - 20px); /* 默认 4 列 */
  min-width: 200px;
  text-align: center;
  text-decoration: none;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.social-item-tile span.platform { font-size: 11px; color: var(--apple-muted); font-weight: 700; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.1em; }
.social-item-tile h4 { font-size: 16px; color: var(--apple-text); font-weight: 800; margin: 0; line-height: 1.3; }

/* 磁贴变蓝动效 */
.social-item-tile:hover {
  background: var(--brand-blue);
  transform: translateY(-12px);
  box-shadow: 0 25px 50px rgba(15, 59, 130, 0.2);
}
.social-item-tile:hover span.platform { color: rgba(255,255,255,0.6); }
.social-item-tile:hover h4 { color: #fff; }

/* 5. 深蓝按钮标准 */
.btn-capsule-blue {
  display: inline-flex !important; padding: 20px 60px !important;
  background-color: #0f3b82 !important; color: #fff !important;
  border-radius: 999px !important; font-size: 18px !important;
  font-weight: 700 !important; text-decoration: none !important;
  transition: 0.4s;
}
.btn-capsule-blue:hover { transform: translateY(-5px) scale(1.03) !important; }

/* 响应式适配 */
@media (max-width: 1200px) {
  .social-item-tile { width: calc(33.33% - 20px); } /* 平板 3 列 */
}
@media (max-width: 820px) {
  .team-grid-v2 { grid-template-columns: 1fr; }
  .pets-row { grid-template-columns: repeat(2, 1fr); }
  .social-item-tile { width: calc(50% - 12px); border-radius: 24px; padding: 25px 10px; } /* 手机 2 列 */
}