{#
  CARD GROUP — a set of callout cards, laid out horizontally or vertically.

  Horizontal is the classic KPI strip: one row of 2–4 cells.
  Vertical stacks the same cards, one per row — which is also what the
  horizontal strip collapses to on mobile via the .kpi-cell rule in base.html.

  Context:
    subtitle    — Optional sub-heading rendered above the group
    orientation — "horizontal" or "vertical"
    cards       — List of dicts with keys: label, value, color, sublabel, body, tone.
                  `tone` names a theme.semantic token; an explicit color wins (#178).
                  `arrow` is a change's direction, drawn before the sublabel in
                  the value's own colour; empty for none (#319). `trend` is a
                  drawn series under the value, or None (#321)
#}
{% from "common/badge.html" import badge with context %}
{% from "analysis/trend-arrow.html" import arrow with context %}
{% from "analysis/sparkline-bars.html" import sparkline with context %}
{% if subtitle %}
<p class="subtitle" style="font-family: {{ font.body }}; font-size: {{ size.type.secondary }}px; font-style: italic; color: {{ theme.text.secondary }}; margin: 0 0 {{ size.space.subtitle_gap }}px 0; line-height: {{ size.type.secondary_line | percent }};">{{ subtitle | escape_html }}</p>
{% endif %}
{% if orientation == 'vertical' %}
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border: 1px solid {{ theme.palette.rule }};">
{% for card in cards %}
  <tr>
    <td align="left" style="padding: {{ size.component.card_pad_y }}px {{ size.component.card_pad_x }}px; text-align: left; background-color: {{ theme.palette.surface }};{% if not loop.last %} border-bottom: 1px solid {{ theme.palette.rule }};{% endif %}">
      <p style="font-family: {{ font.label }}; font-size: {{ size.type.micro }}px; color: {{ theme.text.secondary }}; text-transform: uppercase; margin: 0 0 {{ size.component.card_label_gap }}px 0; line-height: {{ size.type.body_line | percent }}; letter-spacing: 0.5px; font-weight: bold;">{{ card.label | escape_html }}{% if card.badge %} {{ badge(card.badge) }}{% endif %}</p>
{% if card.value %}
      <p style="font-family: {{ font.body }}; font-size: {{ size.component.kpi_value }}px; font-weight: bold; color: {{ card.color | default_color(theme.tone[card.tone or 'neutral']) }}; margin: 0 0 {{ size.component.card_value_gap }}px 0; line-height: {{ size.type.title_line | percent }};">{{ card.value | escape_html }}</p>
{% endif %}
{% if card.trend %}
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;"><tr><td style="padding: 0 0 {{ size.component.card_value_gap }}px 0;">{{ sparkline(card.trend) }}</td></tr></table>
{% endif %}
{% if card.sublabel %}
      <p style="font-family: {{ font.label }}; font-size: {{ size.type.micro }}px; color: {{ theme.text.light }}; margin: 0; line-height: {{ size.type.secondary_line | percent }};">{% if card.arrow %}{{ arrow(card.arrow, card.color | default_color(theme.tone[card.tone or 'neutral'])) }}{% endif %}{{ card.sublabel | escape_html }}</p>
{% endif %}
{% if card.body %}
      <div style="font-family: {{ font.label }}; font-size: {{ size.type.secondary }}px; color: {{ theme.text.primary }}; line-height: {{ size.component.card_body_line | percent }}; margin: {{ size.space.caption_gap }}px 0 0 0;">{{ card.body | prose }}</div>
{% endif %}
    </td>
  </tr>
{% endfor %}
</table>
{% else %}
{% set col_width = (100 / cards | length) | round(2) %}
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; border: 1px solid {{ theme.palette.rule }};">
  <tr>
{% for card in cards %}
    <td class="kpi-cell{% if loop.last %} kpi-cell-last{% endif %}" align="center" style="width: {{ col_width }}%;{% if not loop.last %} border-right: 1px solid {{ theme.palette.rule }};{% endif %} padding: {{ size.component.kpi_pad_y }}px {{ size.component.kpi_pad_x }}px; text-align: center; background-color: {{ theme.palette.surface }};">
      <p style="font-family: {{ font.label }}; font-size: {{ size.type.micro }}px; color: {{ theme.text.secondary }}; text-transform: uppercase; margin: 0 0 {{ size.component.card_label_gap }}px 0; line-height: {{ size.type.body_line | percent }}; letter-spacing: 0.5px; font-weight: bold;">{{ card.label | escape_html }}{% if card.badge %} {{ badge(card.badge) }}{% endif %}</p>
      <p style="font-family: {{ font.body }}; font-size: {{ size.component.kpi_value }}px; font-weight: bold; color: {{ card.color | default_color(theme.tone[card.tone or 'neutral']) }}; margin: 0 0 {{ size.component.card_value_gap }}px 0; line-height: {{ size.type.title_line | percent }};">{{ card.value | escape_html }}</p>
{% if card.trend %}
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;"><tr><td align="center" style="padding: 0 0 {{ size.component.card_value_gap }}px 0; text-align: center;">{{ sparkline(card.trend, "center") }}</td></tr></table>
{% endif %}
      <p style="font-family: {{ font.label }}; font-size: {{ size.type.micro }}px; color: {{ theme.text.light }}; margin: 0; line-height: {{ size.type.secondary_line | percent }};">{% if card.arrow %}{{ arrow(card.arrow, card.color | default_color(theme.tone[card.tone or 'neutral'])) }}{% endif %}{{ card.sublabel | escape_html }}</p>
{% if card.body %}
      <div style="font-family: {{ font.label }}; font-size: {{ size.type.secondary }}px; color: {{ theme.text.primary }}; line-height: {{ size.component.card_body_line | percent }}; margin: {{ size.space.caption_gap }}px 0 0 0;">{{ card.body | prose }}</div>
{% endif %}
    </td>
{% endfor %}
  </tr>
</table>
{% endif %}