/* ==========================================================================
   OIT AWARDS · 精彩瞬间页  —  页面专属样式
   公用：css/style.css（导航 / 页脚 / container / sec-title）
   设计稿基准：1920px（PSD 2560 / 1.3333 倍图），px 数值 = @1920 1:1 尺寸
   ========================================================================== */

/* ---------- 滚动淡入（与 organization.css 同一套动画） ---------- */
.fade-in{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.fade-in.visible{ opacity:1; transform:none; }

/* ---------- 年份切换条（设计稿：高 ~92，底色 #2B5BA3，青色分隔线） ---------- */
.aw-yearbar{
  background:#305fa7;
}
.aw-yearbar__inner{
  height:clamp(56px, 5.52vw, 106px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(38px, 5vw, 96px);
}
.aw-year{
  font-size:clamp(15px, 1.17vw, 22.5px);
  font-weight:600;
  letter-spacing:.02em;
  color:#fff;
  transition:color .18s;
  text-decoration:none;
}
.aw-year:hover{ color:var(--cyan); }
.aw-year.is-muted{ color:rgba(255,255,255,.55); }
.aw-year.is-muted:hover{ color:var(--cyan); }
.aw-year.is-active{
  font-size:clamp(21px, 1.72vw, 33px);
  font-weight:800;
  color:var(--orange);
}
.aw-year.is-active:hover{ color:var(--orange); }
.aw-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  min-height:24px;
  margin:0 clamp(20px, 3.1vw, 60px);
  padding:0;
  background:none;
  border:0;
  font-size:clamp(16px, 1.15vw, 22px);
  line-height:1;
  color:rgba(255,255,255,.75);
  cursor:pointer;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  transition:color .18s;
}
.aw-arrow:hover{ color:#fff; }

/* ==========================================================================
   论坛回顾横幅（设计稿：高 ~646，蓝色放射波纹底图）
   ========================================================================== */
.mo-intro{
  background:#1565a3 url("../images/mo_intro_bg.jpg") center / cover no-repeat;
  padding:clamp(44px, 6.3vw, 121px) 0;
}
.mo-intro__row{
  display:flex;
  align-items:stretch;
  gap:0;
}
.mo-intro__photo{
  flex:0 0 45.7%;
  width:45.7%;
  min-height:200px;
  object-fit:cover;
}
.mo-intro__card{
  flex:1;
  min-height:clamp(200px, 21.1vw, 405px);
  background:rgba(0,0,0,.3);
  display:flex;
  align-items:center;
  padding:clamp(20px, 2.7vw, 52px) clamp(18px, 2.2vw, 29px);
}
.mo-intro__card p{
  font-size:clamp(13px, 1.04vw, 20px);
  line-height:1.75;
  letter-spacing:.02em;
  text-align:justify;
  text-justify:inter-ideograph;
  text-indent:2em;
  color:#fff;
}

/* ==========================================================================
   照片直播 + 采访视频（设计稿：高 ~1280，科技电路氛围底图）
   ========================================================================== */
.mo-main{
  background:#22417e url("../images/mo_sections_bg.jpg") center top / cover no-repeat;
  padding:clamp(40px, 4.6vw, 89px) 0 clamp(28px, 2.4vw, 46px);
}
.mo-sec-gap{ margin-top:clamp(44px, 4.6vw, 89px); }

/* ---------- 照片直播卡片 ---------- */
.mo-live{
  margin-top:clamp(26px, 2.3vw, 44px);
  display:flex;
  justify-content:space-between;
  gap:clamp(24px, 6.6vw, 126px);
  flex-wrap:wrap;
}
/* 左侧照片轮播（占位与原论坛卡片一致，右侧晚宴卡片保持原样） */
.mo-live__carousel{
  position:relative;
  flex:1 1 0;
  min-width:280px;
  aspect-ratio:802 / 402;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 10px 34px rgba(0,15,45,.28);
  transition:transform .22s, box-shadow .22s;
}
.mo-live__carousel:hover{ transform:translateY(-3px); box-shadow:0 16px 42px rgba(0,15,45,.38); }
.mo-carousel__viewport{
  position:absolute; inset:0;
  overflow:hidden;
}
.mo-carousel__track{
  display:flex;
  height:100%;
  transition:transform .55s ease;
}
.mo-slide{
  flex:0 0 100%;
  height:100%;
  display:block;
}
.mo-slide img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.mo-carousel__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2;
  width:clamp(34px, 3vw, 52px); height:clamp(34px, 3vw, 52px);
  border:0; border-radius:50%;
  background:rgba(0,0,0,.40); color:#fff;
  font-size:clamp(16px, 1.5vw, 24px); line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.mo-carousel__nav:hover{ background:rgba(0,0,0,.65); }
.mo-carousel__nav--prev{ left:clamp(10px, 1.2vw, 22px); }
.mo-carousel__nav--next{ right:clamp(10px, 1.2vw, 22px); }
.mo-live__card{
  position:relative;
  flex:1 1 0;
  min-width:280px;
  aspect-ratio:802 / 402;
  border-radius:8px;
  overflow:hidden;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:0 10px 34px rgba(0,15,45,.28);
  transition:transform .22s, box-shadow .22s;
}
.mo-live__card:hover{ transform:translateY(-3px); box-shadow:0 16px 42px rgba(0,15,45,.38); }
.mo-live__card--forum { background-image:url("../images/mo_live_forum.jpg"); }
.mo-live__card--dinner{ background-image:url("../images/mo_live_dinner.jpg"); }

.mo-live__card h3,
.mo-live__carousel h3{
  position:absolute;
  left:0; right:0; top:31%;
  font-size:clamp(20px, 1.953125vw, 37.5px);
  line-height:1;
  font-weight:700;
  text-align:center;
  letter-spacing:.04em;
  font-family:"Songti SC","STSong","SimSun","Noto Serif SC",serif;
  text-shadow:0 2px 14px rgba(0,20,50,.25);
}
.mo-live__btn{
  position:absolute;
  left:50%; bottom:36%;
  transform:translateX(-50%);
  width:clamp(110px, 7.2vw, 137px);
  height:clamp(26px, 1.7vw, 32px);
  line-height:clamp(26px, 1.7vw, 32px);
  font-size:clamp(13px, .8vw, 15px);
  font-weight:700;
  letter-spacing:.06em;
  text-align:center;
  color:#000;
  border-radius:4px;
  transition:filter .18s;
}
.mo-live__card--forum  .mo-live__btn,
.mo-live__carousel     .mo-live__btn{ background:var(--cyan); }
.mo-live__card--dinner .mo-live__btn{ background:var(--orange-soft); }
.mo-live__card:hover .mo-live__btn{ filter:brightness(1.08); }

/* ---------- 采访视频（大播放器 + 右侧列表） ---------- */
.mo-videos{
  margin-top:clamp(26px, 2.3vw, 43px);
  position:relative;                          /* 右侧列表绝对定位的参照 */
  display:flex;
  align-items:flex-start;
  /* 预留右侧列表宽度（列表宽 + 间距）：左侧播放器据此定宽、按自身比例定高 */
  padding-right:calc(clamp(300px, 11.8vw, 227px) + clamp(14px, 1.15vw, 22px));
}
.mo-player{
  position:relative;
  flex:1 1 0;
  min-width:0;
  aspect-ratio:1405 / 791;
  border-radius:clamp(8px, 1vw, 15px);
  overflow:hidden;
  background:#0d2c5c;
  box-shadow:0 10px 34px rgba(0,15,45,.28);
}
.mo-player__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  background:#000;
}
.mo-player.is-switching img{ opacity:.35; }
.mo-player__play{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:clamp(62px, 4.8vw, 92px);
  height:clamp(32px, 2.4vw, 46px);
  border:0;
  border-radius:clamp(6px, .55vw, 8px);
  background:var(--orange);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 22px rgba(0,10,35,.35);
  transition:filter .18s, transform .18s;
}
.mo-player__play:hover{
  filter:brightness(1.1);
  transform:translate(-50%,-50%) scale(1.06);
}
.mo-player__play i{
  width:0; height:0;
  margin-left:3px;
  border-style:solid;
  border-width:clamp(8px, .65vw, 12px) 0 clamp(8px, .65vw, 12px) clamp(12px, 1vw, 19px);
  border-color:transparent transparent transparent #fff;
}

/* 右侧视频列表（设计稿：4 个缩略图，白色描边，激活项带播放角标） */
.mo-playlist{
  position:absolute;          /* 贴住播放器右侧，高度始终等于播放器高度 */
  top:0;
  right:0;
  bottom:0;
  width:clamp(300px, 11.8vw, 227px);
  display:flex;
  flex-direction:column;
  gap:clamp(14px, 1.25vw, 24px);
  overflow-y:auto;            /* 一屏约显示 4 个，超出的上下滚动 */
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.45) transparent;
}
.mo-playlist::-webkit-scrollbar{ width:6px; }
.mo-playlist::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.45); border-radius:3px; }
.mo-thumb{
  position:relative;
  flex:0 0 auto;              /* 关键：禁止纵向被压缩，超出时才会溢出并出现滚动条 */
  padding:0;
  width:100%;
  aspect-ratio:303 / 171;
  border:2px solid rgba(255,255,255,.45);
  border-radius:6px;
  overflow:hidden;
  background:#0d2c5c;
  cursor:pointer;
  transition:border-color .18s, transform .18s;
}
.mo-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.mo-thumb:hover{ border-color:rgba(255,255,255,.85); transform:translateY(-2px); }
.mo-thumb.is-active{ border-color:#fff; }

/* 激活缩略图的播放角标 */
.mo-thumb.is-active::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:clamp(24px, 1.8vw, 34px);
  height:clamp(15px, 1.1vw, 21px);
  border:2px solid #fff;
  border-radius:5px;
  background:rgba(0,20,50,.35);
}
.mo-thumb.is-active::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  transform:translate(-38%,-50%);
  width:0; height:0;
  border-style:solid;
  border-width:4px 0 4px 7px;
  border-color:transparent transparent transparent #fff;
  z-index:1;
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width:1100px){
  .mo-live{ gap:24px; }
}

