// list
.l_main .post-list
  margin: 1rem
  .post-title:first-child
    margin-top: .5rem

// 白底文章卡片（含置顶轮播卡片）hover 时：标题底部主题色下划线高度从 0 生长到 12px 并淡入，层级在文字下层
.post-list .post-card .post-title
  position: relative
  width: fit-content
  &::after
    content: ''
    position: absolute
    left: 0
    bottom: -2px
    border-radius: 2px
    z-index: -1
    width: 100%
    height: 0
    opacity: 0
    background: var(--theme)
    transition: height .25s ease, opacity .25s ease

.post-list .post-card:hover .post-title::after
  height: 12px
  opacity: 0.5

.l_main .post-list
  .post-title
    font-weight: 500
    margin: 1.25rem auto .75rem 0
    line-height: 1.2
    font-size: $fsh4
    border-bottom: none
    color: var(--text)
    trans1 color
    @media screen and (max-width: $device-mobile)
      font-size: $fsh5
      margin: 0.5rem 0
  .wiki .post-title
    margin-top: 0.5rem

// card
.post-list .post-card-wrap
  display: block
  margin: 1rem 0
  border-radius: $border-card-l
  box-shadow: $boxshadow-card

.post-list .post-card
  display: block
  border-radius: $border-card-l
  background: var(--card)
  // hero 封面卡片：封面图同时作为卡片自身背景承载，角落跟随全局 corner-shape 圆角裁剪；
  // 子图保留用于 hover 变暗/放大滤镜，角落楔形区由容器背景（同图）无缝补位
  background-image: var(--cover-url)
  background-size: cover
  background-position: center
  overflow: hidden
  z-index: 0
  position: relative
  // Safari 26.4/26.5 合成层裁剪 bug（WebKit 312584/319993）：带 filter:blur() 的合成层
  // （.cover:before 同图模糊层）不执行父级 overflow:hidden + border-radius 圆角裁剪，静止时底部两角漏方角；
  // 用与圆角同源的 clip-path 直接裁剪（hover 时模糊层带 transform 反而正常，见 .cover:before 的 translateZ(0)）。
  // clip-path 会把角落硬裁为普通圆角，覆盖 corner-shape；因此在支持 corner-shape 的浏览器中移除，
  // 仅在不支持的浏览器（Safari/Firefox）保留圆角兜底
  @supports not (corner-shape: superellipse(1))
    clip-path: 'inset(0 round %s)' % $border-card-l
  --img-br: 100%
  --img-sat: 100%
  --blur-px: 1em
  --blur-height: 128px
  --blur-sat: 120%
  --cover-zoom: 1.05
  &:hover
    --img-br: 75%
    --img-sat: 120%
    // --blur-px: 0
    // --blur-height: 0
    --blur-sat: 200%
    // 图片卡片 hover 封面放大：卡片本身不动，放大后的图片由圆角静态裁剪裁出圆角
    .post-cover img, .cover img, .cover:before
      transform: scale(var(--cover-zoom))
  img
    filter: brightness(var(--img-br)) saturate(var(--img-sat))
    // 封面放大用 1.5s 缓动，其余属性（亮度/饱和度）保持主题默认 0.2s
    transition: all .2s ease-out, transform 1.5s ease-out
    -moz-transition: all .2s ease-out, transform 1.5s ease-out
    -webkit-transition: all .2s ease-out, transform 1.5s ease-out
    -o-transition: all .2s ease-out, transform 1.5s ease-out
  .excerpt
    margin: 1rem 0
    @media screen and (max-width: $device-mobile)
      margin: 0.5rem 0
    >p
      margin: 1rem 0
      @media screen and (max-width: $device-mobile)
        margin: 0.5rem 0
      line-height: 1.5
  .meta.cap
    &,span
      display: flex
      align-items: center
    flex-wrap: wrap
    margin: 0
    line-height: 2
    --fs-content: $fs-content-1
    font-size: var(--fs-content)
    svg
      height: 1em
      width: auto
      line-height: 0
      transform: scale(1.2)
      margin-right: 8px
    >span+span
      margin-left: 1.5rem
    span.pin
      img
        object-fit: contain
      svg
        color: $c-red
  .card-tags
    display: flex
    flex-wrap: wrap
    align-items: center
    gap: 0 .5rem
    svg
      width: 1em
      height: 1em
      margin-right: .25em
      opacity: .4


// common article
.post-list .md-text
  padding: 1rem
  @media screen and (max-width: $device-mobile)
    padding: 0.5rem 1rem
  p
    color: var(--text-p2)
    font-size: $fs-14


// posts
.post-list .post-card .post-cover
  overflow: hidden
  width: 'calc(100% + 2 * %s)' % 1rem
  border-radius: 0
  margin-left: -1rem
  margin-top: -1rem
  margin-right: -1rem
  background: var(--block)
  &:not(.lazy)
    trans1: transform 1s
  img
    object-fit: cover
    width: 100%
    border-radius: 0
    aspect-ratio: hexo-config('article.cover_ratio')
    
