/* =====================================================
   BILIPEDIA - AUTHORS
   Byline, "written by" box, blog-card author line and the
   public /author/{slug}/ page. Uses the site's own tokens.
===================================================== */

/* ---- Byline (top of a post) ---- */
.bp-article-avatar.bp-has-img { background: none; overflow: hidden; }
.bp-article-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
a.bp-article-avatar { text-decoration: none; }
.bp-article-author .bp-author-link { color: inherit; text-decoration: none; }
.bp-article-author .bp-author-link:hover { color: var(--pink, #fe3372); }

/* ---- Social icon row (shared) ---- */
.bp-author-social { display: inline-flex; gap: 8px; }
.bp-author-social a {
    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1.5px solid var(--border, rgba(20, 21, 26, .09));
    background: var(--bg-card, #fff); color: var(--text-2, #52525b); font-size: 15px;
    text-decoration: none; transition: .2s ease;
}
.bp-author-social a:hover { color: #fff; background: var(--pink, #fe3372); border-color: var(--pink, #fe3372); transform: translateY(-2px); }

/* ---- "Written by" box (bottom of a post) ---- */
.bp-author-box {
    display: flex; gap: 20px; align-items: flex-start;
    margin: 36px 0 8px; padding: 24px;
    background: var(--bg-card, #fff); border: 1.5px solid var(--border, rgba(20, 21, 26, .09));
    border-radius: var(--radius-lg, 18px);
}
.bp-author-box-photo {
    flex: 0 0 84px; width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center; text-decoration: none;
    background: var(--gradient, linear-gradient(135deg, #fe3372, #fe7043)); color: #fff; font-weight: 800; font-size: 32px;
}
.bp-author-box-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-author-box-body { min-width: 0; flex: 1; }
.bp-author-box-kicker { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-3, #8b8b96); }
.bp-author-box-name { font-size: 19px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 6px; }
.bp-author-box-name a { color: var(--text, #14151a); text-decoration: none; }
.bp-author-box-name a:hover { color: var(--pink, #fe3372); }
.bp-author-box-bio { font-size: 14px; line-height: 1.7; color: var(--text-2, #52525b); margin: 0 0 12px; }
.bp-author-box-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bp-author-box-count { font-size: 13px; font-weight: 700; color: var(--pink, #fe3372); text-decoration: none; }
.bp-author-box-count:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .bp-author-box { flex-direction: column; align-items: center; text-align: center; }
    .bp-author-box-foot { justify-content: center; }
}

/* ---- Blog listing card: whole card stays clickable, author link works on its own ---- */
.bp-blog-card-x { position: relative; }
.bp-blog-card-x .bp-blog-card-main { color: inherit; text-decoration: none; }
.bp-blog-card-x .bp-blog-card-main::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.bp-blog-card-author {
    position: relative; z-index: 2; display: flex; align-items: center; gap: 8px;
    margin: 0 20px 18px; padding-top: 12px; border-top: 1px solid var(--border, rgba(20, 21, 26, .09));
    font-size: 12.5px; color: var(--text-2, #52525b);
}
.bp-blog-card-x .bp-blog-card-body { padding-bottom: 12px; flex: 1; }
.bp-blog-card-avatar {
    width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gradient, linear-gradient(135deg, #fe3372, #fe7043)); color: #fff; font-size: 11px; font-weight: 800;
}
.bp-blog-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-blog-card-author a { color: var(--text, #14151a); font-weight: 700; text-decoration: none; }
.bp-blog-card-author a:hover { color: var(--pink, #fe3372); text-decoration: underline; }

/* ---- Author page ---- */
.bp-author-hero {
    display: flex; gap: 28px; align-items: center;
    margin: 8px 0 34px; padding: 32px;
    background: var(--bg-card, #fff); border: 1.5px solid var(--border, rgba(20, 21, 26, .09));
    border-radius: var(--radius-lg, 18px);
}
.bp-author-hero-photo {
    flex: 0 0 132px; width: 132px; height: 132px; border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--gradient, linear-gradient(135deg, #fe3372, #fe7043)); color: #fff; font-weight: 800; font-size: 52px;
}
.bp-author-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-author-hero-body { min-width: 0; flex: 1; }
.bp-author-hero-kicker { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--pink, #fe3372); }
.bp-author-hero h1 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin: 4px 0 10px; color: var(--text, #14151a); }
.bp-author-hero-bio { font-size: 15px; line-height: 1.75; color: var(--text-2, #52525b); margin: 0 0 16px; max-width: 70ch; }
.bp-author-hero-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bp-author-stat {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
    background: var(--pink-dim, rgba(254, 51, 114, .10)); color: var(--pink-dark, #d91f5a); font-size: 13.5px; font-weight: 700;
}
.bp-author-posts-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; color: var(--text, #14151a); }

@media (max-width: 680px) {
    .bp-author-hero { flex-direction: column; text-align: center; padding: 24px 18px; }
    .bp-author-hero-meta { justify-content: center; }
    .bp-author-hero-bio { margin-left: auto; margin-right: auto; }
}