/* 默认隐藏两个元素，防止样式闪烁或意外显示 */
.pc-post-main,
.mobile-post-main {
    display: none;
}


/* 顶部导航 影评---》帖子切换 */
.top-nav .top-nav-list{
    display:flex;
  justify-content: center;
    align-items:center;
}
.top-nav .top-nav-list li a{
  display: flex;
width:288px;
height:40px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 6px;
color:  #7C7C7C;
text-align: center;

/* 18 */
font-family: "PingFang SC";
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 133.333% */
}
.top-nav .top-nav-list .active a{
  background: #292929;
  color: #FFF;
  font-weight: 600;
}
/* 二级导航 最新最热过滤 */
.top-sub-nav-box{
  margin:16px 0 54px 0px;
}
.top-sub-nav-box ul{
   display:flex;
    align-items:center;
    border-bottom: 1px solid  rgba(255, 255, 255, 0.10);
}
.top-sub-nav-box li a{
 display: flex;
height: 44px;
align-items: center;
flex-direction:column;
justify-content:center;
gap:  28px;
margin-right:28px;
color:  #7C7C7C;
text-align: center;

/* Regular */
font-family: "PingFang SC";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}
.top-sub-nav-box .active a{
  color: #FFF;
  position:relative;
  
}
.top-sub-nav-box .active a::after{
  content:'';
  display:block;
  width: 16px;
height: 4px;
 position: absolute;
left: 50%;
transform: translate(-50%);
bottom: 0;
border-radius:  3px  3px 0 0;
background:  #EB7332;
  
}
/* 主体内容样式 */
.post-list>li{
margin-bottom:36px;
 cursor: pointer; 
}
.post-list>li{
  display:flex;
  width: 100%;
}
.post-list>li>a{
  width: 100%;
  display: block;
}
.post-list li .user-avatar{
  width: 40px;
height: 40px;
flex-shrink: 0;
border-radius:50%;
margin-right:12px;
padding:0 !important;
}
.user-row{
  display:flex;
  align-items:center;
  justify-content:start;
  gap:12px;
}
.user-row .user-name{
  min-width:0;
}
.user-row .create-time{
  white-space: nowrap;
  margin-left:8px;
}
.user-name{
  display:flex;
  justify-content:space-between;
}
.user-name h2{
  color:  #BDBDBD;

/* Medium */
font-family: "PingFang SC";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 22px; /* 137.5% */
}
.user-name a{
  color:  #FFF;

/* Regular */
font-family: "PingFang SC";
font-size: 12px;
font-style: normal;
cursor: pointer; /* 当鼠标悬停在 .link-box 上时，显示手型图标 */
font-weight: 400;
line-height: 18px; /* 150% */
}
.create-time, .last-updated{
  color: #7C7C7C;
/* Regular */
font-family: "PingFang SC";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 150% */
}
.post-title-box{
  display:flex;
margin:10px 0 ;

}
.post-title-box mark{
  border-radius: 1.778px;
background:  #EB7332;
display: flex;
padding: 1.778px 5.333px;
justify-content: center;
align-items: center;
gap: 8.889px;
margin-left:10px;
}
.post-title{
  overflow: hidden;
color:  #BDBDBD;
text-overflow: ellipsis;

/* Medium */
font-family: "PingFang SC";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 22px; /* 137.5% */
}
.post-desc{
  overflow: hidden;
  color:#7C7C7C;
  text-overflow: ellipsis;

  /* Regular */
  font-family: "PingFang SC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 137.5% */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  align-self: stretch;
  margin:10px 0px
  letter-spacing: .5px;
}
/* 主体封面列表 */
.post-cover-list{
  margin:10px 0;
  display:flex;
  overflow-x: auto;
  gap: 10px;
  padding-bottom: 5px;
}
/* 隐藏滚动条但保留滚动功能 */
.post-cover-list::-webkit-scrollbar {
  height: 4px;
}
.post-cover-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}
.post-cover-list::-webkit-scrollbar-track {
  background: transparent;
}
.item-box{
  width: auto;
  height: 129.375px;
  position:relative;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}

.video-cover-box {
  position: relative;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  /* 使用比例而不是固定像素尺寸，避免撑大父级 */
  aspect-ratio: 16 / 9;
  max-width: 230px;
}

/* 遮罩层：覆盖在封面图之上 */
.video-cover-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.30);
  z-index: 1;
}

/* 视频封面：自适应父容器，不固定宽高 */
.video-cover,
.video-cover2 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 播放按钮保持居中在最上层 */
.play-icon{
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform:translate(-50%,-50%);
  z-index:2;
}
.item-box{
  display:flex;
}
.item-box img{
  max-width:100%;
  height:100%;
  flex-shrink:0;
}
.item-box{
  position: relative;
}
.item-box.has-more::after,
.item-box .more-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.40);
  border-radius: 4px;
}

.more-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.more-count{
  color: #FFF;
  font-family: "PingFang SC";
  font-size: 24px;
  font-weight: 600;
  z-index: 10;
  margin-left: 4px;
}
.post-item-numb{
  display:flex;
  align-items:center;
}
.post-item-numb li{
   display:flex;
  align-items:center;
  justify-content:center;
  color:  #7C7C7C;
margin-right:30px;
/* Regular */
font-family: "PingFang SC";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 150% */
}
.post-item-numb li img{
  width: 20px;
height: 20px;
margin-right:4px;
}

@media screen and (min-width: 1367px) {
  .pc-post-main{
      /* margin-top: 80px !important; */
  }
  .pc-main-box .top-sub-nav-box {
    top: 60px !important; 
  }
  .pc-main-box{
    padding:0px !important;
  }
}

@media screen and (max-width: 1366px) {
  .pc-main-box{
    padding:0px  16px !important;
  }
}
@media screen and (min-width: 1366px) {
  .pc-post-main .top-nav {
    padding:16px 0px !important;
    top: 48px !important;
  }
  
}

/* 媒体查询：PC 端样式 (视口宽度大于 768px 时生效) */
@media screen and (min-width: 768px) {
    .pc-post-main {
        display: block; /* 仅在 PC 端显示此内容 */
    }
    /* PC 端：顶部导航（AV影评 / 精选帖子切换）吸顶 */
    .pc-post-main .top-nav {
      position: sticky;
      top: 60px; /* 紧贴全站导航下方，可按需微调 */
      z-index: 910;
      background-color: #000;
      padding:36px 0px;
    
    }
    .pc-main-box{
      max-width:1248px; /* 加宽一点显示5个item  */
      margin:0 auto;
    }
    /* PC 端：二级筛选导航吸顶 */
    .pc-main-box .top-sub-nav-box {
      position: sticky;
      top: 40px; 
      z-index: 900;
      background-color: #000;
      padding-top: 8px;
    }
    .top-sub-nav-box li a {
      font-size: 18px;
    }
    .top-sub-nav-box .active a {
      font-size: 20px;
    }
}

/* 媒体查询：移动端样式 (视口宽度小于或等于 767px 时生效) */
@media screen and (max-width: 767px) {
    .mobile-post-main {
        display: block; /* 仅在移动端显示此内容 */
    }
}

/* 移动端 item-info 限制：宽度 ≤824px 时生效 */
@media screen and (max-width: 824px) {
  .mobile-post-post-item .item-info {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }
  .custom-select__trigger{
    width:calc(100vw - 32px);
    font-size:12px;
    margin:0 auto;
    max-height:46px;
  }
  .custom-select__options{
    left:16px;
    top:130%;
    width:calc(100vw - 32px);
  }
  .mobile-post-post-item .item-info h2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
  }

  .mobile-post-post-item .item-info span:last-child {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}