/* ═════════════════════════════════════════════════════════════════
   Docs layout — page scaffolding and two-column layout

   Centred content area with side padding to clear the
   truss columns, plus a flex-based sidebar+content split.
   ═════════════════════════════════════════════════════════════════ */

.docs-wrapper {
    margin: 0 auto;
    padding: 0 calc(var(--truss-col-width) + 4rem) 3rem;

    /* Below-breakpoint gutter: keeps the sidebar the same
       distance from the page edge as it is from the content. */
    --docs-mobile-gutter: 1rem;
}

.docs-page-title {
    font-size: clamp(22px, 3vw, 36px);
    font-weight: 800;
    margin: 1rem 0 1.5rem;
    color: var(--purple-dark);
}

.docs-lead {
    font-size: clamp(13px, 1.1vw, 17px);
    margin-bottom: 2rem;
    color: var(--purple-mid);
}

/* Two-column: sticky sidebar + scrollable content */
.docs-layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.docs-content {
    flex: 1;
    min-width: 0;
}

/* ── Responsive ──────────────────────────────────────
   Main breakpoint (≤1000px): truss columns are gone, so
   the wrapper no longer needs side padding for them. */
@media (max-width: 1000px) {
    .docs-wrapper {
        padding: 0 var(--docs-mobile-gutter) 2rem;
    }

    /* Sidebar-to-content gap matches the sidebar-to-edge gap */
    .docs-layout {
        gap: var(--docs-mobile-gutter);
    }
}