{#-
  Compact reference card for a single documented element (a member, submodule,
  or related symbol). Used by the function/class member overview macros and the
  module symbol rail. Renders the element's kind as the card eyebrow and a
  truncated description as the body.

  Markup matches autodoc/partials/cards.html so `.chirp-theme-reference-card`
  grid placement works. Do not wrap in `resource_card` — the chirpui card DOM
  does not map to the reference-card grid columns and stacks every child on its
  own row.

  `href` is FORCED to an in-page anchor (`#{{ name }}`) rather than using
  `element.href`/`element.url`. Bengal's autodoc `compute_element_urls` sets
  `element.href` to a navigable-looking `/api/<module>/<member>/` path, but that
  page is never built — members render as anchor sections on the parent module
  page (the detail accordion uses `id="{{ name }}"`). Linking to the computed
  href produces ~89 H101 broken internal links; the symbol rail already uses the
  `#name` form and does not trip H101. A Bengal-core issue will be filed for the
  dangling-href trap in `compute_element_urls`.
-#}

{% def element_card(element, kind=none) %}
{% let name = element?.name ?? element?.title ?? "Reference" %}
{% let card_kind = kind ?? element?.element_type ?? element?.type ?? "member" %}
{% let href = '#' ~ (element?.name ?? element?.title ?? 'reference') %}
{% let description = element?.description ?? element?.summary ?? none %}
{% let kind_icon = "cube" if card_kind == "class" else ("function" if card_kind in ["function", "method", "async function"] else "code") %}
<a href="{{ href }}"
   class="chirp-theme-reference-card chirp-theme-reference-card--symbol"
   data-chirp-theme-reference-kind="{{ card_kind }}"
   title="{{ name }}">
  <span class="chirp-theme-reference-card__mark" aria-hidden="true">{{ icon(kind_icon, size=16) }}</span>
  <span class="chirp-theme-reference-card__eyebrow">{{ card_kind }}</span>
  <strong class="chirp-theme-reference-card__title">{{ name }}</strong>
  {% if description %}
  <div class="chirp-theme-reference-card__description">{{ description |> markdownify |> truncatewords_html(24, '…') |> safe }}</div>
  {% end %}
  <span class="chirp-theme-reference-card__footer">
    <span>Jump to symbol</span>
    {{ icon('caret-down', size=14) }}
  </span>
</a>
{% end %}