{% comment %}
  A two-column block: a gallery of images on one side, body text on the other.
  The image side reuses embed/image/gallery.html verbatim, so it keeps the same
  carousel / swipe / lightbox behaviour. On narrow screens the two columns stack;
  by default the image sits on top (see mobile_text_top).

  Parameters (layout):
    side          - which side the gallery sits on: 'right' (default) or 'left'.
                    The text takes the opposite side.
    text          - the body text; may contain Markdown. Capture it first, then
                    pass as text=<var>, or inline a string.
    image_width   - flex basis of the image column (default '40%'). The text
                    column takes the remaining space.
    column_gap    - gap between the two columns (default '1.5rem').
    justify       - horizontal alignment of the two columns as a group (desktop
                    only): 'left' (default), 'center', 'right', or 'between'
                    (push them to opposite edges). Centering is visible only when
                    the columns don't already fill the row — the text column
                    shrinks to its content, so give it short lines or a smaller
                    image_width to leave room.
    text_location - vertical alignment of the text against the image (desktop
                    only): 'top', 'center' (default), or 'bottom'.
    justify_text  - text-align of the body text: 'left' (default), 'center',
                    'right', or 'justify'.
    justify_text_mobile - text-align of the body text on narrow (stacked)
                    screens. Defaults to whatever justify_text is.
    mobile_text_top - when stacked on narrow screens, put the text above the
                    image. Default false (image on top). Pass
                    mobile_text_top=true to put the text on top instead.

  Parameters (gallery) — forwarded to embed/image/gallery.html:
    paths         - comma-separated list of image paths (required).
    alts          - comma-separated alt text, matched to paths by position.
    Plus any of gallery.html's appearance/behaviour options:
      gallery, mobile_gallery, swipe, loop, counter, counter_position,
      gap, radius, shadow, arrow_bg, arrow_bg_hover, arrow_color, arrow_size,
      counter_bg, counter_color, enable_zoom_arrows, image_max_width.
    NOTE: because the gallery lives in a column, it defaults to the swipeable
    carousel at every width (gallery=true, mobile_gallery=true) so multiple
    images don't get squeezed side by side. Pass gallery=false to override.

  Usage:
    {% capture body %}
    To wyjątkowy moment — mój wiersz trafił do elementarza! 📚
    {% endcapture %}
    {% include embed/image/side.html
       side='left'
       text=body
       paths='/assets/img/posts/2026/08/elementarz-lokomotywa-1.png,
              /assets/img/posts/2026/08/elementarz-lokomotywa-2.png' %}
{% endcomment %}
{%- assign side = include.side | default: 'right' -%}
{%- assign media_w = include.image_width | default: '40%' -%}
{%- assign col_gap = include.column_gap | default: '1.5rem' -%}
{%- assign media_max = include.image_max_width | default: '100%' -%}
{%- comment -%} Vertical alignment of text vs. image (desktop). {%- endcomment -%}
{%- case include.text_location -%}{%- when 'top' -%}{%- assign text_align = 'flex-start' -%}{%- when 'bottom' -%}{%- assign text_align = 'flex-end' -%}{%- else -%}{%- assign text_align = 'center' -%}{%- endcase -%}
{%- comment -%} Horizontal alignment of the two columns as a group (desktop). {%- endcomment -%}
{%- case include.justify -%}{%- when 'center' -%}{%- assign col_justify = 'center' -%}{%- when 'right' -%}{%- assign col_justify = 'flex-end' -%}{%- when 'between' -%}{%- assign col_justify = 'space-between' -%}{%- else -%}{%- assign col_justify = 'flex-start' -%}{%- endcase -%}
{%- comment -%} text-align of the body text (values pass straight through). {%- endcomment -%}
{%- assign jtext = include.justify_text | default: 'left' -%}
{%- assign jtext_m = include.justify_text_mobile | default: jtext -%}
{%- comment -%} Mobile stacking order: image-top (default) or text-top. {%- endcomment -%}
{%- assign m_text_order = 1 -%}{%- assign m_media_order = 0 -%}
{%- if include.mobile_text_top == true -%}{%- assign m_text_order = 0 -%}{%- assign m_media_order = 1 -%}{%- endif -%}
{%- comment -%} Default to the carousel so several images don't shrink to fit a
    narrow column; still allow gallery=false / mobile_gallery=false to opt out. {%- endcomment -%}
{%- assign g_desktop = true -%}{%- if include.gallery == false -%}{%- assign g_desktop = false -%}{%- endif -%}
{%- assign g_mobile = true -%}{%- if include.mobile_gallery == false -%}{%- assign g_mobile = false -%}{%- endif -%}
<div class="img-side img-side--{{ side }}" style="--img-side-media:{{ media_w }};--img-side-gap:{{ col_gap }};--img-side-align:{{ text_align }};--img-side-justify:{{ col_justify }};--img-side-text-align:{{ jtext }};--img-side-text-align-m:{{ jtext_m }};--img-side-m-text:{{ m_text_order }};--img-side-m-media:{{ m_media_order }};">
  <div class="img-side__media">
    {% include embed/image/gallery.html
       paths=include.paths
       alts=include.alts
       max_width=media_max
       mobile_max_width=include.mobile_max_width
       gap=include.gap
       radius=include.radius
       shadow=include.shadow
       arrow_bg=include.arrow_bg
       arrow_bg_hover=include.arrow_bg_hover
       arrow_color=include.arrow_color
       arrow_size=include.arrow_size
       counter_bg=include.counter_bg
       counter_color=include.counter_color
       gallery=g_desktop
       mobile_gallery=g_mobile
       swipe=include.swipe
       loop=include.loop
       counter=include.counter
       counter_position=include.counter_position
       enable_zoom_arrows=include.enable_zoom_arrows %}
  </div>
  <div class="img-side__text">{{ include.text | markdownify }}</div>
</div>