/* React 基准:styles.css .videos-section / .videos-section-head / .featured-video-grid /
   .video-card / .video-poster / .video-play(3821-3959)。卡片属主文件:
   .spk-x-videos* 与 .spk-x-video-card* / .spk-x-video-play* 锚定于此,video-library 复用。 */
@layer spk-block {
  .spk-x-videos { padding: clamp(58px, 7vw, 92px) 0 0; background: #fff; }
  .spk-x-videos__wrap { width: min(85vw, 1240px); max-width: 1240px; }
  .spk-x-videos__head { max-width: 740px; margin: 0 0 28px; }
  .spk-x-videos .spk-x-eyebrow { margin: 0 0 18px; font-size: 12px; font-weight: 900; letter-spacing: .14em; }
  .spk-x-videos__head h2 {
    margin: 0 0 9px;
    color: #062b5c;
    font-size: clamp(30px, 3.2vw, 46px);
    line-height: 1.12;
    letter-spacing: 0;
    text-wrap: balance;
  }
  .spk-x-videos__head .spk-x-section-lead,
  .spk-x-videos__head .spk-x-section-lead p {
    max-width: none;
    margin: 0;
    color: #51616e;
    font-size: 14px;
    line-height: 1.62;
  }
  .spk-x-videos__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .spk-x-video-card {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid #dce4e9;
    border-radius: 12px;
    background: #fff;
  }
  .spk-x-video-card--featured { min-height: 100%; }
  .spk-x-video-card__poster {
    cursor: pointer;
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #dfe8ef;
    aspect-ratio: 16 / 9;
  }
  .spk-x-video-card__poster img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(.92) contrast(1.03);
  }
  .spk-x-video-card__poster::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 27, 61, .02), rgba(2, 27, 61, .26));
  }
  .spk-x-video-card__poster--disabled { cursor: default; }
  /* 无特色图时的封面底衬(archive 卡片与 video-library 共用)。两种场景:
     ① 视频有 YouTube URL 但没传特色图 → 出 i.ytimg.com 外链封面,图片盖住底衬;
        外链被墙/失效时渲染层的 onerror 隐藏 <img>,露出的就是这块渐变 + 播放按钮。
     ② 连封面都没有(非 YouTube URL)→ 不出 <img>,只剩底衬 + 播放按钮。
     盒子尺寸与比例不变(仍由 .spk-x-video-card__poster 的 aspect-ratio 决定),
     播放按钮尺寸也不变(见 .spk-x-video-play svg)。
     双类选择器:同层内提高确定性,避免依赖与基础规则的书写顺序。 */
  .spk-x-video-card__poster.spk-x-video-card__poster--placeholder {
    background: radial-gradient(circle at 50% 46%, rgba(8, 126, 174, .5), transparent 62%), linear-gradient(140deg, #021b3d, #064a7d);
  }
  .spk-x-video-play {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    color: #fff;
    filter: drop-shadow(0 8px 18px rgba(2, 27, 61, .34));
  }
  .spk-x-video-play svg { width: 52px; height: 52px; }
  .spk-x-video-play--disabled {
    padding: 12px;
    background: rgba(2, 27, 61, .58);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
  }
  .spk-x-video-card__body {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 20px;
  }
  .spk-x-video-card__body > span {
    color: #064a7d;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .spk-x-video-card__body h3 {
    margin: 0;
    color: #062b5c;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.22;
    letter-spacing: 0;
  }
  .spk-x-video-card__body dl {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 0;
  }
  .spk-x-video-card__body dt {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .spk-x-video-card__body dd {
    margin: 0;
    color: #6f8191;
    font-size: 11px;
    font-weight: 760;
  }
  .spk-x-video-card__body dd::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 6px 1px 0;
    border: 1px solid #064a7d;
    border-radius: 50%;
  }
  .spk-x-video-card__body p {
    margin: 0;
    color: #51616e;
    font-size: 13px;
    line-height: 1.58;
  }
  .spk-x-video-card__watch {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: max-content;
    margin-top: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #064a7d;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .spk-x-video-card__watch svg { width: 14px; height: 14px; flex: 0 0 auto; }
  .spk-x-video-card__watch:hover { color: var(--spk-x-accent); }
  .spk-x-videos__empty {
    margin: 0;
    padding: 28px;
    border: 1px dashed #dce4e9;
    border-radius: 12px;
    color: #51616e;
    font-size: 14px;
    text-align: center;
  }
}
@layer spk-responsive {
  /* 全局 spk-responsive 在 920/640 改写 .spk-x-section padding 与 .spk-x-wrap 宽度,
     此处按源顺序回写,保持 React 断点 1180/820/520。 */
  @media (max-width: 1180px) {
    .spk-x-videos__wrap { width: calc(100% - 72px); }
    .spk-x-videos__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 920px) {
    .spk-x-videos { padding: clamp(58px, 7vw, 92px) 0 0; }
  }
  @media (max-width: 820px) {
    .spk-x-videos__wrap { width: calc(100% - 34px); }
  }
  @media (max-width: 520px) {
    .spk-x-videos { padding: 54px 0 0; }
    .spk-x-videos__head h2 {
      max-width: 330px;
      font-size: clamp(26px, 7.4vw, 32px);
      overflow-wrap: anywhere;
    }
    .spk-x-videos__head .spk-x-section-lead p { max-width: 330px; }
    .spk-x-videos__grid { grid-template-columns: 1fr; }
    .spk-x-video-card__body { padding: 18px; }
    .spk-x-video-card__body dd { max-width: 100%; overflow-wrap: anywhere; }
  }
}