/**
 * Últimas Noticias RESCOP - PROPORCIONES CORRECTAS DE FIGMA
 */

/* === CONTENEDOR PRINCIPAL === */
.rescop-latest-news-component {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: 0;
    margin-bottom: 0;
    min-height: 800px; /* Reducir de 900px */
    /* Fondo negro como en Figma */
    background: rgba(132, 163, 135, 0.80) !important;
    overflow: hidden;
    display: flex;
    position: relative;
    padding: 0;
}

/* === CONTENEDOR INTERNO - DEJAR QUE LO MANEJE EL SISTEMA UNIFICADO === */
.rescop-latest-news-container {
    width: 100%;
    max-width: 1280px !important;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* NO definir padding aquí - lo maneja refinement-global.css */
}

/* === AJUSTE ESPECÍFICO PARA LATEST NEWS === */
.rescop-latest-news-container {
    /* Eliminar padding custom - usar el sistema unificado */
    padding: 0 !important;
}

.rescop-latest-main-title a{
    text-decoration: none !important;
}

/* === TÍTULO "ÚLTIMAS NOTICIAS" - COLOR VERDE === */
.rescop-latest-news-title {
    width: 100%;
    max-width: 1456px;
    

    color: black ;
    font-size: clamp(28px, 3.5vw, 36px) !important;
    font-family: var(--rescop-font-display, 'Anton', sans-serif) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: center;
    margin: 0 0 3rem 0 !important;
    padding: 0 !important;
    word-wrap: break-word;
    }
    
/* === LAYOUT - FORZAR ALTURAS IGUALES === */
.rescop-latest-news-layout {
    display: flex;
    justify-content: center;
    align-items: stretch; /* CLAVE: stretch para alturas iguales */
    gap: 25px;
    width: 100%;
    max-width: 1200px;
    flex-wrap: nowrap;

    /* FORZAR altura específica para ambas columnas */
    min-height: 722px;
}

/* === COLUMNA PRINCIPAL - ALTURA FIJA === */
    .rescop-latest-news-main {
    /* Proporción de Figma: 686px */
        flex: 0 0 45%;
    width: 45%;
        max-width: 500px;

    /* FORZAR altura exacta */
    height: 722px;
    min-height: 722px;
    max-height: 722px;

    display: flex;
    align-items: stretch;
    }
    
.rescop-latest-main-card {
        width: 100%;
    height: 100%; /* Ocupar exactamente la altura del contenedor */

    background: white;
    border: 1px rgba(0, 0, 0, 0.50) solid;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
        flex-direction: column;
    }
    
/* === IMAGEN PRINCIPAL === */
.rescop-latest-main-image {
    flex: 0 0 400px;
    width: 100%;
    overflow: hidden;
    border-radius: 6px 6px 0 0;
    }
    
.rescop-latest-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rescop-latest-main-placeholder {
    width: 100%;
    height: 100%;
    background: #E5E5E5;
    border: 1px rgba(0, 0, 0, 0.30) solid;
}

/* === CONTENIDO PRINCIPAL === */
.rescop-latest-main-content {
    flex: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
}

.rescop-latest-main-date {
    color: rgba(132, 163, 135, 0.80) !important;
    font-size: 18px !important;
    font-family: var(--rescop-font-primary, 'Merriweather Sans', serif) !important;
    font-weight: 400 !important;
    line-height: 30px !important;
    margin: 0 !important;
    order: 1;
}

/* === TÍTULO PRINCIPAL - ALTURA CORREGIDA === */
.rescop-latest-main-title {
    color: black !important;
    font-size: 24px !important;
    font-family: var(--rescop-font-display, 'Anton', sans-serif) !important;
    font-weight: 400 !important;
    line-height: 36px !important;
    text-transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    word-wrap: break-word;
    order: 2;
    max-height: 78px; 
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    /* Añadir padding inferior para descendentes */
    padding-bottom: 2px;
    box-sizing: border-box;
}

/* === EXCERPT PRINCIPAL - ALTURA CORREGIDA === */
.rescop-latest-main-excerpt {
    color: rgba(0, 0, 0, 0.80) !important;
    font-size: 18px !important;
    font-family: var(--rescop-font-primary, 'Merriweather Sans', serif) !important;
    font-weight: 400 !important;
    line-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    word-wrap: break-word;
    order: 3;
    flex: 1;

    /* CORREGIR: Altura para 4 líneas completas */
    max-height: 126px; 
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;

    /* Añadir padding inferior para descendentes */
    padding-bottom: 2px;
    box-sizing: border-box;
}

/* === SIDEBAR - CON GAP ENTRE CARDS === */
.rescop-latest-news-sidebar {
    flex: 0 0 52%;
    width: 52%;
    max-width: 600px;

    /* MISMA altura que la columna principal */
    height: 722px;
    min-height: 722px;
    max-height: 722px;

    /* Flex vertical con gap controlado */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.5rem;

    /* Padding interno para centrar */
    padding: 0.5rem 0;
    box-sizing: border-box;
}

