/*
 * MoreBiography — biography component styles
 * Loaded only on biography singles & archives (see functions.php).
 * Tokens (--mb-*) are defined in the child theme style.css.
 */

/* ───────────────────────────── Utilities ─────────────────────────────────── */

.mb-clear { clear: both; }

.mb-section { margin: 2.75rem 0 0; }

.mb-section__title {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0 0 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--mb-line-soft);
    color: #17202f;
}

.mb-section__title::before {
    content: "";
    flex: 0 0 auto;
    width: 5px;
    height: 1.2em;
    margin-top: .08em;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--mb-accent), var(--mb-green));
}

/* ───────────────────────────── Short answer ──────────────────────────────── */

.mb-short-answer {
    background: linear-gradient(135deg, #eef6ff 0, #ffffff 100%);
    border: 1px solid #cfe0f1;
    border-left: 5px solid var(--mb-accent);
    border-radius: var(--mb-radius);
    box-shadow: 0 10px 26px rgba(11, 83, 148, .08);
    padding: 1.1rem 1.25rem;
    margin: 0 0 1.75rem;
}

.mb-short-answer__label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--mb-accent-dark);
    margin: 0 0 .35rem;
}

.mb-short-answer__text { margin: 0; }
.mb-short-answer__text p:last-child { margin-bottom: 0; }

/* ───────────────────────────── Infobox ───────────────────────────────────── */

.mb-infobox {
    position: sticky;
    top: 90px;
    float: right;
    width: 320px;
    max-width: 40%;
    margin: 0 0 1.25rem 1.75rem;
    border: 1px solid var(--mb-line-soft);
    border-radius: var(--mb-radius);
    background: #fff;
    box-shadow: 0 18px 38px rgba(19, 34, 52, .12);
    overflow: hidden;
    font-size: .9rem;
    box-sizing: border-box;
}

.mb-infobox__title {
    margin: 0;
    padding: .75rem 1rem;
    font-size: 1.05rem;
    line-height: 1.3;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--mb-accent-dark), var(--mb-accent));
}

.mb-infobox__figure { margin: 0; }

.mb-infobox__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
}

.mb-infobox__caption {
    padding: .5rem 1rem;
    font-size: .78rem;
    color: var(--mb-muted);
    text-align: center;
    background: var(--mb-bg-soft);
}

.mb-infobox__badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--mb-line-soft);
}

.mb-badge {
    display: inline-block;
    padding: .2rem .6rem;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 999px;
    color: var(--mb-accent-dark);
    background: var(--mb-accent-soft);
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.mb-badge:nth-child(2) {
    color: #1e5a4e;
    background: #edf8f4;
}

.mb-badge:nth-child(3) {
    color: #704d0d;
    background: #fff6df;
}

.mb-badge:hover {
    color: #fff;
    background: var(--mb-accent);
}

.mb-infobox__facts {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0;
}

.mb-infobox__facts tr { border-bottom: 1px solid var(--mb-line-soft); }
.mb-infobox__facts tr:last-child { border-bottom: 0; }

.mb-infobox__facts th,
.mb-infobox__facts td {
    padding: .65rem .9rem;
    text-align: left;
    vertical-align: top;
}

.mb-infobox__facts th {
    width: 36%;
    font-weight: 600;
    color: var(--mb-muted);
    background: #f8fafc;
    overflow-wrap: normal;
    word-break: normal;
}

.mb-infobox__facts td {
    color: var(--mb-ink);
    overflow-wrap: break-word;
    word-break: normal;
}

.mb-infobox__social {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .75rem 1rem;
    border-top: 1px solid var(--mb-line-soft);
}

.mb-social {
    display: inline-flex;
    align-items: center;
    padding: .25rem .65rem;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
    background: var(--mb-accent);
    transition: opacity .15s ease;
}

.mb-social:hover { opacity: .85; }

.mb-social--x         { background: #000; }
.mb-social--instagram { background: #c13584; }
.mb-social--facebook  { background: #1877f2; }
.mb-social--youtube   { background: #ff0000; }
.mb-social--tiktok    { background: #010101; }
.mb-social--linkedin  { background: #0a66c2; }
.mb-social--imdb      { background: #e6b91e; color: #000; }
.mb-social--website   { background: var(--mb-accent-dark); }

/* ───────────────────────────── Breadcrumbs ───────────────────────────────── */

.mb-breadcrumbs {
    margin: 0 0 1.25rem;
    font-size: .88rem;
    color: var(--mb-muted);
}

.mb-breadcrumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
}

.mb-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
}

.mb-breadcrumbs__item:not(:last-child)::after {
    content: "\203A"; /* › */
    margin-left: .5rem;
    color: var(--mb-line);
}

.mb-breadcrumbs__link {
    color: var(--mb-accent-dark);
    text-decoration: none;
}

.mb-breadcrumbs__link:hover { text-decoration: underline; }

.mb-breadcrumbs__current {
    color: var(--mb-muted);
    font-weight: 600;
}

/* ───────────────────────────── FAQ ───────────────────────────────────────── */

.mb-faq__item {
    border: 1px solid var(--mb-line-soft);
    border-radius: var(--mb-radius);
    margin-bottom: .6rem;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(19, 34, 52, .04);
}

.mb-faq__question {
    cursor: pointer;
    list-style: none;
    padding: .85rem 2.5rem .85rem 1rem;
    font-weight: 600;
    position: relative;
}

.mb-faq__question::-webkit-details-marker { display: none; }

.mb-faq__question::after {
    content: "+";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--mb-accent);
    transition: transform .2s ease;
}

.mb-faq__item[open] .mb-faq__question::after {
    content: "\2212"; /* minus */
}

.mb-faq__item[open] .mb-faq__question {
    border-bottom: 1px solid var(--mb-line-soft);
}

.mb-faq__answer { padding: .85rem 1rem; }
.mb-faq__answer p:last-child { margin-bottom: 0; }

/* ───────────────────────────── References ────────────────────────────────── */

.mb-references__list {
    padding-left: 1.4rem;
    font-size: .92rem;
    color: var(--mb-muted);
}

.mb-references__list li {
    margin-bottom: .5rem;
    word-break: break-word;
}

/* ───────────────────────────── Related terms ─────────────────────────────── */

.mb-related-terms__list { margin: 0; }

.mb-related-terms__list dt {
    font-weight: 700;
    color: var(--mb-ink);
    margin-top: 1rem;
}

.mb-related-terms__list dt:first-child { margin-top: 0; }

.mb-related-terms__list dd {
    margin: .15rem 0 0;
    color: var(--mb-muted);
}

/* ───────────────────────────── Related biographies ───────────────────────── */

.mb-related__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1.1rem;
}

.mb-related__card { margin: 0; }

.mb-related__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--mb-line-soft);
    border-radius: var(--mb-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--mb-ink);
    background: #fff;
    box-shadow: 0 8px 18px rgba(19, 34, 52, .04);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.mb-related__link:hover {
    border-color: #cbd6e2;
    box-shadow: 0 16px 28px rgba(19, 34, 52, .10);
    transform: translateY(-2px);
}

.mb-related__media {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--mb-accent-soft);
}

.mb-related__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mb-related__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--mb-accent);
}

