/*
 * ER MEDIOS NACIONALES: Bloque rediseñado
 * Fondo negro, 3 columnas de cards verticales
 */

/* ==========================================================
   CONTENEDOR PRINCIPAL
========================================================== */

.informe-er-medios-nacionales {
    background: var(--color-black); /* Fondo negro */
    padding: var(--space-10) var(--container-padding-desktop); /* 40px lateral */
    margin: var(--space-12) 0; /* 48px vertical */
    max-width: var(--max-width-container); /* 1320px */
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================
   HEADER - Título
========================================================== */

.informe-er-medios-nacionales__header {
    margin-bottom: var(--space-8); /* 32px */
}

.informe-er-medios-nacionales__title {
    font-family: MajritTx, serif;
    font-weight: 900;
    font-size: 1.1875rem; /* 19px - Consistente con otros títulos del home */
    line-height: 1.42; /* El País */
    letter-spacing: -.0175rem; /* El País */
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-3); /* 12px */
    flex-wrap: wrap;
}

.informe-er-medios-nacionales__title--white {
    color: var(--color-white); /* Blanco */
}

.informe-er-medios-nacionales__title--orange {
    font-family: MarcinAntB, sans-serif; /* ✅ MarcinAnt - como los metas */
    font-size: 1rem; /* ✅ 16px - Un poco más chico que "Entre Ríos" (19px) */
    color: var(--color-primary); /* #FF5920 - Naranja */
    text-transform: uppercase;
}

/* ==========================================================
   GRID DE 3 COLUMNAS
========================================================== */

.informe-er-medios-nacionales__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8); /* 32px - Mayor separación entre cards */
    margin-bottom: var(--space-10); /* 40px - espacio para botón */
}

/* Separador sutil entre grupos de 3 posts */
.informe-er-medios-nacionales__separator {
    grid-column: 1 / -1; /* Ocupa todas las columnas */
    height: 1px;
    background: rgba(255, 255, 255, 0.15); /* Separador blanco sutil */
    margin: var(--space-8) 0; /* 32px vertical */
    border: none;
    padding: 0;
}

/* ==========================================================
   CARD INDIVIDUAL
========================================================== */

.informe-er-medios-nacionales__card {
    display: flex;
    flex-direction: column;
    background: transparent; /* Transparente sobre fondo negro */
    height: 100%; /* Mismo alto para todas las cards */
    position: relative;
    min-width: 0; /* Evitar deformación al cargar más con "Ver más" */
    overflow: hidden;
}

/* Separador fino blanco abajo (todas las resoluciones) */
.informe-er-medios-nacionales__card::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: calc(var(--space-8) / -2); /* Centrado en el gap */
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2); /* Blanco sutil sobre fondo negro */
}

/* Quitar separador del último elemento (siempre) */
.informe-er-medios-nacionales__card:last-child::after {
    display: none;
}

/* ==========================================================
   SUBCATEGORÍA (estilo category header)
========================================================== */

.informe-er-medios-nacionales .informe-er-medios-nacionales__subcategory,
.informe-er-medios-nacionales .informe-er-medios-nacionales__subcategory,
.informe-er-medios-nacionales__subcategory {
    font-family: MajritTx, serif !important; /* Mismo estilo que category header */
    font-weight: 900 !important; /* ✅ Correcto - category-header usa 900 */
    font-size: 1.1875rem !important; /* 19px - estilo home (category-header__title) */
    line-height: 1.42 !important; /* El País */
    letter-spacing: -.0175rem !important; /* El País */
    color: var(--color-white) !important; /* Blanco */
    margin-bottom: var(--space-4) !important; /* 16px */
    padding-bottom: .6875rem !important; /* 11px - Consistente con category-header__title */
    border-bottom: .0625rem solid rgba(255, 255, 255, 0.3) !important; /* 1px - borde sutil */
    position: relative;
}

/* Evitar que enlaces dentro de subcategoría sobrescriban estilos */
.informe-er-medios-nacionales__subcategory a {
    font-family: MajritTx, serif !important;
    font-weight: 900 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: inherit !important;
    text-decoration: none !important;
}

/* Línea negra gruesa debajo (estilo El País) */
.informe-er-medios-nacionales__subcategory::after {
    content: "";
    height: .125rem; /* 2px */
    width: 8.25rem; /* 132px */
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--color-white); /* Blanco sobre fondo negro */
}

/* ==========================================================
   FOTO 16:9 (mismo tamaño para todas)
========================================================== */

.informe-er-medios-nacionales__thumb {
    width: 100%;
    flex-shrink: 0;
    aspect-ratio: 3 / 2; /* 3:2 global */
    overflow: hidden;
    margin-bottom: var(--space-4); /* 16px */
    border-radius: 0;
}

