adr-sml/src/components/ArticleCard.astro

---
/**
 * docs/02: "Title, description, date, topic pills, reading time."
 *
 * ONE LINK, AND THE WHOLE CARD IS ITS HIT AREA — the `PracticeCard` pattern,
 * for the same measured reason: the link wraps only the headline, so its
 * accessible name is the headline rather than the card's four elements, and a
 * `::after` stretched over the positioned card carries the click. Three of these
 * on `/` would otherwise be three links each announcing a date, two pills, a
 * reading time and a 150-character description.
 *
 * THE PARENT MUST NOT TRY TO STYLE THIS ROOT. Astro does not pass a parent's
 * scope attribute to a child's root element, so a grid's `.card { block-size:
 * 100% }` compiles against the parent's cid and never matches — `CLAUDE.md`
 * records this costing twice, and names `ArticleCard` as one of the next places
 * it would happen. The card sizes itself below; a parent supplies only
 * `display: grid` and `gap` on its own element.
 *
 * `readingTime` IS RENDERED WITH ITS UNIT AND IS NOT A CLAIM ABOUT THE PRACTICE.
 * §4 Forbidden bars counts of matters, hours mediated and years in practice —
 * a number describing how long an article takes to read is not in that family,
 * and `check:claims`'s `counts-and-tenure` pattern is scoped to the practice.
 * Do not reach for a matter count, a settlement rate, or a case figure here.
 */
import Pill from './Pill.astro';
import { TOPIC_LABELS, formatArticleDate, isoDate } from '../data/insights';
import type { InsightTopic } from '../data/insights';

interface Props {
  href: string;
  title: string;
  description: string;
  date: Date;
  topics: readonly InsightTopic[];
  /** Minutes. */
  readingTime: number;
  /** Explicit: docs/02 forbids skipped heading levels. */
  level: 2 | 3;
}
const { href, title, description, date, topics, readingTime, level } =
  Astro.props;
const H = `h${level}` as 'h2' | 'h3';
---

<article class="acard">
  <div class="acard-meta">
    <time datetime={isoDate(date)}>{formatArticleDate(date)}</time>
    <span aria-hidden="true">·</span>
    <span>{readingTime} min read</span>
  </div>

  <H class="acard-title">
    <a class="acard-link" href={href}>{title}</a>
  </H>

  <p class="acard-desc">{description}</p>

  {
    topics.length > 0 && (
      <ul class="acard-topics" role="list">
        {topics.map((topic) => (
          <li>
            <Pill>{TOPIC_LABELS[topic]}</Pill>
          </li>
        ))}
      </ul>
    )
  }
</article>

<style>
  .acard {
    position: relative;
    /* Sizes itself to its cell — see the note on why the grid cannot. */
    block-size: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--bg);
    border: 1px solid var(--border);
    border-block-start: 2px solid var(--rule);
    border-radius: var(--radius-md);
    transition:
      border-color var(--dur-hover) var(--ease),
      box-shadow var(--dur-hover) var(--ease);
  }
  .acard:hover {
    border-color: var(--rule);
    box-shadow: var(--shadow-md);
  }

  .acard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-meta);
  }

  .acard-title {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
  }
  .acard-link {
    color: inherit;
    text-decoration: none;
  }
  /* The card-wide hit area. `inset: 0` on the positioned card, so the click
     target is the card and the accessible name stays the headline. */
  .acard-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  /* The ring has to be on the CARD, not on the inline text, or focus draws a
     box around two words in the middle of a clickable panel. */
  .acard-link:focus-visible {
    outline: none;
  }
  .acard-link:focus-visible::after {
    outline: 2px solid var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  .acard-desc {
    font-size: var(--text-base);
    line-height: var(--leading-body);
    color: var(--text-secondary);
  }

  .acard-topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    /* `margin-block-start: auto` pins the pills to the bottom of the card so a
       row of cards with different description lengths still aligns on them. */
    margin-block-start: auto;
    padding-block-start: var(--space-3);
  }
</style>