/* --- CONTENEDOR --- */
.gdv-wrap { max-width: 1200px; margin: 40px auto; font-family: sans-serif; }

/* CLASE CORREGIDA: Apunta a gdv-grid-videos tal cual está en tu PHP */
.gdv-grid-videos { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px; 
}

/* --- TARJETAS --- */
.gdv-item { 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
}

.gdv-item a { 
    text-decoration: none; 
    color: inherit; 
    display: block; 
}

/* MINIATURAS: Altura fija y uniforme sin deformar */
.gdv-img-wrap { 
    width: 100%; 
    height: 200px; /* Tamaño de miniaturas */
    overflow: hidden; 
    border-radius: 12px; 
}

.gdv-img-wrap img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}

/* TÍTULO */
.gdv-item h3 { 
    font-size: 14px; 
    margin: 10px 0; 
    text-align: center; 
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- MODAL (SCROLL CORREGIDO) --- */
.gdv-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9999; overflow-y: auto; }
.gdv-modal-box { 
    background: #fff; 
    width: 90%; 
    max-width: 800px; 
    margin: 50px auto; 
    border-radius: 20px; 
    padding: 30px; 
    position: relative; 
}
.gdv-close { position: absolute; right: 20px; top: 15px; cursor: pointer; font-size: 30px; z-index: 10; }
.gdv-video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-bottom: 20px; }
.gdv-video-container iframe { position: absolute; top:0; left:0; width:100%; height:100%; border-radius: 8px; }

@media(max-width: 768px) { .gdv-grid-videos { grid-template-columns: 1fr; } }