/* styles.css */

/* 页脚整体样式 */
.zshao-footer {
    background-color: #f8f9fa;
    padding: 30px 20px;
    text-align: center;
    border-top: 1px solid #e9ecef;
}

/* 友情链接容器样式 */
.zshao-footer-links-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 给容器添加阴影，使其更凸显 */
    padding: 15px;
    border-radius: 5px;
    background-color: white;
}

/* 友情链接上方提示文字样式 */
.zshao-links-title {
    color: #6c757d;
    font-size: 14px;
    margin-bottom: 5px;
}

/* 友情链接样式 */
.zshao-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    transform-style: preserve-3d;
    position: relative;
}

.zshao-footer-links a {
    color: #495057;
    text-decoration: none;
    padding: 8px 16px;
    background-color: #e9ecef;
    border-radius: 20px;
    transition: all 0.3s ease;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateZ(10px);
}

.zshao-footer-links a:hover {
    background-color: #ced4da;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateZ(15px);
}

/* 媒体查询，用于小屏幕设备（例如手机） */
@media screen and (max-width: 600px) {
   .zshao-footer-links {
              flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

   .zshao-footer-links a {
        width: calc(50% - 7.5px); /* 每行两个链接，减去间距的一半 */
        text-align: center;
        margin-bottom: 10px;
    }

}




/* 整体文章画廊容器样式 */
.zshao-wenzhang {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 15px; /* 文章项之间的间隔为15px，比之前稍大一点，看起来更舒适 */
}

/* 单个文章项样式 */
.zshao-a-1 {
  width: calc(33.33% - 15px); /* 减去间隔值以确保每行能正确放置三个文章项 */
  text-align: center;
  background-color: #f8f8f8; /* 较浅的灰色背景，使文章项更突出 */
  box-sizing: border-box;
  padding: 15px; /* 增加内边距，让内容有更多空间 */
  border-radius: 8px; /* 给文章项添加圆角，使其看起来更柔和 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加淡淡的阴影，增加立体感 */
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease; /* 添加过渡效果，用于鼠标悬停时的动画 */
}

/* 鼠标悬停在文章项上的样式 */
.zshao-a-1:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 加深阴影，突出悬停效果 */
  transform: translateY(-3px); /* 向上稍微移动一点，增强悬停时的互动感 */
}

/* 文章项内图片样式 */
.zshao-a-1 img {
  width: 100%;
  height: 200px; /* 设置你想要的固定高度值，这里以200px为例，可根据实际需求调整 */

  object-fit: cover;
  border-radius: 8px 8px 0 0; /* 给图片添加圆角，与文章项的圆角风格一致 */
}

/* 文章项内标题样式 */
.zshao-a-1.zshao-p-1 {
  margin-top: 10px; /* 标题与图片之间的间距 */
  font-size: 16px;
  color: #333; /* 深灰色标题，清晰可读 */
  font-weight: 500; /* 适中的字体粗细 */
}

/* 文章项内日期样式 */
.zshao-a-1.zshao-p-2 {
  margin-top: 5px;
  font-size: 12px;
  color: #888; /* 较浅的灰色日期，不太突出 */
}

/* 文章项内点击次数样式 */
.zshao-a-1.zshao-p-3 {
  margin-top: 5px;
  font-size: 12px;
  color: #888; /* 较浅的灰色点击次数，不太突出 */
}
.zshao-a-1 {
    text-decoration: none; /* 去掉下划线 */
    color: black; /* 设置字体颜色为黑色 */
}

.zshao-a-1:hover {
    text-decoration: none; /* 鼠标悬停时也去掉下划线 */
}

/* 新增的标题模块样式 */
.zshao-title-module {
  background-color: #fff; /* 白色背景，可根据需求调整颜色 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* 阴影效果，可根据需求调整参数 */
  padding: 10px; /* 内边距，可根据需求调整大小 */
  border-radius: 5px; /* 圆角，可根据需求调整弧度 */
  display: inline-block; /* 使模块根据内容宽度自适应，且可以设置外边距等 */
  margin-top: 5px; /* 距离上面元素的间距，可根据需求调整 */
}

/* 图片及蒙版容器样式 */
.image-with-mask {
  position: relative;
  width: 100%;
}

/* 图片样式 */
.image-with-mask img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

/* 蒙版层样式 */
.mask-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px; /* 调整蒙版高度为30px，可根据需求更改 */
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色，可根据需求调整透明度 */
  border-radius: 8px 8px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white; /* 文字颜色为白色，以便在蒙版上清晰显示 */
}

/* 蒙版内文字样式，可根据需求进一步调整 */
.mask-layer p {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}



/* 媒体查询，针对手机端调整样式 */
@media (max-width: 768px) {
.zshao-a-1 {
    width: calc(50% - 15px); /* 减去间隔值以确保每行能正确放置两个文章项 */
  }
}