/* DocsLayout + HomeLayout templates. Specs: component-specs/{docs-layout,home-layout}.md */

/* ---------- DocsLayout ---------- */
.docs-layout {
    --content-gap: 76px;
    --page-top-padding: 24px;

    display: grid;
    grid-template-columns: 1fr minmax(0, 250px);
    column-gap: var(--content-gap);
    max-width: 1024px;
    margin-inline: auto;
    padding-inline: max(env(safe-area-inset-left), 24px) max(env(safe-area-inset-right), 24px);
    padding-block: var(--page-top-padding) 48px;
}

.docs-layout-content {
    --prose-max-width: 680px;

    min-width: 0;
}

@media (width <= 1024px) {
    .docs-layout {
        grid-template-columns: 1fr;
    }

    .docs-layout-toc {
        display: none;
    }
}

@media (width <= 999px) {
    .docs-layout-content {
        --prose-max-width: none;
    }
}

/* ---------- HomeLayout ---------- */
.home-layout {
    max-width: 1024px;
    margin-inline: auto;
    padding-inline: max(env(safe-area-inset-left), 24px) max(env(safe-area-inset-right), 24px);
    padding-block: 48px 64px;
}

.home-layout-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 1006px;
}

@media (width <= 999px) {
    .home-layout-inner {
        max-width: none;
    }
}

/* ---------- Page shell grid (chrome level) ----------
 * Hub (site)/layout: sticky TopNav in normal flow, then a two-column grid —
 * 280px sticky sidebar + content main. Verified against layout.module.css. */
.page-shell {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
}

.page-shell-main {
    min-width: 0;
}

@media (width <= 999px) {
    .page-shell {
        grid-template-columns: 1fr;
    }
}