/**
 * BLOQUE POLICIAL EDITORIAL — Estilos basados en El País
 * Layout: Nota principal destacada (2 cols) + Grid de 4 notas secundarias
 */

/* =====================================================
   CONTENEDOR PRINCIPAL
===================================================== */
.informe-policial-editorial {
    margin-bottom: var(--space-6, 32px);
}

/* =====================================================
   FILA 1: NOTA PRINCIPAL (imagen izq + contenido der)
===================================================== */
.informe-policial-editorial__main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6, 32px);
    margin-bottom: var(--space-6, 32px);
    padding-bottom: var(--space-6, 32px);
    border-bottom: 1px solid var(--color-border-list, #e6e6e6);
}

/* Imagen principal */
.informe-policial-editorial__main-image {
    display: block;
    width: 100%;
    overflow: hidden;
}

.informe-policial-editorial__main-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.informe-policial-editorial__main-image:hover img {
    transform: scale(1.02);
}

/* Contenido principal (centrado horizontalmente) */
.informe-policial-editorial__main-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

/* Título principal - reutiliza variables globales */
.informe-policial-editorial__main-title {
    font-family: var(--font-family-serif, MajritTx, serif);
    font-size: var(--fs-title-lg, 1.5rem); /* 24px */
    line-height: var(--lh-title-base, 1.15);
    letter-spacing: var(--ls-title-lg, -.021875rem);
    font-weight: var(--fw-title-base, 600);
    margin: 0 0 var(--space-3, 12px) 0;
}

.informe-policial-editorial__main-title a {
    color: #000;
    text-decoration: none;
    transition: color 0.2s ease;
}

.informe-policial-editorial__main-title a:hover {
    color: var(--color-title-hover, #444);
    text-decoration: underline;
}

/* Meta principal (categoría) - reutiliza variables globales */
.informe-policial-editorial__main-meta {
    font-family: var(--font-family-sans, MarcinAntB, sans-serif);
    font-size: var(--fs-meta, .6875rem); /* 11px */
    line-height: var(--lh-excerpt, 1.27);
    letter-spacing: var(--ls-meta, .0125rem);
    font-weight: var(--fw-meta, 500);
    color: var(--color-meta, #666);
    text-transform: uppercase;
    margin-bottom: var(--space-3, 12px);
}

/* Excerpt principal - reutiliza variables globales */
.informe-policial-editorial__main-excerpt {
    font-family: var(--font-family-serif-roman, MajritTxRoman, serif);
    font-size: var(--fs-excerpt, .9375rem); /* 15px */
    line-height: var(--lh-excerpt, 1.27);
    color: var(--color-excerpt, #4a4a4a);
    margin: 0;
}

/* =====================================================
   FILA 2: GRID DE 4 NOTAS SECUNDARIAS
===================================================== */
.informe-policial-editorial__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5, 20px);
}

/* Item secundario */
.informe-policial-editorial__item {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Separador vertical (todas las columnas menos la última) */
.informe-policial-editorial__item--separator::after {
    content: '';
    position: absolute;
    right: calc(var(--space-5, 20px) / -2); /* Centrado en el gap */
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--color-border-list, #e6e6e6);
}

/* Imagen secundaria */
.informe-policial-editorial__item-image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: var(--space-3, 12px);
}

.informe-policial-editorial__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.informe-policial-editorial__item-image:hover img {
    transform: scale(1.02);
}

/* Título secundario - reutiliza variables globales */
.informe-policial-editorial__item-title {
    font-family: var(--font-family-serif, MajritTx, serif);
    font-size: var(--fs-title-md, 1.125rem); /* 18px */
    line-height: var(--lh-title-list, 1.17);
    letter-spacing: var(--ls-title-md, -.016875rem);
    font-weight: var(--fw-title-base, 600);
    margin: 0 0 var(--space-2, 8px) 0;
}

.informe-policial-editorial__item-title a {
    color: #000;
    text-decoration: none;
    transition: color 0.2s ease;
}

.informe-policial-editorial__item-title a:hover {
    color: var(--color-title-hover, #444);
    text-decoration: underline;
}

/* Meta secundaria (categoría) - reutiliza variables globales */
.informe-policial-editorial__item-meta {
    font-family: var(--font-family-sans, MarcinAntB, sans-serif);
    font-size: var(--fs-meta, .6875rem); /* 11px */
    line-height: var(--lh-excerpt, 1.27);
    letter-spacing: var(--ls-meta, .0125rem);
    font-weight: var(--fw-meta, 500);
    color: var(--color-meta, #666);
    text-transform: uppercase;
    margin-top: auto;
}

/* =====================================================
   RESPONSIVE
===================================================== */

/* Tablet (hasta 1024px) */
@media (max-width: 1024px) {
    .informe-policial-editorial__main {
        grid-template-columns: 1fr;
        gap: var(--space-5, 20px);
    }
    
    .informe-policial-editorial__main-content {
        text-align: left; /* Alinear a izquierda en tablet */
    }
    
    .informe-policial-editorial__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Separadores solo para la primera columna de cada fila */
    .informe-policial-editorial__item--separator::after {
        display: none;
    }
    
    .informe-policial-editorial__item:nth-child(odd)::after {
        content: '';
        position: absolute;
        right: calc(var(--space-5, 20px) / -2);
        top: 0;
        bottom: 0;
        width: 1px;
        background-color: var(--color-border-list, #e6e6e6);
    }
}

/* Mobile (hasta 768px) */
@media (max-width: 768px) {
    .informe-policial-editorial__main {
        gap: var(--space-4, 16px);
        margin-bottom: var(--space-5, 20px);
        padding-bottom: var(--space-5, 20px);
    }
    
    .informe-policial-editorial__main-title {
        font-size: var(--fs-title-base, 1.25rem); /* 20px */
    }
    
    .informe-policial-editorial__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    /* Sin separadores en mobile */
    .informe-policial-editorial__item::after,
    .informe-policial-editorial__item:nth-child(odd)::after {
        display: none;
    }
    
    /* Separador inferior entre items en mobile */
    .informe-policial-editorial__item:not(:last-child) {
        padding-bottom: var(--space-5, 20px);
        margin-bottom: var(--space-5, 20px);
        border-bottom: 1px solid var(--color-border-list, #e6e6e6);
    }
    
    .informe-policial-editorial__item-title {
        font-size: var(--fs-title-sm, 1rem); /* 16px */
    }
}

/* Mobile pequeño (hasta 480px) */
@media (max-width: 480px) {
    .informe-policial-editorial__main-title {
        font-size: var(--fs-title-sm, 1rem); /* 16px */
    }
    
    .informe-policial-editorial__main-excerpt {
        font-size: var(--fs-excerpt-sm, .875rem); /* 14px */
    }
}