---
/**
 * docs/02: "Three or four credential slots. NEVER matter counts — AGENTS.md §4."
 *
 * THE SUBSTITUTION PRINCIPLE IS THE POINT OF THIS COMPONENT (§4). Wherever a
 * design wants a "how much / how many", it takes a longer-arc credential
 * instead: something already substantial and true at launch that does not grow
 * by closing files. `Q.Med` / `JD + ML` / `EN · FA`, with `Q.Arb` fourth.
 *
 * So this component is not a stat row wearing a different name, and it must
 * never be handed one. §4 Forbidden bars every count of matters closed, hours
 * mediated or years in practice, plus settlement rates and dollar figures. The
 * slots come from src/data/site.ts, which mirrors §4; nothing is typed here.
 *
 * <dl> RATHER THAN A DIV GRID. Each pair is a term and its description, which
 * is what a description list is, and it fixes the reading order: a screen
 * reader gets "Q.Arb — ADRIC / ADRIO" as one associated pair rather than four
 * values then four labels. Wrapping each dt/dd pair in a <div> inside <dl> is
 * valid HTML and is what makes the grid tractable.
 */
interface Props {
  slots: ReadonlyArray<{ value: string; label: string }>;
}
// No `class` prop: it was declared, never passed, and a parent cannot reach this
// root anyway (SectionHeading carries the measurement; CLAUDE.md the rule).
const { slots } = Astro.props;
---

<dl class="credentials">
  {
    slots.map((slot) => (
      <div class="credential">
        <dt class="credential-value">{slot.value}</dt>
        <dd class="credential-label">{slot.label}</dd>
      </div>
    ))
  }
</dl>

<style>
  .credentials {
    display: grid;
    /* EXPLICIT COLUMNS, BECAUSE `auto-fit` NEVER DELIVERED THE ROW IT CLAIMED.
       This read `repeat(auto-fit, minmax(11rem, 1fr))` under a comment saying
       "two up on a phone, four up where there is room". `adversarial-reviewer`
       measured it: at 390px the resolved template was a SINGLE 342px track and
       all four items stacked, running the band ~430px tall. The longest label in
       the row is and remains `Legal training and engineering practice` (Q37, 39
       chars — see below), which is what drives the track; the fourth slot's
       label went from `Commenced August 2026` (21) to `ADRIC / ADRIO
       designation` (25), so it got slightly LONGER and is still well inside
       that 39. *(A previous version of this comment said "shorter". It was not
       measured; `claims-auditor` counted the characters.)* The arithmetic is not
       subtle: two
       tracks at an 11rem (176px) floor plus a 24px gap need 376px and the
       container is 342px, so `auto-fit` correctly dropped to one. A
       measured-sounding comment that was false is this project's own named
       failure mode.

       `minmax(0, 1fr)` means the TRACK cannot overflow at any width or any root
       font size, which retires the `min(11rem, 100%)` guard this line briefly
       carried — that guard was fixing the overflow symptom of a floor that
       should not have been there. ⚠️ **THE TRACK IS NOT THE CONTENT:** a label's
       own words can overflow the track, and at a 200% default font size they
       did. That is why `.credential-label` below carries `overflow-wrap`. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
    margin: 0;
    padding-block: var(--space-7);
    border-block: 1px solid var(--rule);
  }
  .credential {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .credential-value {
    font-family: var(--font-serif);
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--accent);
  }
  /* Four across only where four actually fit, measured rather than inferred.
     Two 11rem-equivalent tracks plus three 24px gaps need 776px of container;
     above 48rem the gutter is 48px each side, so that is a 872px viewport. 56rem
     (896px) is the clean token above it. Re-measure if --space-5 or the label
     type changes. */
  @media (min-width: 56rem) {
    .credentials {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .credential-label {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    line-height: var(--leading-snug);
    text-transform: uppercase;
    color: var(--text-meta);
    /* "Legal training and engineering practice" is 39 characters and is
       deliberately long (AGENTS.md Q37) — it wraps to two lines at every width
       and must not be prevented from doing so. Do not add `white-space: nowrap`
       here, and do not shorten the label to make the row tidier: the asymmetry
       is the honest part. ⚠️ `overflow-wrap: anywhere` is LOAD-BEARING here, not
       cosmetic — `anywhere`, not `break-word`: see `docs/02` §Reflow, instrument
       finding 1. */
    text-wrap: pretty;
    overflow-wrap: anywhere;
  }
</style>