/* --- 全局样式与变量 --- */
:root {
    /* 定义颜色变量，便于维护和主题切换 */
    --color-background: #121212;
    --color-card-background: #1E1E1E;
    --color-accent: #00BFFF; /* DeepSkyBlue */
    --color-text-primary: rgba(255, 255, 255, 0.87);
    --color-text-secondary: rgba(255, 255, 255, 0.60);
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Roboto', sans-serif;
  }
  
  body {
    background-color: var(--color-background);
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    margin: 0;
    padding: 0;
    line-height: 1.7;
  }
  
  /* --- 排版样式 --- */
  .site-header {
    text-align: center;
    padding: 60px 20px;
  }
  
  h1 {
    font-family: var(--font-heading);
    font-size: 3em; /* 48px */
    letter-spacing: 3px;
    color: var(--color-text-primary);
    margin: 0;
    font-weight: 500;
  }
  
  h2 {
    font-family: var(--font-heading);
    font-size: 1.75em; /* 28px */
    letter-spacing: 1px;
    color: var(--color-text-primary);
    margin: 0 0 12px 0;
    font-weight: 500;
  }
  
  p {
    margin: 0;
    font-size: 1em; /* 16px */
    font-weight: 400;
  }
  
  /* --- 布局样式 --- */
  .project-gallery ul {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 60px 40px;
    list-style: none;
    
    /* 使用CSS Grid实现响应式网格布局 */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 40px;
  }
  
  /* --- 卡片组件样式 --- */
  .project-card {
    background: var(--color-card-background);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    overflow: hidden; /* 确保圆角裁切内容 */
    
    /* 使用Flexbox实现内部内容的垂直布局和空间分配 */
    display: flex;
    flex-direction: column;
    
    /* 定义平滑过渡效果，提升交互体验 */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
  }
  
  /* 卡片悬停时的交互效果 */
  .project-card:hover {
    transform: translateY(-8px); /* 向上微移，产生“浮起”感 */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6); /* 增强阴影，加深立体感 */
  }
  
  .card-content {
    padding: 32px;
    flex-grow: 1; /* 让内容区域占据多余空间，将footer推到底部 */
  }
  
  .card-footer {
    padding: 0 32px 32px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 24px;
    padding-top: 24px;
  }
  
  /* --- 图标与链接样式 --- */
  .card-footer a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 400;
    display: inline-flex; /* 使图标和文字在同一行并垂直居中 */
    align-items: center;
    gap: 8px; /* 图标和文字之间的间距 */
    transition: color 0.2s ease-in-out;
  }
  
  .card-footer a:hover {
    color: var(--color-accent);
    text-decoration: underline;
  }
  
  /* 悬停时，链接内的SVG图标也改变颜色 */
  .card-footer a:hover.icon {
    fill: var(--color-accent);
    stroke: var(--color-accent);
  }
  
  .icon {
    width: 18px;
    height: 18px;
    /* 对于描边(stroke)图标，使用stroke；对于填充(fill)图标，使用fill */
    stroke: var(--color-text-secondary); /* 外部链接图标的默认颜色 */
    fill: var(--color-text-secondary);   /* GitHub图标的默认颜色 */
    transition: fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
  }