/* VSH Network v37.8 — hard layout contract + YouTube-like video UX */
:root{--vsh-left-layer:286px;--vsh-right-layer:360px;--vsh-layer-gap:24px;--vsh-page-max:1700px}
html,body{width:100%;max-width:100%;overflow-x:hidden}
.vsh-shell,.vsh-profile-shell{box-sizing:border-box}
.vsh-shell>*,.vsh-profile-shell>*,.vsh-center>*,.vsh-right>*,.vsh-left>*{min-width:0;max-width:100%}

/* --- strict 3-layer desktop shell: rails cannot overlap center --- */
@media(min-width:1180px){
  body:not(.vsh-view-videos):not(.vsh-view-video):not(.vsh-view-research):not(.vsh-view-work):not(.vsh-view-jobs):not(.vsh-view-job) .vsh-shell:not(.vsh-shell-no-right){
    display:grid!important;
    grid-template-columns:minmax(250px,var(--vsh-left-layer)) minmax(0,1fr) minmax(320px,var(--vsh-right-layer))!important;
    grid-template-areas:"left center right"!important;
    gap:var(--vsh-layer-gap)!important;
    width:min(var(--vsh-page-max),calc(100vw - 48px))!important;
    max-width:var(--vsh-page-max)!important;
    margin:0 auto!important;
    padding:20px 0 36px!important;
    align-items:start!important;
    overflow:visible!important;
  }
  body:not(.vsh-view-videos):not(.vsh-view-video):not(.vsh-view-research):not(.vsh-view-work):not(.vsh-view-jobs):not(.vsh-view-job) .vsh-shell:not(.vsh-shell-no-right)>.vsh-left{
    grid-area:left!important;position:sticky!important;top:92px!important;width:100%!important;max-height:calc(100vh - 108px)!important;overflow:auto!important;z-index:10!important;align-self:start!important
  }
  body:not(.vsh-view-videos):not(.vsh-view-video):not(.vsh-view-research):not(.vsh-view-work):not(.vsh-view-jobs):not(.vsh-view-job) .vsh-shell:not(.vsh-shell-no-right)>.vsh-center{
    grid-area:center!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;overflow:visible!important;z-index:1!important
  }
  body:not(.vsh-view-videos):not(.vsh-view-video):not(.vsh-view-research):not(.vsh-view-work):not(.vsh-view-jobs):not(.vsh-view-job) .vsh-shell:not(.vsh-shell-no-right)>.vsh-right{
    grid-area:right!important;position:sticky!important;top:92px!important;width:100%!important;max-height:calc(100vh - 108px)!important;overflow:auto!important;z-index:9!important;align-self:start!important
  }
  .vsh-three-layer-shell>.vsh-center{contain:layout style!important}
}

/* Prevent cards/search/content from stretching their grid track. */
.vsh-topbar{width:100%;max-width:100%}.vsh-top-search{min-width:0!important}.vsh-top-search input{min-width:0!important;width:100%!important}
.vsh-post-card,.vsh-page-heading,.vsh-widget,.vsh-side-card,.vsh-video-card,.vsh-video-detail-card,.vsh37-work-card,.vsh37-research-page{min-width:0!important;max-width:100%!important}
.vsh-post-body,.vsh-post-author,.vsh-post-body h2,.vsh-post-body p{min-width:0;overflow-wrap:anywhere}

/* Rendering optimization for long feeds; browser skips offscreen card layout/paint. */
@supports (content-visibility:auto){
  .vsh-feed>.vsh-post-card,.vsh-video-grid>.vsh-video-card{content-visibility:auto;contain-intrinsic-size:420px}
}
.vsh-post-card img,.vsh-video-card img{content-visibility:auto}

