/* ---------------------------------------------------------------- */
/* 全局设置 (styls.css) */
/* ---------------------------------------------------------------- */
html, body {
    margin: 0; /* 移除浏览器默认的外边距 */
    padding: 0; /* 移除浏览器默认的内边距 */
    height: 100%; /* 设置 html 和 body 的高度都为视口高度的 100% */
    font-family: 'Inter', Verdana, sans-serif; /* 定义默认字体栈，优先使用 'Inter' */
    -webkit-font-smoothing: antialiased; /* 针对 WebKit 浏览器，开启字体抗锯齿（平滑处理） */
    -moz-osx-font-smoothing: grayscale; /* 针对 Firefox (macOS)，开启字体灰度渲染（用于字体平滑） */
}

body {
    background: #808080 url('public/texture.jpg') repeat; /* 设置背景为灰色 (#808080)，并平铺 ('public/texture.jpg') 图片 */
    color: black; /* 设置默认文本颜色为黑色 */
    font-size: 12px; /* 设置默认字体大小为 12 像素 */
    font-family: Verdana, sans-serif; /* 重新定义 body 内部的字体栈（与 html 略有不同） */
    line-height: 1.4; /* 设置行高为字体大小的 1.4 倍 */
    -webkit-text-size-adjust: 100%; /* 针对移动端 WebKit 浏览器，防止文字在横屏时自动调整大小 */
    overflow-x: hidden; /* 隐藏水平方向的滚动条，防止布局溢出导致的用户体验问题 */
}

/* ---------------------------------------------------------------- */
/* 顶部导航栏 & Logo (已恢复 Logo) */
/* ---------------------------------------------------------------- */
.header {
    width: 100%; /* 宽度占满父容器 */
    padding: 45px 0 20px; /* 上内边距 45px，左右内边距 0 , 下边距20 */
    background: transparent; /* 将背景色设置为透明 */
    backdrop-filter: none; /* 移除背景模糊滤镜效果 */
    text-align: center; /* 内部行内元素（如文本、图片、logo）水平居中对齐 */
    position: relative; /* 定位方式：相对定位 (作为内部绝对定位元素的参照) */
    top: 0; /* 距离顶部 0 */
    z-index: 1000; /* 设置堆叠顺序，确保导航栏位于页面内容的上方 */
}

.site-title {
    margin-bottom: 35px; /* 底部外边距 30 像素 */
}

.logo-link {
    display: inline-flex; /* 使其内容居中且只占据内容所需的宽度 */
    align-items: center; /* 交叉轴（垂直方向）上居中对齐子项 */
    justify-content: center; /* 主轴（水平方向）上居中对齐子项 */
    text-decoration: none; /* 移除文本下划线 */
    color: #4A4A4A; /* 设置链接文本颜色 */
    gap: 12px; /* 设置 Flex 容器中子项之间的间距为 12 像素（Logo和文字的间距） */
}

.logo-image {
    width: 40px; /* 设置图片宽度 40 像素 */
    height: 40px; /* 设置图片高度 40 像素 */
    border-radius: 50%; /* 将图片裁剪成圆形 */
    object-fit: cover; /* 确保图片覆盖整个元素区域，可能会裁剪部分内容 */
}

.logo-text {
    font-size: 1.5rem; /* 字体大小为父元素字体大小的 1.5 倍 */
    font-weight: 600; /* 字体粗细为 600 (半粗体) */
    letter-spacing: 1px; /* 字符间距增加 1 像素 */
}


.main-nav {
    width: 100%; /* 宽度占满父容器 */
}

.menu-list {
    margin: 0; /* 移除默认外边距 */
    padding: 0; /* 移除默认内边距 */
    list-style: none; /* 移除列表项标记（如圆点） */
    display: flex; /* 启用 Flexbox 布局 */
    justify-content: center; /* 主轴（水平方向）上居中对齐子项 */
    gap: 28px; /* 设置 Flex 容器中子项之间的间距为 28 像素 */
    font-weight: 500; /* 字体粗细为 500 */
    font-size: 0.9rem; /* 字体大小为父元素字体大小的 0.9 倍 */
}

