{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Multicolumn: up to 12 columns, each with an image (separate mobile image) or a small icon,
  a heading, text and an optional link. 2 to 6 columns on desktop; 1, 2 or a swipeable row on mobile.
  Card style none / filled / outline. HTML and CSS only, 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 col_tag = 'h3'
  if heading_tag == 'h3' or heading_tag == 'p'
    assign col_tag = 'h4'
  endif
  assign eager = false
  if section.index <= 2
    assign eager = true
  endif
  assign col_vw = 100 | divided_by: s.columns
  if s.image_width == 'small'
    assign col_vw = col_vw | divided_by: 2
  endif
  assign img_sizes = '(min-width: 990px) ' | append: col_vw | append: 'vw, (min-width: 750px) 33vw, 80vw'
-%}

<div
  class="lib-multicolumn lib-multicolumn--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-mobile="{{ s.columns_mobile }}"
  data-card="{{ s.card_style }}"
  data-img-width="{{ s.image_width }}"
  data-col-align="{{ s.column_alignment }}"
  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-card: {{ s.color_card }};
    --lib-accent: {{ s.color_accent }};
    --lib-accent-text: {{ s.color_accent_text }};
    --lib-cols: {{ s.columns }};
    --lib-gap: {{ s.column_gap }}px;
    --lib-radius-img: {{ s.corner_radius }}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-multicolumn__inner">
    {%- if s.heading != blank or s.text != blank -%}
      <header class="lib-multicolumn__header" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
        {%- if s.heading != blank -%}
          <{{ heading_tag }} class="lib-multicolumn__heading lib-multicolumn__heading--{{ s.heading_size }}">
            {{- s.heading -}}
          </{{ heading_tag }}>
        {%- endif -%}
        {%- if s.text != blank -%}
          <div class="lib-multicolumn__intro">{{ s.text }}</div>
        {%- endif -%}
      </header>
    {%- endif -%}

    {%- if section.blocks.size > 0 -%}
      <ul class="lib-multicolumn__grid" role="list">
        {%- for block in section.blocks -%}
          {%- assign b = block.settings -%}
          <li class="lib-multicolumn__col" {{ block.shopify_attributes }}>
            {%- if b.media == 'image' -%}
              <div class="lib-multicolumn__media" data-ratio="{{ s.image_ratio }}">
                {%- liquid
                  assign img_eager = false
                  if eager and forloop.index <= s.columns
                    assign img_eager = true
                  endif
                  render 'lib-image', image: b.image, image_mobile: b.image_mobile, class: 'lib-multicolumn__img', sizes: img_sizes, eager: img_eager, placeholder: 'image'
                -%}
              </div>
            {%- elsif b.media == 'icon' and b.icon != blank -%}
              {{ b.icon | image_url: width: 192 | image_tag: class: 'lib-multicolumn__icon', loading: 'lazy', alt: '' }}
            {%- endif -%}

            <div class="lib-multicolumn__body">
              {%- if b.heading != blank -%}
                <{{ col_tag }} class="lib-multicolumn__title">
                  {%- if b.link != blank and b.link_label == blank -%}
                    <a
                      class="lib-multicolumn__title-link"
                      href="{{ b.link }}"
                      {% if b.new_tab %}
                        target="_blank" rel="noopener"
                      {% endif %}
                    >
                      {{- b.heading | escape -}}
                    </a>
                  {%- else -%}
                    {{- b.heading | escape -}}
                  {%- endif -%}
                </{{ col_tag }}>
              {%- endif -%}
              {%- if b.text != blank -%}
                <div class="lib-multicolumn__text">{{ b.text }}</div>
              {%- endif -%}
              {%- if b.link != blank and b.link_label != blank -%}
                <a
                  class="lib-multicolumn__link"
                  href="{{ b.link }}"
                  {% if b.new_tab %}
                    target="_blank" rel="noopener"
                  {% endif %}
                >
                  {{- b.link_label | escape -}}
                  <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">
                    <path d="M3 8h9M8.5 4.5 12 8l-3.5 3.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </a>
              {%- endif -%}
            </div>
          </li>
        {%- endfor -%}
      </ul>
    {%- endif -%}

    {%- if s.button_label != blank -%}
      <div class="lib-multicolumn__actions" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
        {%- 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>

{% stylesheet %}
  .lib-multicolumn {
    --lib-pad: 1.5rem;
    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-multicolumn__inner { max-width: 1200px; margin: 0 auto; }
  .lib-multicolumn--full .lib-multicolumn__inner { max-width: none; }
  @media (max-width: 749px) {
    .lib-multicolumn { padding-top: var(--lib-pt-m); padding-bottom: var(--lib-pb-m); }
    .lib-multicolumn[data-show='desktop'] { display: none; }
  }
  @media (min-width: 750px) {
    .lib-multicolumn[data-show='mobile'] { display: none; }
  }

  /* Header: alignment per device. */
  .lib-multicolumn__header { max-width: 42rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
  .lib-multicolumn__header[data-align='left'] { margin-left: 0; text-align: left; }
  .lib-multicolumn__header[data-align='right'] { margin-right: 0; text-align: right; }
  @media (max-width: 749px) {
    .lib-multicolumn__header[data-align-m='left'] { margin-left: 0; margin-right: auto; text-align: left; }
    .lib-multicolumn__header[data-align-m='center'] { margin-inline: auto; text-align: center; }
    .lib-multicolumn__header[data-align-m='right'] { margin-right: 0; margin-left: auto; text-align: right; }
  }
  .lib-multicolumn__heading {
    margin: 0;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .lib-multicolumn__heading--small { font-size: clamp(1.4rem, 2.5vw, 2rem); }
  .lib-multicolumn__heading--large { font-size: clamp(2rem, 4.5vw, 3.5rem); }
  .lib-multicolumn__heading--xlarge { font-size: clamp(2.5rem, 6vw, 4.5rem); }
  .lib-multicolumn__intro { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.6; opacity: 0.75; }
  .lib-multicolumn__intro > :first-child { margin-top: 0; }
  .lib-multicolumn__intro > :last-child { margin-bottom: 0; }

  /* Grid: columns per device, or a swipeable row on mobile. */
  .lib-multicolumn__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: min(var(--lib-gap), 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .lib-multicolumn[data-mobile='2'] .lib-multicolumn__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: min(var(--lib-gap), 1rem); }
  @media (max-width: 749px) {
    .lib-multicolumn[data-mobile='scroll'] .lib-multicolumn__grid {
      display: flex;
      overflow-x: auto;
      margin-inline: -1rem;
      padding: 0 1rem 0.75rem;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 1rem;
      scrollbar-width: thin;
      overscroll-behavior-x: contain;
    }
    .lib-multicolumn[data-mobile='scroll'] .lib-multicolumn__col { flex: 0 0 78%; scroll-snap-align: start; }
    .lib-multicolumn[data-mobile='2'] { --lib-pad: 1rem; }
    .lib-multicolumn[data-mobile='2'] .lib-multicolumn__title { font-size: 1.05rem; }
    .lib-multicolumn[data-mobile='2'] .lib-multicolumn__text { font-size: 0.9375rem; }
  }
  @media (min-width: 750px) {
    .lib-multicolumn .lib-multicolumn__grid,
    .lib-multicolumn[data-mobile='2'] .lib-multicolumn__grid {
      grid-template-columns: repeat(min(var(--lib-cols), 3), minmax(0, 1fr));
      gap: var(--lib-gap);
    }
  }
  @media (min-width: 990px) {
    .lib-multicolumn .lib-multicolumn__grid,
    .lib-multicolumn[data-mobile='2'] .lib-multicolumn__grid {
      grid-template-columns: repeat(var(--lib-cols), minmax(0, 1fr));
    }
  }

  /* Column */
  .lib-multicolumn__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    text-align: left;
  }
  .lib-multicolumn[data-col-align='center'] .lib-multicolumn__col { align-items: center; text-align: center; }

  /* Card styles: filled and outline wrap each column; a full-width image runs to the card edges. */
  .lib-multicolumn[data-card='filled'] .lib-multicolumn__col,
  .lib-multicolumn[data-card='outline'] .lib-multicolumn__col {
    padding: var(--lib-pad);
    border-radius: var(--lib-radius-img);
    overflow: hidden;
  }
  .lib-multicolumn[data-card='filled'] .lib-multicolumn__col { background: var(--lib-card); }
  .lib-multicolumn[data-card='outline'] .lib-multicolumn__col {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lib-text) 16%, transparent);
  }
  .lib-multicolumn[data-card='filled'][data-img-width='full'] .lib-multicolumn__media,
  .lib-multicolumn[data-card='outline'][data-img-width='full'] .lib-multicolumn__media {
    width: calc(100% + 2 * var(--lib-pad));
    max-width: none;
    margin: calc(-1 * var(--lib-pad)) calc(-1 * var(--lib-pad)) var(--lib-pad);
    border-radius: 0;
  }

  /* Media */
  .lib-multicolumn__media {
    position: relative;
    width: 100%;
    margin-bottom: 1.25rem;
    border-radius: var(--lib-radius-img);
    overflow: hidden;
    background: color-mix(in srgb, var(--lib-text) 6%, transparent);
  }
  .lib-multicolumn[data-img-width='small'] .lib-multicolumn__media { width: 50%; max-width: 12rem; }
  .lib-multicolumn[data-img-width='small'] .lib-multicolumn__col { align-items: center; }
  .lib-multicolumn__media[data-ratio='square'] { aspect-ratio: 1; }
  .lib-multicolumn__media[data-ratio='portrait'] { aspect-ratio: 4 / 5; }
  .lib-multicolumn__media[data-ratio='landscape'] { aspect-ratio: 3 / 2; }
  .lib-multicolumn__media[data-ratio='circle'] { aspect-ratio: 1; border-radius: 50%; }
  .lib-multicolumn__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .lib-multicolumn__media[data-ratio='adapt'] .lib-multicolumn__img { height: auto; }
  .lib-multicolumn__img:is(svg) { fill: color-mix(in srgb, var(--lib-text) 25%, transparent); }
  .lib-multicolumn__icon {
    display: block;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.25rem;
    object-fit: contain;
  }

  /* Body */
  .lib-multicolumn__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; width: 100%; }
  .lib-multicolumn[data-col-align='center'] .lib-multicolumn__body { align-items: center; }
  .lib-multicolumn__title { margin: 0; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; }
  .lib-multicolumn__title-link { color: inherit; text-decoration: none; }
  .lib-multicolumn__title-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
  .lib-multicolumn__text { margin-top: 0.5rem; line-height: 1.6; opacity: 0.75; }
  .lib-multicolumn__text > :first-child { margin-top: 0; }
  .lib-multicolumn__text > :last-child { margin-bottom: 0; }
  .lib-multicolumn__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-top: auto;
    padding-top: 1rem;
    font-weight: 600;
    color: var(--lib-accent);
    text-decoration: none;
  }
  .lib-multicolumn__link svg { transition: transform 0.2s ease; }
  .lib-multicolumn__link:hover svg { transform: translateX(3px); }
  .lib-multicolumn__link:focus-visible,
  .lib-multicolumn__title-link:focus-visible {
    outline: 2px solid var(--lib-accent);
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* Button under the grid follows the heading alignment. */
  .lib-multicolumn__actions { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }
  .lib-multicolumn__actions[data-align='left'] { justify-content: flex-start; }
  .lib-multicolumn__actions[data-align='right'] { justify-content: flex-end; }
  @media (max-width: 749px) {
    .lib-multicolumn__actions[data-align-m='left'] { justify-content: flex-start; }
    .lib-multicolumn__actions[data-align-m='center'] { justify-content: center; }
    .lib-multicolumn__actions[data-align-m='right'] { justify-content: flex-end; }
  }
  @media (prefers-reduced-motion: reduce) {
    .lib-multicolumn__link svg { transition: none; }
    .lib-multicolumn__link:hover svg { transform: none; }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Multicolumn",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 12,
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "From clay to your table" },
    {
      "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": "medium"
    },
    { "type": "richtext", "id": "text", "label": "Text", "default": "<p>Every piece passes through the same four steps in our studio, by hand.</p>" },

    { "type": "header", "content": "Button" },
    { "type": "text", "id": "button_label", "label": "Button label", "default": "Visit the studio" },
    { "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": "outline"
    },
    { "type": "checkbox", "id": "button_new_tab", "label": "Open link in a new tab", "default": false },

    { "type": "header", "content": "Images and cards" },
    {
      "type": "select",
      "id": "image_ratio",
      "label": "Image shape",
      "options": [
        { "value": "adapt", "label": "Adapt to image" },
        { "value": "square", "label": "Square" },
        { "value": "portrait", "label": "Portrait" },
        { "value": "landscape", "label": "Landscape" },
        { "value": "circle", "label": "Circle" }
      ],
      "default": "square"
    },
    {
      "type": "select",
      "id": "image_width",
      "label": "Image width",
      "options": [
        { "value": "full", "label": "Full column width" },
        { "value": "small", "label": "Small, centered" }
      ],
      "default": "full"
    },
    {
      "type": "select",
      "id": "card_style",
      "label": "Column style",
      "options": [
        { "value": "none", "label": "None" },
        { "value": "filled", "label": "Filled card" },
        { "value": "outline", "label": "Outlined card" }
      ],
      "default": "none"
    },
    { "type": "range", "id": "corner_radius", "label": "Corner radius", "info": "Images, and cards when a column style is set.", "min": 0, "max": 40, "step": 2, "unit": "px", "default": 12 },

    { "type": "header", "content": "Layout" },
    { "type": "range", "id": "columns", "label": "Columns on desktop", "min": 2, "max": 6, "step": 1, "default": 4 },
    {
      "type": "select",
      "id": "columns_mobile",
      "label": "Columns on mobile",
      "info": "Between 750px and 989px the grid shows up to three columns.",
      "options": [
        { "value": "1", "label": "1 column" },
        { "value": "2", "label": "2 columns" },
        { "value": "scroll", "label": "Swipeable row" }
      ],
      "default": "scroll"
    },
    { "type": "range", "id": "column_gap", "label": "Space between columns", "min": 8, "max": 64, "step": 4, "unit": "px", "default": 32 },
    {
      "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": "Heading and button alignment on desktop", "default": "center" },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Heading and button alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },
    {
      "type": "select",
      "id": "column_alignment",
      "label": "Column text alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" }
      ],
      "default": "left"
    },

    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "color_bg", "label": "Background", "default": "#F5F1EA" },
    { "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_card", "label": "Card", "default": "#FFFFFF", "visible_if": "{{ section.settings.card_style == 'filled' }}" },
    { "type": "color", "id": "color_accent", "label": "Accent (links, solid button)", "default": "#9A5B3A" },
    { "type": "color", "id": "color_accent_text", "label": "Text on accent", "default": "#FFFFFF" },

    { "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": 56 },
    { "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." }
  ],
  "blocks": [
    {
      "type": "column",
      "name": "Column",
      "limit": 12,
      "settings": [
        {
          "type": "select",
          "id": "media",
          "label": "Media",
          "options": [
            { "value": "image", "label": "Image" },
            { "value": "icon", "label": "Small icon" },
            { "value": "none", "label": "None" }
          ],
          "default": "image"
        },
        { "type": "image_picker", "id": "image", "label": "Desktop image", "visible_if": "{{ block.settings.media == 'image' }}" },
        { "type": "image_picker", "id": "image_mobile", "label": "Mobile image", "info": "Optional. Shown below 750px.", "visible_if": "{{ block.settings.media == 'image' }}" },
        { "type": "image_picker", "id": "icon", "label": "Icon", "info": "Shown at 48px. A square SVG or PNG works best.", "visible_if": "{{ block.settings.media == 'icon' }}" },
        { "type": "text", "id": "heading", "label": "Heading", "default": "Column heading" },
        { "type": "richtext", "id": "text", "label": "Text", "default": "<p>One or two sentences about this step, feature or promise.</p>" },
        { "type": "url", "id": "link", "label": "Link" },
        { "type": "text", "id": "link_label", "label": "Link label", "info": "Without a label, the heading becomes the link.", "visible_if": "{{ block.settings.link != blank }}" },
        { "type": "checkbox", "id": "new_tab", "label": "Open link in a new tab", "default": false, "visible_if": "{{ block.settings.link != blank }}" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · Multicolumn",
      "blocks": [
        { "type": "column", "settings": { "heading": "Thrown on the wheel", "text": "<p>Each form starts as a ball of local stoneware clay, shaped by hand on the wheel.</p>" } },
        { "type": "column", "settings": { "heading": "Dipped in glaze", "text": "<p>Our glazes are mixed in small batches, so every piece carries its own variation.</p>" } },
        { "type": "column", "settings": { "heading": "Fired twice", "text": "<p>A bisque firing, then a glaze firing, make the pieces ready for daily use.</p>" } },
        { "type": "column", "settings": { "heading": "Packed with care", "text": "<p>Wrapped in recycled paper and boxed without plastic.</p>", "link_label": "Shipping details" } }
      ]
    }
  ]
}
{% endschema %}