/* =============================================================================
   layout.css — global layout foundation
   Mobile-first. All values reference tokens — no raw numbers.

   Mobile reference:  393px
   Desktop reference: 1440px / 72px margins / 24px gutters
   (Desktop sidebar is position: fixed, positioned directly off the
   viewport — not a grid, not a flex-reserved column. .content-area reserves
   space with margin-left. See the "Alignment contract" comment above the
   @media block below.)

   Headers are two independent components — see:
     css/components/header-mobile.css  (visible below 1024px)
     css/components/header-desktop.css (visible at 1024px+)

   Page skeleton (applies to every page):
   ┌────────────────────────────────────────────────────────────┐
   │  .header-mobile  OR  .header-desktop  (fixed, mutually     │
   │  exclusive — only one is visible at any given breakpoint)  │
   ├──────────────┬──────────┬────────────────────────────────  │
   │ .site-sidebar│  [empty] │  .content-area                   │
   │  fixed,      │  offset  │  margin-left reserves the        │
   │  left: 72px  │  86px    │  sidebar + offset width           │
   │  width: 196px│          │  .breadcrumb                     │
   │              │          │  .page-header (.page-title)      │
   │              │          │  .page-main                      │
   │              │          │  .site-footer                    │
   └──────────────┴──────────┴──────────────────────────────────┘
   ============================================================================= */


/* =============================================================================
   BASE — Mobile (393px reference)
   ============================================================================= */

html,
body {
  min-height: 100%;
  background-color: var(--color-carbon);
  font-family: var(--font-family-base);
}

/* Page shell — full-height flex column */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
}


/* -----------------------------------------------------------------------------
   Page Body
   Wraps sidebar + content area.
   Mobile:  single-column flex, offset by fixed header height.
   Desktop: sidebar is position: fixed (out of flow); .page-body just clears
            the header and lets .content-area handle its own left margin.
            See @media block below.
   ----------------------------------------------------------------------------- */

.page-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: var(--layout-header-height);      /* clear fixed header (72px) */
}


/* -----------------------------------------------------------------------------
   Sidebar
   Hidden on mobile — activated on desktop as a fixed, viewport-anchored nav
   column at left: 72px, matching .header-desktop's padding-inline exactly.
   ----------------------------------------------------------------------------- */

.site-sidebar {
  display: none;
}


/* -----------------------------------------------------------------------------
   Content Area
   The scrollable zone that holds breadcrumb, page header, main, and footer.
   Mobile: full width with 24px horizontal padding.
   Desktop: margin-left reserves space for the fixed sidebar (see @media block).
   ----------------------------------------------------------------------------- */

.content-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-inline: var(--layout-margin);          /* 24px */
}


/* -----------------------------------------------------------------------------
   Breadcrumb
   Hidden on mobile; shown on desktop.
   ----------------------------------------------------------------------------- */

.breadcrumb {
  display: none;
}


/* -----------------------------------------------------------------------------
   Page Header
   Contains the page title and optional subtitle/status.
   Hidden on mobile — mobile uses .section-title-bar instead (see
   css/components/section-title-bar.css). Revealed on desktop (@media block
   below); typography and spacing are owned by css/components/page-header.css.
   ----------------------------------------------------------------------------- */

.page-header {
  display: none;
}


/* -----------------------------------------------------------------------------
   Page Main
   The page-specific content slot. Grows to fill remaining space.
   ----------------------------------------------------------------------------- */

.page-main {
  flex: 1;
}


/* -----------------------------------------------------------------------------
   Footer
   Height determined by content. Respects bottom safe-area on mobile.
   ----------------------------------------------------------------------------- */

.site-footer {
  padding-bottom: env(safe-area-inset-bottom);
}