.menu-list a {
    line-height: 1; /* 行高等于字体大小，有助于垂直对齐 */
    text-decoration: none; /* 移除文本下划线 */
    color: #555; /* 设置链接文本颜色为中灰色 */
    padding: 6px 4px; /* 上下内边距 6px，左右内边距 4px */
    transition: color 0.2s ease, border-bottom 0.2s ease; /* 对颜色和下边框应用 0.2 秒的平滑过渡效果 */
    border-bottom: 2px solid transparent; /* 默认下边框为 2px 宽，透明 */
}

.menu-list a:hover,
.menu-list a.active {
    color: #007bff; /* 鼠标悬停或激活状态下，文本颜色变为蓝色 */
    border-bottom: 2px solid #007bff; /* 鼠标悬停或激活状态下，下边框显示为蓝色 */
}

/* ---------------------------------------------------------------- */
/* 博客部分样式 */
/* ---------------------------------------------------------------- */
#blog-section {
    padding-top: 30px; /* 为博客区域增加顶部 30 像素的内边距 */
}

.blog-categories {
    width: 100%; /* 宽度占满父容器 */
    max-width: 1400px; /* 最大宽度限制在 1400 像素 */
    margin: 0 auto; /* 水平居中 */
    padding: 1rem 0; /* 上下内边距 1rem，左右内边距 0 */
    background-color: rgba(255, 255, 255, 0.9); /* 设置半透明白色背景 */
    border-bottom: 1px solid #ddd; /* 底部边框为 1 像素的浅灰色实线 */
    position: relative; /* 相对定位（作为可能内部元素的定位参照） */
    z-index: 900; /* 堆叠层级 900 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* 底部添加一个轻微的阴影 */
    overflow-x: auto; /* 当内容超出容器宽度时，允许水平滚动 */
    white-space: nowrap; /* 防止内容换行，确保所有分类标签显示在一行 */
    -webkit-overflow-scrolling: touch; /* 针对 iOS 移动端，优化滚动体验（使用原生的平滑滚动） */
}

.blog-categories-list {
    display: flex; /* 启用 Flexbox 布局 */
    justify-content: center; /* 主轴（水平方向）上居中对齐子项 */
    padding: 0 20px; /* 左右内边距 20 像素 */
    gap: 2rem; /* 设置 Flex 容器中子项之间的间距为 2rem */
}

.blog-categories-list a {
    display: inline-block; /* 设置为行内块级元素 */
    padding: 0.5rem 0; /* 上下内边距 0.5rem，左右内边距 0 */
    font-weight: 600; /* 字体粗细为 600 */
    color: #555; /* 链接文本颜色为中灰色 */
    text-decoration: none; /* 移除下划线 */
    transition: color 0.2s; /* 对颜色应用 0.2 秒的平滑过渡 */
}

.blog-categories-list a:hover,
.blog-categories-list a.active {
    color: #000; /* 鼠标悬停或激活状态下，文本颜色变为黑色 */
}

.post-card {
    background-color: #fff; /* 背景色为白色 */
    border-radius: 0px; /* 边框圆角为 0 像素（直角） */
    overflow: hidden; /* 隐藏超出元素的子内容（主要针对图片圆角） */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 添加阴影效果 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 对位移和阴影应用 0.3 秒的平滑过渡 */
    display: flex; /* 启用 Flexbox 布局 */
    flex-direction: column; /* 设置 Flex 容器的主轴为垂直方向（从上到下） */
    height: 100%; /* 高度占满父容器（用于网格布局中保持卡片高度一致） */
}

.post-card:hover {
    transform: translateY(-5px); /* 鼠标悬停时，沿 Y 轴向上移动 5 像素 */
    box-shadow: 0 8px 20px rgba(0,0,0,0.12); /* 鼠标悬停时，加深阴影效果 */
}

.post-card img {
    width: 100%; /* 图片宽度占满父容器 */
    height: 200px; /* 图片固定高度 200 像素 */
    object-fit: cover; /* 确保图片覆盖整个元素区域，可能会裁剪部分内容 */
}

