/* =====================================================================
   Green Home Upgrade — Author Module styles
   Uses theme CSS variables (--ink, --lime, --grey-1, --line, etc.)
   Falls back to safe defaults if those variables aren't defined.
   ===================================================================== */

/* ----- Byline (under H1) -----
   Layout: avatar | name + credentials + meta-line
   Style: matches the .pillar-hero meta strip — small, restrained,
   mono on the date for consistency with the .foot-brand-meta and
   .mega-kicker patterns elsewhere on the site. */

.gh-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid var(--line, #ececec);
    border-bottom: 1px solid var(--line, #ececec);
    margin: 24px 0 32px;
    font-family: inherit;
}

.gh-byline__avatar {
    flex-shrink: 0;
}

.gh-byline__avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
    border: 1px solid var(--line, #ececec);
}

.gh-byline__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.gh-byline__name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink, #0a0a0a);
    letter-spacing: -0.005em;
}

.gh-byline__by {
    color: var(--grey-1, #6b7280);
    font-weight: 400;
}

.gh-byline__name {
    font-weight: 600;
    color: var(--ink, #0a0a0a);
    text-decoration: none;
    transition: color 0.15s;
}

.gh-byline__name:hover {
    color: var(--lime-deep, #5bb82f);
}

.gh-byline__credentials {
    color: var(--grey-1, #6b7280);
    font-weight: 500;
}

.gh-byline__sep,
.gh-byline__dot {
    color: var(--grey-3, #d1d5db);
    font-weight: 400;
}

.gh-byline__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--grey-1, #6b7280);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* ----- Bio block (end of article) -----
   Layout: kicker line | avatar + body
   Style: bordered card matching your .cat / .calc-card patterns —
   clean white background, 1px line, 16px radius. Paragraphs use
   regular body type; the on-scope paragraph is set in a slightly
   muted box to make the disclosure visually distinct. */

.gh-bio {
    margin: 56px 0 24px;
    padding: 32px;
    background: var(--bg, #ffffff);
    border: 1px solid var(--line, #ececec);
    border-radius: 16px;
    font-family: inherit;
    color: var(--ink, #0a0a0a);
}

.gh-bio__header {
    margin-bottom: 20px;
}

.gh-bio__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--lime-deep, #5bb82f);
    font-weight: 600;
}

.gh-bio__kicker::before {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--lime-deep, #5bb82f);
}

.gh-bio__main {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.gh-bio__avatar {
    flex-shrink: 0;
}

.gh-bio__avatar-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: block;
    border: 1px solid var(--line, #ececec);
}

.gh-bio__body {
    flex: 1;
    min-width: 0;
}

.gh-bio__name-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.gh-bio__name {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--ink, #0a0a0a);
    text-decoration: none;
    transition: color 0.15s;
}

.gh-bio__name:hover {
    color: var(--lime-deep, #5bb82f);
}

.gh-bio__credentials {
    font-size: 13px;
    font-weight: 500;
    color: var(--grey-1, #6b7280);
    letter-spacing: -0.005em;
}

.gh-bio__pro {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-2, #1a1a1a);
    margin: 0 0 14px;
    letter-spacing: -0.005em;
}

.gh-bio__scope {
    font-size: 13px;
    line-height: 1.55;
    color: var(--grey-1, #6b7280);
    background: var(--bg-panel, #f7f8f6);
    border-left: 3px solid var(--lime, #7bdd4e);
    padding: 12px 14px;
    border-radius: 0 8px 8px 0;
    margin: 0 0 16px;
    letter-spacing: -0.005em;
}

.gh-bio__scope-label {
    font-weight: 600;
    color: var(--ink, #0a0a0a);
    margin-right: 4px;
}

.gh-bio__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.gh-bio__links li {
    margin: 0;
    padding: 0;
}

.gh-bio__links li::before {
    content: none;
}

.gh-bio__links a {
    font-size: 13px;
    color: var(--grey-1, #6b7280);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: -0.005em;
    border-bottom: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.gh-bio__links a:hover {
    color: var(--ink, #0a0a0a);
    border-bottom-color: var(--lime, #7bdd4e);
}


/* ----- Mobile -------------------------------------------------------- */

@media (max-width: 720px) {
    .gh-byline {
        padding: 14px 0;
        margin: 20px 0 24px;
    }

    .gh-byline__name-row {
        font-size: 13px;
    }

    .gh-bio {
        padding: 24px 22px;
        margin: 40px 0 16px;
    }

    .gh-bio__main {
        gap: 16px;
    }

    .gh-bio__avatar-img {
        width: 52px;
        height: 52px;
    }

    .gh-bio__name {
        font-size: 17px;
    }

    .gh-bio__pro {
        font-size: 14px;
    }

    .gh-bio__links {
        gap: 14px;
    }
}