/* =============================================================================
   DESKTOP — 1024px+
   Reveals the sidebar. Fills 100% of the viewport width — no max-width, no
   centering wrapper.

   Alignment contract — nav must land on the exact same x-axis as the logo:
   .header-desktop is `position: fixed; left: 0; right: 0` with
   `padding-inline: var(--layout-desktop-margin)` (72px), so the logo starts
   at x = 72px from the viewport's own left edge — not from any parent's
   content box, not from a grid track.

   .site-sidebar now uses the identical mechanism: `position: fixed` with
   `left: var(--layout-desktop-margin)` (the same 72px token). Both boxes are
   positioned directly off the viewport (the initial containing block), by
   the same literal value, with nothing in between — no parent padding, no
   flex-basis/calc reservation, no grid column, no inherited layout width.
   That is what guarantees the nav's first letters land under the logo's "V".

   .site-sidebar itself, and every element inside it that could carry an
   inherited/default inset (nav, ul, li, a), is explicitly zeroed out
   (margin: 0, padding-left: 0, text-align: left) so nothing downstream can
   reintroduce an offset.

   Because .site-sidebar is `position: fixed`, it's removed from the normal
   flow — .page-body no longer needs to "reserve" space for it via flex or
   grid. .content-area instead reserves that space itself, directly, with
   `margin-left`, and stays visually centered in the space that remains
   because its own children (e.g. .artwork-card) center themselves via
   margin-inline: auto — see css/components/artwork-card.css.
   ============================================================================= */

@media (min-width: 1024px) {

  /* Page shell — remove mobile safe-area lateral insets (sidebar/content manage their own) */
  .page {
    padding-left:  0;
    padding-right: 0;
  }

  /* ── Page Body ────────────────────────────────────────────────────────────── */
  /* .site-sidebar is position: fixed (removed from flow), so .page-body only
     needs to lay out .content-area — no grid, no flex row needed here. */

  .page-body {
    display: block;
    width: 100%;
    padding-top: var(--layout-desktop-header-height);   /* clear 80px fixed header */
  }

  /* ── Sidebar ──────────────────────────────────────────────────────────────── */
  /*
   * Positioned directly off the viewport — left: 72px, the same token
   * .header-desktop uses for padding-inline. See "Alignment contract" above.
   */

  .site-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: var(--layout-desktop-margin);              /* 72px — literal, viewport-relative, same token as .header-desktop */
    top: var(--layout-desktop-header-height);         /* 80px — flush below the fixed header */
    width: var(--layout-desktop-sidebar-width);       /* 196px */
    height: calc(100vh - var(--layout-desktop-header-height));
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    overflow-y: auto;
    z-index: 10;                                      /* stay above page content while scrolling */
  }

  /* Belt-and-suspenders: nothing inside the sidebar may carry its own inset. */
  .site-sidebar .nav-list,
  .site-sidebar .nav-list li,
  .site-sidebar .nav-list a {
    margin-left: 0;
    padding-left: 0;
    text-align: left;
  }

  /* ── Content Area ─────────────────────────────────────────────────────────── */
  /*
   * The sidebar is out of flow, so .content-area reserves its own left
   * margin: 72px inset + 196px nav column + 86px empty offset (matches the
   * original 1440px reference: sidebar cols 1–2 + offset col 3).
   */

  .content-area {
    margin-left: calc(
      var(--layout-desktop-margin) +
      var(--layout-desktop-sidebar-width) +
      var(--layout-desktop-offset-width)
    );                                               /* 354px */
    padding-inline: 0 var(--layout-desktop-margin);
    min-height: calc(100vh - var(--layout-desktop-header-height));
  }

  /* ── Breadcrumb: visible on desktop ──────────────────────────────────────── */

  .breadcrumb {
    display: block;
  }

  /* ── Page Header: visible on desktop ─────────────────────────────────────── */
  /*
   * display only — no padding/margin here. The 32px gap above this element
   * is .breadcrumb's own margin-bottom (css/components/breadcrumb.css); the
   * gap below it is .page-header's own margin-bottom (css/components/
   * page-header.css). Keeping both out of layout.css avoids the two rules
   * stacking into an unintended 64px gap.
   */

  .page-header {
    display: flex;
    flex-direction: column;
  }

  /* ── Footer ──────────────────────────────────────────────────────────────── */

  .site-footer {
    padding-bottom: 0;
  }

}


/* =============================================================================
   BREAKPOINT STUBS
   Activate as desktop layout is expanded to wider viewports.

   @media (min-width: 1280px) { ... }   wide desktop
   ============================================================================= */