{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Image collage: two or three overlapping images (one block each, with a separate mobile image and
  focal points) beside a text card with eyebrow, heading, text and a button. Images left or right;
  the card can overlap the collage on desktop. On mobile the images sit in a tidy grid (the first
  full width, the others side by side) above or below the card, without overlaps. No JavaScript.
  Depends on: snippets/lib-image.liquid, snippets/lib-button.liquid
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign heading_tag = s.heading_tag | default: 'h2'
  assign eager = false
  if section.index <= 2
    assign eager = true
  endif
  assign image_count = section.blocks.size
  if image_count > 3
    assign image_count = 3
  endif
-%}

<div
  class="lib-collage lib-collage--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-images="{{ s.images_position }}"
  data-count="{{ image_count }}"
  data-mobile-order="{{ s.mobile_order }}"
  {% if s.card_overlap > 0 %}
    data-overlap
  {% endif %}
  {% if s.animate %}
    data-animate
  {% endif %}
  style="
    --lib-bg: {{ s.color_bg }};
    {% if s.color_bg_gradient != blank %}--lib-bg-image: {{ s.color_bg_gradient }};{% endif %}
    --lib-text: {{ s.color_text }};
    --lib-accent: {{ s.color_accent }};
    --lib-accent-text: {{ s.color_accent_text }};
    --lib-card: {{ s.color_card }};
    --lib-radius-img: {{ s.image_radius }}px;
    --lib-overlap: {{ s.card_overlap }}px;
    --lib-pt: {{ s.padding_top }}px;
    --lib-pb: {{ s.padding_bottom }}px;
    --lib-pt-m: {{ s.padding_top_mobile }}px;
    --lib-pb-m: {{ s.padding_bottom_mobile }}px;
  "
>
  <div class="lib-collage__inner">
    <div class="lib-collage__images">
      {%- for block in section.blocks limit: 3 -%}
        {%- assign b = block.settings -%}
        <div class="lib-collage__frame lib-collage__frame--{{ forloop.index }}" {{ block.shopify_attributes }}>
          {%- liquid
            assign placeholder = 'lifestyle-' | append: forloop.index
            if forloop.index == 3
              assign placeholder = 'image'
            endif
            assign sizes = '(min-width: 990px) 30vw, 50vw'
            if forloop.first
              assign sizes = '(min-width: 990px) 35vw, 100vw'
            endif
            assign img_eager = false
            if eager and forloop.first
              assign img_eager = true
            endif
          -%}
          {%- render 'lib-image',
            image: b.image,
            image_mobile: b.image_mobile,
            class: 'lib-collage__img',
            sizes: sizes,
            eager: img_eager,
            placeholder: placeholder
          -%}
        </div>
      {%- endfor -%}
    </div>

    <div class="lib-collage__card" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
      {%- if s.eyebrow != blank -%}
        <p class="lib-collage__eyebrow">{{ s.eyebrow | escape }}</p>
      {%- endif -%}
      {%- if s.heading != blank -%}
        <{{ heading_tag }} class="lib-collage__heading lib-collage__heading--{{ s.heading_size }}">
          {{- s.heading -}}
        </{{ heading_tag }}>
      {%- endif -%}
      {%- if s.text != blank -%}
        <div class="lib-collage__text">{{ s.text }}</div>
      {%- endif -%}
      {%- if s.button_label != blank -%}
        <div class="lib-collage__actions">
          {%- render 'lib-button',
            label: s.button_label,
            url: s.button_url,
            style: s.button_style,
            new_tab: s.button_new_tab
          -%}
        </div>
      {%- endif -%}
    </div>
  </div>
</div>

