/* ============================================================
   我的页面：简介双卡（源自设计稿第 12 页布局）+ 相册网格 + 旅行时间轴 + 灯箱
   ============================================================ */

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

/* —— 个人简介双卡（源自设计稿第 12 页：313px + 747px） —— */
.profile {
  display: grid;
  grid-template-columns: 19.56rem 46.7rem;
  gap: 3.25rem;
  margin-top: 1.5rem;
  margin-left: 2.3rem;
}
.p-card {
  background: var(--blue-panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 2.3rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  min-height: 26.9rem;
}
.p-avatar-card {
  display: flex; align-items: center; justify-content: center;
}
.p-avatar-card img {
  width: 11rem; height: 11rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, .7);
}
.p-info-card { padding: 2.5rem 3rem; display: flex; flex-direction: column; }
.p-info-card h2 {
  font-family: var(--font-logo);
  font-size: 3rem; font-weight: 600;
}
/* 联系方式行：邮箱图标 + 邮箱 + GitHub 图标 + GitHub 链接 */
.p-contact {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .6rem 1.4rem;
  margin-top: 1rem;
}
/* 联系方式行（图标+链接对；移动端按行纵向排列，见 mobile.css） */
.p-contact-row { display: flex; align-items: center; gap: .6rem; }
.p-contact .ci {
  width: 1.5rem; height: 1.5rem;
  flex-shrink: 0;
  opacity: .9;
}
.p-contact .p-link {
  font-size: 1.33rem; font-weight: 600;
  padding-bottom: .1rem;
  border-bottom: 2px solid transparent;
  transition: translate .25s ease, border-color .25s ease;
}
.p-contact .p-link:hover { border-bottom-color: rgba(255, 255, 255, .7); translate: 0 -2px; }
.p-intro {
  font-size: 1.33rem; line-height: 1.9;
  color: rgba(255, 255, 255, .95);
  margin-top: 1.6rem;
}

/* —— 区块标题 —— */
.sec-title {
  font-size: 3rem; font-weight: 700;
  margin: 4.5rem 0 1.8rem;
}

/* —— 相册网格（懒加载 + 淡入） —— */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.gallery .g-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 1.5rem;
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease, translate .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.gallery .g-item.visible { opacity: 1; transform: none; }
.gallery .g-item:hover { translate: 0 -4px; box-shadow: var(--shadow); }
.gallery .g-item img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* 第 8 个模块：磨砂玻璃蒙层 + 大“+”（样式在 base.css 中共享），点击进入相册页 */
.gallery .g-item.g-add { position: relative; overflow: hidden; opacity: 1; transform: none; }
.gallery .g-item.g-add img { width: 100%; height: 100%; object-fit: cover; }

/* 相册页（“我的”的子页面）：标题与“我的”页相册标题同款，不采用主分页面大标题 */
.page-gallery .gallery-page-title {
  font-size: 3rem; font-weight: 700;
  margin: 2rem 0 1.8rem;
}

/* —— 旅行时间轴（CSS 绘制） —— */
.timeline {
  position: relative;
  padding-left: 2.8rem;
}
.timeline::before {
  content: '';
  position: absolute; left: .35rem; top: .5rem; bottom: .5rem;
  width: 2px;
  background: rgba(255, 255, 255, .4);
}
.tl-item { position: relative; padding: 0 0 2.2rem 1.8rem; }
.tl-item::before {
  content: '';
  position: absolute; left: -2.9rem; top: .45rem;
  width: .9rem; height: .9rem;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .25);
}
.tl-card {
  background: var(--blue-panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 1.5rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  padding: 1.4rem 1.8rem;
  display: inline-block;
  min-width: 34rem;
  max-width: 100%;
}
.tl-date {
  font-family: var(--font-logo);
  font-size: 1.17rem; font-weight: 600;
  color: var(--text-dim);
}
.tl-title { font-size: 1.5rem; font-weight: 700; margin-top: .25rem; }
.tl-desc { font-size: 1.17rem; color: rgba(255, 255, 255, .9); margin-top: .4rem; }

/* —— 灯箱 —— */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(5, 15, 25, .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
/* 桌面：图片+标题仍直接参与灯箱纵向布局；切换键维持屏幕两侧绝对定位 */
.lb-stage { display: contents; }
.lb-row { display: contents; }
.lb-img {
  max-width: 82vw; max-height: 76vh;
  border-radius: 1rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
}
.lb-caption {
  margin-top: 1.4rem;
  font-size: 1.33rem;
  color: var(--white);
}
/* 图标 SVG 尺寸（像素级居中，替代字形） */
.lb-close svg { width: 1.5rem; height: 1.5rem; }
.lb-nav svg { width: 2.4rem; height: 2.4rem; }
.lb-close {
  position: absolute; top: 1.6rem; right: 2.2rem;
  width: 3rem; height: 3rem;
  line-height: 1;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  font-size: 1.8rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.lb-nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 3.4rem; height: 5.4rem;
  line-height: 1;
  background: rgba(255, 255, 255, .12);
  border-radius: 1rem;
  font-size: 2.6rem;
  display: flex; align-items: center; justify-content: center;
}
.lb-nav:hover { background: rgba(255, 255, 255, .22); }
.lb-prev { left: 2rem; }
.lb-next { right: 2rem; }