/* Tipografías de ejemplo (similar look & feel) */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&family=Poppins:wght@500;700&display=swap');

:root {
    --vs-text: #2a2a2a;
    --vs-border: #e2e2e2;
    --vs-bg-card: #ffffff;
    --vs-shadow: 0 4px 12px rgba(0,0,0,0.05);
    --vs-radius: 14px;
}

.vs-videos-wrap {
    width: 100%;
    font-family: 'Nunito', Arial, sans-serif;
}

/* Grid responsive */
.vs-videos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Tarjetas */
.vs-card {
    background: var(--vs-bg-card);
    border-radius: var(--vs-radius);
    box-shadow: var(--vs-shadow);
    overflow: hidden;
    flex: 1 1 calc(33.333% - 16px);
    max-width: calc(33.333% - 16px);
    display: flex;
    flex-direction: column;
}

.vs-card-media {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    overflow: hidden;
}

.vs-card-media iframe,
.vs-card-media video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.vs-card-body {
    padding: 14px 16px 16px;
}

.vs-card-title {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--vs-text);
}

.vs-card-desc {
    font-size: 14px;
    margin: 0 0 10px;
    color: #555;
}

.vs-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #888;
}

/* Placeholder cuando no hay video */
.vs-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 10px;
    background: #f5f5f5;
    color: #999;
    font-size: 14px;
}

/* Responsivo */
@media (max-width: 991px) {
    .vs-card {
        flex: 1 1 calc(50% - 16px);
        max-width: calc(50% - 16px);
    }
}

@media (max-width: 600px) {
    .vs-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}