/* ============================================================================
   PAGE: BLOG
   ============================================================================ */

.section-blog,
.blog-context {
  /* [移动端吸附高度计算]
     公式 = Logo顶部偏移 + Logo尺寸 + 额外呼吸空间
     例如: 24px + 50px + 24px = 98px
  */
  --mobile-sticky-top: calc(var(--trigger-offset, 24px) + var(--trigger-size, 50px) + var(--space-md));
  
  /* [桌面端吸附高度]
     桌面端 Header 和 Filter 分离，吸顶位置为浏览器顶部
  */
  --desktop-sticky-top: 0px;
  
  /* [Right Calc] 右侧安全区计算 (NEW)
       公式 = 菜单触发器尺寸 + 触发器偏移 + 呼吸间距
       这确保 Filter 的右边缘与页面标题 (Title) 的右对齐线一致，
       避开右上角的 Menu 按钮区域。
  */

  --desktop-right-gutter: calc(var(--trigger-size) + var(--trigger-offset) + var(--space-md));
}

/* ------------------------------------------------------------------
   1. Page Header (Title)
   ------------------------------------------------------------------ */
.section-blog {
  position: relative;
  width: 100%;
  
  min-height: calc(var(--space-sm) + 2 * var(--text-3xl)); /* 桌面端基础高度 */
  margin-bottom: 0;
}

.section-blog__title {
  position: absolute;
  top: var(--trigger-offset, 24px);
  right: calc(var(--trigger-size, 50px) + var(--trigger-offset, 24px) + var(--space-md));
  
  font-family: var(--font-heading);
  font-weight: var(--weight-black);
  font-size: var(--text-2xl);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-text-main);
  text-align: right;
  margin: 0;
  
  
  z-index: 10;
}

/* ------------------------------------------------------------------
   2. BLOG CONTEXT (Sticky Logic Core)
   ------------------------------------------------------------------ */
.blog-context {
  position: relative;
  width: 100%;
  min-height: 100vh; /* 保证有足够滚动空间 */
}

/* [哨兵] */
.sticky-sentinel {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
  
  /* 哨兵向上探测，与 Filter 的吸附位置形成对冲 */
  top: calc(var(--mobile-sticky-top) * -1);
  z-index: -1;
}

/* [Filter 外壳] */
.blog-filter {
    position: sticky;
    width: 100%;
    
    
    /* [保持不变] Z-Index */
    z-index: var(--layer-sticky);
    
    /* 视觉复位 */
    background: transparent;
    transition: top 0.3s ease;

    /* [新增] 初始位置下移
       使用 margin-top 给标题和过滤器之间增加呼吸感。
       建议使用 --space-md (约24px-32px) 或 --space-lg (约48px-64px)。
    */
    margin-top: var(--space-xl);

    /* [保持不变] 这里的 margin-bottom 负责推开下面的 Grid */
    margin-bottom: var(--space-xl);
}

/* [背景层] */
.blog-filter::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    
    background-color: transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border-bottom: 1px solid transparent;
    
    transition: all 0.4s ease;
}

/* [状态: 吸顶] */
.blog-filter.is-stuck::before {
    /* 1. 回退策略：针对不支持 backdrop-filter 的浏览器 */
    background-color: rgba(255, 255, 255, 0.95);
    
    /* 2. 现代浏览器策略 */
    @supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
      background-color: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    
    border-bottom: 1px solid rgba(0,0,0,0.05);
    
    /* 移动端特殊逻辑：背景向上生长填补空隙 */
    top: calc(var(--mobile-sticky-top) * -1);
    height: calc(100% + var(--mobile-sticky-top));
}

/* ------------------------------------------------------------------
   3. Content Wrapper
   ------------------------------------------------------------------ */
.blog-content-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: 0 var(--space-md);
  max-width: var(--container-lg);
  margin: 0 auto;
}

@media (min-width: 769px) {
  .blog-content-wrapper {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* ------------------------------------------------------------------
   4. Sidebar
   ------------------------------------------------------------------ */
.blog-sidebar {
  flex: 0 0 250px;
  top: var(--space-xl);
  z-index: 10;
}
/* ... Sidebar 内部样式保持不变 (Widget, Title, Link) ... */
.blog-widget__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-lg);
    border-bottom: 4px solid #eee;
    margin-bottom: 1rem;
}

.blog-widget__list {
    list-style: none;
    padding: 0;
}

.blog-widget__link {
    display: block;
    padding: 0.5rem 0;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 1px
    solid #eee;
}

.blog-widget__link:hover {
    color: var(--color-text-main);
}


/* ------------------------------------------------------------------
   5. Main Content
   ------------------------------------------------------------------ */
