/* ==========================================================================
   Page layout — the three-column shell shared by every public page.

     ≥1360px   left sidebar | content | right sidebar
     900–1359  left sidebar | content
     <900px    content only (sidebars fold into the header drawer)

   Column widths and gaps come from tokens.css. Pages that have no right
   rail add `.pb-shell--no-right`; pages that have no left rail add
   `.pb-shell--no-left`.
   ========================================================================== */
.pb-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  gap: var(--pb-gap);
  max-width: var(--pb-page-max);
  margin: 0 auto;
  padding: 16px 12px 96px; /* bottom room for the mobile tab bar */
}

.pb-rail {
  display: none;               /* hidden on mobile; the drawer carries the nav */
  flex-direction: column;
  gap: 18px;
  align-self: start;
  min-width: 0;
}
.pb-rail > * { flex: none; }
.pb-rail--left { gap: 12px; }

.pb-content {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  padding-top: 4px;
}

@media (min-width: 900px) {
  .pb-shell {
    padding: 20px 16px 48px;
    grid-template-columns: var(--pb-col-left) minmax(0, 1fr);
  }
  .pb-shell--no-left { grid-template-columns: minmax(0, 1fr); }
  .pb-rail--left { display: flex; }

  /* Both rails stay in view while the feed scrolls; if a rail is taller than the
     window it scrolls on its own (scrollbar hidden). Negative margin + padding keep
     card shadows from being clipped by the overflow. */
  .pb-rail--left,
  .pb-rail--right {
    position: sticky;
    top: calc(var(--pb-header-h) + 16px);
    max-height: calc(100vh - var(--pb-header-h) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    margin: -4px -8px 0;
    padding: 4px 8px 14px;
  }
  .pb-rail--left::-webkit-scrollbar,
  .pb-rail--right::-webkit-scrollbar { display: none; }
}

@media (min-width: 1360px) {
  .pb-shell { grid-template-columns: var(--pb-col-left) minmax(0, 1fr) var(--pb-col-right); }
  .pb-shell--no-right { grid-template-columns: var(--pb-col-left) minmax(0, 1fr); }
  .pb-shell--no-left.pb-shell--no-right { grid-template-columns: minmax(0, 1fr); }
  .pb-shell--no-left:not(.pb-shell--no-right) { grid-template-columns: minmax(0, 1fr) var(--pb-col-right); }
  .pb-rail--right { display: flex; }
}

/* Single-column pages (login, create post, etc.) */
.pb-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 20px 16px 64px; }

/* Phones: less air around the page */
@media (max-width: 899px) {
  .pb-shell { padding: 10px 10px 84px; gap: 12px; }
  .pb-content { padding-top: 0; }
}