{% stylesheet %}
  .lib-collage {
    background-color: var(--lib-bg);
    background-image: var(--lib-bg-image, none);
    color: var(--lib-text);
    padding: var(--lib-pt) 1rem var(--lib-pb);
  }
  .lib-collage__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
  }
  .lib-collage--full .lib-collage__inner { max-width: none; }
  .lib-collage__inner > * { min-width: 0; }

  /* Mobile: a tidy grid, first image full width, the others side by side; no overlaps. */
  .lib-collage__images { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .lib-collage__frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--lib-radius-img);
    background: color-mix(in srgb, var(--lib-text) 6%, transparent);
    aspect-ratio: 1;
  }
  .lib-collage__frame--1 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .lib-collage[data-count='2'] .lib-collage__frame--2 { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  .lib-collage__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .lib-collage__img:is(svg) { fill: color-mix(in srgb, var(--lib-text) 25%, transparent); }

  @media (max-width: 749px) {
    .lib-collage { padding-top: var(--lib-pt-m); padding-bottom: var(--lib-pb-m); }
    .lib-collage[data-show='desktop'] { display: none; }
    .lib-collage[data-mobile-order='text_first'] .lib-collage__card { order: -1; }
  }
  @media (min-width: 750px) {
    .lib-collage[data-show='mobile'] { display: none; }
  }

  /* Desktop: images overlap on a 12 × 12 grid; each later image sits on top with a ring in the
     background color, so the edges read clearly. */
  @media (min-width: 990px) {
    .lib-collage__inner { --lib-gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 7fr 5fr; align-items: center; gap: var(--lib-gap); }
    .lib-collage[data-images='right'] .lib-collage__inner { grid-template-columns: 5fr 7fr; }
    .lib-collage[data-images='right'] .lib-collage__images { order: 2; }
    .lib-collage__images {
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(12, 1fr);
      gap: 0;
      aspect-ratio: 1 / 0.92;
    }
    .lib-collage__frame { aspect-ratio: auto; box-shadow: 0 0 0 8px var(--lib-bg), 0 24px 48px -28px rgb(0 0 0 / 0.35); }
    .lib-collage__frame--1 { grid-area: 1 / 1 / 13 / 13; aspect-ratio: auto; box-shadow: none; }
    .lib-collage[data-count='2'] .lib-collage__frame--1 { grid-area: 1 / 1 / 11 / 9; }
    .lib-collage[data-count='2'] .lib-collage__frame--2 { grid-area: 5 / 6 / 13 / 13; aspect-ratio: auto; z-index: 1; }
    .lib-collage[data-count='3'] .lib-collage__frame--1 { grid-area: 1 / 1 / 9 / 8; }
    .lib-collage[data-count='3'] .lib-collage__frame--2 { grid-area: 2 / 8 / 7 / 13; z-index: 1; }
    .lib-collage[data-count='3'] .lib-collage__frame--3 { grid-area: 7 / 4 / 13 / 11; z-index: 2; }
    .lib-collage[data-images='right'][data-count='3'] .lib-collage__frame--1 { grid-area: 1 / 6 / 9 / 13; }
    .lib-collage[data-images='right'][data-count='3'] .lib-collage__frame--2 { grid-area: 2 / 1 / 7 / 6; }
    .lib-collage[data-images='right'][data-count='3'] .lib-collage__frame--3 { grid-area: 7 / 3 / 13 / 10; }
    .lib-collage[data-images='right'][data-count='2'] .lib-collage__frame--1 { grid-area: 1 / 5 / 11 / 13; }
    .lib-collage[data-images='right'][data-count='2'] .lib-collage__frame--2 { grid-area: 5 / 1 / 13 / 8; }
    .lib-collage__card { position: relative; z-index: 3; }
    .lib-collage[data-overlap][data-images='left'] .lib-collage__card { margin-inline-start: calc(-1 * (var(--lib-overlap) + var(--lib-gap))); }
    .lib-collage[data-overlap][data-images='right'] .lib-collage__card { margin-inline-end: calc(-1 * (var(--lib-overlap) + var(--lib-gap))); }
  }

  .lib-collage__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: clamp(1.75rem, 4vw, 3.25rem);
    border-radius: var(--lib-radius-img);
    background: var(--lib-card);
    box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.25);
  }
  .lib-collage__card[data-align='center'] { align-items: center; text-align: center; }
  .lib-collage__card[data-align='right'] { align-items: flex-end; text-align: right; }
  @media (max-width: 749px) {
    .lib-collage__card[data-align-m='left'] { align-items: flex-start; text-align: left; }
    .lib-collage__card[data-align-m='center'] { align-items: center; text-align: center; }
    .lib-collage__card[data-align-m='right'] { align-items: flex-end; text-align: right; }
  }
  .lib-collage__eyebrow {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lib-accent);
  }
  .lib-collage__heading {
    margin: 0;
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .lib-collage__heading--small { font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
  .lib-collage__heading--medium { font-size: clamp(1.5rem, 2.8vw, 2.25rem); }
  .lib-collage__heading--xlarge { font-size: clamp(2.25rem, 5vw, 3.75rem); }
  .lib-collage__text { margin-top: 1rem; max-width: 34rem; font-size: 1.0625rem; line-height: 1.65; opacity: 0.82; }
  .lib-collage__text > :first-child { margin-top: 0; }
  .lib-collage__text > :last-child { margin-bottom: 0; }
  .lib-collage__text a { color: inherit; text-underline-offset: 0.2em; }
  .lib-collage__actions { margin-top: 1.75rem; }

  /* Motion: images and card rise in as they scroll into view, the later images a little later. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .lib-collage[data-animate] .lib-collage__frame,
      .lib-collage[data-animate] .lib-collage__card {
        animation: lib-collage-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
      }
      .lib-collage[data-animate] .lib-collage__frame--2 { animation-range: entry 10% entry 70%; }
      .lib-collage[data-animate] .lib-collage__frame--3 { animation-range: entry 20% entry 85%; }
    }
  }
  @keyframes lib-collage-rise {
    from { opacity: 0; transform: translateY(28px); }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Image collage",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 3,
  "settings": [
    { "type": "header", "content": "Text card" },
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Our story" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "A small studio, <em>slowly</em> grown" },
    {
      "type": "select",
      "id": "heading_tag",
      "label": "Heading tag",
      "info": "Use H1 only when this is the page's main heading.",
      "options": [
        { "value": "h1", "label": "H1" },
        { "value": "h2", "label": "H2" },
        { "value": "h3", "label": "H3" },
        { "value": "p", "label": "Paragraph" }
      ],
      "default": "h2"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" },
        { "value": "xlarge", "label": "Extra large" }
      ],
      "default": "large"
    },
    { "type": "richtext", "id": "text", "label": "Text", "default": "<p>What started at a kitchen table is now a two-wheel studio. We still glaze in small batches, pack every order by hand and answer every email ourselves.</p>" },
    { "type": "text", "id": "button_label", "label": "Button label", "default": "Read our story" },
    { "type": "url", "id": "button_url", "label": "Button link" },
    {
      "type": "select",
      "id": "button_style",
      "label": "Button style",
      "options": [
        { "value": "primary", "label": "Solid" },
        { "value": "outline", "label": "Outline" },
        { "value": "text", "label": "Text link" }
      ],
      "default": "primary"
    },
    { "type": "checkbox", "id": "button_new_tab", "label": "Open link in a new tab", "default": false },

    { "type": "header", "content": "Layout" },
    {
      "type": "select",
      "id": "images_position",
      "label": "Images on desktop",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },
    { "type": "range", "id": "card_overlap", "label": "Card overlaps images on desktop", "info": "0 keeps the card beside the images.", "min": 0, "max": 160, "step": 8, "unit": "px", "default": 48 },
    { "type": "range", "id": "image_radius", "label": "Image and card corner radius", "min": 0, "max": 40, "step": 2, "unit": "px", "default": 12 },
    {
      "type": "select",
      "id": "mobile_order",
      "label": "Order on mobile",
      "options": [
        { "value": "images_first", "label": "Images first" },
        { "value": "text_first", "label": "Text first" }
      ],
      "default": "images_first"
    },
    {
      "type": "select",
      "id": "section_width",
      "label": "Width",
      "options": [
        { "value": "page", "label": "Page width" },
        { "value": "full", "label": "Full width" }
      ],
      "default": "page"
    },
    { "type": "text_alignment", "id": "text_alignment", "label": "Text alignment on desktop", "default": "left" },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Text alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },

    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "color_bg", "label": "Background", "info": "Also the thin ring between overlapping images.", "default": "#F4EFE8" },
    { "type": "color_background", "id": "color_bg_gradient", "label": "Background gradient", "info": "Optional. Covers the background color." },
    { "type": "color", "id": "color_text", "label": "Text", "default": "#2A2420" },
    { "type": "color", "id": "color_accent", "label": "Accent (solid button, eyebrow)", "default": "#7A5A3A" },
    { "type": "color", "id": "color_accent_text", "label": "Text on accent", "default": "#FFFFFF" },
    { "type": "color", "id": "color_card", "label": "Card background", "default": "#FFFDF9" },

    { "type": "header", "content": "Spacing and visibility" },
    { "type": "range", "id": "padding_top", "label": "Top padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 88 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 88 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 48 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 56 },
    {
      "type": "select",
      "id": "show_on",
      "label": "Show on",
      "options": [
        { "value": "all", "label": "All devices" },
        { "value": "desktop", "label": "Desktop only" },
        { "value": "mobile", "label": "Mobile only" }
      ],
      "default": "all"
    },
    { "type": "text", "id": "anchor_id", "label": "Anchor ID", "info": "Optional. Link to this section with #your-id." },

    { "type": "header", "content": "Motion" },
    { "type": "checkbox", "id": "animate", "label": "Rise in on scroll", "info": "Only in browsers that support scroll-driven animations; never when reduced motion is on.", "default": false }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "limit": 3,
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Desktop image", "info": "The first image is the largest. Alt text comes from the image in Files." },
        { "type": "image_picker", "id": "image_mobile", "label": "Mobile image", "info": "Optional. Shown below 750px." }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · Image collage",
      "blocks": [
        { "type": "image" },
        { "type": "image" },
        { "type": "image" }
      ]
    }
  ]
}
{% endschema %}