/* ==========================================================================
   文章列表卡片：标题压在封面图上，摘要与元信息留在下方
   ==========================================================================
   为什么用 CSS 而不是改主题模板：主题模板在 node_modules 里，直接改会在下次
   升级主题时被覆盖。这里只调整排版，不动主题源码，升级时基本不用跟着改。

   做法：把卡片内容变成单列网格，封面和标题放进同一个网格单元、标题贴底对齐，
   于是标题就叠在封面上了；摘要、日期、分类、标签保持原来的先后顺序，
   自动落到下一行，位置和样式都不变。
   ========================================================================== */

.post-list .post-card .md-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* 封面占第一行，作为标题的背景 */
.post-list .post-card .post-cover {
  grid-area: 1 / 1;
  position: relative;
  /* 主题给封面留的下外边距原本是给下方标题用的；标题已经移进封面里，
     这里必须有确定的值，标题才知道"离封面底边多远"，不能让它跟着主题变。 */
  margin-bottom: 0;
}

/* 封面底部压一层由透明到深色的渐变，保证白色标题在任何封面上都读得清 */
.post-list .post-card .post-cover::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 62%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.28) 45%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

/* 标题：与封面同一个网格单元，贴在封面底部 */
.post-list .post-card .post-cover ~ .post-title {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 2;
  margin: 0;
  padding: 0 0 1.25rem;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  /* 标题已经压在图上，主题那条 8px 的粗下划线在这里会显得脏，去掉 */
  text-decoration-line: none;
}

/* 鼠标悬停时用轻微提亮代替下划线，保持"可点击"的反馈 */
.post-list .post-card:hover .post-cover ~ .post-title,
.post-list .post-card:focus-visible .post-cover ~ .post-title,
.post-list .post-card:focus-within .post-cover ~ .post-title {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

/* 没有封面的卡片保持原样：标题不叠图，也不用白字 */
.post-list .post-card .post-title:first-child {
  padding: 0;
  color: var(--text);
  text-shadow: none;
}

/* ==========================================================================
   侧边栏底部的「配色」按钮（浅色 / 深色 / 跟随系统）
   按钮本体复用主题的图标按钮样式，这里只负责定位和弹出菜单的观感。
   ========================================================================== */

.color-scheme-switch {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 32px;
}

/* 尺寸与观感对齐主题的侧边栏图标按钮（.leftbar-state-toggle）。
   主题的这套尺寸是靠「.ui-collection 的直接子元素」选择器给的，
   这里多包了一层用于弹出菜单的定位容器，所以要自己声明一份。 */
.color-scheme-switch__button {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-p2);
  font-size: 24px;
  line-height: 0;
  cursor: pointer;
}

.color-scheme-switch__button:hover,
.color-scheme-switch__button:focus-visible {
  color: var(--text);
}

.color-scheme-switch__button .ui-icon svg {
  width: 1em;
  height: 1em;
}

/* 侧边栏收成窄条时，和其它图标一样居中 */
html[data-leftbar-state='collapsed'] .site-shell:not([data-drawer='leftbar']) .site-region--leftbar .color-scheme-switch {
  margin-inline: auto;
}

.color-scheme-switch__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 9.5rem;
  padding: 0.375rem;
  border: 1px solid var(--block);
  border-radius: 0.75rem;
  background: var(--card);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}

.color-scheme-switch__menu[hidden] {
  display: none;
}

.color-scheme-switch__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-p1);
  font-size: 0.875rem;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.color-scheme-switch__item:hover,
.color-scheme-switch__item:focus-visible {
  background: var(--block);
  color: var(--text);
}

/* 当前生效的那一项用主题色标出来 */
.color-scheme-switch__item.is-active {
  color: var(--theme);
}

.color-scheme-switch__item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

.color-scheme-switch__item-icon svg {
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   页脚：备案号单独成段，和上面的版权说明拉开一点距离
   ========================================================================== */

.page-footer .text > p + p {
  margin-top: 0.625rem;
}