/* ------------------------------------------------------------------
   video-strip.css
   首页「拍賣現場 · 藏品徵集」四宫格竖屏视频带
   —— 取代原来的「現即購買」大 banner。
   4 列 9:16 视频，桌面平铺、平板 2×2、手机 2 列；
   不自动播放：默认停在首帧，点画面 / 右下角常显按钮手动播放。
   ------------------------------------------------------------------ */

.chr-video-strip__head { margin: 0 0 26px; }
.chr-video-strip__title { margin: 0 0 10px; }
.chr-video-strip__desc { margin: 0; color: #58595b; }

.chr-video-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.chr-video-card {
    position: relative;
    margin: 0;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #f2f1ee;
}

.chr-video-card video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #f2f1ee;
}

/* 右下角播放 / 暂停按钮（常显：视频不自动播放，按钮是唯一入口） */
.chr-video-card__toggle {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .42);
    color: #fff;
    cursor: pointer;
    opacity: 1;
    transition: background .2s ease;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.chr-video-card__toggle:hover { background: rgba(0, 0, 0, .66); }

.chr-video-card__toggle svg {
    width: 13px;
    height: 13px;
    display: block;
    fill: currentColor;
}

@media (max-width: 900px) {
    .chr-video-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .chr-video-strip__head { margin-bottom: 18px; }
    .chr-video-card__toggle { right: 9px; bottom: 9px; width: 30px; height: 30px; }
}