.informe-er-medios-nacionales__img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cubrir todo el espacio manteniendo ratio */
    display: block;
    border-radius: 0;
    /* Anular contain-intrinsic-size de LiteSpeed (3000×1500) - usar valor acorde a inf_card_md 3:2 */
    contain-intrinsic-size: 600px 400px;
}

/* ==========================================================
   CONTENIDO DE LA CARD
========================================================== */

.informe-er-medios-nacionales__content {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Para que todas tengan el mismo alto */
}

/* Título de la nota - Consistente con informe-post-card__title */
.informe-er-medios-nacionales .informe-er-medios-nacionales__card-title,
.informe-er-medios-nacionales__card-title {
    font-family: MajritTx, serif !important; /* El País */
    font-weight: 700 !important; /* ✅ 700 - valor directo */
    font-size: 1.25rem !important; /* 20px - Consistente con post-card - valor directo */
    line-height: 1.15 !important; /* Estándar El País - valor directo */
    letter-spacing: -.018125rem !important; /* Estándar El País - valor directo */
    color: var(--color-white) !important;
    margin: 0 0 var(--space-4) 0 !important; /* 16px abajo */
}

.informe-er-medios-nacionales .informe-er-medios-nacionales__card-title a,
.informe-er-medios-nacionales__card-title a,
.informe-er-medios-nacionales__card-title h3 a {
    font-family: MajritTx, serif !important; /* El País */
    font-weight: 700 !important; /* ✅ 700 - Evitar que otros estilos sobrescriban */
    font-size: inherit !important; /* Heredar del padre */
    line-height: inherit !important;
    letter-spacing: inherit !important;
    color: var(--color-white) !important;
    text-decoration: none !important;
    transition: color var(--transition-fast);
}

.informe-er-medios-nacionales__card-title a:hover {
    color: var(--color-primary); /* Naranja al hover */
}

/* ==========================================================
   TAGS - "En esta nota: + tags" - Consistente con metas del home
========================================================== */

.informe-er-medios-nacionales__tags {
    margin-bottom: var(--space-4) !important; /* 16px */
    font-family: MarcinAntB, sans-serif !important; /* El País */
    font-size: .6875rem !important; /* 11px - Consistente con metas del home */
    line-height: 1.27 !important; /* Consistente con metas */
    color: rgba(255, 255, 255, 0.7) !important; /* Gris claro sobre fondo negro - más visible */
    font-weight: 500 !important; /* Consistente con --fw-meta */
    letter-spacing: .0125rem !important; /* Consistente con --ls-meta */
}

.informe-er-medios-nacionales__tags-label {
    font-family: MarcinAntB, sans-serif !important; /* MarcinAnt - como los metas */
    font-size: var(--fs-meta) !important; /* .6875rem - 11px */
    line-height: var(--lh-excerpt) !important; /* 1.27 */
    text-transform: uppercase !important;
    color: var(--color-white) !important; /* ✅ BLANCO - "En esta nota" */
    font-weight: var(--fw-meta) !important; /* 500 */
    letter-spacing: var(--ls-meta) !important; /* .0125rem */
    margin-right: .25rem; /* 4px */
}

.informe-er-medios-nacionales__tags-list {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
}

.informe-er-medios-nacionales__tag {
    font-family: MarcinAntB, sans-serif !important; /* ✅ MarcinAnt para tags */
    font-size: .6875rem !important; /* 11px - Consistente con metas */
    line-height: 1.27 !important;
    font-weight: 500 !important;
    letter-spacing: .0125rem !important;
    text-transform: uppercase !important; /* ✅ Mayúsculas - consistente con el resto del sitio */
    color: var(--sde-color-primary) !important; /* ✅ Naranja - como post-card__category */
    text-decoration: none !important;
    transition: color var(--transition-fast);
}

.informe-er-medios-nacionales__tag:hover {
    color: var(--color-primary-hover) !important; /* Naranja más oscuro al hover */
    text-decoration: underline;
}

.informe-er-medios-nacionales__tag-sep {
    color: rgba(255, 255, 255, 0.5) !important; /* Separador más visible sobre fondo negro */
    margin: 0 .25rem; /* 4px */
}

/* Botón toggle para ver más tags */
.informe-er-medios-nacionales__tags-toggle {
    background: none;
    border: none;
    padding: 0;
    margin-left: .25rem; /* 4px */
    cursor: pointer;
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem; /* 16px */
    height: 1rem; /* 16px */
    transition: transform var(--transition-fast);
    vertical-align: middle;
}

.informe-er-medios-nacionales__tags-toggle:hover {
    transform: scale(1.1);
    color: var(--color-primary);
}

