/* ==================================================
   گالری کارت‌های ویدیو - صفحات لیست
   مسیر: custom-css-all/video-gallery-v1.css
   ================================================== */

.saya-video-gallery{max-width:1200px;margin:0 auto;padding:20px 0}
.saya-video-gallery h2{text-align:center;color:#14213d;font-size:clamp(20px,4.5vw,26px);font-weight:800;margin:0 0 24px}
.svg-intro{text-align:center;color:#555;margin:0 0 30px;font-size:clamp(14px,3vw,16px)}

.svg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;justify-content:center}
.svg-card{background:#fff;border-radius:18px;overflow:hidden;border:1px solid #e9ecef;box-shadow:0 6px 20px rgba(0,0,0,.08);transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.svg-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.12);color:inherit}

.svg-cover{position:relative;overflow:hidden;aspect-ratio:16/9}
.svg-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.svg-card:hover .svg-cover img{transform:scale(1.05)}
.svg-badge{position:absolute;top:14px;left:14px;background:linear-gradient(135deg,#007bff,#0056b3);color:#fff;padding:6px 14px;border-radius:25px;font-size:12px;font-weight:700;box-shadow:0 4px 10px rgba(0,123,255,.35)}
.svg-badge i{margin-left:4px}
.svg-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.2);opacity:0;transition:opacity .3s ease}
.svg-card:hover .svg-play-overlay{opacity:1}
.svg-play-overlay i{color:#fff;font-size:48px;text-shadow:0 4px 12px rgba(0,0,0,.4)}

.svg-body{padding:20px;text-align:center;display:flex;flex-direction:column;flex:1}
.svg-ep{display:inline-block;background:#e8f4fd;color:#007bff;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;margin-bottom:8px}
.svg-title{color:#2c3e50;font-size:clamp(16px,3.5vw,18px);font-weight:800;margin:0 0 10px;line-height:1.4}
.svg-desc{color:#6c757d;font-size:clamp(13px,2.8vw,14px);line-height:1.6;margin:0 0 18px;text-align:justify;flex:1}
.svg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#007bff,#0056b3);color:#fff;padding:12px 22px;border-radius:50px;text-decoration:none;font-weight:700;font-size:14px;box-shadow:0 5px 14px rgba(0,123,255,.3);transition:transform .2s ease}
.svg-btn:hover{transform:scale(1.05);color:#fff}
.svg-btn i{font-size:13px}

/* رنگ‌های مختلف برای هر دسته */
.svg-card--washing .svg-badge,.svg-card--washing .svg-btn{background:linear-gradient(135deg,#007bff,#0056b3)}
.svg-card--washing .svg-ep{background:#e8f4fd;color:#007bff}

.svg-card--dish .svg-badge,.svg-card--dish .svg-btn{background:linear-gradient(135deg,#28a745,#20c997)}
.svg-card--dish .svg-ep{background:#e8f5e9;color:#2e7d32}

.svg-card--side .svg-badge,.svg-card--side .svg-btn{background:linear-gradient(135deg,#9c27b0,#6a1b9a)}
.svg-card--side .svg-ep{background:#f3e5f5;color:#6a1b9a}

.svg-card--ref .svg-badge,.svg-card--ref .svg-btn{background:linear-gradient(135deg,#ff9800,#e65100)}
.svg-card--ref .svg-ep{background:#fff3e0;color:#e65100}

/* CTA پایین */
.svg-cta{margin-top:40px;background:linear-gradient(135deg,#1a1a1a,#2d2d2d);color:#fff;border-radius:16px;padding:24px;text-align:center}
.svg-cta h3{color:#ffd700;margin:0 0 10px;font-size:clamp(18px,4vw,22px)}
.svg-cta h3 i{margin-left:8px}
.svg-cta p{color:#e0e0e0;margin:0 0 16px}
.svg-cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.svg-cta-btns a{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:30px;text-decoration:none;font-weight:700;color:#fff}
.svg-cta-call{background:linear-gradient(45deg,#4CAF50,#2e7d32)}
.svg-cta-wa{background:linear-gradient(45deg,#25D366,#128C7E)}

@media (max-width:576px){
  .svg-grid{grid-template-columns:1fr}
  .svg-body{padding:16px}
}