.post-info {
    padding: 1rem; /* 内边距 1rem */
    flex-grow: 1; /* 占据所有剩余的垂直空间 */
    display: flex; /* 启用 Flexbox 布局 */
    flex-direction: column; /* 主轴为垂直方向 */
    justify-content: space-between; /* 子项在垂直方向上均匀分布，首尾项紧贴边缘 */
}

.post-meta {
    display: flex; /* 启用 Flexbox 布局 */
    align-items: center; /* 交叉轴（垂直方向）上居中对齐子项 */
    justify-content: space-between; /* 主轴（水平方向）上均匀分布，首尾项紧贴边缘 */
    font-size: 0.8rem; /* 字体大小为父元素字体大小的 0.8 倍 */
    color: #777; /* 文本颜色为浅灰色 */
    margin-bottom: 0.5rem; /* 底部外边距 0.5rem */
}

.post-meta .author-info {
    display: flex; /* 启用 Flexbox 布局 */
    align-items: center; /* 交叉轴（垂直方向）上居中对齐子项 */
    gap: 8px; /* 设置子项之间的间距为 8 像素 */
}

.post-meta .author-avatar {
    width: 24px; /* 设置头像宽度 24 像素 */
    height: 24px; /* 设置头像高度 24 像素 */
    border-radius: 50%; /* 将头像裁剪成圆形 */
    object-fit: cover; /* 确保图片覆盖整个元素区域 */
}

.post-title a {
    font-size: 1.125rem; /* 字体大小 */
    font-weight: 600; /* 字体粗细为 600 */
    color: #333; /* 链接文本颜色为深灰色 */
    text-decoration: none; /* 移除下划线 */
    display: block; /* 设置为块级元素，使其占据整行 */
    margin-bottom: 0.5rem; /* 底部外边距 0.5rem */
}

.post-excerpt {
    font-size: 0.9rem; /* 字体大小 */
    color: #666; /* 文本颜色为中等灰色 */
    line-height: 1.4; /* 行高为字体大小的 1.4 倍 */
}

.read-more {
    margin-top: 1rem; /* 顶部外边距 1rem */
    display: flex; /* 启用 Flexbox 布局 */
    justify-content: space-between; /* 主轴（水平方向）上均匀分布，首尾项紧贴边缘 */
    align-items: center; /* 交叉轴（垂直方向）上居中对齐子项 */
}

.read-more .likes {
    color: #e53e3e; /* 设置点赞图标/文本的颜色为红色 */
    font-size: 0.9rem; /* 字体大小 */
}

/* ---------------------------------------------------------------- */
/* 瀑布流画廊样式 */
/* ---------------------------------------------------------------- */
main {
    padding: 0; /* 移除 main 元素的内边距 */
}

.photo-gallery {
    max-width: 100%; /* 最大宽度占满父容器 */
    margin: 0; /* 移除外边距 */
    padding: 0; /* 移除内边距 */
    background: transparent; /* 背景透明 */
}

#masonry-gallery {
    position: relative; /* 相对定位（作为内部绝对定位元素的参照） */
    width: 100%; /* 宽度占满父容器 */
    margin: 0; /* 移除外边距 */
    padding: 40px 80px; /* 上下内边距 40px，左右内边距 80px */
    box-sizing: border-box; /* 边框盒模型：确保 padding 和 border 不会计入元素的总宽度/高度 */
    background: transparent; /* 背景透明 */
}

.gallery-item {
    position: relative; /* 相对定位（用于内部 info 元素的绝对定位参照） */
    box-sizing: border-box; /* 边框盒模型 */
    width: 300px; /* 设置每个画廊项的默认宽度 */
    margin-bottom: 10px; /* 底部外边距 10px（配合瀑布流插件的 gutter 实现垂直间距） */
    cursor: pointer; /* 鼠标悬停时显示手型指针 */
    overflow: hidden; /* 隐藏超出元素的子内容（主要针对 photo-info 元素的初始状态） */
    background-color: #ddd; /* 默认背景色为浅灰色（在图片加载前可见） */
    transition: background-color 0.4s ease, transform 0.3s ease; /* 对背景色和位移应用平滑过渡 */
    border-radius: 0px; /* 边框圆角为 0 像素 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 添加阴影效果 */
}