/* --- Videos index: YouTube-inspired browsing --- */
.vsh-videos-page{width:100%!important;max-width:none!important}
.vsh-video-hero{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:24px!important;margin:0 0 12px!important;padding:4px 2px 10px!important;background:transparent!important;border:0!important;box-shadow:none!important}
.vsh-video-hero h1{font-size:clamp(30px,3vw,44px)!important;letter-spacing:-.04em;margin:4px 0 5px!important}
.vsh-video-hero p{max-width:760px;margin:0!important}
.vsh-video-filter-wrap{position:relative;margin:0 0 18px;min-width:0}
.vsh-video-language-filter{display:flex!important;gap:8px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:4px 2px 8px!important;scrollbar-width:none!important;white-space:nowrap!important;max-width:100%!important}
.vsh-video-language-filter::-webkit-scrollbar{display:none}
.vsh-video-language-filter a{display:inline-flex!important;flex:0 0 auto!important;align-items:center!important;min-height:38px!important;padding:0 14px!important;border-radius:10px!important;background:#eef2f7!important;border:0!important;font-size:13px!important;font-weight:850!important;color:#263449!important}
.vsh-video-language-filter a.active{background:#111827!important;color:#fff!important}
.vsh-video-language-mobile{display:none}
.vsh-video-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px 18px!important;width:100%!important}
.vsh-video-card{display:block!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
.vsh-video-card-thumb{display:block!important;position:relative!important;aspect-ratio:16/9!important;border-radius:14px!important;overflow:hidden!important;background:#111827!important}
.vsh-video-card-thumb img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;transition:transform .22s ease!important}
.vsh-video-card:hover .vsh-video-card-thumb img{transform:scale(1.025)}
.vsh-video-card-thumb>i{position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;color:#fff!important;opacity:0!important;background:rgba(0,0,0,.08)!important;transition:.18s!important}
.vsh-video-card:hover .vsh-video-card-thumb>i{opacity:1!important}
.vsh-video-card-thumb>i .vsh-ico{width:42px!important;height:42px!important;filter:drop-shadow(0 5px 14px rgba(0,0,0,.35))}
.vsh-video-card>div{padding:10px 2px 0!important}.vsh-video-card h2{font-size:16px!important;line-height:1.34!important;margin:0 0 5px!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}
.vsh-video-card p{display:none!important}.vsh-video-card small{font-size:12.5px!important;color:#657389!important;line-height:1.4!important}

/* --- Watch page: YouTube-like player + related rail inside content --- */
.vsh-video-detail{width:100%!important;max-width:none!important}
.vsh-video-watch-layout{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(300px,390px)!important;gap:24px!important;align-items:start!important;width:100%!important}
.vsh-video-watch-main{min-width:0!important}
.vsh-video-detail-card{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
.vsh-video-detail-card>h1{font-size:clamp(23px,2.1vw,32px)!important;line-height:1.25!important;margin:14px 0 12px!important;letter-spacing:-.025em!important}
.vsh-video-post-body.detail{display:flex!important;flex-direction:column!important}.vsh-video-post-body.detail>.vsh-video-player{order:-1!important}
.vsh-video-post-body.detail>p{margin:12px 0 0!important}
.vsh-video-player{width:100%!important;aspect-ratio:16/9!important;border-radius:14px!important;overflow:hidden!important;background:#05070b!important;box-shadow:0 12px 36px rgba(0,0,0,.12)!important}
.vsh-video-player iframe,.vsh-video-player img{width:100%!important;height:100%!important;display:block!important;border:0!important;object-fit:cover!important}
.vsh-video-meta{margin-top:10px!important;display:flex!important;gap:8px 14px!important;align-items:center!important;flex-wrap:wrap!important;color:#69778c!important;font-size:12.5px!important}
.vsh-video-owner-row{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:14px!important;margin:14px 0 8px!important}.vsh-video-owner{display:flex!important;align-items:center!important;gap:10px!important;min-width:0!important}.vsh-video-owner img{width:42px!important;height:42px!important;border-radius:50%!important;object-fit:cover!important}.vsh-video-owner span{min-width:0!important}.vsh-video-owner b,.vsh-video-owner small{display:block!important}.vsh-video-owner small,.vsh-video-owner-row time{font-size:12px!important;color:#738197!important}
.vsh-video-detail-actions{margin:10px 0 0!important;max-width:520px!important}.vsh-video-description{margin-top:14px!important;padding:14px 16px!important;border-radius:12px!important;background:#f0f3f7!important}.vsh-video-description p{margin:0!important;line-height:1.55!important}
.vsh-video-related-rail{min-width:0!important}.vsh-video-related-title{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin:0 0 12px!important}.vsh-video-related-title h2{font-size:20px!important;margin:0!important}.vsh-video-related-title a{font-size:12px!important;color:#0b57d0!important;font-weight:900!important}.vsh-video-related-list{display:flex!important;flex-direction:column!important;gap:12px!important}.vsh-video-related-item{display:grid!important;grid-template-columns:168px minmax(0,1fr)!important;gap:10px!important;min-width:0!important}.vsh-video-related-thumb{position:relative!important;display:block!important;aspect-ratio:16/9!important;border-radius:10px!important;overflow:hidden!important;background:#111827!important}.vsh-video-related-thumb img{width:100%!important;height:100%!important;object-fit:cover!important}.vsh-video-related-thumb i{position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;color:#fff!important;opacity:0!important;background:rgba(0,0,0,.12)!important}.vsh-video-related-item:hover .vsh-video-related-thumb i{opacity:1!important}.vsh-video-related-item h3{font-size:14px!important;line-height:1.3!important;margin:1px 0 5px!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important}.vsh-video-related-item small{display:block!important;color:#748196!important;font-size:11.5px!important;line-height:1.35!important;margin-top:2px!important}

/* two-column special pages fill all available content width */
@media(min-width:1180px){
  body.vsh-view-videos .vsh-shell-no-right,body.vsh-view-video .vsh-shell-no-right,body.vsh-view-research .vsh-shell-no-right,body.vsh-view-work .vsh-shell-no-right,body.vsh-view-jobs .vsh-shell-no-right,body.vsh-view-job .vsh-shell-no-right{grid-template-columns:minmax(250px,286px) minmax(0,1fr)!important;width:min(1660px,calc(100vw - 48px))!important;max-width:1660px!important;gap:28px!important}
  body.vsh-view-videos .vsh-shell-no-right>.vsh-center,body.vsh-view-video .vsh-shell-no-right>.vsh-center,body.vsh-view-research .vsh-shell-no-right>.vsh-center,body.vsh-view-work .vsh-shell-no-right>.vsh-center,body.vsh-view-jobs .vsh-shell-no-right>.vsh-center,body.vsh-view-job .vsh-shell-no-right>.vsh-center{width:100%!important;max-width:none!important}
}

@media(max-width:1380px) and (min-width:1180px){
  :root{--vsh-left-layer:252px;--vsh-right-layer:320px;--vsh-layer-gap:18px}
  .vsh-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vsh-video-watch-layout{grid-template-columns:minmax(0,1fr) 330px!important;gap:18px!important}.vsh-video-related-item{grid-template-columns:145px minmax(0,1fr)!important}
}

@media(max-width:1179px){
  .vsh-video-language-filter{display:none!important}.vsh-video-language-mobile{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;gap:10px!important;margin:0!important;padding:0!important}.vsh-video-language-mobile span{font-size:13px!important;font-weight:900!important;color:#475569!important}.vsh-video-language-mobile select{width:100%!important;min-width:0!important;height:44px!important;border:1px solid #dce5ef!important;border-radius:12px!important;background:#fff!important;padding:0 38px 0 12px!important;color:#172033!important;font-weight:800!important;outline:none!important}
  .vsh-video-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 14px!important}
  .vsh-video-watch-layout{display:block!important}.vsh-video-related-rail{margin-top:24px!important}.vsh-video-related-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}.vsh-video-related-item{display:block!important}.vsh-video-related-item>div{padding-top:7px!important}.vsh-video-related-thumb{width:100%!important}.vsh-video-related-item h3{font-size:14px!important}
}
@media(max-width:720px){
  .vsh-video-hero{display:block!important;padding-top:0!important}.vsh-video-hero h1{font-size:30px!important}.vsh-video-hero .vsh-blue-btn{width:100%!important;margin-top:12px!important;justify-content:center!important}
  .vsh-video-grid{grid-template-columns:1fr!important;gap:22px!important}.vsh-video-card-thumb{border-radius:12px!important}.vsh-video-card h2{font-size:15.5px!important}
  .vsh-video-player{border-radius:10px!important}.vsh-video-detail-card>h1{font-size:21px!important}.vsh-video-owner-row{align-items:flex-start!important}.vsh-video-owner-row time{display:none!important}.vsh-video-related-list{grid-template-columns:1fr!important}.vsh-video-related-item{display:grid!important;grid-template-columns:148px minmax(0,1fr)!important;gap:10px!important}.vsh-video-description{border-radius:10px!important}
}
@media(max-width:430px){.vsh-video-related-item{grid-template-columns:128px minmax(0,1fr)!important}.vsh-video-related-item h3{font-size:13.5px!important}.vsh-video-language-mobile{grid-template-columns:1fr!important}.vsh-video-language-mobile span{display:none!important}}
