{%- comment -%}
  Two or more images displayed side by side (and/or as a swipeable carousel).

  Usage:
    {% include embed/image/gallery.html
       paths='/assets/img/posts/2026/elementarz-kredka-3.png,
              /assets/img/posts/2026/elementarz-kredka-4.png' %}

  paths is a comma-separated list of image paths (whitespace/newlines around
  each entry are trimmed). Pass two, three, or more.

  Optional params:
    alts='alt one, alt two'   comma-separated alt text, matched to paths by
                          position (leave an entry empty to skip one)
    gap='8px'             gap between the images
    max_width='80%'       width of the row relative to the content column
    mobile_max_width='..' width used on narrow screens (defaults to max_width)

  Appearance (all optional, tasteful defaults):
    radius='10px'         corner rounding of each image
    shadow='0 2px 8px rgba(0,0,0,0.15)'  drop shadow around each image
                          (pass shadow='none' to remove it)
    arrow_bg='rgba(0,0,0,0.45)'          carousel arrow background
    arrow_bg_hover='rgba(0,0,0,0.7)'     carousel arrow background on hover
    arrow_color='#fff'    carousel arrow glyph colour
    arrow_size='2.4rem'   diameter of the round carousel arrows
    counter_bg='rgba(0,0,0,0.55)'        counter badge background
    counter_color='#fff'  counter text colour

    mobile_gallery=true   on narrow screens, show one image at a time as a
                          swipeable carousel with left/right arrows instead of
                          shrinking both to fit. DEFAULT true — pass
                          mobile_gallery=false to shrink both to fit instead.
    swipe=false           disable touch swiping (arrows still work); swipe is on
                          by default
    gallery=true          use that carousel on wide (desktop) screens. DEFAULT
                          false. Independent of mobile_gallery: with gallery=true
                          and mobile_gallery false, the carousel shows only on
                          desktop and mobile falls back to the two side-by-side
                          images (the carousel is NOT shown on mobile). Set both
                          to true for a carousel at every width.

    loop=false             make the carousel wrap around endlessly. Default is
                          false: the left arrow is hidden on the first photo and
                          the right arrow is hidden on the last.

    counter=true          hide the "1/2" counter (shown by default)
    counter_position='bottom-right' where the counter sits (default bottom-right). MUST be
                          quoted (the value contains a hyphen). Options:
                          top-left, top-right, bottom-left, bottom-right show a
                          circular badge; top-center (or top) and bottom-center
                          (or bottom) show a centered pill.
                          e.g. counter_position='bottom-left'

    enable_zoom_arrows=true
                          disable prev/next arrows in the zoomed (lightbox) view.
                          Enabled by default: the two photos become one lightbox
                          gallery you can arrow through.
{%- endcomment -%}
{%- assign max_w = include.max_width | default: '85%' -%}
{%- assign mobile_w = include.mobile_max_width | default: max_w -%}
{%- assign gap = include.gap | default: '8px' -%}
{%- assign radius = include.radius | default: '5px' -%}
{%- assign shadow = include.shadow | default: '0 2px 8px rgba(0, 0, 0, 0.15)' -%}
{%- assign arrow_bg = include.arrow_bg | default: 'rgba(0, 0, 0, 0.45)' -%}
{%- assign arrow_bg_hover = include.arrow_bg_hover | default: 'rgba(0, 0, 0, 0.7)' -%}
{%- assign arrow_color = include.arrow_color | default: '#fff' -%}
{%- assign arrow_size = include.arrow_size | default: '2.2rem' -%}
{%- assign counter_bg = include.counter_bg | default: 'rgba(0, 0, 0, 0.55)' -%}
{%- assign counter_color = include.counter_color | default: '#fff' -%}
{%- assign path_list = include.paths | split: ',' -%}
{%- assign alt_list = include.alts | split: ',' -%}
{%- assign img_count = path_list | size -%}
{%- assign opt_gallery = false -%}{%- if include.gallery -%}{%- assign opt_gallery = true -%}{%- endif -%}
{%- assign opt_mobile = true -%}{%- if include.mobile_gallery == false -%}{%- assign opt_mobile = false -%}{%- endif -%}
{%- assign is_gallery = false -%}{%- if opt_mobile or opt_gallery -%}{%- assign is_gallery = true -%}{%- endif -%}
{%- assign is_loop = false -%}{%- if include.loop == true -%}{%- assign is_loop = true -%}{%- endif -%}
{%- assign zoom_arrows = true -%}{%- if include.enable_zoom_arrows == false -%}{%- assign zoom_arrows = false -%}{%- endif -%}
{%- assign no_swipe = false -%}{%- if include.swipe == false -%}{%- assign no_swipe = true -%}{%- endif -%}
{%- comment -%} A single image is not a gallery: no carousel/arrows/counter, and no
   multi-image lightbox rebinding — let the theme's default per-image popup handle
   it. This makes every embed that routes through gallery.html degrade gracefully. {%- endcomment -%}
{%- if img_count < 2 -%}{%- assign is_gallery = false -%}{%- assign zoom_arrows = false -%}{%- assign opt_gallery = false -%}{%- assign opt_mobile = false -%}{%- endif -%}
{%- comment -%} Where the carousel CSS applies: both flags -> every width;
   desktop only -> wide screens; otherwise (mobile only, or none) -> narrow
   screens. When neither flag is set the block is inert (no .ss-gallery class). {%- endcomment -%}
{%- if opt_gallery and opt_mobile -%}{%- assign gopen = '' -%}{%- assign gclose = '' -%}{%- elsif opt_gallery -%}{%- assign gopen = '@media all and (min-width: 850px) {' -%}{%- assign gclose = '}' -%}{%- else -%}{%- assign gopen = '@media all and (max-width: 849px) {' -%}{%- assign gclose = '}' -%}{%- endif -%}
<style>
.ss-wrap { position: relative; margin: 1rem auto; max-width: {{ max_w }}; }
.side-by-side { display: flex; gap: {{ gap }}; justify-content: center; }
.side-by-side .img-link { width: calc(100% / {{ img_count }}); margin: 0; }
.side-by-side img { width: 100%; margin: 0; border: none; display: block; border-radius: {{ radius }}; box-shadow: {{ shadow }}; }
.ss-nav { display: none; }
.ss-clone { display: none; }
.ss-counter { display: none; }
{%- if img_count == 4 %}
/* Four images: 2x2 grid of square, cover-cropped thumbnails (non-carousel view). */
.ss-grid4 .side-by-side { display: grid; grid-template-columns: repeat(2, 1fr); gap: {{ gap }}; }
.ss-grid4 .side-by-side .img-link { width: 100%; aspect-ratio: 1 / 1; }
.ss-grid4 .side-by-side img { width: 100%; height: 100%; object-fit: cover; }
{%- endif %}

@media all and (max-width: 849px) {
  .ss-wrap { max-width: {{ mobile_w }}; }
}

{{ gopen }}
  .ss-gallery .side-by-side {
    display: flex;
    gap: 0;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overflow-anchor: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .ss-gallery .side-by-side::-webkit-scrollbar { display: none; }
  .ss-gallery.ss-noswipe .side-by-side { overflow-x: hidden; scroll-snap-type: none; }
  .ss-gallery .side-by-side .img-link {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: auto;
    scroll-snap-align: center;
  }
  .ss-gallery .side-by-side img { height: auto; object-fit: fill; }
  .ss-gallery .ss-clone { display: block; }
  .ss-gallery .ss-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: {{ arrow_size }};
    height: {{ arrow_size }};
    padding: 0;
    border: none;
    border-radius: 50%;
    background: {{ arrow_bg }};
    color: {{ arrow_color }};
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease-in-out;
  }
  .ss-gallery .ss-nav:hover,
  .ss-gallery .ss-nav:focus { background: {{ arrow_bg_hover }}; }
  .ss-gallery .ss-prev { left: 0.4rem; }
  .ss-gallery .ss-next { right: 0.4rem; }

  .ss-gallery .ss-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 3;
    box-sizing: border-box;
    background: {{ counter_bg }};
    color: {{ counter_color }};
    font-size: 0.75rem;
    line-height: 1;
    pointer-events: none;
  }
  .ss-gallery .ss-pos-top-left,
  .ss-gallery .ss-pos-top-right,
  .ss-gallery .ss-pos-bottom-left,
  .ss-gallery .ss-pos-bottom-right {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
  }
  .ss-gallery .ss-pos-top,
  .ss-gallery .ss-pos-top-center,
  .ss-gallery .ss-pos-bottom,
  .ss-gallery .ss-pos-bottom-center {
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
  }
  .ss-gallery .ss-pos-top-left { top: 1.1rem; left: 1.1rem; }
  .ss-gallery .ss-pos-top-right { top: 1.1rem; right: 1.1rem; }
  .ss-gallery .ss-pos-bottom-left { bottom: 1.1rem; left: 1.1rem; }
  .ss-gallery .ss-pos-bottom-right { bottom: 1.1rem; right: 1.1rem; }
  .ss-gallery .ss-pos-top,
  .ss-gallery .ss-pos-top-center { top: 1.1rem; left: 50%; transform: translateX(-50%); }
  .ss-gallery .ss-pos-bottom,
  .ss-gallery .ss-pos-bottom-center { bottom: 1.1rem; left: 50%; transform: translateX(-50%); }
{{ gclose }}
</style>

