---
// Rule — the gold-top-border section divider. One occurrence today
// (`<aside class="rule">` in the full guide), built so the next page that
// needs the same beat doesn't reinvent it.
//
// Layout is a 150px label column + body, matching `styles.css`'s `.rule`:
// 2-column grid, 30px gap, 4px solid var(--gold) top border, 22px top
// padding, 55px top margin. The body expects a single `<strong>` to carry
// the `clamp(24px, 3.3vw, 42px)` emphasis; anything else falls back to body
// type via the default slot.

interface Props {
  /** Short uppercase label, same treatment as Eyebrow but rendered as a
   *  `<span>` so it can live inside an `<aside>`. */
  label: string;
  /** Colour tone for the label. */
  tone?: 'accent' | 'gold' | 'red';
}

const { label, tone = 'accent' } = Astro.props;
---

<aside class="rule">
  <span class:list={['label', `tone-${tone}`]}>{label}</span>
  <div class="body"><slot /></div>
</aside>

<style>
  .rule {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 30px;
    margin-top: 55px;
    padding-top: 22px;
    border-top: 4px solid var(--gold);
  }

  .label {
    font:
      600 var(--step-0) 'DM Mono',
      monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* The body renders the slot verbatim; the strong treatment that the source
     markup uses is set here so the call site can just write <strong>…</strong>. */
  /* UNRESOLVED — clamp(24px,3.3vw,42px) is verbatim from `styles.css`, but no
     token covers it. Needs one from design-system-keeper; see
     .agents/rules/gates.md on reporting token gaps rather than inventing. */
  .body :global(strong) {
    max-width: 850px;
    font-size: clamp(24px, 3.3vw, 42px);
    line-height: 1.12;
  }

  .tone-accent {
    color: var(--accent);
  }
  .tone-gold {
    color: var(--gold);
  }
  .tone-red {
    color: var(--red);
  }

  @media (max-width: 800px) {
    .rule {
      grid-template-columns: 1fr;
    }
  }
</style>
