{% comment %}
Pricing table (04-interfaces.md section 4d): arranges 2-4 _pricing_tier
cards responsively. Structural, consumed via {% include %} (BR-BW-MKT §4d
structural-include doctrine).

Required context: none.

Optional context:
  heading (str): the section intro heading.
  lede    (str): the section intro body.
  tiers   (list of dicts): each the context _pricing_tier.html accepts
          (name, price, period, description, features, cta or the flat
          cta_label/cta_url pair, highlighted, badge). A single tier
          renders centred (bw-pricing-table--single). List-shaped, so it
          has no flat-kwarg spelling (#98): supply it from context, or,
          for a template-authored pricing section (the ADR-056
          compose-it-yourself shape), skip this wrapper and include
          _pricing_tier.html directly once per plan; looping tier cards is
          all this wrapper does.
  note    (str): a fine-print line under the table (e.g. a monthly/annual
          caveat).

An empty tiers list renders the section intro alone (or nothing, if that
too is empty), never a fabricated placeholder plan.

States: none of its own beyond whatever each _pricing_tier.html card
  carries (highlighted or not). A single-tier render takes the
  bw-pricing-table--single modifier, which only caps and centres its
  width; it is not a distinct interactive state.
Accessibility: the section intro heading is an <h2>; each tier card's own
  name is an <h3> underneath it, so the outline stays correct regardless of
  how many tiers render. Covered by axe.spec.mjs against sections-*.html
  (pricing/three-tier.html), both themes; the single-tier and comparison-
  table variants are separate example files, not this component, and are
  covered the same way via sections-*.html.
Responsive: grid-template-columns switches at two named breakpoints: 1
  column below --bw-breakpoint-md (48rem), 2 columns from md up to below
  --bw-breakpoint-lg (64rem), 3 columns from lg upward, independent of how
  many tiers are supplied (2-4 tiers all follow the same column steps). A
  single tier instead takes bw-pricing-table--single, capped at 24rem and
  centred, at every width.
{% endcomment %}
{% if heading or lede or tiers %}
<section class="bw-pricing-table-section">
  {% if heading or lede %}
    <div class="bw-pricing-table-section__intro">
      {% if heading %}<h2 class="bw-pricing-table-section__heading">{{ heading }}</h2>{% endif %}
      {% if lede %}<p class="bw-pricing-table-section__lede">{{ lede }}</p>{% endif %}
    </div>
  {% endif %}
  {% if tiers %}
    <div class="bw-pricing-table{% if tiers|length == 1 %} bw-pricing-table--single{% endif %}">
      {% for tier in tiers %}
        {% include "brickwork_marketing/components/_pricing_tier.html" with name=tier.name price=tier.price period=tier.period description=tier.description features=tier.features cta=tier.cta cta_label=tier.cta_label cta_href=tier.cta_url highlighted=tier.highlighted badge=tier.badge %}
      {% endfor %}
    </div>
    {% if note %}<p class="bw-pricing-table__note">{{ note }}</p>{% endif %}
  {% endif %}
</section>
{% endif %}