/* ============================================================
   qiye-tuanbao.html — 变体 J（纪实时间线）专属样式
   ============================================================ */

.pg-hero-tuanbaoJ {
  background:
    radial-gradient(1100px 500px at 15% -10%, rgba(40,90,170,.32), transparent 60%),
    linear-gradient(135deg, #101f3a 0%, #1c3660 55%, #274a7d 100%);
}
.pg-hero-tuanbaoJ .lead { color: #dce6f5; }

/* 职业故事+大图 */
.story-flex { display: grid; grid-template-columns: 1fr 1.15fr; gap: 46px; align-items: center; }
.story-fig img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 18px 44px rgba(16,31,58,.25); }
.story-txt .sec-title { margin: 8px 0 14px; }
.story-txt p { color: #4a5a6a; line-height: 2.0; margin-bottom: 12px; }

/* 为什么团报四卡 */
.cc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; }
.cc-card { background: #fff; border: 1px solid #e4ebf4; border-radius: 16px; padding: 24px 20px; border-top: 4px solid #274a7d; }
.cc-card h3 { font-size: 16px; color: #16324e; margin-bottom: 10px; }
.cc-card p { margin: 0; font-size: 14px; color: #526474; line-height: 1.85; }
.tuanbao-note { margin-top: 22px; background: #eef3fa; border-radius: 12px; padding: 18px 22px; }
.tuanbao-note p { margin: 0; font-size: 14.5px; color: #37516a; line-height: 1.9; }

/* 场景画廊 */
.sg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.sg img { display: block; width: 100%; height: auto; border-radius: 14px; }
.sg figcaption { margin-top: 10px; font-size: 13.5px; color: #5b6b7b; text-align: center; }

/* 时间线 */
.tl { max-width: 760px; margin: 34px auto 0; position: relative; padding-left: 30px; }
.tl::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: #c3d4ea; }
.tl-item { position: relative; padding-bottom: 26px; }
.tl-dot {
  position: absolute; left: -30px; top: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: #274a7d; box-shadow: 0 0 0 4px #e4ebf4;
}
.tl-body h3 { font-size: 17px; color: #16324e; margin-bottom: 6px; }
.tl-body p { margin: 0; font-size: 14.5px; color: #526474; line-height: 1.85; }

/* 额外服务 */
.tip-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.tip { background: #fff; border: 1px solid #e4ebf4; border-radius: 16px; padding: 24px 22px; }
.tip h3 { font-size: 16.5px; color: #274a7d; margin-bottom: 8px; }
.tip p { margin: 0; font-size: 14px; color: #526474; line-height: 1.85; }

/* 相关推荐 */
.er-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; }
.er-card { display: block; background: #fff; border: 1px solid #e4ebf4; border-radius: 16px; padding: 24px 20px; text-decoration: none; transition: transform .25s, box-shadow .25s; }
.er-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(16,31,58,.14); }
.er-card h3 { font-size: 16.5px; color: #16324e; margin-bottom: 10px; }
.er-card p { margin: 0; font-size: 14px; color: #5a6b7b; line-height: 1.8; }
.tuanbao-cta { padding-bottom: 64px; }

/* 响应式 */
@media (max-width: 900px) {
  .story-flex { grid-template-columns: 1fr; gap: 26px; }
  .cc-grid, .sg-grid, .tip-row, .er-grid { grid-template-columns: 1fr; }
}