.banner
  border-radius: $border-image
  &.top
    border-radius: $border-card-l
  // 背景图同时作为横幅自身背景承载（跟随 corner-shape），子图保留用于 hover 滤镜
  background-image: var(--bg-url)
  background-size: cover
  background-position: center
  position: relative
  overflow: hidden
  display: flex 
  flex-direction: column
  justify-content: flex-end
  align-items: flex-start
  height: 220px
  @media screen and (max-width: $device-mobile-max)
    height: 180px
  .bg
    z-index: 0
  .content 
    z-index: 1
    position: relative
    width: 100%
    height: 100%
    display: flex
    flex-direction: column
    justify-content: space-between
    .top
      // 文字区保持在背景图（img.bg z-index 0）之上
      z-index: 1
      display: flex
      justify-content: space-between
      align-items: center
      line-height: 1
      margin: 1rem
      .tag-plugin.navbar
        margin: 0
        border-radius: 6px
        padding: 2px
        background: rgba(black, 0.2)
        overflow: hidden
        &:after
          content: none
        .link
          margin: 0
          border-radius: 4px
          color: var(--text-banner-theme, var(--text-banner))
          opacity: .8
          padding: 2px 6px
          background: none
          line-height: 1.5
          font-size: $fs-15
          text-shadow: 0 0 1px rgba(0,0,0,0.12)
          &+.link
            margin-left: 2px
          &:after
            content: none
          &:hover
            color: var(--text-banner-theme, var(--text-banner))
            opacity: 1
            background: rgba(white, 0.25)
          &.active
            color: var(--text-banner-theme, var(--text-banner))
            opacity: 1
            background: rgba(white, 0.25)
        
      .back
        background: none
        padding: 0
        line-height: 0
        visibility: hidden
        @media screen and (max-width: $device-mobile-max)
          visibility: visible
        svg
          width: 20px
          height: 20px
          fill: var(--text-banner-theme, var(--text-banner))
  .banner-link
    position: absolute
    top: 0
    bottom: 0
    left: 0
    right: 0
    opacity: 0
    z-index: 2
  img
    object-fit: cover
    disable-select()
    margin: 0
    height: 100%
    width: 100%
  img.bg
    position absolute
    top: 0
    bottom: 0
    left: 0
    right: 0
  img.avatar
    border-radius: 50%
    corner-shape: round
    width: 48px
    height: 48px
  .bottom
    // 同 .top：文字区保持在背景图之上
    z-index: 1
    display: flex
    padding: 1rem
    width: 100%
    box-sizing: border-box
  .title
    font-size: 1.5rem
    font-weight: 700
    // 与封面 headline 同款描边，避免标题在复杂背景上发虚
    text-shadow: 0 2px 4px rgba(0,0,0,0.2)
  .avatar+.text-area
    margin-left: 0.75rem
  .text-area .text
    line-height: 1.2
    margin-top: 0.25rem
    margin-bottom: 0.25rem
  .avatar+.text-area .title
    font-size: 1.2rem
  .subtitle
    font-size: $fs-14
    color: var(--text-banner-theme, var(--text-banner))
  .content:only-child
    color: var(--text-p1)
  .bg+.content 
    --text-banner: white
    color: var(--text-banner)
    .avatar
      border: 2px solid var(--text-banner)
      margin: 0
    .bottom
      text-shadow: 0 0 1px rgba(0,0,0,0.12)

.tag-plugin.banner
  // 内容区用绝对定位铺满整卡：避免 flex 百分比高度（height: 100%）在不同浏览器解析不一致，
  // 导致 .top/.bottom 无法贴顶/贴底（navbar 掉到中间）
  .content
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
  // banner 标签不使用渐变模糊覆盖层（cover-overlay 仅用于封面/页顶 banner）：
  // 纯背景图 + 自适应文字颜色，hover 保留背景图放大与变暗
  --img-br: 100%
  --img-sat: 100%
  --cover-zoom: 1.05
  &:hover
    --img-br: 75%
    --img-sat: 120%
    img.bg
      transform: scale(var(--cover-zoom))
  img.bg
    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

.tag-plugin.banner .navbar a.active
  // 不使用 blur-effect()（backdrop-filter）：banner 是 overflow:hidden + 圆角/连续曲率的裁剪容器，
  // backdrop-filter 在部分浏览器（Safari / 旧版 Chromium）会破坏父级圆角裁剪，
  // hover 放大背景图时四角变直角；改用与 hover 一致的半透明白底
  background: rgba(white, 0.25)
  &:hover
    background-color: var(--card)

@media screen and (max-width: $device-mobile-max)
  .banner.top
    border-radius: 0
    clip-path: none