{# @description The page-heading block: title, subtitle, an optional info dialog trigger, and an actions row. #}
{# @prop title:text | description:"Page heading text." #}
{# @prop subtitle:text | description:"Short prose shown under the heading." #}
{# @prop class:text | description:"Extra classes on the wrapper element." #}
{# @prop actions:text | description:"Content rendered at the end of the title row (buttons, action group)." #}
{# @prop info:text | description:"Text shown in the info dialog opened from the icon beside the heading." #}
{# @prop info_actions:text | description:"Actions rendered in the info dialog's footer." #}
<c-vars title subtitle class actions info info_actions />
<!-- Top row: title + actions -->
<div class="page-title flex flex-col md:flex-row md:items-start md:justify-between gap-2 w-full {{ class }}"
     {{ attrs }}>
  <!-- Title + subtitle -->
  <div class="flex flex-col gap-1">
    {% comment %}
      The info trigger sits beside the heading, never inside it: an interactive
      control within the heading element becomes part of the heading's announced
      text.
    {% endcomment %}
    <div class="flex items-center gap-2">
      <h1 class="text-3xl font-bold leading-tight">{{ title }}</h1>
      <c-page.info :text="info" :title="title" :actions="info_actions" />
    </div>
    {% if subtitle %}<p class="opacity-70 text-lg leading-relaxed max-w-prose">{{ subtitle }}</p>{% endif %}
  </div>
  <!-- Actions -->
  <div class="flex flex-wrap md:flex-nowrap gap-2 md:gap-1 md:justify-end md:items-center ">{{ actions }}</div>
</div>