/* ============================================================
   .page-shell — proposed canonical page wrapper (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the per-page wrappers across production:
     .tools-page              -> .page-shell
     .education-page          -> .page-shell.page-shell--full
     .locations-page          -> .page-shell.page-shell--full
     .location-detail-page    -> .page-shell.page-shell--full
     .product-news-page       -> .page-shell.page-shell--full
     .privacy-page            -> .page-shell.page-shell--hero.page-shell--full
     /pricing (no wrapper today; .price-hero owns offset)
                              -> .page-shell.page-shell--flush
     .docs-layout (flex sidebar layout)  -> stays bespoke (out of scope)

   Sets the page-level top offset under the fixed nav bar. Does NOT add
   max-width or horizontal padding (that is .container's job). Does NOT
   carry background — body gradient is global.

   Slots:
     .page-shell                page wrapper, content-page default top offset
       (default content-page) —— var(--layout-page-top) (80px / 64px mobile)

   Modifiers:
     --hero       hero-led page; top offset var(--layout-hero-top) (120 / 96 mobile)
     --flush      first child is a hero that owns its own offset; just clear the nav
                  -> top offset var(--layout-nav-height) (64px)
     --full       opt in to min-height: 100vh (most prod pages set this today)
   ============================================================ */

.page-shell {
    padding-top: var(--layout-page-top);
}

.page-shell--hero {
    padding-top: var(--layout-hero-top);
}

.page-shell--flush {
    padding-top: var(--layout-nav-height);
}

.page-shell--full {
    min-height: 100vh;
}

@media (max-width: 768px) {
    .page-shell {
        padding-top: var(--layout-page-top-mobile);
    }

    .page-shell--hero {
        padding-top: var(--layout-hero-top-mobile);
    }
}