/*
 * Page layout — column-template catalog.
 *
 * Every product page is a column layout. Variants set the
 * `grid-template-columns` via the component-local `--page-layout-cols`
 * token; content (typically cards) slots into the columns.
 *
 * Shared vocabulary — name the layout by its column ratio:
 *
 *   .page-layout                  →   1 column at 100%        (default)
 *   .page-layout.page-layout--1-1 →   2 columns at 1/2 + 1/2
 *   .page-layout.page-layout--2-1 →   2 columns at 2/3 + 1/3
 *   .page-layout.page-layout--1-2 →   2 columns at 1/3 + 2/3
 *   .page-layout.page-layout--3-1 →   2 columns at 3/4 + 1/4
 *   .page-layout.page-layout--1-3 →   2 columns at 1/4 + 3/4
 *   .page-layout.page-layout--3-2 →   2 columns at 3/5 + 2/5
 *   .page-layout.page-layout--2-3 →   2 columns at 2/5 + 3/5
 *   .page-layout.page-layout--1-1-1 → 3 balanced columns
 *
 * Read aloud as "two-one" / "one-three" — the numbers are `fr` weights.
 * Add `--N-M-…` variants as new ratios surface (`--2-1-1` for main +
 * two sidebars, etc.). Avoid stretching an existing variant to fit a
 * new ratio.
 *
 * Responsive: every multi-column layout collapses to one stacked column
 * at the tablet breakpoint (≤900px, same as the sidebar drawer), so the
 * same markup works on mobile, tablet, and desktop.
 *
 * One-off ratios stay out of the catalog and use the component-local
 * token directly (Tailwind-style escape hatch):
 *
 *   <div class="page-layout" style="--page-layout-cols: 3fr 1fr 1fr">
 *
 * Use `style="…"` ONLY for a one-off; if the ratio repeats, name it.
 *
 * Pages compose a layout + cards:
 *
 *   <div class="page-layout page-layout--2-1">
 *     <div class="card">main content</div>
 *     <div class="card">additional info</div>
 *   </div>
 *
 * Empty slots deliberately read as air — they're reserved space for
 * future content (contextual help, filters, an assistant panel).
 */

@layer components {
  .page-layout {
    --page-layout-cols: 1fr;

    display: grid;
    gap: var(--space-6);
    padding: var(--space-8) clamp(1rem, 3vw, 2.5rem);
    grid-template-columns: var(--page-layout-cols);
  }

  .page-layout--1-1   { --page-layout-cols: 1fr 1fr; }
  .page-layout--2-1   { --page-layout-cols: 2fr 1fr; }
  .page-layout--1-2   { --page-layout-cols: 1fr 2fr; }
  .page-layout--3-1   { --page-layout-cols: 3fr 1fr; }
  .page-layout--1-3   { --page-layout-cols: 1fr 3fr; }
  .page-layout--3-2   { --page-layout-cols: 3fr 2fr; }
  .page-layout--2-3   { --page-layout-cols: 2fr 3fr; }
  .page-layout--1-1-1 { --page-layout-cols: 1fr 1fr 1fr; }

  /* Each column allows its children to overflow-wrap safely
   * (tables with long text, code blocks, etc.). */
  .page-layout > * {
    min-width: 0;
  }

  /* Responsive — collapse to a single stacked column at the tablet
     breakpoint. Sets `grid-template-columns` directly (not the token)
     so it wins over every ratio variant regardless of specificity.
     Breakpoint kept in sync with `page-with-sidebar.css`. */
  @media (max-width: 900px) {
    .page-layout {
      grid-template-columns: 1fr;
    }
  }
}