_content_modal.html

{% comment %}
  Content Modal — centered card for long-form reading.

  Reuses the .dialog-modal root class so the shared dialog.js (focus trap,
  ESC, initial focus, focus return) applies automatically. Open/close is
  CSS-only via :target — no JS required.

  Variables:
    modal_id       (required): Unique id for :target, e.g. "content-modal-1".
    title          (required): Heading text; referenced by aria-labelledby.
    subtitle       (optional): Byline / secondary text below the title.
    content        (required): Pre-rendered safe HTML. Rendered with |safe
                               inside a .content-modal__prose scope.
    prev_url       (optional): e.g. "#content-modal-2". Empty = prev disabled.
    next_url       (optional): e.g. "#content-modal-4". Empty = next disabled.
    close_url      (optional): defaults to "#_".

  Trigger: <a href="#{{ modal_id }}">…</a>
{% endcomment %}
<div class="dialog-modal content-modal" id="{{ modal_id }}">
  <a class="dialog-modal__backdrop" href="{{ close_url|default:'#_' }}" tabindex="-1"></a>
  <div class="content-modal__container"
       role="dialog"
       aria-modal="true"
       aria-labelledby="{{ modal_id }}-title">
    <div class="content-modal__header">
      <a class="content-modal__close"
         role="button"
         href="{{ close_url|default:'#_' }}"
         aria-label="Close">
        {% include "includes/icon.html" with icon_name="close" icon_size=24 %}
      </a>
      <h2 class="content-modal__title" id="{{ modal_id }}-title">{{ title }}</h2>
      {% include "v3/includes/_carousel_buttons.html" with as_links=True prev_url=prev_url|default:"" next_url=next_url|default:"" only %}
    </div>
    {% if subtitle %}
      <div class="content-modal__subtitle">{{ subtitle }}</div>
    {% endif %}
    <hr class="content-modal__divider" aria-hidden="true">
    <div class="content-modal__body" tabindex="0">
      <div class="content-modal__prose">{{ content|safe }}</div>
    </div>
  </div>
</div>