/**
 * 首页 — 转换自前端仓库 @css/home/首页.css (dev分支)
 * H5：node 43:18940（750 画布，UI÷32 → em，随视口等比缩放）
 * Web：node 145:26419（≥960px，html rem 基准约 20px，24px=1.2rem / 14px=0.7rem / 12px=0.6rem / 11px=0.55rem）
 */

.home-page {
  --home-accent: #f90094;
  --home-text: #edeeef;
  --home-text-muted: #b8b6bc;
  /* 与全站 xqbj-list（popular/today 等）一致：16:9 封面 */
  --home-card-ratio: 56.5%;
  color: var(--home-text);
}

/* ========== H5 ≤959px（750 设计稿） ========== */
@media (max-width: 959px) {
  /* 750 宽画布：1em = 32px @750，375 屏宽时 1em = 16px */
  .home-page {
    font-size: calc(100vw / 23.4375);
    --xqbj-component-home-section-gap: calc(32 / 32 * 1em);
    --home-grid-gap: calc(12 / 32 * 1em);
  }

  .home-page .home-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 calc(48 / 32 * 1em);
    box-sizing: border-box;
  }

  .home-page__slogan {
    margin: calc(24 / 32 * 1em) 0 calc(32 / 32 * 1em);
    font-size: calc(26 / 32 * 1em);
  }

  .xqbj-component-home-ad-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(12 / 32 * 1em);
    margin-bottom: var(--xqbj-component-home-section-gap);
  }

  .xqbj-component-home-ad-grid__cell {
    border-radius: calc(4 / 32 * 1em);
    padding-bottom: 18.55%; /* 广告条高度约 64px @345 列宽 */
  }

  .home-page__ad-bottom {
    margin-top: var(--xqbj-component-home-section-gap);
  }

  .xqbj-component-home-section {
    margin-bottom: var(--xqbj-component-home-section-gap);
  }

  .xqbj-component-home-section__head {
    min-height: calc(33 / 32 * 1em);
    margin-bottom: calc(16 / 32 * 1em);
  }

  .xqbj-component-home-section__title {
    font-size: calc(32 / 32 * 1em);
    font-weight: 600;
    line-height: 1.2;
  }

  .xqbj-component-home-section__title--zz {
    font-size: calc(32 / 32 * 1em);
    color: var(--home-text);
  }

  .xqbj-component-home-section__more {
    font-size: calc(32 / 32 * 1em);
    gap: calc(8 / 32 * 1em);
  }

  .xqbj-component-home-section__more .nav-chevron--right {
    width: calc(16 / 32 * 1em);
    height: calc(16 / 32 * 1em);
  }

  .home-page .xqbj-component-home-section__list {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .home-page .xqbj-component-home-section__list .xqbj-list {
    --colection-list-item-gap: 0.6rem;
    --collection-perline-count: 2;
    margin-bottom: 0;
  }

  /* 视频列表卡片：尺寸/角标/标题沿用 common.css，仅保留与热门页一致的封面比例 */
  .home-page .xqbj-list-item-content {
    border-radius: 0.3rem;
    padding-bottom: var(--home-card-ratio);
  }

  .home-page .xqbj-list-item-content .xqbj-list-item-poster {
    border-radius: 0.3rem;
  }

  .home-page .xqbj-list-container .xqbj-list-item-title,
  .home-page .xqbj-list-item-title {
    margin-top: 0.4rem;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
  }

  .home-page .xqbj-list-item-video-wuma,
  .home-page .xqbj-list-item-video-cn-zimu,
  .home-page .xqbj-list-item-video-duration,
  .home-page .xqbj-list-item-ad-badge,
  .home-page .xqbj-list-item-content .xqbj-list-item-video-info {
    font-size: 0.6rem;
    line-height: 1.2;
  }

  .home-page .xqbj-list-item-content .xqbj-list-item-video-info {
    inset-inline: 0.4rem;
    inset-block: 0.2rem;
    align-items: flex-end;
  }

  .home-page .xqbj-list-item-content .xqbj-list-item-ads-info {
    right: 0.4rem;
    bottom: 0.2rem;
  }

  .xqbj-component-home-section--zz {
    margin-top: calc(40 / 32 * 1em);
  }

  .xqbj-component-home-section__head--zz {
    margin-bottom: calc(24 / 32 * 1em);
  }

  .home-page .xqbj-component-zz-recommend {
    --zz-icon-size: calc(60 / 32 * 1em);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: calc(16 / 32 * 1em) calc(24 / 32 * 1em);
    border: 1px solid #333;
    border-radius: calc(20 / 32 * 1em);
    padding: calc(20 / 32 * 1em);
    box-sizing: border-box;
  }

  /* H5 设计稿：9 个推荐位（5 列 × 2 行） */
  .home-page .xqbj-component-zz-recommend .xqbj-component-zz-recommend-item:nth-child(n + 10) {
    display: none;
  }

  .home-page .xqbj-component-zz-recommend .xqbj-component-zz-recommend-item .item-temp {
    border-radius: calc(6 / 32 * 1em);
  }

  .home-page .xqbj-component-zz-recommend .xqbj-component-zz-recommend-item .item-temp > img {
    border-radius: calc(6 / 32 * 1em);
  }

  .home-page .xqbj-component-zz-recommend .xqbj-component-zz-recommend-item > span {
    margin-top: calc(8 / 32 * 1em);
    font-size: calc(12 / 32 * 1em);
  }

  /* 与 popular 等列表页一致：沿用 common.css --h5-page-gutter，不额外改水平边距 */
}

