/* global.css - 首页&关于我页面公共样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, sans-serif;
}

/* 收窄页面宽度 */
body {
  background-color: #000;
  color: #fff;
  min-height: 100vh;
  padding: 2rem 4rem;
}

main {
  max-width: 800px;
  margin: 0 auto;
}

/* 通用标题样式 */
.page-title {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 0.8rem;
}

.text-gradient {
  background: linear-gradient(90deg, #d946ef, #f97316);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  margin-left: 2px;
}

.subtitle {
  font-size: 1.1rem;
  color: #a855f7;
  margin-bottom: 2rem;
  line-height: 1.4;
}

.btn-group {
  display: flex;
  gap: 0.8rem;
  margin-bottom: 3rem;
}

/* 通用按钮样式（未hover时灰色） */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  background-color: #1a1a1a; /* 灰色背景 */
  color: #fff;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid #2d2d2d;
}

/* 按钮hover彩色效果（匹配目标样式） */
.btn-blog:hover {
  background-color: #e62e7b !important; /* 博客按钮粉色（匹配图标） */
  border-color: #e62e7b;
}
.btn-email:hover {
  background-color: #0084ff !important; /* 邮箱按钮蓝色（匹配图标） */
  border-color: #0084ff;
}
.btn-sponsor:hover {
  background-color: #ffc107 !important; /* 赞助按钮黄色（匹配图标） */
  border-color: #ffc107;
  color: #000 !important; /* 黄色背景配黑色文字更清晰 */
}

.btn i {
  font-size: 1rem;
  margin-right: 0.4rem;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
  font-weight: 600;
}

.heart-icon {
  color: #ef4444;
  margin-right: 0.5rem;
  font-size: 1.2rem;
}

/* 箭头下划线效果 */
.arrow-link {
  color: #fff;
  opacity: 0.5;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
  margin: 0.5rem;
  position: relative;
}

.arrow-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #fff;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.arrow-link:hover {
  opacity: 1;
}
.arrow-link:hover::after {
  transform: scaleX(1);
}

.arrow-link i {
  font-size: 1.2rem;
}

.card {
  background-color: #1a1a1a;
  border-radius: 0.4rem;
  padding: 1rem;
  transition: all 0.2s ease;
  border: 1px solid #2d2d2d;
}

.card:hover {
  background-color: #242424;
}

.card-header {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #f3f4f6;
}

.card-content {
  font-size: 0.9rem;
  color: #9ca3af;
  line-height: 1.4;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

/* 新增：关于我卡片链接样式 */
.card-link {
  color: inherit; /* 继承卡片原有文字颜色 */
}
.card-link:hover {
  text-decoration: none !important; /* 移除链接默认下划线 */
}

.pending-card {
  grid-column: span 2;
}

.about-wide-card {
  background-color: #1a1a1a;
  border-radius: 0.6rem;
  padding: 1.5rem;
  max-width: 100%;
  width: 100%;
  line-height: 1.6;
  transition: all 0.2s ease;
  border: 1px solid #2d2d2d;
}

.about-wide-card:hover {
  background-color: #242424;
}

.about-wide-card p {
  margin-bottom: 1rem;
  font-size: 1rem;
  opacity: 0.95;
}

.about-wide-card p:last-child {
  margin-bottom: 0;
}

footer {
  margin-top: 3rem;
  font-size: 0.9rem;
  color: #6b7280;
}

footer a {
  color: #fff !important;
  text-decoration: none !important;
}

/* 响应式适配 */
@media (max-width: 768px) {
  body {
    padding: 1.5rem 1rem;
  }

  .page-title {
    font-size: 2.5rem;
  }

  .btn-group {
    flex-wrap: wrap;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .pending-card {
    grid-column: span 1;
  }
}