/*
 * Mi Portal de Noticias - Corrección de espacios vacíos en categorías
 * Archivo: home-grid-fix.css
 *
 * Objetivo:
 * - Mantener 4 noticias por categoría.
 * - Evitar huecos blancos producidos por el card principal "large".
 * - No modificar PHP, consultas, sidebar ni módulos.
 * - Mantener diseño responsive.
 */

/* ==============================
   BLOQUES DE CATEGORÍAS - DESKTOP
   ============================== */

@media (min-width: 901px) {

    .home-main .category-section .category-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        gap: 22px !important;
        align-items: start !important;
        grid-auto-flow: dense !important;
    }

    /* Principal: columna izquierda, ocupa las dos filas */
    .home-main .category-section .category-grid > .section-card.large:first-child {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        align-self: stretch !important;
    }

    /* Segunda noticia */
    .home-main .category-section .category-grid > .section-card:nth-child(2) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    /* Tercera noticia */
    .home-main .category-section .category-grid > .section-card:nth-child(3) {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    /* Cuarta: ocupa todo el ancho de las dos columnas secundarias */
    .home-main .category-section .category-grid > .section-card:nth-child(4) {
        grid-column: 2 / 4 !important;
        grid-row: 2 !important;

        display: grid !important;
        grid-template-columns: minmax(180px, 44%) minmax(0, 1fr) !important;
        column-gap: 18px !important;
        align-items: start !important;
    }

    .home-main .category-section .category-grid > .section-card:nth-child(4) .story-image {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin: 0 !important;
        height: 100% !important;
        min-height: 185px !important;
    }

    .home-main .category-section .category-grid > .section-card:nth-child(4) .story-body {
        grid-column: 2 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }

    /* Evita imágenes excesivamente altas */
    .home-main .category-section .section-card:not(.large) .story-image img {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
        display: block !important;
    }

    .home-main .category-section .section-card.large .story-image img {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* Bajadas secundarias: suficientes para informar sin alargar columnas */
    .home-main .category-section .section-card:not(.large) .story-body p {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
        overflow: hidden !important;
    }

    /* Títulos secundarios algo más compactos */
    .home-main .category-section .section-card:not(.large) .story-body h3 {
        margin-bottom: 8px !important;
    }

    /* Cada sección termina donde realmente termina su contenido */
    .home-main .category-section {
        min-height: 0 !important;
        height: auto !important;
    }
}


/* ==============================
   TABLET
   ============================== */

@media (min-width: 641px) and (max-width: 900px) {

    .home-main .category-section .category-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
        align-items: start !important;
    }

    .home-main .category-section .category-grid > .section-card,
    .home-main .category-section .category-grid > .section-card.large {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .home-main .category-section .category-grid > .section-card.large:first-child {
        grid-column: 1 / -1 !important;
    }

    .home-main .category-section .category-grid > .section-card:nth-child(4) {
        display: block !important;
    }
}


/* ==============================
   CELULAR
   ============================== */

@media (max-width: 640px) {

    .home-main .category-section .category-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .home-main .category-section .category-grid > .section-card,
    .home-main .category-section .category-grid > .section-card.large {
        grid-column: 1 !important;
        grid-row: auto !important;
        display: block !important;
    }

    .home-main .category-section .story-image img {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
        display: block !important;
    }
}