/*
 * Noticias: presentacion unificada.
 *
 * Se carga despues de style.css y responsive.css, asi que manda sobre ellas.
 * Existe porque la presentacion de las noticias estaba repartida entre
 * style.css y bloques <style> sueltos en noticias.php e index.php que se
 * contradecian entre si.
 */

/* ------------------------------------------------------------------ *
 * Cuerpo de la noticia
 *
 * El texto se escribe pegando desde Word y Outlook, asi que llega con
 * encabezados usados como parrafo. Aqui se iguala todo: las noticias
 * antiguas en <p> y las nuevas envueltas en <h6> se leen igual.
 * ------------------------------------------------------------------ */

.blog-detail .lower-content .text,
.blog-detail .lower-content .text p,
.blog-detail .lower-content .text li,
.blog-detail .lower-content .text span,
.blog-detail .lower-content .text div {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: #252525;
}

/* Encabezados que en realidad son parrafos: mismo aspecto que el texto */
.blog-detail .lower-content .text h1,
.blog-detail .lower-content .text h2,
.blog-detail .lower-content .text h3,
.blog-detail .lower-content .text h4,
.blog-detail .lower-content .text h5,
.blog-detail .lower-content .text h6 {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: #252525;
    margin: 0 0 18px;
}

.blog-detail .lower-content .text p,
.blog-detail .lower-content .text ul,
.blog-detail .lower-content .text ol {
    margin: 0 0 18px;
}

.blog-detail .lower-content .text ul,
.blog-detail .lower-content .text ol {
    padding-left: 22px;
}

.blog-detail .lower-content .text li {
    margin-bottom: 8px;
}

/* La negrita solo cuando se pide de verdad */
.blog-detail .lower-content .text strong,
.blog-detail .lower-content .text b {
    font-weight: 700;
    color: #010101;
}

.blog-detail .lower-content .text a {
    color: #0b6ea8;
    text-decoration: underline;
}

.blog-detail .lower-content .text a:hover {
    color: #094f78;
}

/* ------------------------------------------------------------------ *
 * Imagenes
 * ------------------------------------------------------------------ */

/* Rejilla de noticias: todas las tarjetas con la misma proporcion, sin
   deformar la foto. El recorte es preferible a las bandas grises y a que
   cada tarjeta tenga una altura distinta. */
.news-block .inner-box .image,
.news-block-two .inner-box .image {
    background-color: #f2f2f2;
    overflow: hidden;
}

.news-block .inner-box .image img,
.news-block-two .inner-box .image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Detalle: proporcion natural de la foto, nunca deformada, con un tope de
   altura para que un vertical no ocupe toda la pantalla. */
.blog-detail .inner-box .image {
    background-color: #f2f2f2;
    text-align: center;
}

.blog-detail .inner-box .image img {
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Miniaturas de la barra lateral */
.sidebar .popular-posts .post .post-thumb img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ------------------------------------------------------------------ *
 * Tarjetas de la rejilla
 * ------------------------------------------------------------------ */

/* Sin altura fija: la altura la iguala la rejilla, no un numero a mano.
   El height: 500px de noticias.php recortaba titulares largos. */
.news-block {
    height: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.news-block .inner-box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* display: contents rompia la caja y con ella el relleno del texto */
.news-block .lower-content,
.news-block-two .lower-content {
    display: block;
    flex: 1 1 auto;
    padding: 20px 25px 25px;
}

.news-block .lower-content h5 {
    line-height: 1.4;
}