/**
 * BLOQUE CAMPO EDITORIAL — Estilos basados en El País
 * Layout: 2 notas destacadas horizontales en franja con líneas
 */

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

/* =====================================================
   LÍNEAS SUPERIOR E INFERIOR (separadores estándar)
===================================================== */
.informe-campo-editorial__line {
    width: 100%;
    height: 1px;
    background-color: var(--color-border-list, #e6e6e6);
}

.informe-campo-editorial__line--top {
    margin-bottom: var(--space-5, 20px);
}

.informe-campo-editorial__line--bottom {
    margin-top: var(--space-5, 20px);
}

/* =====================================================
   CONTAINER DE 2 NOTAS (grid 2 columnas)
===================================================== */
.informe-campo-editorial__container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6, 32px);
}

/* =====================================================
   ITEM (cada nota)
===================================================== */
.informe-campo-editorial__item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5, 20px);
    align-items: start;
    position: relative;
}

/* Separador vertical entre notas (solo la primera) */
.informe-campo-editorial__item--separator::after {
    content: '';
    position: absolute;
    right: calc(var(--space-6, 32px) / -2); /* Centrado en el gap del container */
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--color-border-list, #e6e6e6);
}

/* =====================================================
   IMAGEN (thumbnail apaisado)
===================================================== */
.informe-campo-editorial__item-image {
    display: block;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 3 / 2;           /* 3:2 global */
}

.informe-campo-editorial__item-image img {
    width: 100%;
    height: 100%;                    /* Llenar todo el contenedor */
    object-fit: cover;               /* Recortar para mantener ratio exacto */
    transition: transform 0.3s ease;
    border-radius: 0;
}

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

/* =====================================================
   CONTENIDO TEXTO
===================================================== */
.informe-campo-editorial__item-content {
    display: flex;
    flex-direction: column;
}

/* Título - reutiliza variables globales */
.informe-campo-editorial__item-title {
    font-family: var(--font-family-serif, MajritTx, serif);
    font-size: var(--fs-title-base, 1.25rem); /* 20px */
    line-height: var(--lh-title-base, 1.15);
    letter-spacing: var(--ls-title-base, -.018125rem);
    font-weight: var(--fw-title-base, 600);
    margin: 0 0 var(--space-3, 12px) 0;
}

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

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

/* Excerpt - reutiliza variables globales */
.informe-campo-editorial__item-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;
}

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

/* Tablet (hasta 1024px) */
@media (max-width: 1024px) {
    .informe-campo-editorial__container {
        grid-template-columns: 1fr;
        gap: var(--space-6, 32px);
    }
    
    /* En tablet cada nota sigue siendo horizontal (imagen + texto) */
    .informe-campo-editorial__item {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Cambiar separador vertical por horizontal entre notas */
    .informe-campo-editorial__item--separator::after {
        display: none;
    }
    
    .informe-campo-editorial__item:first-child {
        padding-bottom: var(--space-6, 32px);
        margin-bottom: var(--space-6, 32px);
        border-bottom: 1px solid var(--color-border-list, #e6e6e6);
    }
    
    .informe-campo-editorial__item:first-child::after {
        display: none;
    }
}

/* Mobile (hasta 768px) */
@media (max-width: 768px) {
    .informe-campo-editorial__line--top {
        margin-bottom: var(--space-4, 16px);
    }
    
    .informe-campo-editorial__line--bottom {
        margin-top: var(--space-4, 16px);
    }
    
    .informe-campo-editorial__container {
        gap: var(--space-5, 20px);
    }
    
    /* En mobile, apilar imagen y contenido verticalmente */
    .informe-campo-editorial__item {
        grid-template-columns: 1fr;
        gap: var(--space-3, 12px);
    }
    
    .informe-campo-editorial__item:first-child {
        padding-bottom: var(--space-5, 20px);
        margin-bottom: var(--space-5, 20px);
    }
    
    .informe-campo-editorial__item-title {
        font-size: var(--fs-title-md, 1.125rem); /* 18px */
    }
}

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