/* P26M — автор: аватар, ссылки, карточка в хвосте статьи, шапка архива.
 *
 * Один файл на обе поверхности намеренно: аватар и ряд ссылок общие, и
 * разъехаться им нельзя — это одна и та же личность в двух местах сайта.
 *
 * 1. .author-avatar — аватар с монограммой-плейсхолдером (общий).
 * 2. .author-links  — ряд ссылок профиля (общий).
 * 3. .author-bio    — карточка в хвосте статьи.
 * 4. .author-hero   — шапка архива автора /author/<slug>/.
 */

/* ── 1. Аватар ───────────────────────────────────────────────────────────── */

/* Монограмма лежит под <img>. Если у автора нет gravatar, картинка приходит
   404-м, onerror снимает <img> — и остаётся монограмма. Поэтому обе слоя
   позиционируются абсолютно в одной коробке фиксированного размера: сдвига
   вёрстки при обоих исходах нет. */
.author-avatar {
    --author-avatar-size: 72px;

    position: relative;
    display: block;
    flex-shrink: 0;
    width: var(--author-avatar-size);
    height: var(--author-avatar-size);
    border-radius: 50%;
}

.author-avatar__monogram {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: linear-gradient(150deg,
        var(--color-elevated) 0%,
        var(--color-overlay) 100%);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: calc(var(--author-avatar-size) * 0.4);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--color-brand);
}

.author-avatar__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
    background: var(--color-elevated);
}

.author-avatar--card { --author-avatar-size: 72px; }
.author-avatar--hero { --author-avatar-size: 88px; }

@media (min-width: 640px) {
    .author-avatar--card { --author-avatar-size: 96px; }
    .author-avatar--hero { --author-avatar-size: 120px; }
}

/* ── 2. Ссылки профиля ───────────────────────────────────────────────────── */

.author-links {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
}

/* Specificity bump: (0,2,0) beats a:not(.btn) (0,1,1) */
.author-links .author-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-brand);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

.author-links .author-link:hover { color: var(--color-brand-strong); }

.author-link__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ── 3. Карточка автора в хвосте статьи ──────────────────────────────────── */

/* Раньше это был безрамочный ряд «аватар + два абзаца» шириной в колонку
 * текста — он читался как ещё один параграф статьи и терялся. Теперь это
 * отдельная карточка в хвосте страницы, во всю меру статьи: аватар в
 * фиксированной колонке, подпись-eyebrow задаёт роль блока.
 */
.author-bio {
    display: block;
    padding-block: var(--space-9);
    border-top: 1px solid var(--color-border);
}

.author-bio__card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    padding: var(--space-6);
    border-radius: var(--radius-2xl);
}

@media (min-width: 640px) {
    .author-bio__card {
        grid-template-columns: 96px 1fr;
        gap: var(--space-6);
        align-items: start;
        padding: var(--space-7);
    }
}

.author-bio__photo { min-width: 0; }

.author-bio__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.author-bio__kicker { margin-bottom: calc(var(--space-1) * -1); }

.author-bio__name {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    max-width: none;
    line-height: 1.2;
    margin-top: 0;
}

/* Должность идёт сразу под именем, поэтому общий gap карточки (12px) здесь
   лишний — иначе имя и должность читаются как два независимых поля. */
.author-bio__role {
    margin-top: calc(var(--space-2) * -1);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-tertiary);
    max-width: none;
}

.author-bio__bio {
    font-size: var(--fs-base);
    color: var(--color-text-secondary);
    line-height: var(--lh-relaxed);
    max-width: 62ch;
    margin-top: 0;
}

.author-bio__links {
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* ── 4. Шапка архива автора ──────────────────────────────────────────────── */

/* Страницу начинает контент: ленты крошек и разделительных линий сверху нет,
   верх держит тот же halo, что и на статье. */
.author-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: var(--section-pad-y) var(--space-6);
}

.author-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 75% at 18% 0%,
        rgba(115, 196, 75, 0.07) 0%,
        transparent 62%);
    pointer-events: none;
    z-index: -1;
}

.author-hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Крошки — тихая строка внутри шапки, как на странице статьи: нужны они
   ради BreadcrumbList и перелинковки, а не ради вида. Гасим полосу и
   вертикальные поля, которые blog/meta.css даёт им как самостоятельной ленте. */
.author-hero .breadcrumbs {
    padding-block: 0;
    border-bottom: 0;
}

.author-hero .breadcrumbs__inner {
    padding: 0;
    max-width: none;
}

.author-hero .breadcrumbs__link,
.author-hero .breadcrumbs__current {
    font-size: var(--fs-xs);
}

/* Ниже 640 имя встаёт под аватар: в 390px строка «Анастасія Скороход» кеглем
   --fs-4xl рядом с 88-пиксельным кругом ломается на четыре строки. */
.author-hero__identity {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

@media (min-width: 640px) {
    .author-hero__identity {
        flex-direction: row;
        align-items: center;
        gap: var(--space-6);
    }
}

.author-hero__id-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.author-hero__name {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tighter);
    text-wrap: balance;
    color: var(--color-text);
    max-width: 18ch;
    margin-top: 0;
}

/* Должность заполнена не всегда — тогда здесь стоит слово «Автор». Строка
   не исчезает: без неё H1 повисает в воздухе и страница не объясняет себя. */
.author-hero__role {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--color-text-secondary);
    max-width: none;
    margin-top: 0;
}

.author-hero__bio {
    font-size: var(--fs-lg);
    line-height: var(--lh-relaxed);
    color: var(--color-text-secondary);
    max-width: 62ch;
    margin-top: 0;
}

.author-hero__foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.author-hero__stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
    max-width: none;
    margin-top: 0;
}

.author-hero__sep { opacity: 0.5; }