/* ==========================================================================
   视频 video / mode_23
   作用域类: .deco-module-video (.ly_video_23)
   模块级 CSS 变量由模板 <style th:inline="text"> 注入(--vd-* 前缀)
   每个 Video 子项变量由 .vd-item[data-index] 内联 <style> 注入(--vd-item-* 前缀)
   ========================================================================== */

.deco-module-video { background-repeat: no-repeat; background-size: cover; background-position: center center; position: relative; overflow: hidden; }
.deco-module-video a { text-decoration: none; }
/* 背景蒙层: 用真实元素 .vd-overlay 而不是根元素的 ::before —— 那个伪元素被编辑态描边覆盖层
   (editor.css .deco-edit-mode .deco-module::before)占用了。模板把它放在第一个子节点, 绘制顺序不变 */
.deco-module-video > .vd-overlay { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--vd-overlay-color, transparent); pointer-events: none; }
.deco-module-video .vd-container { margin: 0 auto; box-sizing: border-box; }
.deco-module-video .vd-container.module_width_1440 { width: 1440px; max-width: 100%; }
.deco-module-video .vd-container.module_width_full { width: 100%; }
.deco-module-video .vd-container.module_width_global { width: var(--deco-module-width, 1440px); max-width: 100%; }
.deco-module-video .vd-section { box-sizing: border-box; }

/* flex 布局: 视频按钮 + 特性列表 */
.deco-module-video .vd-flex-box { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; position: relative; z-index: 2; }

/* 视频按钮 */
.deco-module-video .vd-video-btn { display: inline-flex; align-items: center; padding: 7px 23px 7px 8px; border-radius: 35px; border: 1px solid var(--vd-btn-border-color, #ffffff); background-color: var(--vd-btn-bg-color, #ffffff); cursor: pointer; transition: all 0.2s; }
.deco-module-video .vd-video-btn .vd-btn-icon { display: inline-block; vertical-align: middle; width: 45px; height: 45px; position: relative; border-radius: 100%; background-color: var(--vd-icon-bg-color, #71422D); transform: rotate(-90deg); flex-shrink: 0; }
.deco-module-video .vd-video-btn .vd-btn-icon::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 8px 0 8px 12px; border-color: transparent transparent transparent var(--vd-icon-color, #ffffff); }
.deco-module-video .vd-video-btn .vd-btn-text { margin-left: 11px; display: inline-block; vertical-align: middle; font-size: var(--vd-pc-btn-font-size, 18px); color: var(--vd-btn-text-color, #060606); }
.deco-module-video .vd-video-btn:hover { background-color: var(--vd-btn-bg-hover, #060606); border-color: var(--vd-btn-border-hover, #060606); }
.deco-module-video .vd-video-btn:hover .vd-btn-text { color: var(--vd-btn-text-hover, #ffffff); }
.deco-module-video .vd-video-btn:hover .vd-btn-icon { background-color: var(--vd-icon-bg-hover-color, #ffffff); }
.deco-module-video .vd-video-btn:hover .vd-btn-icon::before { border-left-color: var(--vd-icon-hover-color, #71422D); }

/* 特性列表 */
.deco-module-video .vd-list { width: 410px; max-width: 100%; }
.deco-module-video .vd-item { margin-top: 20px; width: 100%; box-sizing: border-box; border-radius: 20px; padding: 20px; background-color: var(--vd-item-card-bg, rgba(32, 11, 1, 0.6)); }
.deco-module-video .vd-item:first-child { margin-top: 0; }
.deco-module-video .vd-item .vd-icon { margin-left: auto; width: 40px; height: 40px; border-radius: 100%; overflow: hidden; position: relative; background-color: var(--vd-item-icon-bg, #71422D); }
.deco-module-video .vd-item .vd-icon img { width: 24px; height: 24px; object-fit: contain; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.deco-module-video .vd-item.img_fit_cover .vd-icon img { object-fit: cover; }
.deco-module-video .vd-item .vd-info { margin-top: 33px; width: 92%; }
.deco-module-video .vd-item .vd-item-title { font-size: var(--vd-item-pc-title-font-size, 24px); color: var(--vd-item-title-color, #ffffff); line-height: 1.3335; }
.deco-module-video .vd-item .vd-item-subtitle { margin-top: 5px; font-size: var(--vd-item-pc-subtitle-font-size, 14px); color: var(--vd-item-subtitle-color, #ffffff); line-height: 1.715; }

/* PC 端间距 (1001px+) */
@media screen and (min-width: 1001px) {
    .deco-module-video { padding-top: var(--vd-pc-padding-top, 120px); padding-bottom: var(--vd-pc-padding-bottom, 146px); }
    .deco-module-video .vd-section { padding-left: var(--vd-pc-padding-left, 0%); padding-right: var(--vd-pc-padding-right, 0%); }
}
/* 1480px 以下: module_width_1440/global 靠 max-width:100% 自适应缩放,不再硬设 96% */

/* 移动端 (1000px-) */
@media screen and (max-width: 1000px) {
    .deco-module-video { padding-top: var(--vd-mobile-padding-top, 60px); padding-bottom: var(--vd-mobile-padding-bottom, 70px); }
    .deco-module-video .vd-section { padding-left: var(--vd-mobile-padding-left, 3%); padding-right: var(--vd-mobile-padding-right, 3%); }
    .deco-module-video .vd-flex-box { justify-content: center; }
    .deco-module-video .vd-video-btn { margin-top: 30px; order: 2; }
    .deco-module-video .vd-video-btn .vd-btn-text { font-size: var(--vd-mobile-btn-font-size, 16px); }
    .deco-module-video .vd-list { width: 100%; }
    .deco-module-video .vd-item { margin-top: 15px; }
    .deco-module-video .vd-item .vd-info { margin-top: 20px; }
    .deco-module-video .vd-item .vd-item-title { font-size: var(--vd-item-mobile-title-font-size, 16px); }
    .deco-module-video .vd-item .vd-item-subtitle { font-size: var(--vd-item-mobile-subtitle-font-size, 14px); }
}

/* 视频弹窗(video_con)样式由 video.js 注入到挂载文档(top 或 iframe), 此处不重复定义 */