/*
=============================================================================
DISEÑO DE TARJETAS DE CATEGORÍAS PERSONALIZADO (ESTILO TARJETAS PEQUEÑAS)
=============================================================================
*/

/* 1. CONTENEDOR PRINCIPAL DE LA CUADRÍCULA */
.flex.flex-fluid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Centra las tarjetas si no completan la fila */
    margin-left: -8px !important;
    margin-right: -8px !important;
    row-gap: 16px !important; /* Espacio vertical entre filas */
}

/* 2. DISEÑO RESPONSIVO DE COLUMNAS (5 en Escritorio, 3 en Tablet, 2 en Móvil) */

/* Escritorio: 5 columnas (pantallas grandes) */
@media (min-width: 1024px) {
    .flex.flex-fluid .entry-item.column-third,
    .flex.flex-fluid .featured-item {
        width: calc(20% - 16px) !important;
        flex: 0 0 calc(20% - 16px) !important;
        max-width: calc(20% - 16px) !important;
        margin: 8px !important;
    }
}

/* Tabletas: 3 columnas (pantallas medianas) */
@media (min-width: 641px) and (max-width: 1023px) {
    .flex.flex-fluid .entry-item.column-third,
    .flex.flex-fluid .featured-item {
        width: calc(33.333% - 12px) !important;
        flex: 0 0 calc(33.333% - 12px) !important;
        max-width: calc(33.333% - 12px) !important;
        margin: 6px !important;
    }
}

/* Celulares: 2 columnas (pantallas pequeñas para que no se vean diminutas) */
@media (max-width: 640px) {
    .flex.flex-fluid .entry-item.column-third,
    .flex.flex-fluid .featured-item {
        width: calc(50% - 8px) !important;
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
        margin: 4px !important;
        padding: 8px !important; /* Menos padding en móviles para ganar espacio */
    }
}

/* 3. ESTILO DE LA TARJETA (EFECTO PREMIUM) */
.entry-item.column-third,
.featured-item {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #f0f2f5 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    
    /* Configuración de transición combinada para entrada suave y efecto Hover */
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

/* Efecto hover al pasar el mouse por encima (Solo si ya se ha cargado la animación de entrada) */
.entry-item.column-third.occc-visible:hover,
.featured-item.occc-visible:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    border-color: #e2e8f0 !important;
}

/* 4. ANIMACIÓN DE ENTRADA (CONTROLADA POR JS) */
.entry-item.column-third.occc-animate,
.featured-item.occc-animate {
    opacity: 0 !important;
    transform: translateY(15px) !important;
}

.entry-item.column-third.occc-visible,
.featured-item.occc-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 5. IMÁGENES DENTRO DE LAS TARJETAS */
.entry-item.column-third img.orbital-pro-image,
.featured-item img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important; /* Mantiene la proporción clásica de portada */
    object-fit: cover !important;
    border-radius: 10px !important; /* Bordes redondeados para la imagen */
    margin-bottom: 4px !important;
    display: block !important;
    transition: filter 0.25s ease !important;
}

/* Sutil efecto en la imagen al hacer hover */
.entry-item.column-third.occc-visible:hover img.orbital-pro-image,
.featured-item.occc-visible:hover img {
    filter: brightness(0.96) !important;
}

/* Contenedor del enlace */
.entry-item.column-third header.entry-header,
.entry-item.column-third header.entry-header a,
.featured-item .featured-wrapper,
.featured-item .featured-wrapper a {
    display: block !important;
    position: relative !important;
    text-decoration: none !important;
    width: 100% !important;
}

/* 6. DISEÑO DE TÍTULOS */
.entry-item.column-third .title,
.entry-item.column-third .entry-title,
.featured-item .title,
.featured-item .entry-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 11px !important; /* Más pequeño para ajustarse al nuevo tamaño de tarjeta */
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: #1a202c !important; /* Gris oscuro elegante */
    margin: 6px 0 2px 0 !important;
    text-align: left !important; /* Alineado a la izquierda como la referencia */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* Máximo 2 líneas de texto */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 30px !important; /* Mantiene la altura constante para alinear las tarjetas */
}

/* Hover en el título */
.entry-item.column-third.occc-visible:hover .title,
.entry-item.column-third.occc-visible:hover .entry-title,
.featured-item.occc-visible:hover .title,
.featured-item.occc-visible:hover .entry-title {
    color: #3182ce !important; /* Color azul al pasar el mouse */
}

/* 7. CORRECCIÓN DE BADGES / ETIQUETAS */

/* Badge superior (ej: INSERTADO / NO DETECTADO) */
.entry-item.column-third .mcptc-admin-badge-wrapper,
.featured-item .mcptc-admin-badge-wrapper {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important; /* Posicionado arriba a la derecha */
    left: auto !important;
    z-index: 5 !important;
}

.entry-item.column-third .mcptc-admin-badge,
.featured-item .mcptc-admin-badge {
    font-size: 8px !important;
    font-weight: bold !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    margin: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    text-transform: uppercase !important;
}

/* Badge inferior (ej: NADA / POCO / MUCHO) */
.entry-item.column-third .mcptc-urgency-wrapper,
.featured-item .mcptc-urgency-wrapper {
    display: flex !important;
    justify-content: flex-start !important; /* Alineado a la izquierda */
    margin: 6px 0 0 0 !important;
    width: 100% !important;
}

.entry-item.column-third .mcptc-urgency-wrapper span,
.entry-item.column-third .mcptc-urgency-wrapper div,
.featured-item .mcptc-urgency-wrapper span,
.featured-item .mcptc-urgency-wrapper div {
    font-size: 8px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    display: inline-block !important;
}

/* 8. ENTRADAS DESTACADAS (FEATURED ITEMS) */
/* Se eliminó el código que las ocultaba para volver a mostrarlas */
.featured-item,
.featured-wrapper {
    /* display: none !important; */
}

/* 9. OCULTAR ELEMENTOS DE PAGINACIÓN */
.navigation.pagination,
.pagination,
.nav-links,
.page-numbers,
.orbital-pagination {
    display: none !important;
    visibility: hidden !important;
}