/* ==========================================================================
   XJMU /blog-post single page — depends on design-system.css tokens.
   ========================================================================== */

/* ---------- hero + breadcrumb ---------- */
.bp-hero {
    background: linear-gradient(90deg, rgba(9,28,50,.92) 0%, rgba(9,28,50,.62) 55%, rgba(9,28,50,.38) 100%), url('../images/campus2.webp') center/cover no-repeat;
    color: #fff;
    min-height: clamp(260px, 34vw, 360px);
    display: flex; align-items: center;
    padding: clamp(2.5rem, 6vw, 4rem) 0;
    text-align: left;
}
.bp-hero h1 { color:#fff; font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; margin: .3rem 0 .8rem; line-height: 1.25; max-width: 900px; margin-left:auto; margin-right:auto; }
.bp-hero .bp-meta { color:#c3d2e6; font-size: .95rem; }
.bp-hero .bp-meta i { margin-right: .35rem; }
.bp-crumb { font-size:.85rem; color: var(--ds-muted); padding: 1rem 0 0; }
.bp-crumb a { color: var(--ds-navy); text-decoration: none; }
.bp-crumb a:hover { text-decoration: underline; }
.bp-crumb span[aria-hidden] { color: var(--ds-muted); }

/* ---------- article shell ---------- */
.bp-wrap { padding: 2.5rem 0 3.5rem; }
.bp-article { max-width: 820px; margin: 0 auto; }
.bp-featured {
    margin: 0 0 2rem;
    border-radius: var(--ds-r-lg) !important; overflow: hidden;
    box-shadow: var(--ds-shadow-sm); border: 1px solid var(--ds-line);
}
.bp-featured { background: #fff; }
.bp-featured img { width: 100%; max-height: 440px; object-fit: contain; display: block; margin: 0 auto; }

.bp-badge {
    display: inline-block; background: var(--ds-red); color: #fff;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: .3rem .7rem; border-radius: var(--ds-r-pill) !important; margin-bottom: .9rem;
}
.bp-excerpt {
    color: var(--ds-body); font-size: 1.1rem; line-height: 1.6;
    border-left: 3px solid var(--ds-red); padding-left: 1rem;
    margin: 0 0 1.6rem; font-style: normal;
}
.bp-divider { border: 0; border-top: 1px solid var(--ds-line); margin: 0 0 1.8rem; }

/* ---------- authored HTML body ---------- */
.post-body { color: var(--ds-body); font-size: 1.05rem; line-height: 1.85; }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 {
    font-family: var(--ds-font-display); color: var(--ds-ink);
    font-weight: 800; line-height: 1.3; margin: 2rem 0 .8rem;
}
.post-body h2 { font-size: 1.6rem; }
.post-body h3 { font-size: 1.3rem; }
.post-body h4 { font-size: 1.1rem; }
.post-body p { margin: 0 0 1.2rem; }
.post-body a { color: var(--ds-navy); text-decoration: underline; }
.post-body a:hover { color: var(--ds-red); }
.post-body ul, .post-body ol { margin: 0 0 1.2rem; padding-left: 1.5rem; }
.post-body li { margin-bottom: .5rem; }
.post-body img {
    max-width: 100%; height: auto; display: block; margin: 1.5rem 0;
    border-radius: var(--ds-r-lg) !important; box-shadow: var(--ds-shadow-sm);
}
.post-body blockquote {
    margin: 1.5rem 0; padding: .8rem 1.2rem;
    border-left: 4px solid var(--ds-navy); background: var(--ds-bg-soft);
    color: var(--ds-ink); border-radius: var(--ds-r-sm) !important;
}
.post-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.post-body th, .post-body td { border: 1px solid var(--ds-line); padding: .7rem .9rem; text-align: left; }
.post-body th { background: var(--ds-navy-050); color: var(--ds-ink); font-weight: 700; }
.post-body code { background: var(--ds-bg-soft); padding: .1rem .4rem; border-radius: var(--ds-r-sm) !important; font-size: .92em; }
.post-body img { }

/* ---------- back link ---------- */
.bp-back { text-align: center; margin-top: 2.5rem; }

/* ---------- 404 fallback ---------- */
.bp-404 { text-align: center; padding: 4rem 1.5rem; }
.bp-404 h1 { font-family: var(--ds-font-display); font-size: 4rem; font-weight: 800; color: var(--ds-navy); margin: 0; }
.bp-404 p { color: var(--ds-muted); font-size: 1.1rem; margin: .5rem 0 1.5rem; }