/* static/css/slideout-mode.css */

/* --- LaTeX 复制提示框样式 --- */
.latex-copy-toast {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 9999;
  pointer-events: none; /* 防止遮挡鼠标操作 */
  opacity: 1;
  transition: opacity 0.5s ease; /* 淡出动画 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  white-space: nowrap;
}

/* 鼠标悬停在公式上时，加深一点背景色提示它是可交互的 (可选) */
.MathJax:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  transition: background-color 0.2s;
}

/* ============================================================
   5. 首页文章列表卡片化 (Grid Layout)
   ============================================================ */

/* 1. 将文章容器改为网格布局 */
.posts {
  display: grid;
  /* 自动填充：每列最小300px，空间不够自动换行 */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
  gap: 25px; /* 卡片之间的间距 */
  margin-top: 20px;
}

/* 2. 将每一篇文章变成一张“卡片” */
.posts .post {
  background: #fff;       /* 卡片背景色 */
  border: 1px solid #eaeaea; /* 淡淡的边框 */
  border-radius: 8px;     /* 圆角 */
  padding: 20px;          /* 内边距 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); /* 悬浮阴影，增加层次感 */
  transition: transform 0.2s, box-shadow 0.2s; /* 添加动画过渡 */
  
  /* 强制让内部元素垂直排列，把“阅读更多”挤到底部 */
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important; /* 覆盖原本的下边距 */
  height: auto; /* 自动撑满高度 */
}

/* 3. 鼠标悬停时的特效 (浮起) */
.posts .post:hover {
  transform: translateY(-5px); /* 向上浮动 5px */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* 加深阴影 */
}

/* 4. 标题优化 */
.posts .post-title {
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 10px;
  text-align: left; /* 强制左对齐 */
}

/* 5. 摘要文字优化 */
.posts .post-content {
  font-size: 14px;
  color: #666;
  flex-grow: 1; /* 让摘要占据剩余空间，确保按钮对齐 */
  margin-bottom: 15px;
  line-height: 1.6;
}

/* 6. "阅读更多" 按钮美化 */
.posts .read-more {
  margin-top: auto; /* 把按钮推到卡片最底部 */
  align-self: flex-start; /* 按钮左对齐 */
}

.posts .read-more .link {
  font-size: 13px;
  color: #c05b4d; /* 这里的颜色可以改成你喜欢的主题色 */
  font-weight: bold;
  border-bottom: 2px solid transparent;
}
.posts .read-more .link:hover {
  border-bottom-color: #c05b4d;
}

/* 7. 隐藏不需要的分隔线 (Even 主题默认会有横线) */
.posts .post + .post {
  margin-top: 0; 
  padding-top: 20px;
  border-top: 1px solid #eaeaea; /* 这里实际上是被 grid 覆盖了，这行是保险 */
}