.mb-related__name {
    display: block;
    padding: .6rem .7rem;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
}

/* ───────────────────────────── Table of contents ─────────────────────────── */

.mb-toc {
    display: flow-root;
    border: 1px solid #d8e6f3;
    border-left: 5px solid var(--mb-accent);
    border-radius: var(--mb-radius);
    background: #f7fbff;
    padding: 1rem 1.25rem;
    margin: 0 0 1.75rem;
    font-size: .92rem;
}

.mb-toc__title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--mb-muted);
    margin: 0 0 .6rem;
}

.mb-toc__list { margin: 0; padding-left: 1.2rem; }
.mb-toc__list ol { padding-left: 1.2rem; margin: .3rem 0; }
.mb-toc__list li { margin: .25rem 0; }

.mb-toc a {
    text-decoration: none;
    color: var(--mb-accent-dark);
}

.mb-toc a:hover { text-decoration: underline; }

/* ───────────────────────────── Pillar content ────────────────────────────── */

.mb-pillar-content {
    margin: 0 0 2.5rem;
    padding: 2rem 2.25rem;
    background: #f8fafc;
    border: 1px solid var(--mb-line-soft);
    border-radius: var(--mb-radius);
}

.mb-pillar-content h2:first-child,
.mb-pillar-content h3:first-child {
    margin-top: 0;
}

.mb-pillar-content h2 {
    font-size: 1.6rem;
    margin: 0 0 1rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid var(--mb-line);
}

.mb-pillar-content h3 {
    font-size: 1.15rem;
    margin: 1.75rem 0 .5rem;
    color: var(--mb-accent-dark);
}

.mb-pillar-content p {
    line-height: 1.75;
    margin: 0 0 1rem;
    color: var(--mb-ink);
}

.mb-pillar-content p:last-child {
    margin-bottom: 0;
}

/* ───────────────────────────── Archive grid ──────────────────────────────── */

.mb-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.25rem;
}

/* Each GeneratePress archive <article> becomes a compact card. */
.mb-archive-grid .post {
    margin: 0;
    border: 1px solid var(--mb-line-soft);
    border-radius: var(--mb-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 18px rgba(19, 34, 52, .04);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.mb-archive-grid .post:hover {
    border-color: #cbd6e2;
    box-shadow: 0 16px 28px rgba(19, 34, 52, .10);
    transform: translateY(-2px);
}

.mb-archive-grid .inside-article { padding: 0; }

.mb-archive-grid .post-image,
.mb-archive-grid .featured-image {
    margin: 0;
}

.mb-archive-grid .post-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.mb-archive-grid .entry-header {
    padding: .7rem .8rem;
}

.mb-archive-grid .entry-title {
    font-size: .95rem;
    line-height: 1.3;
    margin: 0;
}

.mb-archive-grid .entry-title a { text-decoration: none; }

/* Trim everything that doesn't belong on a compact card. */
.mb-archive-grid .entry-summary,
.mb-archive-grid .entry-meta,
.mb-archive-grid .entry-content,
.mb-archive-grid .read-more-container,
.mb-archive-grid .post-meta-tags {
    display: none;
}

/* ───────────────────────────── Responsive ────────────────────────────────── */

@media (max-width: 768px) {
    .mb-infobox {
        position: static;
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 1.5rem;
    }

    .mb-infobox__facts th,
    .mb-infobox__facts td {
        padding: .6rem .75rem;
    }

    .mb-archive-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 1rem;
    }
}