// 封面渐变模糊卡片：文章 photo 卡片与专栏最新文章卡片共用（接入 cover-overlay 统一覆盖层）
.post-list .post-card .cover
  position: relative
  line-height: 0
  img
    width: 100%
    object-fit: cover
    z-index 0
  // 与通用覆盖层能力统一：文字区固定底部（hero 卡片），渐变模糊层 + 黑色蒙版（视觉参数不变）
  cover-overlay(var(--cover-url), bottom)
  .cover-info
    padding: 1rem
    position: absolute
    line-height: 1.2
    width: 'calc(100% - %s * 2)' % 1rem
    --text-banner: white
    color: var(--text-banner)
    z-index: 2
    bottom: 0
    div+div
      margin-top: 4px
    .text
      color: unset
      trans1 all
      text-shadow: 0 2px 4px rgba(0,0,0,0.2)
    .topic
      font-size: $fs-13
      // 小字用主题色变体（split 模式下由插件写入 --text-banner-theme）
      color: var(--text-banner-theme, inherit)
    .headline
      font-weight: 500
      font-size: $fsh3
    .caption
      font-size: $fs-14
      // 小字用主题色变体（split 模式下由插件写入 --text-banner-theme）
      color: var(--text-banner-theme, inherit)
      // 只显示一行，超出省略
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
    @media screen and (max-width: $device-mobile)
      .headline
        font-size: $fsh4
      .caption
        font-size: $fs-13

.post-list .post-card.post.photo
  .cover img
    aspect-ratio: hexo-config('article.cover_ratio')
  // hover 放大覆盖：基规则的 `transform: translateZ(0)` 特异性高于上方 `.post-card:hover` 的 scale，
  // 需用更高特异性选择器在基规则之后覆盖，保持 hover 缩放动画（叠加恒等变换）
  &:hover
    .cover:before
      transform: translateZ(0) scale(var(--cover-zoom))
  h2
    margin: .25rem 0
    font-size: $fsh4


// topic 专栏列表：平铺容器 + 上下布局（h2 专栏标题 → 最新文章卡片 → 文章链接列表）
.post-list.topic
  .post-card-wrap
    margin: 0
    box-shadow: none
    border-radius: 0
    & + .post-card-wrap
      border-top: 1px solid var(--block-border)
  .post-card
    background: none
    box-shadow: none
    border-radius: 0
    overflow: visible
    clip-path: none
    .md-text
      padding: 2.25rem 0
      @media screen and (max-width: $device-mobile)
        padding: 1.5rem 0
  .post-card.topic article
    display: flex
    flex-direction: column
    gap: 1rem
    .topic-title
      story-title()
      margin: 0 0 0.5rem
    .topic-desc
      text-align: center
      color: var(--text-p2)
      font-size: $fs-14
      line-height: 1.5
      // 左右内边距与下方归档式文章列表一致
      padding: 0 1rem
      margin: 0 0 1rem
    .cover
      flex: none
      width: 100%
      aspect-ratio: 2 / 1
      border-radius: $border-card-l
      overflow: hidden
      // 背景图由 .cover 自身背景承载（跟随 corner-shape），子图保留用于 hover 滤镜
      background-image: var(--cover-url)
      background-size: cover
      background-position: center
      // 与 .post-card 相同的 Safari 圆角裁剪兜底（模糊层合成层不跟随 overflow:hidden）；
      // 支持 corner-shape 的浏览器移除 clip-path，由自身背景跟随曲率
      @supports not (corner-shape: superellipse(1))
        clip-path: 'inset(0 round %s)' % $border-card-l
      display: block
      img
        width: 100%
        height: 100%
    .topic-posts
      flex: none
      width: 100%
      margin: 0
      // 左右内边距与文章封面文字区（.cover-info padding: 1rem）一致
      padding: 0 1rem
    .topic-posts-more[open]
      display: flex
      flex-direction: column
      .topic-posts-extra
        order: 1
      .topic-posts-toggle
        order: 2
    .topic-posts-toggle
      display: flex
      align-items: center
      justify-content: center
      gap: .35em
      width: 100%
      margin-top: .5rem
      padding: .75rem 0
      list-style: none
      cursor: pointer
      color: var(--text-p3)
      font-size: $fs-13
      font-weight: 500
      trans1 color
      &::-webkit-details-marker
        display: none
      .when-open
        display: none
      svg
        width: 1em
        height: 1em
        transform: rotate(90deg)
        trans1 transform
      &:hover
        color: var(--accent)
    .topic-posts-more[open] .topic-posts-toggle
      .when-closed
        display: none
      .when-open
        display: inline
      svg
        transform: rotate(-90deg)
  // hover 放大覆盖（与 photo 卡片一致，见 .post-card.post.photo:hover 注释）
  .post-card.topic:hover
    .cover:before
      transform: translateZ(0) scale(var(--cover-zoom))

.post-list.archives
  @media screen and (max-width: $device-mobile)
    margin: 1rem 0