.article-banner-wrap
  display: block

.article.banner
  --text-banner: var(--text)
  background: var(--block)
  // 背景图同时作为横幅自身背景承载（跟随 corner-shape），子图保留用于 hover 滤镜
  background-image: var(--bg-url)
  background-size: cover
  background-position: center
  margin: 0
  height: unset
  // Safari 26.4/26.5 合成层裁剪 bug（WebKit 312584/319993，STP 242/249 才修）：
  // 带 filter:blur() 的合成子层（同图模糊层 :before/:after）不执行父级 overflow:hidden + border-radius 圆角裁剪；
  // 子层自身 border-radius/overflow 无效（319993 复现注释），父层 clip-path 实测仍被绕过。
  // 官方建议（WebKit 67950）：让圆角父层自身成为层叠上下文并强制合成，使圆角裁剪在合成层层面作用于全部子层。
  // 对照：正常工作的 cover 卡片 .post-card 自带 z-index:0 + position:relative（层叠上下文）。
  // clip-path 保留作为正常浏览器裁剪与额外防御；移动端圆角归零时随 `.banner.top` 一并关闭（见 tag-plugins/banner.styl）
  isolation: isolate
  transform: 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

.article.banner
  .bg+.content
    min-height: 200px
    aspect-ratio: hexo-config('article.banner_ratio')
    position: relative
    --text-banner: white
    --button-hover-bg: rgba(white, 0.25)

.article.banner .content
  .top
    display: flex
    flex-direction: column
    justify-content: flex-start
    align-items: flex-start
    margin: 1rem calc(1rem - 4px)
  .top-row
    display: flex
    justify-content: space-between
    align-items: flex-start
    width: 100%
    .right
      display: flex
      align-items: center
      flex-shrink: 0
      white-space: nowrap
      .reading
        opacity: .8
        padding: 4px
  .meta-row
    width: 100%
  .bottom
    margin-top: auto
  .title
    font-size: $fsh1
    color: var(--text-banner)
  .subtitle
    // 小字用主题色变体（split 模式下由插件写入 --text-banner-theme）
    color: var(--text-banner-theme, var(--text-banner))
  .reading
    color: var(--text-banner-theme, var(--text-banner))
  .meta-row
    color: var(--text-banner-theme, var(--text-banner))
  h1
    line-height: 1.2
    margin: 0.25rem 0

.l_body .article.banner .content .bottom.only-title .title
  padding: 0.75rem 0



// 背景图覆盖层：与文章列表封面统一（常驻同图渐变模糊层 + 黑色蒙版，hover 放大/变暗）
.article.banner
  cover-overlay(var(--bg-url), both, '.bg+.content')
  .bg
    // hover 放大用 1.5s 缓动，亮度/饱和度仍按 0.2s（与文章列表封面一致）
    filter: brightness(var(--img-br)) saturate(var(--img-sat))
    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
  &:hover .bg
    transform: scale(var(--cover-zoom))
  .bg+.content
    // 大尺寸 banner 的模糊层高度按原观感覆盖（默认值见 cover-overlay）
    --blur-height-top: 6rem
    --blur-height-bottom: 7rem
    &:before, &:after
      // 模糊层自身也加 clip-path：该合成层是 Safari 跳过父级圆角裁剪的直接漏出源
      @supports not (corner-shape: superellipse(1))
        clip-path: 'inset(0 round %s)' % $border-card-l
    .top,.bottom
      z-index: 1
  

.article.banner
  --button-hover-bg: rgba(black, 0.05)
  ondark()
    --button-hover-bg: rgba(white, 0.15)
  :root[data-theme="dark"] &
    ondark()
  :root:not([data-theme]) &
    @media (prefers-color-scheme: dark)
      ondark()