/* Listados del blog (contenidos, v2 #60): la portada (T-06), los temas y las
 * etiquetas (T-08) y la página de autor (T-09) comparten esta hoja. Solo
 * tokens de style.css.
 * Cabecera en una `seccion` suave (anillos del ERP en la portada y en el
 * autor; la portada vectorial del tema en T-08), con los temas en chips.
 * Debajo, en la primera página de la portada, el destacado a todo el ancho y
 * la rejilla de tarjetas: una columna en el móvil, dos desde 768px y tres
 * desde 1025px. */

/* -------------------------------------------------------------------------
 * Cabecera
 * ---------------------------------------------------------------------- */

/* Banda más baja que una sección de página: aquí manda el listado. */
.pf-seccion.pf-blog__cabecera {
    padding-block: var(--pf-space-xl) var(--pf-space-lg);
    border-bottom: var(--pf-rule);
}

.pf-blog__intro {
    max-width: var(--pf-measure);
}

.pf-blog__intro > :last-child {
    margin-bottom: 0;
}

.pf-blog__etiqueta a {
    color: inherit;
    text-decoration-thickness: 1px;
}

.pf-blog__titulo {
    margin-bottom: var(--pf-space-xs);
}

.pf-blog__entradilla,
.pf-blog__descripcion {
    max-width: var(--pf-measure);
    margin-bottom: var(--pf-space-sm);
    font-size: var(--pf-text-md);
    line-height: var(--pf-leading-normal);
    color: var(--pf-color-text-soft);
}

.pf-blog__descripcion > :last-child {
    margin-bottom: 0;
}

.pf-blog__pagina,
.pf-blog__total {
    margin-bottom: 0;
    font-size: var(--pf-text-sm);
    color: var(--pf-color-text-muted);
}

.pf-blog__pilares {
    margin-top: var(--pf-space-lg);
}

/* Cabecera ilustrada (T-08): el texto y, al lado, la portada vectorial del tema. */
.pf-blog__cabecera-rejilla {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pf-space-md);
    align-items: center;
}

.pf-blog__ilustracion {
    width: 100%;
    max-width: 24rem;
}

/* La portada lleva el fondo de la banda: se recorta con el radio de las tarjetas. */
.pf-blog__ilustracion .pf-ilustracion {
    overflow: hidden;
    border: var(--pf-rule);
    border-radius: var(--pf-radius-card);
    box-shadow: var(--pf-shadow-md);
}

/* -------------------------------------------------------------------------
 * Listado
 * ---------------------------------------------------------------------- */

.pf-blog__contenido {
    padding-block: var(--pf-space-xl) var(--pf-space-section);
}

.pf-blog__destacado {
    margin-bottom: var(--pf-space-lg);
}

.pf-blog__lista {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pf-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-blog__vacio {
    max-width: var(--pf-measure);
    font-size: var(--pf-text-md);
    color: var(--pf-color-text-soft);
}

@media (min-width: 768px) {
    .pf-blog__cabecera-rejilla {
        grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
        gap: var(--pf-space-xl);
    }

    .pf-blog__lista {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1025px) {
    .pf-blog__cabecera-rejilla {
        grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    }

    .pf-blog__destacado {
        margin-bottom: var(--pf-space-xl);
    }

    .pf-blog__lista {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--pf-space-lg);
    }
}