/*
  分类页布局补丁。

  perplex 原版用 .page-header--left .title (absolute top:0) + .taxo--left
  (absolute top:37rem) 来实现"左列 sidebar"，但有个副作用：卡片只有
  一行时 .taxo--left 的 top:37rem 会落在卡片底部下方。

  我们改用 grid 让左列稳定在卡片左边，无论卡片多少行，"全部分类"
  始终紧贴在描述下方。
*/

@media screen and (min-width: 79em) {
  .taxo-page {
    display: grid;
    /* sidebar 35rem 而不是 37rem：让右列 = 148 - 35 - 2 = 111rem 正好
       容下 .card-nav--3 的 max-width，3 张卡片/行不再因为差 2rem 降到
       2 张造成右侧 35rem 空白 */
    grid-template-columns: 35rem 1fr;
    column-gap: 2rem;
    align-items: start;
  }

  /* 左列 sidebar */
  .taxo-page__sidebar {
    min-width: 0;
  }

  /* 描述区块（perplex 的 title--sans 块）撤掉绝对定位 */
  .taxo-page__sidebar .title {
    position: static;
    width: auto;
    top: auto;
    left: auto;
  }

  /* 全部分类 listing：撤掉绝对定位，常规流，跟在描述下方 */
  .taxo-page .taxo,
  .taxo-page .taxo--left {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    margin-top: 0;
  }

  /* 右列 main：纯卡片，不需要 margin-full（grid 已经分了列） */
  .taxo-page__main {
    min-width: 0;
  }
}

/* 收紧描述块和"全部分类"之间的距离。perplex 原版的
   .title--second padding-bottom 是 5rem (3rem + 2*var(--es))，
   是给整页 H1 用的留白，sidebar 这里太空了。 */
.taxo-page__sidebar .title--second {
  padding-bottom: 0;
}

/* 分类页顶部留白按设备分层：手机紧一点，桌面保留截图里的呼吸感。 */
.taxo-page {
  padding-top: 2rem;
}

.taxo-page__sidebar .title--second > hr {
  margin-bottom: 1.25rem;
}

/* 描述顶部 hr 保留，但这里下面是长文案，不用标题组件的基线压缩 */
.taxo-page__sidebar .title__description {
  padding-top: 0;
  padding-bottom: 0;
  overflow-wrap: break-word;
}

.taxo-page__taxo .section {
  padding: 1.5rem 0 0;
}

.taxo-page__taxo .section > hr {
  margin-bottom: 0.25rem;
}

.taxo-page__taxo .taxo__item {
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;
}

@media screen and (min-width: 39em) {
  .taxo-page {
    padding-top: 3rem;
  }

  .taxo-page__sidebar .title--second > hr {
    margin-bottom: 1.5rem;
  }

  .taxo-page__taxo .section {
    padding-top: 1.75rem;
  }
}

@media screen and (min-width: 79em) {
  .taxo-page {
    padding-top: 4rem;
  }

  .taxo-page__sidebar .title--second > hr {
    margin-bottom: 1.75rem;
  }

  .taxo-page__taxo .section {
    padding-top: 2rem;
  }

  .taxo-page__sidebar .taxo__item {
    width: auto;
  }
}

/* 卡片 hover 时被 .page-header (z-index: 2) 挡住的修复
   ──────────────────────────────────────────────────
   .card__hover:hover { transform: scale(1.075) } 会创建新的堆叠
   上下文，但卡片自己没显式 z-index → 默认 auto → 在 z-index: 2 的
   page-header 之下。结果置顶徽章和卡片顶部被 gradient 横条遮住。
   hover 时把卡片提到 z-index: 10 让它层级浮上来。 */
.card-nav__list .card__hover {
  position: relative;
}

.card-nav__list .card__hover:hover,
.card-nav__list .card__hover:focus {
  z-index: 10;
}