/* Veles Grid — CSS */

.vg-wrap { position: relative; overflow: hidden; }
.vg-loading { padding: 40px; text-align: center; font-size: 12px; color: #727476; font-family: 'Poppins', sans-serif; }

/* Header */
.vg-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-top: 1px solid #3e4042; border-bottom: 1px solid #3e4042; }
.vg-header-name { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; color: #eef0f2; font-family: 'Poppins', sans-serif; text-transform: uppercase; flex: 1; }
.vg-header-count { font-size: 10px; letter-spacing: 0.1em; color: #727476; font-family: 'Poppins', sans-serif; flex-shrink: 0; }

/* Grid */
.vg-grid {
    display: grid;
    grid-template-columns: repeat(var(--vg-cols, 3), 1fr);
    border-top: 1px solid #3e4042;
}
.vg-grid .vg-card { border-right: 1px solid #3e4042; border-bottom: 1px solid #3e4042; }
.vg-grid .vg-card:nth-child(var(--vg-cols, 3)n) { border-right: none; }

/* Slider */
.vg-track-wrap { overflow: hidden; border-top: 1px solid #3e4042; }
.vg-track { display: flex; transition: transform .4s ease; will-change: transform; }
.vg-track .vg-card { flex: 0 0 calc(100% / var(--vg-slides, 3)); min-width: 0; border-right: 1px solid #3e4042; box-sizing: border-box; }
.vg-track .vg-card:last-child { border-right: none; }

/* Card */
.vg-card { cursor: pointer; }
.vg-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #111; cursor: pointer; display: block; }
.vg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.vg-card:hover .vg-thumb img { transform: scale(1.04); }
.vg-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0); transition: background .3s; }
.vg-card:hover .vg-play { background: rgba(0,0,0,0.4); }
.vg-play svg { opacity: 0; transition: opacity .3s; }
.vg-card:hover .vg-play svg { opacity: 1; }

/* Info */
.vg-info { padding: 14px 16px; border-top: 1px solid #3e4042; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vg-title { font-size: 12px; color: #a8aaac; font-family: 'Poppins', sans-serif; font-weight: 300; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.vg-year { font-size: 11px; color: #727476; font-family: 'Poppins', sans-serif; letter-spacing: 0.06em; flex-shrink: 0; }

/* Nav */
.vg-nav { display: flex; justify-content: flex-end; border-top: 1px solid #3e4042; border-bottom: 1px solid #3e4042; }
.vg-nav-btn { background: none; border: none; border-left: 1px solid #3e4042; color: #727476; font-size: 18px; padding: 14px 28px; cursor: pointer; font-family: 'Poppins', sans-serif; transition: color .2s, background .2s; line-height: 1; }
.vg-nav-btn:hover { color: #eef0f2; }
.vg-nav-btn:disabled { color: #3e4042; cursor: default; background: none !important; }

/* Lightbox */
.vg-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 99999; align-items: center; justify-content: center; }
.vg-overlay.active { display: flex; }
.vg-lb-box { position: relative; width: 90vw; max-width: 1100px; }
.vg-lb-close { position: absolute; top: -44px; right: 0; background: none; border: none; color: #a8aaac; font-size: 20px; cursor: pointer; transition: color .2s; padding: 4px 10px; line-height: 1; }
.vg-lb-close:hover { color: #eef0f2; }
.vg-lb-video { position: relative; padding-bottom: 56.25%; height: 0; }
.vg-lb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* Responsive */
@media (max-width: 1024px) {
    .vg-grid { grid-template-columns: repeat(var(--vg-cols-tab, 2), 1fr); }
    .vg-grid .vg-card:nth-child(var(--vg-cols, 3)n) { border-right: 1px solid #3e4042; }
    .vg-grid .vg-card:nth-child(var(--vg-cols-tab, 2)n) { border-right: none; }
}

@media (max-width: 767px) {
    .vg-grid { grid-template-columns: repeat(var(--vg-cols-mob, 1), 1fr); }
    .vg-grid .vg-card:nth-child(var(--vg-cols-tab, 2)n) { border-right: 1px solid #3e4042; }
    .vg-grid .vg-card:nth-child(var(--vg-cols-mob, 1)n) { border-right: none; }
    .vg-nav-btn { padding: 14px 20px; }
    .vg-header { padding: 12px 16px; }
}