/* ===== MBTI 模块容器 ===== */
.mbti-container{
  max-width:1200px;
  margin:0 auto;
  padding:28px 16px;
  box-sizing:border-box;
}

/* 标题区 */
.mbti-container .mbti-title{
  text-align:center;
  margin-bottom:28px;
}
.mbti-container .mbti-title h1{
  margin:30px 0 20px;
  font-size:35px;color: #4a148c;
  line-height:1.2;
  font-weight:700;
}
.mbti-container .mbti-title p{
  margin:0;
  color:#666;
  font-size:16px;margin-bottom: 50px;
}

/* 卡片栅格：桌面端一排四个 */
.mbti-container .mbti-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

/* 卡片 */
.mbti-container .mbti-card{
  background:#fff;
  border-radius:0px;
  /* 你的 HTML 里已写了不同颜色的 border-top，这里只保留圆角与阴影 */
  box-shadow:0 6px 20px rgba(0,0,0,.06);
  padding:20px 18px 22px;
  box-sizing:border-box;
  transition:transform .2s ease, box-shadow .2s ease;
}
.mbti-container .mbti-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 28px rgba(0,0,0,.10);
}

/* 代号（INTJ/ENTP…） */
.mbti-container .mbti-type{
  font-size:30px;
  font-weight:800;
  text-align:center;
  letter-spacing:.5px;
  margin:4px 0 6px;
  color:#222;
}

/* 名称（建筑师型等） */
.mbti-container .mbti-name{
  font-size:16px;
  font-weight:700;
  text-align:center;
  color:#333;
  margin-bottom:12px;
}

/* 描述 */
.mbti-container .mbti-desc{
  font-size:14px;
  line-height:1.85;
  color:#555;
  text-align:justify;
  word-break:break-word;
}

/* —— 响应式 —— */
/* 大屏略收紧间距 */
@media (min-width:1280px){
  .mbti-container .mbti-grid{ gap:26px; }
}

/* 平板：一排两张 */
@media (max-width:992px){
  .mbti-container .mbti-grid{
    grid-template-columns:repeat(2,1fr);
    gap:18px;
  }
  .mbti-container .mbti-type{ font-size:28px; }
}

/* 手机：一排一张，卡片留白更紧凑 */
@media (max-width:640px){
  .mbti-container{ padding:22px 14px; }
  .mbti-container .mbti-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .mbti-container .mbti-card{
    padding:16px 14px 18px;
    border-radius:0px;
  }
  .mbti-container .mbti-title h1{ font-size:30px;         margin-top: 0px;}
  .mbti-container .mbti-title p{ font-size:15px; margin-bottom: 20px;}
  .mbti-container .mbti-type{ font-size:24px; }
  .mbti-container .mbti-name{ font-size:15px; }
  .mbti-container .mbti-desc{ font-size:13px; line-height:1.75; }
}

/* 辅助：减少动画偏好时禁用悬浮动效 */
@media (prefers-reduced-motion:reduce){
  .mbti-container .mbti-card{ transition:none; }
  .mbti-container .mbti-card:hover{ transform:none; }
}