/* JL Videos v2.0 */
.jl-videos-grid { max-width: 1200px; margin: 0 auto; padding: 40px clamp(16px,4vw,40px); }
.jl-video-card { background: white; border-radius: 24px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.06); transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.jl-video-card:hover { transform: translateY(-6px); }
.jl-video-thumb { position: relative; height: 200px; overflow: hidden; background: linear-gradient(135deg, #4A90D9, #2d6ab5); display: flex; align-items: center; justify-content: center; }
.jl-video-thumb .emoji { font-size: 56px; }
.jl-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jl-video-thumb .play-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
.jl-video-card:hover .play-overlay { opacity: 1; }
.jl-video-thumb .play-circle { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.95); display: flex; align-items: center; justify-content: center; font-size: 22px; color: #F5A623; }
.jl-video-body { padding: 20px; }
.jl-video-body h3 { font-family: 'Fredoka', sans-serif; font-size: 17px; margin: 0 0 6px; color: #2C3E50; }
.jl-video-body .duration { font-size: 12px; color: #999; display: inline-flex; align-items: center; gap: 4px; }
.jl-video-embed { border-radius: 16px; overflow: hidden; margin: 24px 0; }
.jl-video-embed iframe { width: 100%; aspect-ratio: 16/9; border: none; border-radius: 16px; }