/* React 基准:styles.css .video-library / .video-group-stack / .video-group-head(3825-3992)
   与 .video-modal*(4033-4091)。卡片/网格类锚定在 video-featured,此处只锚定
   分组与弹层类;.spk-x-videos--library 用双类提高确定性(不依赖块文件加载顺序)。 */
@layer spk-block {
  .spk-x-videos.spk-x-videos--library { padding: 50px 0 clamp(58px, 7vw, 92px); }
  .spk-x-video-groups { display: grid; gap: 42px; }
  .spk-x-video-group { scroll-margin-top: calc(var(--spk-header-height, 72px) + 76px); }

  .spk-x-video-group header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 26px;
    margin-bottom: 20px;
  }
  .spk-x-video-group header h3 {
    margin: 0 0 5px;
    color: #062b5c;
    font-size: 22px;
    line-height: 1.18;
    letter-spacing: 0;
  }
  .spk-x-video-group header p {
    max-width: 620px;
    margin: 0;
    color: #51616e;
    font-size: 13px;
    line-height: 1.55;
  }
  .spk-x-video-group header button {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: max-content;
    padding: 0;
    border: 0;
    background: transparent;
    color: #064a7d;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  /* view.js 用 textContent 重写按钮文案,内联 svg 会被清掉 → 箭头用 mask 伪元素。 */
  .spk-x-video-group header button::after {
    content: "";
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .spk-x-video-group header button:hover { color: var(--spk-x-accent); }
  .spk-x-video-slide { display: grid; min-width: 0; }
  .spk-x-video-slide--hidden { display: none; }
  .spk-x-video-group.spk-x-open .spk-x-video-slide--hidden { display: grid; }

  /* 弹层(标记来自 inc/video.php,单列:上播放器/下文案 = React .video-modal) */
  .spk-x-video-library-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    padding: 26px;
    background: rgba(2, 27, 61, .72);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
  }
  .spk-x-video-library-modal.spk-x-open { opacity: 1; visibility: visible; }
  .spk-x-video-library-modal__panel {
    position: relative;
    width: min(1040px, 100%);
    max-height: min(90vh, 860px);
    overflow: auto;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 28px 90px rgba(2, 27, 61, .34);
  }
  .spk-x-video-library-modal__player {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #021b3d;
  }
  .spk-x-video-library-modal__player iframe,
  .spk-x-video-library-modal__player video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }
  .spk-x-video-library-modal__copy { display: grid; gap: 12px; padding: 28px; }
  .spk-x-video-library-modal__copy > span {
    color: #064a7d;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .spk-x-video-library-modal__copy h2 {
    margin: 0;
    color: #062b5c;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.12;
    letter-spacing: 0;
  }
  .spk-x-video-library-modal__copy p {
    max-width: 720px;
    margin: 0;
    color: #51616e;
    font-size: 14px;
    line-height: 1.6;
  }
  .spk-x-video-library-modal__copy ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .spk-x-video-library-modal__copy li {
    margin: 0;
    color: #6f8191;
    font-size: 11px;
    font-weight: 760;
  }
  .spk-x-video-library-modal__copy li::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 6px 1px 0;
    border: 1px solid #064a7d;
    border-radius: 50%;
  }
  .spk-x-video-library-modal__cta {
    cursor: pointer;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
    border: 0;
    border-radius: 10px;
    padding: 15px 22px;
    background: var(--spk-x-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: transform .18s ease, background .18s ease;
  }
  .spk-x-video-library-modal__cta:hover { transform: translateY(-2px); background: #ff902d; }
  .spk-x-video-library-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(2, 27, 61, .55);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .spk-x-video-library-modal__close:hover { background: rgba(2, 27, 61, .78); }
}
@layer spk-responsive {

  /* 全局 spk-responsive 在 920/640 改写 .spk-x-section padding,双类回写。
     --library 是 /videos/ 最后一个区块:底部保留 section 节奏的 padding,
     与 footer 上方的 cta-plan 带之间留出间距。 */
  @media (max-width: 920px) {
    .spk-x-videos.spk-x-videos--library { padding: 50px 0 clamp(58px, 7vw, 92px); }
  }
  @media (max-width: 520px) {
    .spk-x-videos.spk-x-videos--library { padding: 54px 0 64px; }
    .spk-x-video-group header {
      display: grid;
      align-items: start;
      gap: 12px;
    }
    .spk-x-video-library-modal { padding: 16px; }
    .spk-x-video-library-modal__copy { padding: 22px; }
  }
}