/* Product video cards and responsive watch pages. */
.sb-video-page { color:#25324a; background:#f6f8fc; padding-top:100px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
.sb-video-shell { width:calc(100% - 48px); max-width:1200px; margin:0 auto; }
.sb-video-intro { padding:28px 0 48px; background:linear-gradient(125deg,#edf3ff,#f8faff 70%); border-bottom:1px solid #e2e9f4; }
.sb-video-breadcrumb { display:flex; gap:12px; align-items:center; color:#68778d; font-size:14px; margin-bottom:28px; }
.sb-video-breadcrumb a,.sb-video-text-link,.sb-video-back,.sb-watch-notes p>a { color:#315ece; }
.sb-video-kicker,.sb-video-label { color:#315ece; font-size:14px; font-weight:700; margin:0 0 12px; }
.sb-video-intro h1 { font-size:40px; line-height:1.3; font-weight:750; margin:0 0 18px; }
.sb-video-lead { max-width:740px; line-height:1.9; font-size:17px; color:#59677c; }
.sb-video-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:24px; }
.sb-video-button { display:inline-flex; align-items:center; justify-content:center; padding:12px 20px; border:1px solid #3969da; border-radius:10px; background:#3969da; color:#fff; font-size:15px; line-height:1.5; font-weight:600; text-decoration:none; cursor:pointer; }
.sb-video-button:hover { background:#2855bd; color:#fff; }
.sb-video-button-secondary { background:#fff; color:#315ece; border-color:#ccd9f5; }
.sb-video-button-secondary:hover { background:#edf3ff; color:#244cab; }
.sb-video-list-section { padding-top:36px; padding-bottom:56px; }
.sb-video-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.sb-video-card { display:block; overflow:hidden; background:#fff; border:1px solid #dfe7f2; border-radius:16px; color:#25324a; text-decoration:none; box-shadow:0 7px 22px rgba(41,72,126,.04); transition:box-shadow .2s,border-color .2s; }
.sb-video-card:hover { color:#25324a; border-color:#a4baef; box-shadow:0 10px 26px rgba(41,72,126,.12); text-decoration:none; }
.sb-video-cover { position:relative; aspect-ratio:16/9; background:#ecf1f8; overflow:hidden; }
.sb-video-cover img { display:block; width:100%; height:100%; object-fit:contain; }
.sb-video-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:48px; height:48px; display:grid; place-items:center; padding-left:3px; border-radius:50%; background:rgba(16,34,67,.84); color:#fff; border:1px solid rgba(255,255,255,.6); font-size:19px; }
.sb-video-badge { position:absolute; right:12px; bottom:12px; background:rgba(16,34,67,.85); color:#fff; border-radius:6px; padding:5px 9px; font-size:12px; }
.sb-video-badge:empty { display:none; }
.sb-video-card-body { padding:20px; }
.sb-video-card-body h3 { margin:0 0 10px; font-size:19px; font-weight:700; line-height:1.6; }
.sb-video-card-body p { font-size:14px; line-height:1.8; color:#68778d; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sb-video-meta { display:flex; justify-content:space-between; gap:12px; margin-top:18px; color:#6f7e94; font-size:13px; }
.sb-video-meta span { color:#315ece; font-weight:600; }
.sb-video-pagination ul { display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:30px 0 0; list-style:none; }
.sb-video-pagination a,.sb-video-pagination span { display:block; padding:7px 12px; border-radius:6px; background:#fff; }
.sb-video-watch-page { padding-bottom:52px; }
.sb-video-watch-page .sb-video-breadcrumb { padding-top:24px; }
.sb-video-watch-heading { margin-bottom:26px; }
.sb-video-watch-heading h1 { font-size:32px; font-weight:750; line-height:1.5; margin:0 0 12px; }
.sb-video-published { color:#778599; font-size:13px; }
.sb-watch-layout { display:grid; grid-template-columns:minmax(0,390px) minmax(0,1fr); gap:44px; align-items:start; }
.sb-watch-player { background:#142038; border-radius:18px; overflow:hidden; }
.sb-watch-player video { display:block; width:100%; height:auto; aspect-ratio:9/16; max-height:76vh; object-fit:contain; background:#142038; }
.sb-watch-notes { padding:22px 0; font-size:16px; line-height:1.9; }
.sb-watch-notes h2 { font-size:27px; line-height:1.5; font-weight:700; margin:0 0 16px; }
.sb-watch-notes h3 { font-size:18px; font-weight:700; margin:26px 0 12px; }
.sb-watch-notes ol { padding-left:24px; list-style:decimal; }
.sb-watch-notes li { margin-bottom:8px; }
.sb-watch-notes .sb-video-note { color:#748197; font-size:13px; padding:16px; border-radius:10px; background:#eaf0f8; margin-top:24px; }
.sb-watch-notes .sb-video-actions { margin-bottom:20px; }
.sb-video-cta { display:flex; justify-content:space-between; align-items:center; gap:24px; border:1px solid #dce5f3; border-radius:16px; background:#fff; padding:28px; margin-top:36px; }
.sb-video-cta h2 { font-size:21px; line-height:1.5; margin:0 0 8px; font-weight:700; }
.sb-video-cta p { margin:0; color:#69768b; line-height:1.7; }
.sb-video-cta .sb-video-actions { margin:0; }
.sb-video-back { display:inline-block; margin-top:26px; }
.sb-home-video-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
.sb-home-video-grid .sb-video-card { display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr); align-items:stretch; margin-top:16px; }
.sb-home-video-grid .sb-video-cover { height:100%; min-height:145px; aspect-ratio:auto; }
.sb-home-video-grid .sb-video-cover img { object-fit:cover; }
.sb-home-video-grid .sb-video-card-body { display:flex; flex-direction:column; min-width:0; padding:16px 18px; }
.sb-home-video-grid .sb-video-card-body h3 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:7px; font-size:17px; line-height:1.45; }
.sb-home-video-grid .sb-video-card-body p { font-size:13px; line-height:1.6; }
.sb-home-video-grid .sb-video-meta { margin-top:auto; padding-top:12px; }
.sb-home-video-grid .sb-video-meta time { font-size:12px; }
.sb-video-page:not(.sb-video-watch-page) { padding-top:70px; }
.sb-product-video { padding:50px 0; background:#f4f7fc; }
.sb-product-video-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:36px; align-items:center; }
.sb-product-video h2 { font-size:30px; line-height:1.5; font-weight:750; margin:0 0 16px; }
.sb-product-video p { color:#637189; line-height:1.9; font-size:16px; }
.sb-video-card:focus-visible,.sb-video-button:focus-visible { outline:3px solid #658ce5; outline-offset:4px; }
@media(max-width:960px) { .sb-video-list { grid-template-columns:repeat(2,minmax(0,1fr)); } .sb-watch-layout { grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:28px; } .sb-video-cta { display:block; } .sb-video-cta .sb-video-actions { margin-top:20px; } }
@media(max-width:700px) { .sb-video-page { padding-top:70px; } .sb-video-shell { width:calc(100% - 32px); } .sb-video-intro { padding:18px 0 30px; } .sb-video-intro h1 { font-size:29px; } .sb-video-lead { font-size:15px; } .sb-video-list,.sb-home-video-grid,.sb-product-video-inner,.sb-watch-layout { grid-template-columns:1fr; } .sb-video-watch-heading h1 { font-size:25px; } .sb-watch-layout { gap:10px; } .sb-watch-player { width:100%; max-width:390px; margin:auto; } .sb-watch-player video { max-height:72vh; } .sb-watch-notes h2 { font-size:23px; } .sb-video-cta { padding:22px; } .sb-product-video { padding:34px 0; } .sb-product-video h2 { font-size:25px; } .sb-home-video-grid .sb-video-cover { max-height:none; } }
@media(max-width:1200px) { .sb-video-page:not(.sb-video-watch-page) { padding-top:56px; } }
@media(max-width:420px) { .sb-home-video-grid .sb-video-card { grid-template-columns:minmax(0,36%) minmax(0,1fr); } .sb-home-video-grid .sb-video-cover { min-height:130px; } .sb-home-video-grid .sb-video-card-body { padding:12px; } .sb-home-video-grid .sb-video-card-body h3 { font-size:15px; } .sb-home-video-grid .sb-video-card-body p { -webkit-line-clamp:1; } .sb-home-video-grid .sb-video-meta time { display:none; } }