{# @description A picture of the person beside what they said, stacking to one column below the lg breakpoint. #}
{# @prop name:text | description:"Who said it" #}
{# @prop role:text | description:"What they do and where" #}
{# @prop source:text | description:"The work it comes from" #}
{# @prop href:text | description:"Where the source can be read" #}
{# @prop src:text | description:"The picture. It is cropped to a portrait, four wide by five tall." #}
{# @prop alt:text | description:"What the picture shows, for somebody who cannot see it. Leave empty when it adds nothing to the name." #}
{# @prop reverse:boolean | default:False | description:"Swap the columns at wide widths. No effect once the block has stacked." #}
{# @prop invert:boolean | default:False | description:"Light copy, for a dark background" #}
{# @prop size:select['sm', 'md', 'lg'] | default:"md" | description:"How much vertical room the block takes" #}
{# @prop class:text | description:"Extra classes on the outer section. A plain surface colour goes here." #}
{# @slot Good tools get out of the way. — What was said. Write the quotation marks if you want them. #}
{# @slot:background — A background block, rendered into a layer behind the words #}
{# @slot:media — In place of the picture, when it is not a plain image: a video, a mockup, a card. #}
{# @slot:logo — Above the words. The mark of the company the person speaks for. #}
{% comment %}
  The figure is the words and their caption only. The picture sits beside it,
  because a caption has to be the first or last thing in its figure.
{% endcomment %}
<c-vars name role source href src alt reverse invert size="md" class />
<c-section flush align="center" reverse="{{ reverse }}" :invert="invert" class="{% if size == 'sm' %}dce:py-12 dce:md:py-16{% elif size == 'lg' %}dce:py-24 dce:md:py-32{% else %}dce:py-16 dce:md:py-24{% endif %} {{ class }}" :attrs="attrs" only>
  {% if background %}<c-slot name="background">{{ background }}</c-slot>{% endif %}
  <c-section.col span="2" class="dce:mx-auto dce:w-full dce:max-w-sm" only>
    {% if media %}
      {{ media }}
    {% elif src %}
      <img src="{{ src }}" alt="{{ alt }}" class="dce:aspect-[4/5] dce:w-full dce:rounded-2xl dce:object-cover" />
    {% endif %}
  </c-section.col>
  <c-section.col span="3" only>
    <figure class="dce:flex dce:flex-col dce:gap-6">
      {% if logo %}<div>{{ logo }}</div>{% endif %}
      <blockquote {% if href %}cite="{{ href }}"{% endif %}
                  class="dce:text-2xl dce:leading-snug dce:font-medium dce:text-balance dce:sm:text-3xl">
        {{ slot }}
      </blockquote>
      {% if name or role or source %}
        <c-quote.byline name="{{ name }}" role="{{ role }}" source="{{ source }}" href="{{ href }}" size="lg" :invert="invert" only />
      {% endif %}
    </figure>
  </c-section.col>
</c-section>