/* p3.61:YouTube 式视频文章——完全独立的一套布局(重做 p3.60①)。

   结构(post.php 服务端渲染,DOM 序 = 手机版式):
     article.post.post--video
       .vpage[data-share]
         .vpage__main
           .vpage__stage > .vpage__frame[data-stage]   16:9 舞台
           header.post-head.vpage__head                封面+标题+副标题+元信息
           .vpage__actions                             点赞/分享胶囊操作条
           .post-tags.vpage__tags                      标签(可选)
           .post-body                                  正文
           .post-reviews                               评论(既有评论系统原样)
         aside.vpage__rail
           .vplaylist | .vrail-sec(视频文章)+ .vrail-sec(其他文章)

   设计要点(总指挥规格,上一版最缺的就是这些):
   - 内容绝不贴边:.vpage 自己掌控全部 padding,不吃 .post 的 --post-pad
     (视频布局里 --post-pad 归零,post-head/post-body/post-reviews 内联
      padding 随之归零,由 .vpage 的 24px 边距统一接管)。
   - 模块呼吸:舞台→头→操作条→正文→评论,每段之间 16-28px 明确间距。
   - 桌面两栏:左主区 minmax(0,1fr),右栏 400px(窄屏 330px),栏间
     gap clamp(24px, 2vw, 32px);右栏 sticky 自滚。
   - 手机:垂直堆叠,舞台可 sticky 吸顶(≤699px),边距 16px。

   配色/圆角/字体全部吃 tokens.css 变量,深浅色/玻璃模式自动跟。 */

/* ---------- 外壳:视频文章的 sheet 更宽(YouTube 主内容区量级) ---------- */
/* 直达页(表单 A):expand.css 的 .is-standalone 定宽卡对视频文章放宽。
   内联展开态的宽度由 expand.js 的 getVideoTargetRect() 在内容到达后
   widen(同一组数值),这里只管直达页。 */
@media (min-width: 700px) {
  .expand-sheet.is-standalone:has(.post--video) {
    width: min(1600px, 94vw);
    height: min(94vh, 1400px);
  }
}

/* ---------- 容器:独立布局根,自己掌控全部留白 ---------- */
.post--video {
  --post-pad: 0;
  padding-top: 0;
}
.vpage {
  /* 顶部不做 logo,留一段舒服的距离;64px 同时让开浮动顶栏(36px
     圆钮 @ top:16px),内容从按钮下沿之下开始,不被压住 */
  padding: 64px 24px 48px;
}
@media (max-width: 699px) {
  .vpage { padding: 58px 16px 40px; }
}

/* ---------- 舞台(所有形态通用) ---------- */
.vpage__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgb(0 0 0 / .22);
}
.vpage__frame > video,
.vpage__frame > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.vpage__frame > video { object-fit: contain; }

/* ---------- 文章头:封面 + 标题 + 副标题 + 元信息 ---------- */
.vpage__head {
  margin-top: 22px;
  padding-bottom: 0;
  align-items: center;
}
.vpage__head .post-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
}
.vpage__head h1 {
  font-size: 20px;
  line-height: 1.3;
}
.vpage__meta {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ---------- 操作条(YouTube 式胶囊按钮一排) ---------- */
.vpage__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--separator);
}
.vact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.vact svg { display: block; }
@media (hover: hover) {
  .vact:hover { background: var(--row-active); transform: scale(1.04); }
}
.vact:active { opacity: .65; }
.vact--like .vact__count {
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
}
/* 已点赞:图标实心 + 主题色,和顶栏 tint 语言一致 */
.vact--like.is-liked {
  color: var(--tint);
}
.vact--like.is-liked svg path { fill: currentColor; }

/* ---------- 标签/正文/评论:在左主区里按 vpage 的节奏走 ---------- */
.vpage__tags { margin-top: 20px; }
.vpage__main .post-body { margin-top: 22px; }
.vpage__main .post-reviews { margin-top: 34px; }

