/* ===================================================================
   Fase 18 · News — rediseño de la experiencia de lista
   Objetivo: jerarquía clara, máximo 2 columnas, nada gigante,
   que la gente NO se pierda. Se carga DESPUÉS de news.css.
   =================================================================== */

/* ===================================================================
   1. GRID DE 2 COLUMNAS — forzado con selectores específicos
   Atacamos varios contenedores posibles para ganarle a news.css sin
   importar cómo esté escrita su regla original.
   =================================================================== */
.news-page .news-grid,
.news-main .news-grid,
.news-layout .news-grid,
.news-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

@media (max-width: 720px) {
    .news-page .news-grid,
    .news-main .news-grid,
    .news-layout .news-grid,
    .news-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ===================================================================
   2. SECCIÓN "NOTICIAS DESTACADAS"
   =================================================================== */
.news-featured-section {
    margin: 8px 0 40px;
    padding: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 56, 92, 0.06), transparent 40%),
        var(--paper, #fff);
    border: 1px solid rgba(255, 56, 92, 0.16);
    border-radius: var(--radius-lg, 32px);
    box-shadow: 0 14px 40px rgba(255, 56, 92, 0.07);
}

.news-featured-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.news-featured-row-head h2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display, "Plus Jakarta Sans", sans-serif);
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--ink, #111);
    margin: 0;
}

.news-featured-row-head h2 i { color: var(--brand, #ff385c); font-size: 19px; }

.news-featured-row-head span {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--brand-dark, #d91f47);
    background: var(--brand-soft, #fff0f3);
    border-radius: 999px;
    padding: 7px 14px;
    white-space: nowrap;
}

/* ===================================================================
   3. TARJETA DESTACADA PRINCIPAL — horizontal, NO gigante
   Imagen a la izquierda, texto a la derecha. Aprovecha el ancho sin
   ocupar toda la pantalla.
   =================================================================== */
.news-card-featured {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border, #ededed);
    border-radius: var(--radius-lg, 28px);
    background: var(--paper, #fff);
    box-shadow: var(--shadow-sm, 0 8px 24px rgba(0, 0, 0, 0.06));
    margin-bottom: 20px;
}

.news-card-featured .news-card-media {
    position: relative;
    display: block;
    aspect-ratio: auto;
    height: 100%;
    min-height: 280px;
}

.news-card-featured .news-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-card-featured .news-card-body {
    padding: 28px 30px;
    justify-content: center;
}

.news-card-featured .news-card-body h3 {
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.04em;
    margin: 6px 0 10px;
}

.news-card-featured .news-card-body p {
    font-size: 15.5px;
    line-height: 1.55;
    -webkit-line-clamp: 3;
}

/* Badge "Noticia destacada" — imposible de no ver */
.news-card-featured-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: 999px;
    background: var(--brand, #ff385c);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    box-shadow: 0 10px 26px rgba(255, 56, 92, 0.4);
}

.news-card-featured-badge i { font-size: 11px; }

/* Las demás destacadas, en 2 columnas debajo de la principal */
.news-featured-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

@media (max-width: 760px) {
    .news-card-featured {
        grid-template-columns: 1fr !important;
    }
    .news-card-featured .news-card-media { min-height: 220px; }
    .news-card-featured .news-card-body { padding: 22px; }
    .news-card-featured .news-card-body h3 { font-size: 23px; }
    .news-featured-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   4. BOTÓN "VER NOTICIA" — claro y visible en cada tarjeta
   =================================================================== */
.news-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--brand, #ff385c);
    color: #fff;
    font-weight: 800;
    font-size: 14.5px;
    text-decoration: none;
    align-self: flex-start;
    box-shadow: 0 10px 24px rgba(255, 56, 92, 0.26);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.news-card-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(255, 56, 92, 0.34);
}

.news-card-cta i { font-size: 12px; transition: transform 0.15s ease; }
.news-card-cta:hover i { transform: translateX(3px); }

/* Tarjetas como columna flex para alinear el CTA al fondo */
.news-card {
    display: flex;
    flex-direction: column;
}
.news-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ===================================================================
   5. EVENTOS RELACIONADOS (detalle) — se mantienen de fase 17
   =================================================================== */
.newsd-events h2 { display: inline-flex; align-items: center; gap: 9px; }
.newsd-events h2 i { color: var(--brand, #ff385c); }

.newsd-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 4px;
}

.newsd-event-card {
    display: flex;
    flex-direction: column;
    background: var(--paper, #fff);
    border: 1px solid var(--border, #ededed);
    border-radius: var(--radius-md, 22px);
    overflow: hidden;
    box-shadow: var(--shadow-xs, 0 4px 14px rgba(0, 0, 0, 0.045));
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.newsd-event-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md, 0 18px 46px rgba(0, 0, 0, 0.1));
}

.newsd-event-media { position: relative; display: block; aspect-ratio: 16 / 10; }
.newsd-event-media img { width: 100%; height: 100%; object-fit: cover; }

.newsd-event-date {
    position: absolute;
    top: 10px;
    left: 10px;
    display: grid;
    place-items: center;
    width: 48px;
    padding: 6px 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    line-height: 1;
}

.newsd-event-date strong { font-family: var(--font-display, sans-serif); font-size: 18px; font-weight: 800; color: var(--ink, #111); }
.newsd-event-date small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--brand, #ff385c); margin-top: 2px; }

.newsd-event-body { display: flex; flex-direction: column; flex: 1; padding: 13px 15px 15px; }

.newsd-event-cat { font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand, #ff385c); }

.newsd-event-body h3 { font-family: var(--font-display, sans-serif); font-size: 16.5px; letter-spacing: -0.02em; line-height: 1.2; margin: 5px 0 8px; }
.newsd-event-body h3 a { color: var(--ink, #111); text-decoration: none; }
.newsd-event-body h3 a:hover { color: var(--brand, #ff385c); }

.newsd-event-when { font-size: 13px; color: var(--muted, #5f6673); margin: 0 0 12px; }
.newsd-event-when i { color: var(--soft, #8d95a1); margin-right: 4px; }

.newsd-event-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    align-self: flex-start;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--brand-soft, #fff0f3);
    color: var(--brand-dark, #d91f47);
    font-weight: 800;
    font-size: 13.5px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.newsd-event-cta:hover { background: var(--brand, #ff385c); color: #fff; }
.newsd-event-cta i { font-size: 11px; }

/* ===================================================================
   6. AJUSTE DEL LAYOUT DE 3 COLUMNAS cuando hay pocas noticias
   El feed central no debe verse perdido. Damos más respiro al main.
   =================================================================== */
@media (min-width: 1100px) {
    .news-layout {
        grid-template-columns: 230px minmax(0, 1fr) 290px;
    }
}

/* ===================================================================
   FIX fase 19 · Solape del badge "Noticia destacada" con "Noticia"
   En la tarjeta destacada, el badge ya comunica el tipo. Ocultamos la
   etiqueta blanca de tipo para que no se encimen en la misma esquina.
   =================================================================== */
.news-card-featured .news-card-type {
    display: none;
}

/* El badge manda en la esquina superior izquierda, solito. */
.news-card-featured .news-card-featured-badge {
    top: 14px;
    left: 14px;
}

/* Si la destacada es "Última hora" o "Patrocinado", esas sí se ven, pero
   las bajamos para que no choquen con el badge destacado. */
.news-card-featured .news-card-breaking {
    top: 14px;
    right: 14px;
}
.news-card-featured .news-card-sponsored {
    left: 14px;
    bottom: 14px;
}