/* —— 导航 Figma 风格（首页全站导航强化） —— */
.home-route .is-desktop.navbar {
  --van-nav-bar-background: #0d0e12;
  background: #0d0e12 !important;
  min-height: 2.5rem;
}

.home-route .is-desktop.navbar .navbar-wrap {
  max-width: var(--default-screen-max-width);
  margin: 0 auto;
}

.home-route .is-desktop.navbar .icon-search img {
  width: 1.25rem;
  height: 1.25rem;
}

.home-route .is-desktop.navbar .default_avatar,
.home-route .is-mobile .default_avatar {
  width: 1.875rem;
  height: 1.875rem;
}

.home-route .is-desktop.navbar nav > ul {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-route .is-desktop.navbar nav > ul > li > a,
.home-route .is-desktop.navbar nav > ul > li > .nav-title {
  font-family: PingFangSC, "PingFang SC", sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
}

.home-route .is-desktop.navbar nav > ul > li.collapse-active > a,
.home-route .is-desktop.navbar nav > ul > li.collapse-active > .nav-title .nav_item {
  color: var(--home-accent);
  font-weight: 600;
}

.home-route .is-desktop.navbar nav > ul > li .icon-down,
.home-route .is-desktop.navbar nav > ul > li .icon-up {
  font-size: 0.625rem;
  margin-left: 0.125rem;
}

/* ========== Web ≥960px ========== */
@media (min-width: 960px) {
  .home-page {
    font-size: inherit;
    --xqbj-component-home-section-gap: 2rem;
    --home-grid-gap: 0.5rem;
  }

  .home-page .home-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 2.5rem;
  }

  .home-page__slogan {
    margin: 1.375rem 0 1.125rem;
    font-size: 1.3rem;
  }

  .xqbj-component-home-ad-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: var(--xqbj-component-home-section-gap);
  }

  .xqbj-component-home-ad-grid__cell {
    border-radius: 0.125rem;
    padding-bottom: 13.43%;
  }

  .xqbj-component-home-section__head {
    min-height: 2.0625rem;
    margin-bottom: 0.75rem;
  }

  .xqbj-component-home-section__title {
    font-size: 1.2rem; /* 24px @20px */
  }

  .xqbj-component-home-section__title--zz {
    font-size: 1.2rem; /* 24px */
    color: var(--home-text);
  }

  .xqbj-component-home-section__more {
    font-size: 0.7rem; /* 14px */
  }

  .home-page .xqbj-component-home-section__list .xqbj-list {
    --collection-perline-count: 4;
    --colection-list-item-gap: var(--home-grid-gap);
  }

  .home-page .xqbj-list-item-content {
    border-radius: 0.3rem;
    padding-bottom: var(--home-card-ratio);
  }

  .home-page .xqbj-list-item-content .xqbj-list-item-poster {
    border-radius: 0.3rem;
  }

  .home-page .xqbj-list-container .xqbj-list-item-title,
  .home-page .xqbj-list-item-title {
    font-size: 0.8rem !important;
    margin-top: 0.4rem;
    white-space: nowrap;
  }

  .home-page .xqbj-list-item-video-wuma,
  .home-page .xqbj-list-item-video-cn-zimu,
  .home-page .xqbj-list-item-video-duration,
  .home-page .xqbj-list-item-ad-badge,
  .home-page .xqbj-list-item-content .xqbj-list-item-video-info {
    font-size: 0.6rem;
    line-height: 1.2;
  }

  .home-page .xqbj-component-zz-recommend {
    --zz-icon-size: 3rem;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 1rem 3.3125rem;
    margin-bottom: 0;
    padding: 0;
    border: none;
    border-radius: 0;
  }

  .home-page .xqbj-component-zz-recommend .xqbj-component-zz-recommend-item > span {
    font-size: 0.6rem; /* 12px */
  }

  .home-route .is-desktop.navbar .user-box--guest .default_avatar {
    width: 1.875rem;
    height: 1.875rem;
  }

  .home-route .xqbj-component-logo {
    height: 1.2rem;
  }
}

