/* 公共广告位统一规范（详情横幅，素材 720×150）
 * PC：双列；H5：单列。均按 720:150 等比展示，避免裁切
 */

.promo-rail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 24px 0;
  box-sizing: border-box;
}

.promo-card {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 720 / 150;
  border-radius: var(--radius-md);
  background: #232328;
  box-sizing: border-box;
}

.promo-card img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: block;
  object-fit: cover;
}

.promo-card__tag {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}

/* 页面广告容器：默认占满一行 */
.play-promo,
.list-promo,
.list-mid-promo,
.list-bottom-promo,
.series-list-promo {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.play-promo .promo-rail {
  padding: 12px 0;
}

.play-promo--bottom .promo-rail {
  padding: 12px 0 0;
}

.list-bottom-promo {
  padding-bottom: 24px;
}

@media (max-width: 768px) {
  /* H5：纵向两行，宽度 100% */
  .promo-rail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 8px 0;
  }

  .promo-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 720 / 150;
    border-radius: var(--radius-md);
    border: 1px solid var(--line-soft);
  }

  .promo-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  .promo-card__tag {
    top: 8px;
    right: 8px;
  }

  /* 与页面内容区 gutter 对齐（首页 .main > .promo-rail、播放页、列表底部） */
  .main > .promo-rail,
  .play-promo,
  .list-bottom-promo {
    padding-left: var(--h5-gutter, 16px);
    padding-right: var(--h5-gutter, 16px);
  }

  .play-promo {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .play-promo .promo-rail,
  .play-promo--bottom .promo-rail,
  .list-bottom-promo .promo-rail,
  .main > .promo-rail {
    padding-top: 0;
    padding-bottom: 0;
  }

  .play-promo--bottom {
    padding-top: 8px;
    padding-bottom: 0;
  }

  .list-bottom-promo {
    padding-top: 0;
    padding-bottom: 8px;
  }

  /* 已在带 gutter 的 list-body / grid 内：不再重复左右边距 */
  .list-body .promo-rail,
  .list-body .list-mid-promo,
  .list-body .list-promo,
  .list-body .series-list-promo,
  .grid--list .list-mid-promo,
  .grid--series-list .series-list-promo {
    padding-left: 0;
    padding-right: 0;
  }

  .list-mid-promo.only-h5,
  .series-list-promo.only-h5 {
    display: block !important;
  }
}