/* —— 手机 —— */
@media (max-width:900px){
  .mo-intro{ padding:34px 0; }
  .mo-intro__row{ flex-direction:column; }
  .mo-intro__photo{ flex:none; width:100%; }
  .mo-intro__card{ min-height:0; padding:22px 18px; }
  .mo-intro__card p{ font-size:14px; }

  .mo-main{ padding:36px 0 30px; }
  .mo-live{ margin-top:20px; flex-direction:column; }
  .mo-live__carousel{ flex:none; width:100%; min-width:0; }
  .mo-live__card{ flex:none; width:100%; min-width:0; }
  .mo-carousel__nav{ width:32px; height:32px; font-size:15px; }
  .mo-carousel__nav--prev{ left:8px; }
  .mo-carousel__nav--next{ right:8px; }
  .mo-live__card h3, .mo-live__carousel h3{ font-size:24px; }
  .mo-live__btn{ width:118px; height:34px; line-height:34px; font-size:14px; }
  .mo-sec-gap{ margin-top:40px; }

  .mo-videos{
    margin-top:20px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding-right:0;                       /* 取消右侧预留 */
  }
  .mo-player{ flex:none; width:100%; aspect-ratio:1405 / 791; }  /* 移动端恢复播放器高度，保证有播放区 */
  .mo-playlist{
    position:static;                       /* 回到正常流：播放器下方横向条 */
    width:100%;
    flex:none;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:12px;
    overflow-x:auto;                       /* 移动端左右滑动 */
    overflow-y:hidden;
    padding-right:0;
    margin-top:14px;
  }
  .mo-thumb{ flex:0 0 auto; width:42vw; max-width:150px; }
  .mo-thumb.is-active::after{ width:22px; height:14px; }
  .mo-thumb.is-active::before{ border-width:3px 0 3px 6px; }
}