/* Página de autor (T-09, contenidos, v2 #60). Solo tokens de style.css.
 * Va sobre la hoja de los listados del blog (templates/blog-page/styles.css):
 * aquí solo el perfil de la cabecera y la biografía. La foto (o las
 * iniciales), en un círculo blanco con anillo verde, como el nodo central del
 * hub del ERP, con los anillos de la banda a su alrededor. En el móvil, encima
 * de los datos; desde 768px, a su izquierda. La biografía, a la medida de
 * lectura y, desde 1025px, la formación a su derecha. */

.pf-autor__perfil {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pf-space-md);
}

.pf-autor__foto {
    width: 6rem;
    height: 6rem;
    overflow: hidden;
    border: 4px solid var(--pf-color-surface);
    border-radius: var(--pf-radius-round);
    box-shadow: 0 0 0 2px var(--pf-color-brand), var(--pf-shadow-lg);
}

.pf-autor__img,
.pf-autor__iniciales {
    display: block;
    width: 100%;
    height: 100%;
}

.pf-autor__img {
    object-fit: cover;
    background-color: var(--pf-color-bg-inset);
}

.pf-autor__iniciales {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--pf-text-2xl);
    font-weight: var(--pf-weight-black);
    color: var(--pf-color-brand-strong);
    background-color: var(--pf-color-brand-soft);
}

.pf-autor__cargo {
    margin-bottom: var(--pf-space-xs);
    font-size: var(--pf-text-md);
    line-height: var(--pf-leading-snug);
    color: var(--pf-color-text-soft);
}

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

.pf-autor__enlaces {
    margin-top: var(--pf-space-sm);
}

/* -------------------------------------------------------------------------
 * Biografía y formación (solo en la primera página)
 * ---------------------------------------------------------------------- */

.pf-autor__sobre {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pf-space-xl);
    padding-top: var(--pf-space-xl);
}

.pf-autor__bio,
.pf-autor__formacion {
    max-width: var(--pf-measure);
}

.pf-autor__titulo {
    font-size: var(--pf-text-xl);
}

.pf-blog__contenido > .pf-autor__titulo {
    margin-bottom: var(--pf-space-md);
}

.pf-autor__texto {
    font-size: var(--pf-text-prose);
    line-height: var(--pf-leading-loose);
}

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

.pf-autor__titulaciones {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cada titulación con la hoja del isotipo delante, entre filetes. */
.pf-autor__titulaciones li {
    display: flex;
    gap: var(--pf-space-xs);
    align-items: flex-start;
    margin: 0;
    padding-block: var(--pf-space-xs);
    line-height: var(--pf-leading-snug);
    border-top: var(--pf-rule);
}

.pf-autor__titulaciones li:last-child {
    border-bottom: var(--pf-rule);
}

.pf-autor__titulacion-icono {
    flex: none;
    color: var(--pf-color-brand-strong);
}

@media (min-width: 768px) {
    .pf-autor__perfil {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: var(--pf-space-xl);
    }

    .pf-autor__foto {
        width: 10rem;
        height: 10rem;
    }
}

@media (min-width: 1025px) {
    .pf-autor__sobre {
        grid-template-columns: minmax(0, var(--pf-measure)) minmax(0, 1fr);
        gap: var(--pf-space-2xl);
    }
}