<div class="gia-behavior-shell">
  <div class="is-flex is-justify-content-space-between is-align-items-center is-flex-wrap-wrap mb-3">
    <div>
      <p class="is-size-7 has-text-weight-semibold has-text-grey mb-1">Behavioral Graphs</p>
      <p class="mb-0">{{ coverage.message_count }} messages · {{ coverage.event_count }} events · {{ coverage.session_count }} sessions</p>
    </div>
    {% include "partials/behavioral-range-tabs.html" %}
  </div>

  <div class="columns is-multiline">
    {% for card in summary_cards %}
      <div class="column is-12-mobile is-6-tablet is-4-desktop">
        {% include "partials/behavioral-summary-card.html" with card=card %}
      </div>
    {% endfor %}
  </div>

  {% for group_key, group in behavioral_groups.items %}
    <section class="mb-4">
      <div class="mb-3">
        <p class="is-size-7 has-text-weight-semibold has-text-grey mb-1">{{ group.eyebrow }}</p>
        <h3 class="title is-5 mb-1">{{ group.title }}</h3>
        <p class="is-size-7">{{ group.summary }}</p>
      </div>
      <div class="columns is-multiline">
        {% for graph in graph_cards %}
          {% if graph.group == group_key %}
            <div class="column is-12-mobile is-6-desktop">
              {% include "partials/behavioral-graph-card.html" with graph=graph person=person graphs_widget_url=graphs_widget_url %}
            </div>
          {% endif %}
        {% endfor %}
      </div>
    </section>
  {% endfor %}
</div>
