/* 1. 顶部留白区域占位 */
.links-hero {
  height: 140px; /* 降低一点高度，让视觉得到呼吸，同时轻松触发滚动 */
  width: 100%;
}

/* 2. 完美对齐主页布局，修正在大屏幕下过于靠左或靠上的问题 */
.links-main-layout {
  display: grid;
  grid-template-columns: 1fr 300px; /* 左侧自适应，右侧给固定的 sidebar 空间 */
  gap: 24px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto 40px auto;
  padding: 0 20px;
}

/* 3. 左侧大盒子的内衬间距修正 */
.links-content-container {
  padding: 40px !important;
}

.links-content-container .post-list {
  padding: 0 10px;
}

/* 4. 友链卡片网格系统：做成流畅的两列或三列响应式网格 */
.links-grid {
  margin-top: 24px;
  padding: 4px;
}

/* 5. 独立卡片：打造成类似于主页 postcard 的独立黑框框质感 */
.friend-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  
  /* 黑色偏暗的半透明背景，带有一丝丝框线 */
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  
  text-decoration: none;
  color: #ffffff;
  
  /* 动画基准 */
  transition: background-color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

/* 6. 悬浮深化特效：背景变深、卡片轻微右移或浮起 */
.friend-card:hover {
  background-color: rgba(0, 0, 0, 0.45); /* 背景加深 */
  border-color: rgba(255, 255, 255, 0.1);  /* 边框微亮 */
  transform: translateY(-2px);
}

/* 7. 头像包装盒 */
.friend-avatar-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 头像图片原生动画 */
.friend-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* 鼠标悬浮在卡片上时，头像放大 */
.friend-card:hover .friend-avatar {
  transform: scale(1.12);
}

/* 8. 文字排版系统 */
.friend-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.friend-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #f3f3f3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-quote {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.friend-card:hover .friend-quote {
  opacity: 0.8;
}

/* 9. 窄屏/移动端自适应 */
@media (max-width: 900px) {
  .links-main-layout {
    display: flex;
    flex-direction: column;
  }
  
  .links-main-layout .main-column {
    width: 100%;
    order: 1;
  }
  
  .links-main-layout .sidebar {
    width: 100%;
    order: 2; /* 移动端下把侧边栏挪到最下面 */
  }
}