.informe-er-medios-nacionales__tags-toggle svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Tags adicionales (ocultos inicialmente) */
.informe-er-medios-nacionales__tags-more {
    margin-top: .5rem; /* 8px */
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
}

.informe-er-medios-nacionales__tags-more .informe-er-medios-nacionales__tag {
    font-family: MarcinAntB, sans-serif !important; /* ✅ MarcinAnt */
    font-size: .6875rem !important; /* 11px - Consistente */
    line-height: 1.27 !important;
    font-weight: 500 !important;
    letter-spacing: .0125rem !important;
    text-transform: uppercase !important; /* ✅ Mayúsculas también en tags adicionales */
    margin-right: .25rem; /* 4px */
}

.informe-er-medios-nacionales__tags-more .informe-er-medios-nacionales__tag:not(:last-child)::after {
    content: ',';
    color: rgba(255, 255, 255, 0.5) !important; /* Separador visible sobre fondo negro */
    margin-left: .125rem; /* 2px */
}

/* Estado expandido del toggle */
.informe-er-medios-nacionales__tags-toggle.expanded svg {
    transform: rotate(180deg);
}

/* ==========================================================
   FECHA - Consistente con informe-post-card__date
========================================================== */

.informe-er-medios-nacionales .informe-er-medios-nacionales__date,
.informe-er-medios-nacionales__date {
    font-family: MarcinAntB, sans-serif !important; /* MarcinAnt - como los metas */
    font-size: var(--fs-meta) !important; /* .6875rem - 11px */
    line-height: var(--lh-excerpt) !important; /* 1.27 */
    text-transform: uppercase !important;
    color: var(--color-white) !important; /* ✅ BLANCO - fecha */
    font-weight: var(--fw-meta) !important; /* 500 */
    letter-spacing: var(--ls-meta) !important; /* .0125rem */
    margin-top: var(--space-6) !important; /* 24px - Separación limpia de los tags */
    margin-bottom: var(--space-6) !important; /* 24px - Separación inferior */
}

/* ==========================================================
   BOTÓN VER MÁS
========================================================== */

.informe-er-medios-nacionales__load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--space-8); /* 32px */
}

.informe-er-medios-nacionales__load-more {
    background: var(--color-white);
    color: var(--color-black);
    border: none;
    padding: var(--space-3) var(--space-8); /* 12px 32px */
    font-family: MarcinAntB, sans-serif;
    font-size: .875rem; /* 14px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: all var(--transition-fast);
    min-width: 120px;
}

.informe-er-medios-nacionales__load-more:hover {
    background: var(--color-primary); /* Naranja al hover */
    color: var(--color-white);
    transform: translateY(-2px);
}

.informe-er-medios-nacionales__load-more:disabled,
.informe-er-medios-nacionales__load-more.loading {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

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

/* TABLET: Full bleed */
@media (max-width: 1024px) {
    .informe-er-medios-nacionales {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-1 * var(--container-padding-mobile)) !important;
        margin-right: calc(-1 * var(--container-padding-mobile)) !important;
        padding: var(--space-8) var(--container-padding-mobile) !important; /* 32px lateral */
    }
    
    .informe-er-medios-nacionales__grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */
        gap: var(--space-6); /* 24px - menos gap en tablet */
    }
    
    /* Ajustar posición del separador para gap de tablet */
    .informe-er-medios-nacionales__card::after {
        bottom: calc(var(--space-6) / -2); /* Centrado en el gap de tablet */
    }
}

/* MOBILE: Full bleed */
@media (max-width: 768px) {
    .informe-er-medios-nacionales {
        /* Ya tiene full bleed aplicado en tablet (1024px), solo ajustar padding */
        padding: var(--space-6) var(--container-padding-mobile) !important; /* 24px lateral */
        margin-top: var(--space-8) !important; /* 32px vertical */
        margin-bottom: var(--space-8) !important;
    }
    
    .informe-er-medios-nacionales__title {
        font-size: 1rem; /* 16px - proporcional al desktop */
    }
    
    .informe-er-medios-nacionales__grid {
        grid-template-columns: 1fr; /* 1 columna en mobile */
        gap: var(--space-8); /* 32px - Consistente con desktop */
    }
    
    /* Ajustar posición del separador para gap de mobile (ya es horizontal) */
    .informe-er-medios-nacionales__card::after {
        bottom: calc(var(--space-8) / -2); /* Centrado en el gap de mobile */
    }
    
    .informe-er-medios-nacionales__subcategory {
        font-size: 1rem; /* 16px */
    }
    
    .informe-er-medios-nacionales__card-title {
        font-size: 1rem !important; /* 16px - Consistente con post-card mobile - valor directo */
        line-height: 1.19 !important; /* valor directo */
        letter-spacing: -.005625rem !important; /* valor directo */
    }
}