/*
 * News: lo único que el V100 no traía.
 *
 * La tarjeta, el encabezado de página, la imagen de detalle y la rejilla son piezas del
 * tema y se usan tal cual. Aquí van solo dos cosas que ninguna pantalla generada
 * necesita: el cuerpo de una nota, que lo escribe el editor y no una maqueta, y la fila
 * para compartir.
 */

/*
 * Tarjeta de nota. Es la `case-card` de la pantalla de Case Studies —misma caja, mismo
 * borde, misma sombra, mismo bloque de cabecera— con la fotografía como banda encima.
 *
 * La otra tarjeta del tema, la de la portada, escribe el texto sobre la imagen. No sirve
 * aquí: las miniaturas de las notas ya llevan su propio titular impreso, y el resultado
 * eran dos textos superpuestos.
 */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 900px) {
    .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
}

.news-card {
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease;
}

.news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 30px rgba(20, 32, 43, .12);
}

/*
 * La banda sigue la proporción en que se piden las portadas, 2:1, en vez de un alto
 * fijo: así la imagen entra entera y el recorte no se come el texto que llevan impreso.
 */
.news-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    background: #f0f3f5;
}

/* El bloque de cabecera es aquí la tarjeta entera: debajo no va nada. */
.news-card .case-card-top {
    flex: 1;
    border-bottom: 0;
}

.news-card h3 {
    font-size: 18px;
    line-height: 1.2;
    margin: 0 0 8px;
}

/* El resumen se corta a tres líneas: la rejilla iguala el alto y el texto, no. */
.news-card h4 {
    font-size: 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/*
 * Cuerpo de la nota. El editor emite párrafos, títulos, listas y separadores; de todo
 * eso el tema solo viste párrafos y títulos de segundo nivel, porque es lo único que
 * aparece en las pantallas.
 */
.news-body p {
    font-size: 16px;
    line-height: 1.7;
    color: #4d5a65;
    margin: 0 0 16px;
}

.news-body h2 {
    font-size: 26px;
    line-height: 1.15;
    margin: 34px 0 12px;
    color: #111a23;
}

.news-body h3 {
    font-size: 19px;
    margin: 26px 0 10px;
    color: #111a23;
}

.news-body ul,
.news-body ol {
    margin: 0 0 18px;
    padding-left: 20px;
}

.news-body li {
    font-size: 16px;
    line-height: 1.7;
    color: #4d5a65;
    margin-bottom: 8px;
}

.news-body strong {
    color: #26333c;
}

.news-body a {
    color: #ff512b;
    text-decoration: underline;
}

.news-body hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 30px 0;
}

.news-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/*
 * Portada de la nota. La imagen de detalle del tema recorta a 360 px de alto fijo,
 * medida pensada para las capturas de producto de las pantallas generadas. Aquí se
 * sustituye por la misma proporción 2:1 de la tarjeta.
 */
.news-cover {
    max-height: none;
    aspect-ratio: 2 / 1;
}

/* La fecha va sobre el encabezado oscuro, con el mismo gris que su texto de apoyo. */
.news-date {
    color: #ccd6dd;
}

/*
 * Compartir. El V100 no carga tipografía de iconos —se quitó a propósito porque ninguna
 * pantalla usaba un solo glifo—, así que los destinos van como texto.
 */
.news-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.news-share span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: #66717e;
}

.news-share a {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #ff4b36;
}

.news-share a:hover {
    text-decoration: underline;
}