.blog-main {
  flex: 1;
  width: 100%;
  min-height: 25vh;
}
/* ... Blog Post 样式保持不变 (Card, Header, Body) ... */
.blog-post {
    background: transparent;
    border-bottom: 1px solid #eee;
    padding: 0 var(--space-md);
    transition: all 0.4s;
}

.blog-post.is-active {
    background: #fff;
    border-bottom-color: transparent;
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    transform: scale(1.01);
    z-index: 5;
    margin: var(--space-md) 0;
}

.blog-post__header {
    display: grid;
      grid-template-columns: 160px 1fr;
      
      /* [关键修改 1] 改为 stretch */
      /* 之前是 start。改为 stretch 后，左侧(Meta)的高度会自动和右侧(Title)保持一致 */
      align-items: stretch;
      
      cursor: pointer;
      padding: var(--space-sm) 0;
      gap: var(--space-md);
      position: relative;
      z-index: 2;
}

.blog-post__meta {
    display: flex;
      flex-direction: column;
      
      /* [关键修改 2] 两端对齐 或 自动填充 */
      /* 确保这个容器占满格子的高度 */
      height: 100%;
}

.blog-post__title {
    text-align: right;
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
}

.blog-post__body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.6s;
}

.blog-post.is-active .blog-post__body {
    max-height: 5000px;
    opacity: 1;
    padding-top: var(--space-lg);
    border-top: 1px solid #eee;
    margin-top: var(--space-sm);
    
    padding-bottom: var(--space-md);
    
    border-top: 1px solid var(--color-border-light, #eee);
    margin-top: var(--space-sm);
}

/* 日期样式 */
.blog-post__date {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-main);
  line-height: 1;
}

.blog-post__tags-wrapper {
    padding-top: var(--space-xs);
  display: flex;
  gap: var(--space-xs);
  
  /* [关键修改 3] 自动推向底部 */
  /* 在 Flex 容器中，margin-top: auto 会占据所有剩余空间，把元素推到底部 */
  margin-top: auto;
  
  /* 如果你是指标签内部文字底对齐，加这个： */
  align-items: flex-end;     /* 标签之间的间距 */
}

/* [核心] 标签胶囊样式 (Chip Style) */
.blog-post__tag {
  display: inline-block;
  font-size: var(--text-xs); /* 12px */
  line-height: 0.8;
  padding: var(--space-2xs) var(--space-xs);
  
  /* 边框与圆角 */
  border: 0px;
  border-radius: var(--radius-lg); /* 大圆角 */
  
  /* 颜色 */
  color: var(--color-text-muted);
  background-color: var(--color-bg-button);
  
  /* 细节 */
  white-space: nowrap; /* 防止标签文字内部换行 */
  transition: all 0.2s ease;
}


/* ============================================================================
   6. DESKTOP OVERRIDES (核心避让逻辑)
   ============================================================================ */
@media (min-width: 769px) {

  /* [关键修复] 这里的类名必须是 blog-context，因为它是 filter 的父级 */
  .section-blog,
  .blog-context {
      
      /* [STATE A: NORMAL] 居中模拟
         计算出的 Padding 会让左右元素看起来分别对齐网格的左右边缘。
      */
      --scope-center-padding: max(var(--space-md), calc((100vw - var(--container-lg)) / 2));
      
      /* [STATE B: STUCK] 避让模式
         左侧 Padding = Sidebar 宽度 + 间距
         右侧 Padding = Menu 按钮区域宽度
      */
      --layout-sidebar-width: clamp(380px, 35vw, 500px);
      
      --scope-avoid-left: calc(var(--layout-sidebar-width) + var(--space-md));
      --scope-avoid-right: var(--desktop-right-gutter);
    }

    /* 2. 基础复位 */
    .sticky-sentinel {
        top: -100px;
      }
    
    .blog-filter {
        top: var(--desktop-sticky-top);
    }
    
    .blog-filter.is-stuck::before {
      top: 0;
      height: 100%;
      /* 既然分离了，我们可以给背景加更细腻的效果 */
      background-color: rgba(255, 255, 255, 0.9);
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }

    /* 3. 布局容器逻辑 */
    .ui-scope-bar__layout {
      /* 默认状态：注入居中变量 */
      --scope-safe-left: var(--scope-center-padding);
      --scope-safe-right: var(--scope-center-padding);
    }

    /* 4. 吸顶状态切换 */
    .blog-filter.is-stuck .ui-scope-bar__layout {
      /* 吸顶状态：注入避让变量 */
      --scope-safe-left: var(--scope-avoid-left);
      --scope-safe-right: var(--scope-avoid-right);
    }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .section-blog {
    height: auto;
    
    padding-top: calc(var(--mobile-sticky-top) + var(--space-lg)); /* 给固定 Header 留空间 */
  }
  .section-blog__title {
      position: static;
      text-align: left;
      margin-bottom: var(--space-md);
      padding-left: var(--space-md);
      padding-right: 60px;
  }
}