/* =========================================================================
   layout.css — page shell, landmarks, containers, responsive grid.
   All spacing uses LOGICAL properties so the layout mirrors correctly in RTL.
   ========================================================================= */

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 48rem) {
  .container { padding-inline: var(--space-6); }
}

/* ---- Page shell: header / (sidebar + main) / footer ---- */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: var(--bg-elevated);
  border-block-end: var(--border-1) solid var(--border);
}
/* On short/zoomed viewports the sticky header must not eat the screen */
@media (max-height: 30rem) {
  .site-header { position: static; }
}

.site-main { flex: 1 1 auto; }

.site-footer {
  background: var(--bg-subtle);
  border-block-start: var(--border-1) solid var(--border);
  color: var(--text-muted);
}

/* ---- Docs layout: sidebar + content (collapses to single column) ---- */
.docs {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 64rem) {
  .docs {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    gap: var(--space-8);
  }
  .docs__sidebar {
    position: sticky;
    inset-block-start: calc(var(--space-8) + 3.5rem); /* below sticky header */
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
  }
}

/* Reading text stays at a comfortable measure, but the rich structural blocks
   (cards, callouts, tables, code, demos…) span the full content column so the
   page uses its width instead of leaving a big empty right margin. */
.docs__content { min-width: 0; } /* prevents grid blowout from <pre> */
.prose > * { max-width: var(--measure); }
.prose > pre,
.prose > table,
.prose > figure,
.prose > .full-bleed,
.prose > .ewa-issue,
.prose > .ewa-callout,
.prose > .ewa-table-wrap,
.prose > .ewa-code,
.prose > .ewa-compare,
.prose > .ewa-tabs,
.prose > .ewa-pager,
.prose > .grid,
.prose > .demo { max-width: none; }

/* ---- Simple responsive auto-grid for card galleries ---- */
.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

/* ---- Vertical rhythm helper (also exposed as utility) ---- */
.stack > * + * { margin-block-start: var(--flow, var(--space-4)); }

/* ---- Section spacing ---- */
.section { padding-block: var(--space-8); }
.section--tight { padding-block: var(--space-6); }