/* Grid */
.video-grid-full {
 display: grid;
 grid-template-columns: repeat(3, 1fr) !important;
 gap: 12px;
 padding: 12px 0;
}

 .video-grid-full > div {
 width: 100% !important;
 grid-template-columns: repeat(3, 1fr) !important;
 gap: 12px;
}
 .video-grid-full > div {
 width: 100% !important;
 grid-template-columns: repeat(3, 1fr) !important;
 gap: 12px;
}
@media (max-width: 900px) { .video-grid-full { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .video-grid-full { grid-template-columns: repeat(2, 1fr); } }

/* Karta */
.vc {
 background: #fff;
 border-radius: 8px;
 overflow: hidden;
 box-shadow: 0 1px 4px rgba(0,0,0,0.10);
 transition: box-shadow .18s;
 position: relative;
}
.vc:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.15); }

/* Thumbnail */
.vc-thumb {
 position: relative;
 aspect-ratio: 16/9;
 overflow: hidden;
 background: #000;
}
.vc-thumb-link { display: block; width: 100%; height: 100%; }
.vc-thumb-img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
 transition: transform .25s;
}
.vc:hover .vc-thumb-img { transform: scale(1.04); }

/* Badges */
.vc-date, .vc-dur {
 position: absolute;
 bottom: 7px;
 background: rgba(0,0,0,0.72);
 color: #fff;
 font-size: 11px;
 font-weight: 600;
 padding: 2px 7px;
 border-radius: 4px;
 pointer-events: none;
}
.vc-date { left: 7px; }
.vc-dur { right: 7px; }

/* Title */
.vc-body { padding: 8px 10px 4px; }
.vc-title {
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
 font-size: 13.5px;
 font-weight: 600;
 line-height: 1.4;
 color: #1a1a1a;
 text-decoration: none;
}
.vc-title:hover { color: #2AABEE; }

/* Meta */
.vc-meta {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 4px 10px 8px;
 flex-wrap: wrap;
}
.vc-stat {
 display: flex;
 align-items: center;
 gap: 3px;
 font-size: 12px;
 color: #777;
}
.vc-icon {
 width: 14px;
 height: 14px;
 fill: #aaa;
 flex-shrink: 0;
}
.vc-link { color: #777; text-decoration: none; }
.vc-link:hover { color: #2AABEE; }

/* Moder */
.vc-moder {
 position: absolute;
 top: 6px; right: 6px;
 z-index: 2;
}

.news-row {
 overflow: hidden;
 margin-bottom: 4px;
}
.news-row:after {
 content: "";
 display: table;
 clear: both;
}
 
.n-card {
 float: left;
 width: 33.3333%;
 padding: 0 0 20px 0;
 border-bottom: 1px solid #e5e7eb;
 cursor: pointer;
}
.n-card.col-1 { padding-right: 16px; }
.n-card.col-2 {
 padding-left: 16px;
 padding-right: 16px;
 border-left: 1px solid #e5e7eb;
 border-right: 1px solid #e5e7eb;
}
.n-card.col-3 { padding-left: 16px; }
 
.news-row.has-top .n-card { padding-top: 20px; }
.news-row.last-row .n-card { border-bottom: none; padding-bottom: 0; }
 
.n-thumb {
 position: relative;
 width: 100%;
 overflow: hidden;
 border-radius: 10px;
 background: #e5e7eb;
 margin-bottom: 10px;
 line-height: 0;
}
.n-thumb img {
 width: 100%;
 height: 170px;
 object-fit: cover;
 display: block;
 transition: transform .35s ease;
}
.n-card:hover .n-thumb img { transform: scale(1.04); }
 
.n-vid-ico {
 position: absolute;
 bottom: 10px;
 left: 10px;
 width: 32px;
 height: 32px;
 background: rgba(255,255,255,.92);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.n-vid-ico svg { width: 13px; height: 13px; fill: #2AABEE; margin-left: 2px; }
 
.n-breaking {
 position: absolute;
 top: 10px;
 left: 10px;
 background: #ef4444;
 color: #fff;
 font-size: 10px;
 font-weight: 700;
 padding: 3px 8px;
 border-radius: 4px;
 text-transform: uppercase;
 letter-spacing: .04em;
}
 
.n-time {
 font-size: 12px;
 color: #8e8e93;
 margin-bottom: 6px;
}
.n-time .cat { color: #2AABEE; font-weight: 600; }
.n-time .sep { color: #d1d5db; margin: 0 4px; }
 
.n-card h3 {
 font-size: 14.5px;
 font-weight: 600;
 line-height: 1.45;
 color: #0f1117;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 overflow: hidden;
 transition: color .15s;
}
.n-card:hover h3 { color: #2AABEE; }
 
/* Tablet: 2 ustun */
@media screen and (max-width: 720px) {
 .n-card { width: 50%; }
 .n-card.col-1 { padding-right: 10px; padding-left: 0; border-left: none; border-right: none; }
 .n-card.col-2 { padding-left: 10px; padding-right: 0; border-left: 1px solid #e5e7eb; border-right: none; }
 .n-card.col-3 { padding-left: 10px; border-left: 1px solid #e5e7eb; }
 .news-row .n-card:nth-child(3) { clear: left; }
}
 
/* Mobil: 1 ustun, gorizontal karta */
@media screen and (max-width: 520px) {
 .n-card {
 float: none !important;
 width: 100% !important;
 display: block;
 overflow: hidden;
 padding: 12px 0 !important;
 border-bottom: 1px solid #e5e7eb !important;
 border-left: none !important;
 border-right: none !important;
 }
 .n-card:last-child { border-bottom: none !important; }
 .news-row.last-row .n-card { border-bottom: 1px solid #e5e7eb !important; }
 .news-row.last-row .n-card:last-child { border-bottom: none !important; }
 
 .n-thumb {
 float: left;
 width: 104px;
 height: 72px;
 border-radius: 8px;
 margin-bottom: 0;
 margin-right: 12px;
 flex-shrink: 0;
 }
 .n-thumb img { height: 72px; width: 104px; object-fit: cover; }
 
 .n-info-mob { overflow: hidden; }
 
 .n-time { font-size: 11px; margin-bottom: 4px; }
 .n-card h3 { font-size: 13px; line-height: 1.4; -webkit-line-clamp: 3; }
 
 .n-breaking { font-size: 9px; padding: 2px 6px; }
 .n-vid-ico { width: 26px; height: 26px; }
 .n-vid-ico svg { width: 10px; height: 10px; }
}