{% comment %}
Logo cloud (04-interfaces.md section 4d): a "trusted by" logo row/grid.
Structural, consumed via {% include %} (BR-BW-MKT §4d structural-include
doctrine).

Required context:
  logos (list of dicts): {src, alt}. alt is required per the a11y non-goal
        that an image is never unlabelled: a caller supplying a decorative-
        only alt="" is a deliberate choice it makes itself, but this
        component never invents an empty alt on the caller's behalf.

Optional context:
  heading   (str, e.g. "Trusted by teams at").
  greyscale (bool, default False): a CSS greyscale-until-hover treatment,
            purely decorative, never the sole signal of anything.

An empty (or omitted) logos list renders the heading alone (or nothing, if
that too is empty), never a fabricated placeholder logo.

logos is list-shaped, so it has no flat-kwarg spelling (#98): a Django
template cannot build a list inline, so supply it from context (the view,
or a wrapper template's own data). The scalar context (heading, greyscale)
is flat and template-authorable as-is; brickwork does not invent a flat
shape for the list itself.

States: greyscale=True switches each logo between a muted, desaturated
  resting state and full colour on hover (purely decorative, opacity plus
  filter: grayscale, never the sole signal of anything, so the logo stays
  legible without the effect); the transition is disabled under
  prefers-reduced-motion.
Accessibility: every logo requires a real alt attribute (never invented on
  the caller's behalf); the greyscale-on-hover effect is decorative only,
  never load-bearing for legibility. Covered by axe.spec.mjs against
  landing-*.html (marketing/landing.html composes it with a populated logos
  list and greyscale=True), both themes.
Responsive: no breakpoint switch. The logo row is
  display: flex; flex-wrap: wrap; justify-content: center, so logos reflow
  onto further lines as the container narrows, fluid at every width.
{% endcomment %}
{% if heading or logos %}
<section class="bw-logo-cloud{% if greyscale %} bw-logo-cloud--greyscale{% endif %}">
  {% if heading %}<p class="bw-logo-cloud__heading">{{ heading }}</p>{% endif %}
  {% if logos %}
    <div class="bw-logo-cloud__grid">
      {% for logo in logos %}
        <img class="bw-logo-cloud__logo" src="{{ logo.src }}" alt="{{ logo.alt }}">
      {% endfor %}
    </div>
  {% endif %}
</section>
{% endif %}