/* ==========================================================================
   XJMU legal pages (/privacy, /terms) — depends on design-system.css tokens.
   ========================================================================== */

/* ---------- hero ---------- */
.legal-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;
}
.legal-hero h1 { color:#fff; font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; margin: .3rem 0 .8rem; }
.legal-hero p { color:#c3d2e6; max-width: 640px; margin: 0; font-size: 1.08rem; line-height: 1.65; }

/* ---------- breadcrumb ---------- */
.legal-crumb { font-size:.85rem; color: var(--ds-muted); padding: 1rem 0 0; }
.legal-crumb a { color: var(--ds-navy); text-decoration: none; }
.legal-crumb a:hover { text-decoration: underline; }

/* ---------- legal body ---------- */
.legal-body {
    max-width: 820px;
    margin: 0 auto;
    color: var(--ds-body);
    font-size: 1.02rem;
    line-height: 1.8;
}
.legal-body h2 {
    font-family: var(--ds-font-display);
    color: var(--ds-ink);
    font-size: 1.35rem;
    font-weight: 700;
    margin: 2.2rem 0 .7rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--ds-line);
}
.legal-body h3 {
    font-family: var(--ds-font-display);
    color: var(--ds-ink);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1.6rem 0 .5rem;
}
.legal-body h2:first-child,
.legal-body h3:first-child { margin-top: 0; }
.legal-body p { margin: 0 0 1rem; }
.legal-body ul,
.legal-body ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.legal-body li { margin-bottom: .5rem; }
.legal-body a {
    color: var(--ds-navy);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--ds-line);
    transition: var(--ds-t);
}
.legal-body a:hover { color: var(--ds-red); border-bottom-color: var(--ds-red); }
