/* ============================================================================
    PAGE: BLOG
    Description: 摄影页面专用样式 (Header Layout + Sticky Filter Context)
    Dependencies: design-tokens.css
   ============================================================================ */

/* ------------------------------------------------------------------
   1. PAGE HEADER
   ------------------------------------------------------------------
 */

.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%;
    
    top: var(--mobile-sticky-top, 0px);
    /* [保持不变] 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 {
    /* 使用变量替代硬编码，并增加 transition 确保变色平滑 */
    background-color: var(--color-bg-body-alpha);
    transition: background-color 0.6s ease, backdrop-filter 0.6s ease;

    @supports ((-webkit-backdrop-filter: blur(12px)) or (backdrop-filter: blur(12px))) {
        background-color: var(--color-bg-body-alpha-strong);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
    
    /* 边框也同步变量化 */
    border-bottom: 1px solid var(--color-border);
    
    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;
  position: sticky;
  top: var(--space-2xl);
  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 var(--color-border);
    margin-bottom: 1rem;
    color: var(--color-text-main);
}

.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 var(--color-border);
    transition: color 0.2s ease;
}

.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;
    /* 🚀 修复：使用动态变量。在暗黑模式下，它会自动从 #eee 变为深灰或透明白 */
    border-bottom: 1px solid var(--color-border);
    
    padding: 0 var(--space-md);
    
    /* 🚀 优化：既然有 is-active 状态切换背景和投影，
       建议将 transition 限制在具体属性上，提高渲染性能 */
    transition: background-color 0.4s ease,
                border-color 0.4s ease,
                transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 0.4s ease;
}

/* 最后一个元素通常不需要底边框，保持视觉干净 */
.blog-post:last-child {
    border-bottom: none;
}

.blog-post.is-active {
    background-color: var(--color-bg-surface);
    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 {
    /* 1. 布局逻辑保持不变 */
    max-height: 5000px;
    opacity: 1;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    
    /* 2. 移除重复定义的 margin 和 padding */
    margin-top: var(--space-sm);
    padding-top: var(--space-lg);
    padding-bottom: var(--space-md);
    
    /* 3. 核心修复：只保留变量定义的边框 */
    /* 之前的代码里有两个 border-top，浏览器会以最后一个为准 */
    border-top: 1px solid var(--color-border);
}

/* 日期样式 */
.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: var(--color-bg-body-alpha);
        border-bottom: 1px solid var(--color-border);
    }

    /* 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;
    }
    
    .blog-sidebar {
      position: relative;
      top: var(--space-xs);
    }
}