/* cleopatra — layout primitives: prose+breakout grid, stack, cluster, grid, chrome */

@layer layout {
  /* prose + breakout grid — the core primitive.
     Default: column left-aligned within the centered --canvas
     (Engadget model: content left, rail space right).
     [data-column="center"] on <html> centers the column instead.
     Children default to the content track (--measure);
     .breakout widens, .full-bleed spans the viewport,
     .hero = breakout on desktop, full-bleed on mobile. */
  article, .prose {
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--gutter), calc((100% - var(--canvas)) / 2))
      [breakout-start content-start] min(100% - 2 * var(--gutter), var(--measure))
      [content-end] minmax(0, calc(var(--breakout) - var(--measure))) [breakout-end]
      minmax(var(--gutter), 1fr) [full-end];
  }
  [data-column="center"] article, [data-column="center"] .prose {
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [breakout-start] minmax(0, calc((var(--breakout) - var(--measure)) / 2))
      [content-start] min(100% - 2 * var(--gutter), var(--measure)) [content-end]
      minmax(0, calc((var(--breakout) - var(--measure)) / 2)) [breakout-end]
      minmax(var(--gutter), 1fr) [full-end];
  }
  article > *, .prose > * { grid-column: content; min-width: 0; }
  .breakout { grid-column: breakout; }
  .full-bleed { grid-column: full; }
  .hero { grid-column: breakout; }
  @media (max-width: 640px) {
    .hero { grid-column: full; }
  }
  .full-bleed img, .hero img { border-radius: 0; }

  main { margin-block: var(--space-6); flex: 1 0 auto; }

  /* vertical flow for components (prose uses rlh, not stack) */
  .stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }

  /* horizontal wrapping row: nav, bylines, tags */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-3));
  }

  /* auto-fit grid shell */
  .grid {
    display: grid;
    gap: var(--grid-gap, var(--space-4));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
  }

  /* site chrome */
  body > header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--surface);
    border-block-end: 1px solid var(--border);
  }
  body > header > nav {
    max-width: var(--canvas);
    margin-inline: auto;
    padding: var(--space-3) var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--step--1);
  }
  body > header a { text-decoration: none; color: var(--text); }
  body > header a:hover { color: var(--accent); }

  body > footer {
    margin-block-start: var(--space-7);
    border-block-start: 1px solid var(--border);
    padding: var(--space-5) var(--gutter);
    font-size: var(--step--1);
    color: var(--text-muted);
  }
  body > footer > * { max-width: var(--canvas); margin-inline: auto; }
}