<div class="ss-wrap{% if is_gallery %} ss-gallery{% endif %}{% if no_swipe %} ss-noswipe{% endif %}{% if img_count == 4 %} ss-grid4{% endif %}" data-loop="{{ is_loop }}"{% if zoom_arrows %} data-ss-zoom="1"{% endif %}>
  {% if is_gallery %}<button type="button" class="ss-nav ss-prev" aria-label="Poprzednie zdjęcie">&#8249;</button>{% endif %}
  <div class="side-by-side">
    {%- for p in path_list -%}
    <img src="{{ p | strip | relative_url }}" alt="{{ alt_list[forloop.index0] | strip }}">
    {%- endfor -%}
  </div>
  {% if is_gallery %}<button type="button" class="ss-nav ss-next" aria-label="Następne zdjęcie">&#8250;</button>{% endif %}
  {% if is_gallery and include.counter != false %}<span class="ss-counter ss-pos-{{ include.counter_position | default: 'bottom-right' }}" aria-hidden="true">1/{{ img_count }}</span>{% endif %}
</div>
{% if zoom_arrows %}
<script>
/* Runs at parse time, before Chirpy's deferred `.popup` init, so it can opt this
   pair out of the per-image lightbox — they get re-bound as one gallery below. */
(function () {
  var wrap = document.currentScript.previousElementSibling;
  if (!wrap) return;
  wrap.querySelectorAll('a.img-link').forEach(function (a) { a.classList.remove('popup'); });
})();
</script>
{% endif %}
{% if include.debug %}
<div id="ss-debug" style="position:fixed;left:0;right:0;bottom:0;max-height:45vh;overflow:auto;z-index:99999;margin:0;padding:8px;background:rgba(0,0,0,.85);color:#0f0;font:12px/1.45 ui-monospace,monospace;white-space:pre-wrap;"></div>
<script>
(function () {
  function log(m) { try { var d = document.getElementById('ss-debug'); if (d) d.textContent += m + '\n'; } catch (e) {} }
  window.__ssLog = log;
  window.addEventListener('error', function (e) {
    log('JS ERROR: ' + (e.message || e.type) + (e.filename ? ' @' + e.filename + ':' + e.lineno : ''));
  });
  log('debug ready; readyState=' + document.readyState);
  log('UA=' + navigator.userAgent);
})();
</script>
{% endif %}
{% if is_gallery or zoom_arrows %}
<script>
(function () {
  var L = function (m) { if (window.__ssLog) window.__ssLog(m); };
  L('main script parsed + running');
  if (window.__ssInit) return;
  window.__ssInit = true;

  function setup(wrap) {
    var track = wrap.querySelector('.side-by-side');
    if (!track || track.dataset.ssReady) return;
    var loop = wrap.dataset.loop === 'true';
    var reals = Array.prototype.slice.call(track.children);
    var count = reals.length;
    if (count < 2) return;
    track.dataset.ssReady = '1';

    var prevBtn = wrap.querySelector('.ss-prev');
    var nextBtn = wrap.querySelector('.ss-next');
    var counterEl = wrap.querySelector('.ss-counter');
    L('setup: count=' + count + ' loop=' + loop + ' prev=' + !!prevBtn + ' next=' + !!nextBtn + ' counter=' + !!counterEl);

    /* In loop mode, clone the end slides so the carousel can slide continuously */
    /* and then teleport (without animation) onto the matching real slide. */
    var offset = 0;
    if (loop) {
      var head = reals[count - 1].cloneNode(true);
      var tail = reals[0].cloneNode(true);
      head.classList.add('ss-clone');
      tail.classList.add('ss-clone');
      head.setAttribute('aria-hidden', 'true');
      tail.setAttribute('aria-hidden', 'true');
      track.insertBefore(head, reals[0]);
      track.appendChild(tail);
      offset = 1;
    }

    /* `index` is the source of truth for the current DOM slide, so the counter */
    /* and arrows never depend on a scroll position that iOS may not have applied. */
    var index = offset;
    var animating = false;
    var w = function () { return track.clientWidth || track.offsetWidth || 1; };
    var realOf = function (i) { return ((i - offset) % count + count) % count; };

    /* iOS Safari's `scroll-snap-type: mandatory` fights programmatic scrolling */
    /* (and its smooth-scroll support is unreliable), so disable snap, jump with a */
    /* plain scrollLeft assignment — the one method that works everywhere — then */
    /* restore snap once settled. */
    function go(i, smooth) {
      var left = w() * i;
      track.style.scrollSnapType = 'none';
      if (smooth && 'scrollBehavior' in document.documentElement.style && track.scrollTo) {
        try { track.scrollTo({ left: left, behavior: 'smooth' }); }
        catch (e) { track.scrollLeft = left; }
      } else {
        track.scrollLeft = left;
      }
      window.clearTimeout(track.__ssSnap);
      track.__ssSnap = window.setTimeout(function () {
        track.style.scrollSnapType = '';
      }, smooth ? 500 : 60);
    }

    function render() {
      var real = realOf(index);
      if (counterEl) counterEl.textContent = (real + 1) + '/' + count;
      if (!loop) {
        if (prevBtn) prevBtn.style.visibility = index <= offset ? 'hidden' : '';
        if (nextBtn) nextBtn.style.visibility = index >= offset + count - 1 ? 'hidden' : '';
      }
    }

    function step(dir) {
      L('step dir=' + dir + ' index=' + index);
      if (animating) return;
      var target = index + dir;
      if (!loop && (target < offset || target > offset + count - 1)) return;
      animating = true;
      index = target;
      render();
      go(index, true);
      window.setTimeout(function () {
        if (loop) {
          if (index === 0) { index = count; go(index, false); }
          else if (index === count + 1) { index = 1; go(index, false); }
        }
        animating = false;
        render();
      }, 500);
    }

    /* Keep index + counter in sync when the user swipes by hand. */
    var settle;
    track.addEventListener('scroll', function () {
      if (animating) return;
      var d = Math.round(track.scrollLeft / w());
      if (d !== index) { index = d; render(); }
      if (!loop) return;
      window.clearTimeout(settle);
      settle = window.setTimeout(function () {
        if (index === 0) { index = count; go(index, false); render(); }
        else if (index === count + 1) { index = 1; go(index, false); render(); }
      }, 150);
    }, { passive: true });

    /* Bind both click and touchend: iOS Safari doesn't reliably fire `click` on */
    /* absolutely-positioned buttons over a scroll area. preventDefault on */
    /* touchend suppresses the emulated click so step() doesn't run twice. */
    function bindTap(btn, fn) {
      if (!btn) return;
      btn.addEventListener('click', function (e) { e.preventDefault(); fn(); });
      btn.addEventListener('touchend', function (e) { e.preventDefault(); fn(); }, { passive: false });
    }
    bindTap(prevBtn, function () { step(-1); });
    bindTap(nextBtn, function () { step(1); });
    window.addEventListener('resize', function () { go(index, false); });

    /* Until the user actually interacts, keep the carousel pinned to the first */
    /* slide. Otherwise images that finish downloading after init (common on a */
    /* fresh navigation, vs. a cache-warm reload) reflow the scroll container and */
    /* `scroll-snap: mandatory` can re-snap onto the second photo. */
    var userMoved = false;
    function markMoved() { userMoved = true; }
    track.addEventListener('touchstart', markMoved, { passive: true });
    track.addEventListener('pointerdown', markMoved, { passive: true });
    track.addEventListener('wheel', markMoved, { passive: true });
    bindTap(prevBtn, markMoved);
    bindTap(nextBtn, markMoved);

    function pinFirst() {
      if (userMoved) return;
      index = offset;
      go(offset, false);
      render();
    }

    /* Paint the counter/arrows immediately, then position on the first slide, */
    /* re-pinning as each image settles so a late reflow can't steal the view. */
    render();
    requestAnimationFrame(pinFirst);
    Array.prototype.forEach.call(track.querySelectorAll('img'), function (img) {
      if (!img.complete) img.addEventListener('load', pinFirst);
    });
    window.addEventListener('load', pinFirst);
    window.addEventListener('pageshow', pinFirst);
  }

  function initGalleries() {
    var list = document.querySelectorAll('.ss-gallery');
    L('initGalleries: found ' + list.length + ' .ss-gallery');
    list.forEach(setup);
  }

  /* Re-bind opted-out pairs as a single magnific-popup gallery (prev/next arrows */
  /* in the lightbox). jQuery + magnific arrive in a combined CDN bundle that may */
  /* load after `load` on mobile, so poll until they're ready (up to ~5s). */
  function initZoom(attempt) {
    var jq = window.jQuery;
    if (!jq || !jq.fn || !jq.fn.magnificPopup) {
      if ((attempt || 0) % 5 === 0) L('initZoom wait attempt=' + (attempt || 0) + ' jQuery=' + !!jq + ' magnific=' + !!(jq && jq.fn && jq.fn.magnificPopup));
      if ((attempt || 0) < 25) {
        window.setTimeout(function () { initZoom((attempt || 0) + 1); }, 200);
      }
      return;
    }
    L('initZoom: jQuery + magnific ready, binding');
    document.querySelectorAll('[data-ss-zoom]').forEach(function (wrap) {
      if (wrap.__ssZoomBound) return;
      wrap.__ssZoomBound = true;
      var loop = wrap.dataset.loop === 'true';

      /* Magnific's gallery always wraps around; when loop is off, hide the */
      /* lightbox prev/next arrow at the ends so it respects the loop variable. */
      function syncArrows() {
        if (loop) return;
        var mfp = jq.magnificPopup.instance;
        if (!mfp || !mfp.items) return;
        var last = mfp.items.length - 1;
        var left = document.querySelector('.mfp-arrow-left');
        var right = document.querySelector('.mfp-arrow-right');
        if (left) left.style.visibility = mfp.index <= 0 ? 'hidden' : '';
        if (right) right.style.visibility = mfp.index >= last ? 'hidden' : '';
      }

      jq(wrap).magnificPopup({
        delegate: 'a.img-link:not(.ss-clone)',
        type: 'image',
        closeOnContentClick: true,
        showCloseBtn: true,
        gallery: { enabled: true },
        zoom: { enabled: true, duration: 300, easing: 'ease-in-out' },
        callbacks: {
          open: function () { setTimeout(syncArrows, 0); },
          change: function () { setTimeout(syncArrows, 0); }
        }
      });
    });
  }

  if (document.readyState !== 'loading') initGalleries();
  else document.addEventListener('DOMContentLoaded', initGalleries);

  if (document.readyState === 'complete') initZoom();
  else window.addEventListener('load', initZoom);
})();
</script>
{% endif %}