/* === CARDS SECUNDARIAS - ALTURA RECALCULADA === */
.rescop-latest-secondary-card {
    
    flex: 0 0 219px;
        width: 100%;
    height: 219px;

    background: white;
    border-radius: 8px;
    overflow: hidden;
    
    /* Flex horizontal: imagen + contenido */
    display: flex;
    align-items: stretch;
    }



/* === IMAGEN SECUNDARIA === */
.rescop-latest-secondary-image {
    flex: 0 0 213px;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 32px;
    }
    
.rescop-latest-secondary-image img {
    width: 100%;
    height: 134px;
    object-fit: cover;
}

.rescop-latest-secondary-placeholder {
    width: 100%;
    height: 134px;
    background: #E5E5E5;
    border: 1px rgba(0, 0, 0, 0.30) solid;
    border-radius: 4px;
}

/* === CONTENIDO SECUNDARIO === */
.rescop-latest-secondary-content {
    flex: 1;
    padding: 34px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

/* === TÍTULO SECUNDARIO === */
.rescop-latest-secondary-title {
    color: black !important;
    font-size: 24px !important;
    font-family: var(--rescop-font-display, 'Anton', sans-serif) !important;
    font-weight: 400 !important;
    line-height: 36px !important;
    text-transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    word-wrap: break-word;

    /* Altura para 3 líneas completas */
    max-height: 114px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    padding-bottom: 2px;
    box-sizing: border-box;
}

.rescop-latest-secondary-title a {
    color: inherit !important;
    text-decoration: none !important;
}

.rescop-latest-secondary-title a:hover {
    color: #BE252D !important;
}

/* === FECHAS === */
.rescop-latest-secondary-date {
    color: rgba(132, 163, 135, 0.80) !important;
    font-size: 18px !important;
    font-family: var(--rescop-font-primary, 'Merriweather Sans', serif) !important;
    font-weight: 400 !important;
    line-height: 30px !important;
    margin: 0 !important;
}



/* === RESPONSIVE === */
@media (max-width: 1400px) {
    .rescop-latest-news-layout {
        gap: 1.5rem;
        min-height: 600px; /* Reducir altura proporcional */
    }
    
    .rescop-latest-news-main,
    .rescop-latest-news-sidebar {
        height: 600px;
        min-height: 600px;
        max-height: 600px;
    }

    .rescop-latest-news-sidebar {
        gap: 1.25rem; /* Gap proporcional */
    }

    .rescop-latest-secondary-card {
        /* Recalcular: (600px - gaps - padding) ÷ 3 ≈ 185px */
        flex: 0 0 185px;
        height: 185px;
    }
}

@media (max-width: 1200px) {
    .rescop-latest-news-layout {
        /* Stack vertical en tablet */
        flex-direction: column;
        align-items: center;
        gap: 3rem;
        min-height: auto; /* Reset altura en stack */
    }
    
    .rescop-latest-news-main,
    .rescop-latest-news-sidebar {
        flex: 0 0 auto;
        width: 100%;
        max-width: 700px;
        height: auto; /* Altura automática en stack */
        min-height: auto;
        max-height: none;
    }
    
    .rescop-latest-main-card {
        height: auto;
        min-height: 500px;
    }

    .rescop-latest-news-sidebar {
        gap: 2rem;
        justify-content: flex-start; /* Cambiar en mobile */
    }

    .rescop-latest-secondary-card {
        height: auto;
        min-height: 180px;
        flex: 0 0 auto;
    }
}

@media (max-width: 768px) {
    .rescop-latest-news-container {
        padding: 2rem 1rem;
    }
    
    .rescop-latest-secondary-card {
        height: auto;
        min-height: 150px;
        flex-direction: column;
    }
    
    .rescop-latest-secondary-image {
        flex: 0 0 120px;
        padding: 1rem;
    }
    
    .rescop-latest-secondary-content {
        padding: 1rem;
    }
}

/* === ELIMINAR RESTRICCIONES DEL TEMA === */
.entry-content .rescop-latest-news-component,
.wp-block-post-content .rescop-latest-news-component,
.site-main .rescop-latest-news-component {
    width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    max-width: none !important;
}
/* === TARJETAS CLICABLES (stretched-link) === */
.rescop-latest-main-card {
    position: relative;
    cursor: pointer;
}
.rescop-latest-main-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* Asegurar que los links internos queden por encima */
.rescop-latest-main-card .rescop-latest-main-title a {
    position: relative;
    z-index: 2;
}

.rescop-latest-secondary-card {
    position: relative;
    cursor: pointer;
}
.rescop-latest-secondary-title a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.rescop-latest-secondary-card .rescop-latest-secondary-title a {
    position: relative;
    z-index: 2;
}