/* Auteurspagina (author.php): kop met naam en bio links, foto rechts; de artikelen gebruiken het bloggrid uit blogs.css */

/* Warm getint vlak achter de kop, zoals de banden elders op de landingpagina's.
   De site-header doet mee (staat buiten .landing, dus de kleur van --lp-tint letterlijk).
   Bij een open mobiel menu blijft de header licht, want dat menu staat op de lichte pagina. */
body.author:not(.menu-opened) .site-header,
.landing .lp-auteur-vlak {
    background: #faf8f3;
}
.landing .lp-auteur-vlak {
    border-bottom: 1px solid var(--lp-border);
}
.landing .lp-auteur-head {
    display: grid;
    grid-template-columns: 1fr 280px;
    align-items: center;
    gap: 64px;
    padding-top: 48px;
    padding-bottom: 72px;
}
.landing .lp-auteur-foto {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    font-size: 80px;
    font-weight: 700;
    color: #92600a;
    background: var(--lp-accent-soft);
    border-radius: 12px;
    overflow: hidden;
}
/* Foto over de initiaal heen; verdwijnt via onerror als hij niet laadt */
.landing .lp-auteur-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.landing .lp-auteur-head h1 {
    font-size: clamp(36px, 5vw, 56px);
    line-height: 1.05;
}
.landing .lp-auteur-bio {
    margin: 18px 0 0;
    font-size: 18px;
    line-height: 1.7;
    max-width: 560px;
    color: var(--lp-muted);
}
.landing .lp-auteur-bio p {
    margin: 0;
}
.landing .lp-auteur-bio p + p {
    margin-top: 14px;
}
.landing .lp-auteur-bio a {
    color: var(--lp-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* Links onder de bio (website, LinkedIn, …) */
.landing .lp-auteur-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}
.landing .lp-auteur-links a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--lp-ink);
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    transition: background 0.15s, transform 0.1s;
}
.landing .lp-auteur-links a:hover {
    border-color: #d9d5cc;
    transform: translateY(-1px);
}
.landing .lp-auteur-links svg {
    width: 18px;
    height: 18px;
}

/* Link naar Over ons onder de bio */
.landing .lp-auteur-over {
    display: inline-block;
    margin-top: 24px;
    font-weight: 600;
    color: var(--lp-ink);
}

/* Artikelen als lijst, links uitgelijnd */
.landing.auteur .lp-blogs-grid-wrap .lp-section-head {
    max-width: none;
    margin: 0 0 24px;
    text-align: left;
}
.landing .lp-auteur-lijst {
    max-width: 880px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.landing .lp-auteur-lijst li {
    border-top: 1px solid var(--lp-border);
}
.landing .lp-auteur-lijst li:last-child {
    border-bottom: 1px solid var(--lp-border);
}
/* Meta links als eigen kolom, titel en excerpt rechts */
.landing .lp-auteur-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    grid-template-areas: "meta titel" "meta tekst";
    column-gap: 32px;
    padding: 24px 0;
    color: inherit;
    text-decoration: none;
}
.landing .lp-auteur-item h3 {
    grid-area: titel;
    margin: 0 0 6px;
    font-size: 20px;
    line-height: 1.3;
    transition: color 0.15s;
}
.landing .lp-auteur-item:hover h3 {
    color: var(--lp-accent);
}
.landing .lp-auteur-item p {
    grid-area: tekst;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--lp-muted);
}
.landing .lp-auteur-item .lp-blog-meta {
    grid-area: meta;
    padding-top: 4px;
    line-height: 1.6;
}
.landing .lp-auteur-item .lp-blog-meta > * {
    display: block;
}
/* Datum klein en gedempt: ondergeschikt aan naam en titel */
.landing .lp-auteur-item .lp-blog-meta time {
    font-size: 13px;
}
.landing .lp-auteur-item .lp-auteur-meta-naam {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--lp-ink);
}
/* Lange naam op één regel houden, afkappen met … */
.landing .lp-auteur-naam {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Mini-profielfoto, zelfde opzet als de grote: initiaal eronder als fallback */
.landing .lp-auteur-mini {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 24px;
    height: 24px;
    font-size: 11px;
    font-weight: 700;
    color: #92600a;
    background: #ffe7bf;
    border-radius: 50%;
    overflow: hidden;
}
.landing .lp-auteur-mini img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* De lijst sluit al af met een lijn: paginering zonder eigen lijn, dichter erop */
.landing.auteur .lp-pagination {
    max-width: 880px;
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
}

/* Smal: foto boven de tekst, kleiner */
@media (max-width: 760px) {
    .landing .lp-auteur-head {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-top: 24px;
        padding-bottom: 48px;
    }
    .landing .lp-auteur-foto {
        order: -1;
        width: 140px;
        font-size: 56px;
        border-radius: 10px;
    }
    .landing .lp-auteur-item {
        grid-template-columns: 1fr;
        grid-template-areas: "titel" "tekst" "meta";
        padding: 20px 0;
    }
    .landing .lp-auteur-item .lp-blog-meta {
        padding-top: 8px;
    }
    .landing .lp-auteur-item .lp-blog-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .landing .lp-auteur-item .lp-auteur-meta-naam {
        margin-bottom: 0;
    }
    .landing .lp-auteur-item .lp-blog-meta > * + *::before {
        content: "·";
        margin: 0 6px;
    }
    .landing .lp-auteur-item h3 {
        font-size: 17px;
    }
}