#gallery-section {
    background: transparent; /* 背景透明 */
    min-height: 100vh; /* 最小高度设置为视口高度的 100% */
}

.photo-info {
    position: absolute; /* 绝对定位（相对于 .gallery-item） */
    bottom: 0; /* 距离底部 0 */
    left: 0; /* 距离左侧 0 */
    right: 0; /* 距离右侧 0，使宽度占满父容器 */
    background: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
    color: white; /* 文本颜色为白色 */
    padding: 8px 12px; /* 上下内边距 8px，左右内边距 12px */
    font-size: 14px; /* 字体大小 14 像素 */
    font-weight: 500; /* 字体粗细 500 */
    transform: translateY(100%); /* 初始状态：沿 Y 轴向下移动自身高度的 100%（隐藏在卡片下方） */
    transition: transform 0.3s ease; /* 对位移应用 0.3 秒的平滑过渡 */
    backdrop-filter: blur(4px); /* 对元素后方的区域应用 4 像素的模糊效果 */
    z-index: 10; /* 堆叠层级 10 */
    pointer-events: none; /* 禁用该元素上的所有鼠标事件（这样可以点击到它下方的图片） */
}

.gallery-item:hover .photo-info {
    transform: translateY(0); /* 鼠标悬停时，沿 Y 轴移动 0（标题栏显现） */
}

.gallery-item:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* 鼠标悬停时，加深阴影效果 */
}

@media (max-width: 1200px) { .gallery-item { width: 280px; } } /* 屏幕宽度小于等于 1200px 时，画廊项宽度 280px */
@media (max-width: 900px) { .gallery-item { width: 260px; } } /* 屏幕宽度小于等于 900px 时，画廊项宽度 260px */
@media (max-width: 768px) {
    .gallery-item { width: calc(50% - 20px); margin: 0 10px 15px; } /* 屏幕宽度小于等于 768px 时，两列布局，宽度为 50% 减去间距 */
    #masonry-gallery { padding: 40px 5px 0; } /* 减少画廊容器的左右内边距 */
}
@media (max-width: 480px) {
    .gallery-item { width: 100%; margin: 0 0 15px; } /* 屏幕宽度小于等于 480px 时，单列布局，宽度 100% */
    #masonry-gallery { padding: 30px 10px 0; } /* 进一步调整画廊容器的内边距 */
}
.masonry-grid {
    margin: 0 auto; /* 水平居中 */
    background: transparent; /* 背景透明 */
}

/* ---------------------------------------------------------------- */
/* Lightbox 模态框样式 (已简化) */
/* ---------------------------------------------------------------- */
#lightbox-modal {
    position: fixed; /* 固定定位，相对于视口 */
    inset: 0; /* 快捷方式，等同于 top: 0; right: 0; bottom: 0; left: 0; 使其覆盖整个视口 */
    background: rgb(255, 255, 255); /* 背景色为白色 */
    display: flex; /* 启用 Flexbox 布局 */
    align-items: center; /* 交叉轴（垂直方向）上居中对齐子项 */
    justify-content: center; /* 主轴（水平方向）上居中对齐子项 */
    z-index: 2000; /* 堆叠层级 2000，确保在最上层 */
    opacity: 0; /* 初始状态：完全透明 */
    visibility: hidden; /* 初始状态：隐藏元素（不响应鼠标事件） */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* 对透明度和可见性应用 0.3 秒的平滑过渡 */
    padding: 20px; /* 内边距 20 像素 */
    box-sizing: border-box; /* 边框盒模型 */
}

#lightbox-modal.visible-modal {
    opacity: 1; /* 添加 .visible-modal 类时，变为完全不透明 */
    visibility: visible; /* 添加 .visible-modal 类时，变为可见 */
}

.lightbox-content-wrapper {
    position: relative; /* 相对定位（作为内部绝对定位元素的参照） */
    width: 100%; /* 宽度占满父容器 */
    height: 100%; /* 高度占满父容器 */
    display: flex; /* 启用 Flexbox 布局 */
    flex-direction: column; /* 主轴为垂直方向 */
    align-items: center; /* 交叉轴（水平方向）上居中对齐子项 */
    justify-content: center; /* 主轴（垂直方向）上居中对齐子项 */
}

