/* 空列表：嵌套 empty_state，保证未单独挂 CSS 的页面也有样式 */
@import url("../empty_state/style.css");

/* 视频列表 · grid 模式 */
.pb-vod-list {
  display: grid;
  gap: 12px 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container pb-sec-body (min-width: 400px) {
  .pb-vod-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px 10px !important;
  }
}

@container pb-sec-body (min-width: 560px) {
  .pb-vod-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@container pb-sec-body (min-width: 900px) {
  .pb-vod-list {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 20px 16px !important;
  }
}

@container pb-col (min-width: 400px) {
  .pb-vod-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@container pb-col (min-width: 560px) {
  .pb-vod-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@container pb-col (min-width: 900px) {
  .pb-vod-list {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .pb-vod-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 10px !important;
  }
}

@media (max-width: 400px) {
  .pb-vod-list .pb-vod-card__title {
    font-size: 13px;
    line-height: 1.35;
  }

  .pb-vod-list .pb-vod-card__meta {
    font-size: 11px;
  }
}

/* 主内容区直出列表：无 section 容器时仍保持响应式网格 */
.pbs-main > .pb-block-host .pb-vod-list,
.pbs-main .bili-sec__body .pb-vod-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 10px;
}

@media (min-width: 561px) {
  .pbs-main > .pb-block-host .pb-vod-list,
  .pbs-main .bili-sec__body .pb-vod-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .pbs-main > .pb-block-host .pb-vod-list,
  .pbs-main .bili-sec__body .pb-vod-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 12px;
  }
}

@media (min-width: 1100px) {
  .pbs-main > .pb-block-host .pb-vod-list,
  .pbs-main .bili-sec__body .pb-vod-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px 16px;
  }
}