/*!
 * Joe 主题布局补丁（本移植版自带 CSS 缺失的部分）
 *
 * 1) 侧栏两栏布局
 *    主题自带的 joe.global.min.css 只给了 .joe_aside 的 padding/margin-left，
 *    没有任何浮动或宽度规则；.joe_main 也没有布局规则。两者同在 .joe_container
 *    下，于是竖排堆叠——文章详情页侧栏掉到文章下方，占满整行。
 *    这里用 flex 补上：侧栏在左，正文在右。
 *    窄屏不用管：主题 joe.responsive.min.css 的 @media(max-width:992px) 里
 *    已有 `html .joe_aside{display:none}`，display:none 的子项不参与 flex 布局，
 *    .joe_main 的 flex:1 会自动占满整行。
 *
 * 2) 搜索联想的键盘高亮项
 *    joe.search.js 切换 .active，主题 CSS 只定义了 :hover，键盘上下键选中没有视觉反馈。
 */

/* ---------- 侧栏两栏布局 ---------- */
.joe_body {
  display: flex;
  align-items: flex-start;
  column-gap: 15px;
}

.joe_body > .joe_main {
  flex: 1 1 auto;
  /* 正文里的长代码块/长单词不能把这一列撑破 */
  min-width: 0;
}

.joe_body > .joe_aside {
  /* DOM 里侧栏排在正文之后，用 order 把它挪到左边 */
  order: -1;
  flex: 0 0 250px;
  width: 250px;
  /* 主题原值 margin-left:15px 改由 column-gap 统一控制间距 */
  margin-left: 0;
  padding-bottom: 15px;
}

/* ---------- 搜索联想键盘高亮 ---------- */
.joe_header__above-search .result .item.active {
  background: var(--classD);
}

/* ---------- 侧边悬浮操作按钮（回到顶部 / 切换主题） ----------
   按钮外观保持主题自带样式（40×40 白圆、图标 25px），不做覆盖。
   原先这里加过 hover 上浮 + 放大到 46px，现已移除以对齐 5i.ink 的观感。 */

/* 索引页标题栏右侧的「分类 / 标签」展开按钮与下拉面板（PC 端，移动端隐藏） */
.joe_index__title-filter {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
  height: 40px;
}
/* 胶囊按钮：与旁边的纯文字 tab 拉开视觉层次，但仍用主题色板 */
.joe_index__title-filter-btn {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  margin-left: 8px;
  border: 1px solid var(--classC);
  border-radius: 14px;
  background: var(--classD);
  color: var(--routine);
  font-size: 13px;
  line-height: 26px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: color 0.35s, background 0.35s, border-color 0.35s;
}
.joe_index__title-filter-btn .icon {
  width: 13px;
  height: 13px;
  margin-right: 5px;
  flex: none;
  transition: transform 0.35s;
}
.joe_index__title-filter-btn:hover {
  color: var(--theme);
  border-color: var(--theme);
}
.joe_index__title-filter-btn.active {
  color: #fff;
  background: var(--theme);
  border-color: var(--theme);
}
.joe_index__title-filter-panel {
  position: absolute;
  z-index: 10;
  top: 100%;
  right: 0;
  min-width: 180px;
  max-width: 80vw;
  max-height: 340px;
  overflow-y: auto;
  padding: 8px 0;
  border: 1px solid var(--classC);
  border-radius: var(--radius-inner);
  background: var(--background);
  box-shadow: var(--box-shadow);
}
.joe_index__title-filter-panel[hidden] {
  display: none;
}
.joe_index__title-filter-panel .slides {
  display: block !important;
}
.joe_index__title-filter-panel .link {
  display: block;
  color: var(--routine);
  font-size: 13px;
  line-height: 20px;
  padding: 8px 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.35s, background 0.35s;
}
.joe_index__title-filter-panel .link:hover {
  color: var(--theme);
  background: var(--classD);
}
@media (max-width: 768px) {
  .joe_index__title-filter {
    display: none;
  }
}

/* 面包屑
 *
 * 原来 .joe_bread__bread 的样式只存在于 joe.post.min.css，
 * 而分类/标签/搜索等归档页加载的是 joe.archive.min.css —— 那边一条都没有，
 * 于是 li 退回块级布局、每个独占一行，看起来就是「换行」。
 * 这里补齐全局样式（layout.css 是所有页面都加载的基础样式），
 * 并保证单行不换行：过长时省略而不是折行。
 */
.joe_bread {
  padding-top: 15px;
}
.joe_bread__bread {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.joe_bread__bread .line {
  flex: none;
  color: var(--seat);
  padding: 0 8px;
}
.joe_bread__bread .item {
  min-width: 0;
  color: var(--minor);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.joe_bread__bread .item .link {
  color: var(--routine);
  transition: color 0.35s;
}
.joe_bread__bread .item .link:hover {
  color: var(--theme);
}

/* ============================================================
   文章详情 · 相关推荐
   主题原版只给了 .item 的 overflow/radius/transition，卡片没有底色；
   标题选择器写的是 .item h6，而模板渲染的是 <div class="title">，
   导致标题从未生效样式。这里补齐卡片外观与标题排版。
   ============================================================ */
.joe_detail__related { padding-top: 15px; }

.joe_detail__related-title {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-left: 15px;
  font-size: 18px;
  font-weight: 500;
  color: var(--main);
}
/* 用 flex 排 ::before，去掉原来的 top/bottom/left 绝对定位 */
.joe_detail__related-title::before {
  content: '';
  flex: none;
  width: 4px;
  height: 1em;
  margin-right: 10px;
  border-radius: 2px;
  background: var(--theme);
}

/* 自适应铺满：原版写死 4 列但只渲染 3 条，右侧空一格 */
.joe_detail__related-content {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
}

.joe_detail__related-content .item {
  display: block;            /* <a> 默认 inline，overflow:hidden 圆角裁切会失效 */
  background: var(--background);
  border: 1px solid var(--classD);
  overflow: hidden;
  border-radius: var(--radius-inner);
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.joe_detail__related-content .item:hover {
  transform: translateY(-5px);
  border-color: var(--classC);
  box-shadow: 0 34px 20px -24px rgba(136, 161, 206, 0.3);
}

.joe_detail__related-content .item img {
  display: block;            /* 去掉 img 基线留白 */
  width: 100%;
  height: 120px;
  object-fit: cover;
  transition: transform 0.35s;
}
.joe_detail__related-content .item:hover img { transform: scale(1.06); }

/* 对齐模板实际的 <div class="title">，两行截断替代原版的单行 nowrap */
.joe_detail__related-content .item .title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--routine);
  transition: color 0.25s;
}
.joe_detail__related-content .item:hover .title { color: var(--theme); }