/* ==========================================================================
   字体导入和声明
   ========================================================================== */

/* JetBrains Mono 字体导入 */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

/* Huiwen 字体声明 - 使用CDN */
@font-face {
  font-family: 'Huiwen';
  src: url('https://cdn.zuanshijia.top/Huiwen-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   全局字体应用
   ========================================================================== */

/* 头部导航区域使用 JetBrains Mono 字体 */
header,
.navbar,
.navbar *,
.navbar-brand,
.navbar-nav,
.nav-item,
.nav-link,
.navbar-toggler,
.navbar-toggler-icon,
.navbar-collapse {
  font-family: 'JetBrains Mono', monospace !important;
}

/* 页面其他所有内容使用 Huiwen 字体 */
body,
*,
*:before,
*:after {
  font-family: 'Huiwen', 'Microsoft YaHei', 'SimHei', 'PingFang SC', sans-serif !important;
}

/* 代码元素使用 JetBrains Mono 字体 */
code, pre, textarea, input:not(.form-control) {
  font-family: 'JetBrains Mono', monospace !important;
}

/* 确保文章内容使用 Huiwen 字体 */
.post-content,
.article-content,
.entry-content,
.portfolio-content {
  font-family: 'Huiwen', 'Microsoft YaHei', 'SimHei', 'PingFang SC', sans-serif !important;
}

/* 文章内的标题也使用 Huiwen 字体 */
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6,
.article-content h1, .article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
  font-family: 'Huiwen', 'Microsoft YaHei', 'SimHei', 'PingFang SC', serif !important;
}

/* ==========================================================================
   内容区域链接样式
   ========================================================================== */

/* 只针对文章内容区域的链接使用黑色 */
.post-content a,
.article-content a,
.entry-content a,
.portfolio-content a {
  color: rgba(0, 0, 0, 0.5) !important;
}

.post-content a:hover,
.article-content a:hover,
.entry-content a:hover,
.portfolio-content a:hover {
  color: rgba(0, 0, 0, 0.5) !important;
  text-decoration: underline !important;
}


/* ==========================================================================
   导航栏样式优化
   ========================================================================== */

.navbar-collapse hr, .hidden-md-up {
  display: none !important;
}

.navbar-collapse {
  border: none !important;
  box-shadow: none !important;
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

.navbar-toggler-icon {
  outline: none !important;
}

/* ==========================================================================
   页脚样式
   ========================================================================== */

footer, footer * {
  color: #777777 !important;
  font-family: 'Huiwen', 'Microsoft YaHei', 'SimHei', 'PingFang SC', sans-serif !important;
}

footer a {
  color: #777777 !important;
  text-decoration: none !important;
}

footer a:hover {
  color: #000000 !important;
  text-decoration: underline !important;
}

footer img {
  vertical-align: middle;
  margin-right: 5px;
  height: 16px;
}

/* ==========================================================================
   图片悬停效果
   ========================================================================== */

/* 统一图片展示面积，保持等比例缩小 */
.hovereffect {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* 固定比例 4:3，确保所有图片面积相同 */
  overflow: hidden;
  margin-bottom: 1.2rem;
}

.hovereffect img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例并填充容器 */
  object-position: center;
  transition: opacity 0.35s, transform 0.35s;
}

/* 文字覆盖效果 - 鼠标悬停时显示半透明白色背景和标题 */
.hovereffect .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0); /* 初始状态完全透明 */
  opacity: 1;
  transition: background-color 0.35s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hovereffect:hover .overlay {
  background-color: rgba(255, 255, 255, 0.6); /* 悬停时半透明白色 */
}

.hovereffect .overlay-text {
  font-size: 1.8rem;
  color: #000;
  font-weight: 300;
  text-align: center;
  padding: 0 15px;
  max-width: 90%;
  left: 50%;
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  opacity: 0; /* 初始状态文字隐藏 */
  transition: opacity 0.35s, transform 0.35s;
  z-index: 2;
}

.hovereffect:hover .overlay-text {
  opacity: 1; /* 悬停时显示文字 */
  transform: translate(-50%, -50%);
}

.hovereffect:hover img {
  opacity: 0.5; /* 图片变暗效果 */
}

/* ==========================================================================
   网格布局优化
   ========================================================================== */

.col-md-6.col-12.mb-4,
.col-lg-4.col-md-6.col-12.mb-4 {
  display: flex;
  flex-direction: column;
}

/* 确保行容器正确显示 */
.row {
  display: flex !important;
  flex-wrap: wrap !important;
  margin-right: -15px !important;
  margin-left: -15px !important;
}

/* 确保列容器正确对齐 */
[class*="col-"] {
  position: relative !important;
  width: 100% !important;
  min-height: 1px !important;
  padding-right: 15px !important;
  padding-left: 15px !important;
}

/* ==========================================================================
   响应式调整
   ========================================================================== */

/* 响应式调整文字大小 */
@media (min-width: 992px) {
  .hovereffect .overlay-text {
    font-size: 1rem;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .hovereffect .overlay-text {
    font-size: 1.1rem;
  }
}

@media (max-width: 767px) {
  .hovereffect .overlay-text {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .hovereffect .overlay-text {
    font-size: 0.9rem;
  }
}

/* 响应式调整容器比例 */
@media (min-width: 992px) {
  .hovereffect {
    padding-bottom: 65%; /* 大屏幕稍大一些 */
  }

  .hovereffect .overlay-text {
    font-size: 1rem;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .hovereffect {
    padding-bottom: 70%;
  }

  .hovereffect .overlay-text {
    font-size: 1.1rem;
  }
}

@media (max-width: 767px) {
  .hovereffect {
    padding-bottom: 60%;
  }

  .hovereffect .overlay-text {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .hovereffect {
    padding-bottom: 55%;
  }

  .hovereffect .overlay-text {
    font-size: 0.9rem;
  }
}

/* 如果需要更紧凑的布局 */
.compact-gallery .hovereffect {
  padding-bottom: 60%; /* 更小的面积 */
}

@media (min-width: 1200px) {
  .xl-gallery .hovereffect {
    padding-bottom: 60%; /* 超大屏幕更紧凑 */
  }
}

/* 强制一行三张图片 - 使用!important确保生效 */
@media (min-width: 992px) {
  .col-lg-4.col-md-6.col-12.mb-4,
  .col-md-6.col-12.mb-4 {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
  }

  .hovereffect {
    padding-bottom: 55% !important; /* 更紧凑 */
  }

  .hovereffect .overlay-text {
    font-size: 0.9rem !important;
  }
}

/* 中等屏幕两列 */
@media (min-width: 768px) and (max-width: 991px) {
  .col-md-6.col-12.mb-4 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  .hovereffect {
    padding-bottom: 60% !important;
  }
}

/* 小屏幕一列 */
@media (max-width: 767px) {
  .col-md-6.col-12.mb-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .hovereffect {
    padding-bottom: 50% !important;
  }
}