/* ---------------------------------------------------------------- */
/* Lightbox 模态框样式 (图片淡入优化) */
/* ---------------------------------------------------------------- */

/* 1. Lightbox 图片基础样式和过渡效果 */
#lightbox-image {
    max-width: 100%;
    max-height: calc(100% - 80px);
    object-fit: contain;
    display: block;
    box-shadow: none;
    
    /* 关键优化：初始状态和过渡 */
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.8s ease-out, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. 图片加载完成状态 */
#lightbox-image.loaded {
    opacity: 1;
    transform: scale(1);
}


/* -- 标题区域 -- */
.lightbox-caption-area {
    position: absolute; /* 定位方式：绝对定位。元素相对于其最近的非 static 定位的祖先元素进行定位。 */
    bottom: 1px; /* 距离底部：元素下边缘距离其定位父元素底部 1 像素。 */
    left: 50%; /* 距离左侧：元素左边缘距离其定位父元素左边缘 50%。 */
    transform: translateX(-50%); /* 变换：在 X 轴（水平方向）上将元素向左移动自身宽度的一半。这与 left: 50% 结合使用，是水平居中的经典方法。 */
    width: auto; /* 宽度：元素的宽度由其内容决定。 */
    max-width: 80%; /* 最大宽度：元素的最大宽度设置为其父元素宽度的 80%。这可以防止元素在小屏幕上过宽。 */
    padding: 5px; /* 内边距：元素的四个方向（上、右、下、左）都设置 5 像素的内边距。 */
    text-align: center; /* 文本对齐：设置元素内部的行内内容（如文本）水平居中对齐。 */
}

/* -- 标题区域文字部分-- */
#lightbox-title {
    color: #333; /* 文本颜色为深灰色 */
    font-size: 15px; /* 字体大小 15 像素 */
}


/* -- "查看原图" 按钮 (已简化) -- */
#view-original {
    position: fixed; /* 固定定位，相对于视口 */
    top: 22px; /* 距离顶部 22 像素 */
    left: 30px; /* 距离左侧 30 像素 */
    z-index: 2002; /* 堆叠层级 2002 */
    color: #333; /* 文本颜色为深灰色 */
    font-size: 16px; /* 字体大小 16 像素 */
    cursor: pointer; /* 鼠标光标显示为手型指针 */
    transition: transform 0.2s ease; /* 对位移应用 0.2 秒的平滑过渡 */

}


/* -- 关闭按钮 -- */
#close-btn {
    position: fixed; /* 定位方式：固定定位。元素会相对于浏览器视口（viewport）固定位置，不随页面滚动而移动。 */
    top: 20px; /* 距离顶部：元素上边缘距离视口顶部 20 像素。 */
    right: 30px; /* 距离右侧：元素右边缘距离视口右侧 30 像素。 */
    color: #333; /* 颜色：设置文本/前景颜色为深灰色。 */
    font-size: 32px; /* 字体大小：设置字体大小为 32 像素。 */
    font-weight: 300; /* 字体粗细：设置字体为较细的（light）字重。 */
    cursor: pointer; /* 鼠标光标：当鼠标悬停在元素上时，光标显示为手型指针，表示元素可点击。 */
    line-height: 1; /* 行高：设置行高为字体大小的 1 倍（常用于垂直居中单行内容）。 */
    transition: transform 0.2s ease; /* 过渡效果：对元素的 'transform' 属性的变化应用平滑过渡效果，持续 0.2 秒，使用 'ease' 缓动函数。 */
    z-index: 2002; /* 堆叠顺序：设置元素的堆叠层级为 2002。数值越高，元素越会显示在其他元素的上方。 */
}
#close-btn:hover {
    transform: scale(1.2); /* 鼠标悬停时，放大 1.2 倍 */
}