/* ---------- 右栏:播放列表(多视频) ---------- */
.vplaylist {
  background: var(--chip-bg);
  border-radius: 14px;
  padding: 12px;
}
.vplaylist__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 2px 6px 10px;
}
.vplaylist__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.vplaylist__count {
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.vplaylist__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vplaylist__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease);
}
.vplaylist__item:hover { background: var(--row-hover); }
.vplaylist__item.is-active { background: var(--row-active); }
.vplaylist__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 168px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  /* p3.62①:槽内是 .cover--vcard 全套封面(absolute inset 0 铺满),
     灰底只作封面就绪前的兜底;不再 flex 居中手写 emoji/img。 */
  background: rgb(120 120 128 / .16);
}
.vplaylist__playing {
  position: absolute;
  inset: 0;
  z-index: 3; /* 压在封面内容上(coverkit 层 z-index:2) */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #fff;
  background: rgb(0 0 0 / .45);
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease);
}
.vplaylist__item.is-active .vplaylist__playing { opacity: 1; }
.vplaylist__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vplaylist__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vplaylist__item.is-active .vplaylist__name { color: var(--tint); }
.vplaylist__sub {
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---------- 右栏:分段小卡列表(单视频时的视频文章/其他文章) ---------- */
.vrail-sec + .vrail-sec { margin-top: 26px; }
.vplaylist + .vrail-sec { margin-top: 26px; } /* p3.62④:播放列表下接其他文章段 */
.vrail-sec__title {
  margin: 0 4px 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.vrail-sec__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vcard {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-decoration: none;
  color: var(--text-primary);
  padding: 6px;
  margin: 0 -6px; /* hover 底色外扩,内容对齐不动 */
  border-radius: 12px;
  transition: background var(--dur-hover) var(--ease);
}
.vcard:hover { background: var(--row-hover); }
.vcard__thumb {
  position: relative; /* .cover--vcard 的绝对定位锚(p3.62①) */
  flex: 0 0 auto;
  width: 168px;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: rgb(120 120 128 / .14);
}
.vcard__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}
.vcard__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vcard__sub {
  font-size: 12px;
  color: var(--text-secondary);
}

/* ---------- p3.62③:右栏底部"查看更多文章"按钮 ---------- */
.vrail-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease);
}
.vrail-more:hover { background: var(--row-hover); transform: scale(1.02); }
@media (min-width: 1024px) {
  .vrail-more { margin-top: auto; }         /* flex 沉底(p3.62③) */
  .vrail-sec:last-of-type { margin-bottom: 18px; } /* 和按钮保持固定间距 */
}
.vrail-more svg { color: var(--text-secondary); }

/* ---------- 桌面两栏(≥1024px) ---------- */
@media (min-width: 1024px) {
  .vpage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    column-gap: clamp(24px, 2vw, 32px);
    align-items: start;
    padding: 68px 28px 56px;
  }
  .vpage__rail {
    position: sticky;
    top: 16px;
    /* p3.62③:flex 列 + 高度撑满网格行(align-self 默认 stretch,上限
       max-height),内容不足时 .vrail-more 靠 margin-top:auto 沉到右栏
       底部——右栏下沿和左主区内容底边视觉平齐,不留一截空白。 */
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    max-height: calc(100% - 32px);
    max-height: calc(94vh - 64px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 2px;
  }
  /* 内容超出时由 rail 自己滚(overflow-y:auto),flex 子项绝不允许收缩——
     默认 flex-shrink:1 会把播放列表压成 24px 只露头(p3.62④ 实测)。 */
  .vpage__rail > * {
    flex: 0 0 auto;
  }
  /* 右栏内容多于舞台高度时不撑爆布局,自己滚 */
  .vplaylist {
    max-height: inherit;
    overflow-y: auto;
  }
}
@media (min-width: 1440px) {
  .vpage { grid-template-columns: minmax(0, 1fr) 400px; }
}

/* ---------- 手机(≤699px):垂直堆叠,舞台可吸顶 ---------- */
@media (max-width: 699px) {
  /* 规格明确"手机端也要留边距、别贴边"——吸顶的是带 16px 侧距、
     12px 圆角的播放器本身,不是满血出血的黑框 */
  .vpage__stage {
    position: sticky;
    top: 0;
    z-index: 4;
    padding-top: 2px; /* 吸顶时和 sheet 顶缘留一丝缝,圆角不被裁 */
  }
  .vpage__head { margin-top: 18px; }
  .vpage__rail { margin-top: 34px; }
}
/* 平板(700-1023px):单栏但保留边距和圆角,不吸顶 */
@media (min-width: 700px) and (max-width: 1023px) {
  .vpage__rail { margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .vact,
  .vplaylist__item,
  .vplaylist__playing,
  .vcard { transition: none; }
}