/* 青龙防水 · 视频中心列表页样式 */

.vd{background:var(--bg-alt);padding:54px 0 92px}
.vd-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.vd-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 26px}

.vd-card{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:0;border:0;border-radius:6px;overflow:hidden;background:#fff;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:background-color .4s,box-shadow .4s}
.vd-card:hover{background:var(--brand);box-shadow:0 10px 26px rgba(0,64,152,.2)}
.vd-card:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

.vd-pic{position:relative;width:100%;padding-top:67.5%;overflow:hidden;background:#d7d7d7}
.vd-pic img{position:absolute;left:0;top:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.vd-card:hover .vd-pic img{transform:scale(1.04)}

.vd-body{flex:1 1 auto;display:flex;flex-direction:column;width:100%;min-height:168px;padding:33px 42px 0}

.vd-tit{margin:0;font-size:22px;line-height:1.42;font-weight:600;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .3s}

.vd-foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding:10px 0 22px}
.vd-foot::before{content:"";position:absolute;left:0;top:0;width:100%;border-top:1px solid #eaeaea;transition:border-color .3s}
.vd-date{font-size:14px;color:#666;letter-spacing:.01em;font-variant-numeric:tabular-nums;transition:color .3s}
.vd-btn{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:#666;transition:color .3s}
.vd-btn::after{content:"";width:0;height:0;border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent}

.vd-card:hover .vd-tit,
.vd-card:hover .vd-date,
.vd-card:hover .vd-btn{color:#fff}
.vd-card:hover .vd-foot::before{border-top-color:rgba(255,255,255,.34)}

.vd-empty{display:none;padding:70px 0;text-align:center;font-size:15.5px;color:var(--gray)}
.vd-grid.is-empty{display:none}
.vd-grid.is-empty+.vd-empty{display:block}

.vd-modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:26px;background:rgba(6,18,36,.88)}
.vd-modal.on{display:flex}
.vd-modal-box{position:relative;width:min(960px,92vw);border-radius:8px;overflow:hidden;background:#000;box-shadow:0 22px 60px rgba(0,0,0,.45)}
.vd-modal-box video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.vd-modal-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 18px;background:#fff}
.vd-modal-t{min-width:0;font-size:15.5px;line-height:1.5;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vd-modal-x{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:var(--bg-alt);cursor:pointer;transition:background .2s}
.vd-modal-x:hover{background:var(--line)}
.vd-modal-x img{width:16px;height:16px;filter:brightness(.45)}

@media (max-width:1024px){
  .vd{padding:44px 0 76px}
  .vd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px}
  .vd-body{min-height:140px;padding:26px 28px 0}
  .vd-tit{font-size:20px}
}
@media (max-width:768px){
  .vd{padding:32px 0 58px}
  .vd-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .vd-pic{padding-top:56.25%}
  .vd-body{min-height:0;padding:20px 22px 0}
  .vd-tit{font-size:18px}
  .vd-foot{padding:9px 0 18px}
  .vd-modal{padding:16px}
  .vd-modal-box{width:100%}
}

section.cats ul{gap:0 72px}
@media (max-width:1500px){section.cats ul{gap:0 60px}}
@media (max-width:1200px){section.cats ul{gap:0 46px}}
@media (max-width:900px){section.cats ul{gap:0 28px}}