---
// SectionGrid — the gap:1px hairline-separated card grid. Used by /models/'
// LOW/MEDIUM/HIGH cards and /agents/' FRAME/HAND OFF/PROVE cards.
//
// The separator technique is deliberate house style: `gap:1px` over a
// coloured parent background fakes borders without `border` shorthand. The
// child fills its background to cover the parent's 1px seam.
//
// Each direct child is expected to be a card — the markup pattern from
// chapters.css:
//   <article class="card"><b>LABEL</b><h2>Title</h2><p>Body</p></article>
// The component styles `> .card` and its internals so callers don't repeat.

interface Props {
  /** Number of columns at the widest breakpoint. */
  columns?: number;
}

const { columns = 3 } = Astro.props;
---

<section class="grid" style={`--columns: ${columns}`}>
  <slot />
</section>

<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: 1px; /* hairline separators, drawn by the parent background */
    background: var(--line);
    border: 1px solid var(--line);
    margin-bottom: 100px;
  }

  /* Children paint their own background, which is what makes the 1px seam
     show. */
  .grid > :global(.card) {
    min-height: 220px;
    padding: 28px;
    background: var(--paper);
  }

  .grid > :global(.card) :global(b) {
    color: var(--red);
    /* UNRESOLVED: legacy 24px fixed from chapters.css. No token matches.
       Reported in task 09 report. */
    font-size: clamp(24px, 24px, 24px);
    font-family: ui-monospace, monospace;
  }

  .grid > :global(.card) :global(h2) {
    margin: 18px 0 8px;
    /* UNRESOLVED: legacy 25px fixed from chapters.css. --step-5 (clamp
       24-38px) is the closest token but grows at wide viewports; clamp
       keeps the legacy fixed size. Reported in task 09 report. */
    font-size: clamp(25px, 25px, 25px);
    letter-spacing: -0.04em;
  }

  .grid > :global(.card) :global(p) {
    margin: 0 0 14px;
    color: var(--muted);
  }

  .grid > :global(.card) :global(a) {
    color: var(--blue);
    font-weight: 700;
  }

  @media (max-width: 800px) {
    .grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 560px) {
    .grid > :global(.card) {
      min-height: 0;
    }
  }
</style>
