
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.video-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: all 0.3s; cursor: pointer; }
.video-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,0.1); border-color: var(--pink); }
.video-thumb { aspect-ratio: 16/9; position: relative; display: flex; align-items: center; justify-content: center; }
.video-play { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,0.95); display: flex; align-items: center; justify-content: center; transition: transform 0.3s; z-index: 3; }
.video-card:hover .video-play { transform: scale(1.15); }
.video-play::after { content: ''; width: 0; height: 0; border-left: 16px solid var(--pink); border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: 4px; }
.video-label { position: absolute; top: 12px; left: 12px; background: rgba(230,0,126,0.95); color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; z-index: 3; }
.video-body { padding: 20px; }
.video-title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; margin-bottom: 6px; }
.video-meta { font-size: 13px; color: var(--muted); }
.vmodal { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 20px; }
.vmodal.active { display: flex; }
.vmodal-content { width: 100%; max-width: 1000px; }
.vmodal-frame { aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; }
.vmodal-frame iframe, .vmodal-frame video { width: 100%; height: 100%; border: 0; }
.vmodal-cap { color: #fff; font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 800; margin-top: 14px; text-align: center; }
.vmodal-close { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.15); color: #fff; border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; cursor: pointer; }
.vmodal-close:hover { background: var(--pink); }

.video-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#111; }
