/**
 * Grid 4 columnas para Entrevistas y Videos
 * Destacado ocupa 2x2 (arriba izquierda), resto 1x1 (derecha y debajo).
 * No modifica .featured-content-grid ni otros estilos globales.
 */

.media-videos-grid-4col {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(140px, auto);
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.media-videos-grid-4col > .featured-card.video {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.media-videos-grid-4col > .featured-card.video .featured-content {
    min-height: 0;
}

.media-videos-grid-4col > .featured-card.video .featured-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Thumbnail destacado: 16:9, no deformar */
.media-videos-grid-4col > .featured-card.video .video-thumb {
    flex: 0 0 auto;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--gray-100, #f0f0f0);
}

.media-videos-grid-4col > .featured-card.video .video-thumb .featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Cards no destacadas: compactas */
.media-videos-grid-4col > .update-card {
    display: flex;
    flex-direction: column;
}

/* Thumbnail cards: 16:9 para que se vea bien */
.media-videos-grid-4col > .update-card .video-thumb {
    flex: 0 0 auto;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--gray-100, #f0f0f0);
}

.media-videos-grid-4col > .update-card .video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-videos-grid-4col > .update-card .update-content {
    padding: 0.5rem 0.6rem;
    flex: 1 1 auto;
    min-height: 0;
}

.media-videos-grid-4col > .update-card .update-category {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    margin-bottom: 0.35rem;
}

.media-videos-grid-4col > .update-card .update-title {
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-videos-grid-4col > .update-card .update-excerpt {
    font-size: 0.75rem;
    line-height: 1.3;
    margin-bottom: 0.35rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-videos-grid-4col > .update-card .update-meta {
    font-size: 0.7rem;
    margin-top: auto;
}

.media-videos-grid-4col > .update-card .update-meta .read-more {
    font-size: 0.75rem;
}

@media (max-width: 991px) {
    .media-videos-grid-4col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        /* Filas compactas: el contenido se limita con clamps/overflow */
        grid-auto-rows: minmax(150px, auto);
        gap: 0.55rem;
    }

    /* En móviles/tablets el destacado ocupa solo 1 fila (ancho completo),
       y debajo se ven máx. 2 videos por línea. */
    .media-videos-grid-4col > .featured-card.video {
        grid-column: 1 / -1;
        grid-row: auto;
        max-height: 640px;
    }

    /* Compactar aún más el texto de no destacados */
    .media-videos-grid-4col > .update-card {
        overflow: hidden;
    }

    .media-videos-grid-4col > .update-card .update-content {
        padding: 0.45rem 0.5rem;
        overflow: hidden;
    }

    .media-videos-grid-4col > .update-card .update-category {
        font-size: 0.6rem;
        margin-bottom: 0.3rem;
    }

    .media-videos-grid-4col > .update-card .update-title {
        font-size: 0.8rem;
        -webkit-line-clamp: 1;
    }

    .media-videos-grid-4col > .update-card .update-excerpt {
        font-size: 0.7rem;
        margin-bottom: 0.3rem;
        -webkit-line-clamp: 1;
    }

    .media-videos-grid-4col > .update-card .update-meta {
        font-size: 0.65rem;
    }

    /* El destacado en móvil puede ocupar más espacio vertical, pero sin crecer por texto */
    .media-videos-grid-4col > .featured-card.video .featured-excerpt {
        -webkit-line-clamp: 2;
    }
}

@media (min-width: 768px) {
    .media-videos-grid-4col {
        grid-auto-rows: minmax(160px, auto);
        gap: 0.85rem;
    }

}