/* ========== 全局背景图 + 内容区模糊效果 ========== */

/* 1. 用 banner 图替换默认的纯色背景 */
#web_bg {
  background: url(/img/banner.jpg) center center / cover no-repeat fixed !important;
}

/* 2. header 透明，让 #web_bg 清晰显示 */
#page-header {
  background: transparent !important;
}

/* 3. 内容区半透明 + 轻微模糊 */
#blog-container {
  background: rgba(247, 249, 254, 0.82) !important;
  backdrop-filter: saturate(150%) blur(8px) !important;
  -webkit-backdrop-filter: saturate(150%) blur(8px) !important;
}

/* 4. 深色模式适配 */
[data-theme="dark"] #blog-container {
  background: rgba(24, 23, 29, 0.82) !important;
}

/* ========== 移动端优化 ========== */
@media screen and (max-width: 768px) {
  /* 文章标题增加行高和间距 */
  .recent-post-info .article-title {
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
    font-size: 16px !important;
  }

  /* 文章卡片增加内边距 */
  .recent-post-item {
    padding: 20px !important;
    margin-bottom: 16px !important;
  }

  /* 文章元信息（标签、时间）优化 */
  .recent-post-info .article-meta-wrap {
    margin-top: 12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* 文章标签样式 */
  .recent-post-info .article-meta-wrap .article-meta-label {
    font-size: 12px !important;
    color: #666 !important;
    margin-right: 8px !important;
  }

  /* 文章标签云 */
  .recent-post-info .article-meta-wrap .article-tag {
    margin-right: 6px !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
  }

  /* 文章时间 */
  .recent-post-info .article-meta-wrap .post-meta-date {
    font-size: 12px !important;
    color: #999 !important;
    margin-top: 4px !important;
    width: 100% !important;
  }

  /* 分类导航优化 */
  #category-bar {
    padding: 8px 12px !important;
  }

  /* 悬浮按钮位置优化 */
  #rightside {
    right: 12px !important;
    bottom: 80px !important;
  }

  #rightside > div {
    margin-bottom: 8px !important;
  }

  /* 侧边栏在移动端隐藏或优化 */
  #aside-content {
    margin-top: 20px !important;
  }

  /* 头图适配 */
  #page-header.full_page {
    height: 300px !important;
  }

  /* 标签云间距优化 */
  .card-tag-cloud a {
    margin: 4px !important;
    padding: 4px 8px !important;
  }

  /* 首页文章列表优化 */
  #recent-posts {
    padding: 0 12px !important;
  }

  /* 文章封面图优化 */
  .recent-post-item .post_cover {
    margin-bottom: 12px !important;
  }

  /* 文章内容预览优化 */
  .recent-post-info .content {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-top: 8px !important;
  }
}