/* -- 左右导航按钮 -- */
#prev-button, #next-button {
    position: fixed; /* 固定定位，相对于视口 */
    top: 50%; /* 距离顶部 50% */
    transform: translateY(-50%); /* 沿 Y 轴向上移动自身高度的一半，实现垂直居中 */
    color: rgba(0, 0, 0, 0.4); /* 半透明黑色 */
    font-size: 48px; /* 字体大小 48 像素 */
    font-weight: 100; /* 字体粗细 100 (极细体) */
    cursor: pointer; /* 鼠标光标显示为手型指针 */
    background: transparent; /* 背景透明 */
    border: none; /* 移除边框 */
    padding: 10px; /* 内边距 10 像素 */
    line-height: 1; /* 行高等于字体大小 */
    z-index: 2001; /* 堆叠层级 2001 */
    transition: color 0.2s ease, transform 0.2s ease; /* 对颜色和位移应用 0.2 秒的平滑过渡 */
    user-select: none; /* 防止用户选择或高亮文本内容 */
}

#prev-button { left: 20px; } /* 上一页按钮：距离左侧 20 像素 */
#next-button { right: 20px; } /* 下一页按钮：距离右侧 20 像素 */

#prev-button:hover, #next-button:hover {
    color: rgba(0, 0, 0, 0.8); /* 鼠标悬停时，颜色变为较深的半透明黑色 */
    transform: translateY(-50%) scale(1.1); /* 鼠标悬停时，放大 1.1 倍并保持垂直居中 */
}

#prev-button:disabled, #next-button:disabled {
    opacity: 0.1; /* 禁用状态下，透明度降低 */
    cursor: default; /* 鼠标光标显示为默认（箭头） */
    pointer-events: none; /* 禁用所有鼠标事件，使其不可点击 */
}

/* ---------------------------------------------------------------- */
/* 瀑布流画廊优化样式 */
/* ---------------------------------------------------------------- */
#masonry-gallery::-webkit-scrollbar { display: none; } /* 隐藏 WebKit 浏览器滚动条 */
#masonry-gallery { -ms-overflow-style: none; scrollbar-width: none; } /* 隐藏 IE/Edge 和 Firefox 浏览器滚动条 */
.grid-sizer { width: 300px; background: transparent; } /* 瀑布流布局（Masonry）的辅助元素，用于确定列宽 */
.gallery-item { float: left; } /* 使画廊项浮动，瀑布流布局需要 */
.gallery-item.loading { opacity: 0.7; transform: scale(0.98); } /* 图片加载中状态：降低透明度，略微缩小 */
.gallery-item img { transition: transform 0.3s ease, opacity 0.3s ease; } /* 对图片位移和透明度应用 0.3 秒平滑过渡 */
.gallery-item img.loaded { animation: fadeInUp 0.6s ease; } /* 图片加载完成时，应用 fadeInUp 动画 */
/* 关键修正：移除 transform: translateY，防止图片跳动 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        /* transform: translateY(20px); <-- 删除此行 */
    }
    to {
        opacity: 1;
        /* transform: translateY(0); <-- 删除此行 */
    }
}
@media (min-width: 1400px) { .gallery-item { width: 320px; } } /* 屏幕宽度大于等于 1400px 时，画廊项宽度 320px */
@media (min-width: 2000px) { .gallery-item { width: 350px; } } /* 屏幕宽度大于等于 2000px 时，画廊项宽度 350px */


.spinner {
    position: fixed; /* 固定定位，相对于视口 */
    top: 50%; /* 距离顶部 50% */
    left: 50%; /* 距离左侧 50% */
    width: 40px; /* 宽度 40 像素 */
    height: 40px; /* 高度 40 像素 */
    margin: -20px 0 0 -20px; /* 通过负边距将元素向左上方移动自身尺寸的一半，实现精确居中 */
    border: 4px solid rgba(0, 0, 0, 0.2); /* 边框为 4px 宽的浅黑色实线 */
    border-top-color: rgba(0, 0, 0, 0.8); /* 顶部边框颜色为深黑色，用于创建旋转效果 */
    border-radius: 50%; /* 将元素裁剪成圆形 */
    animation: spin 1s linear infinite; /* 应用 'spin' 动画，持续 1 秒，匀速，无限次循环 */
    z-index: 3000; /* 堆叠层级 3000，确保在最上层 */
    display: none; /* 默认隐藏 */
}
@keyframes spin {
    to { transform: rotate(360deg); } /* 定义 'spin' 动画：从 0 度旋转到 360 度 */
}