/* ============================================================
   友链页：与首页友链区同款设计——居中标题 + 三列网格（排数不限）
   卡片样式与 home.css 中保持一致，修改时请同步
   ============================================================ */

/* 页头：居中，与文章页标题同款（8rem + 2rem）
   标题与顶部栏的距离 = 副标题与下方第一个内容框的距离（各 1.5rem） */
.page-friends .page-content { padding-top: calc(var(--nav-h) + 1rem); }
.page-head { text-align: center; padding-top: .5rem; }
.page-head h1 { font-size: 8rem; font-weight: 700; line-height: 1.25; }
.page-head p { font-size: 2rem; font-weight: 600; margin-top: 1rem; opacity: .92; }

.friends-grid {
  width: 66rem;
  margin: 1.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 16.5rem);
  justify-content: space-between;
  row-gap: 4.19rem;
}

.friend-card {
  width: 16.5rem; height: 14.5rem;
  background: var(--blue-panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 2.4rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .7rem;
  padding: 1.2rem;
}
.friend-card .fc-avatar {
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .7);
}
.friend-card .fc-name {
  font-size: 1.5rem; font-weight: 600;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.friend-card .fc-url {
  font-size: 1rem; color: var(--text-dim);
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 交换友链文案：居中白色 18pt */
.exchange {
  margin-top: 5rem;
  text-align: center;
  font-size: 1.5rem;   /* 18pt */
  color: var(--white);
}