/* 首页标语 — Figma：26px / 600 / 白字 + #FF4A7C 外发光 */
.home-page__slogan {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: PingFangSC, "PingFang SC", sans-serif;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 5px #ff4a7c;
}

/* 共享：广告栅格结构 */
.xqbj-component-home-ad-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.xqbj-component-home-ad-grid__cell {
  position: relative;
  display: block;
  overflow: hidden;
  height: 0;
  background: #1a1d28 url("/assets/__base/images/holder@3x.png") center / cover no-repeat;
}

.xqbj-component-home-ad-grid__cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.xqbj-component-home-ad-grid__cell img.loading,
.xqbj-component-home-ad-grid__cell img:not([src]) {
  opacity: 0;
}

.xqbj-component-home-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.xqbj-component-home-section__title {
  margin: 0;
  font-family: PingFangSC, "PingFang SC", sans-serif;
  color: var(--home-text);
}

.xqbj-component-home-section__more {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  font-weight: 500;
  color: var(--home-text-muted);
  text-decoration: none;
}

.xqbj-component-home-section__more .nav-chevron--right {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.xqbj-component-home-section__more:hover {
  color: var(--home-accent);
}

.home-page .xqbj-list-item-title:hover {
  color: var(--home-accent);
}

.home-page .xqbj-list-item-content .xqbj-list-item-video-wuma,
.home-page .xqbj-list-item-content .xqbj-list-item-video-cn-zimu {
  background-color: rgba(249, 0, 148, 0.85);
}

.home-page .xqbj-component-zz-recommend .xqbj-component-zz-recommend-item .item-temp {
  width: var(--zz-icon-size);
  height: var(--zz-icon-size);
  margin: 0 auto;
  padding-bottom: 0;
  overflow: hidden;
}

.home-page .xqbj-component-zz-recommend .xqbj-component-zz-recommend-item .item-temp > img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-page .xqbj-component-zz-recommend .xqbj-component-zz-recommend-item > span {
  color: var(--home-text-muted);
  text-align: center;
}