{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Logo cloud: a static grid or wrapping row of partner, press or stockist logos. Each logo can link
  somewhere. Optional grayscale and reduced opacity that turn to full color on hover and keyboard focus,
  plain / separator lines / card styles, logo height per device. HTML and CSS only.
  For a moving strip of logos use the Marquee section instead.
  Depends on: snippets/lib-image.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
-%}

<div
  class="lib-logo-cloud lib-logo-cloud--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-layout="{{ s.layout }}"
  data-style="{{ s.logo_style }}"
  data-align="{{ s.text_alignment }}"
  data-align-m="{{ s.text_alignment_mobile }}"
  {% if s.grayscale %}
    data-grayscale
  {% endif %}
  {% if s.hover_color %}
    data-hover
  {% endif %}
  {% if s.blend %}
    data-blend
  {% 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-card: {{ s.color_card }};
    --lib-border: {{ s.color_border }};
    --lib-cols: {{ s.columns }};
    --lib-cols-m: {{ s.columns_mobile }};
    --lib-logo-h: {{ s.logo_height }}px;
    --lib-logo-h-m: {{ s.logo_height_mobile }}px;
    --lib-logo-o: {{ s.opacity | divided_by: 100.0 }};
    --lib-gap: {{ s.gap }}px;
    --lib-radius-card: {{ s.card_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-logo-cloud__inner">
    {%- if s.heading != blank or s.text != blank -%}
      <header class="lib-logo-cloud__header">
        {%- if s.heading != blank -%}
          <{{ heading_tag }} class="lib-logo-cloud__heading lib-logo-cloud__heading--{{ s.heading_size }}">
            {{- s.heading -}}
          </{{ heading_tag }}>
        {%- endif -%}
        {%- if s.text != blank -%}
          <div class="lib-logo-cloud__text">{{ s.text }}</div>
        {%- endif -%}
      </header>
    {%- endif -%}

    <div class="lib-logo-cloud__frame">
      <ul class="lib-logo-cloud__list" role="list">
        {%- for block in section.blocks -%}
          {%- liquid
            assign b = block.settings
            if b.image == blank and request.design_mode == false
              continue
            endif
          -%}
          <li class="lib-logo-cloud__item" {{ block.shopify_attributes }}>
            {%- if b.link != blank -%}
              <a
                class="lib-logo-cloud__logo"
                href="{{ b.link }}"
                {% if b.new_tab %}
                  target="_blank" rel="noopener"
                {% endif %}
                {% if b.image.alt == blank and b.name != blank %}
                  aria-label="{{ b.name | escape }}"
                {% endif %}
              >
            {%- else -%}
              <span class="lib-logo-cloud__logo"{% if b.image.alt == blank and b.name != blank %} role="img" aria-label="{{ b.name | escape }}"{% endif %}>
            {%- endif -%}
            {%- render 'lib-image', image: b.image, class: 'lib-logo-cloud__img', sizes: '240px', eager: eager, placeholder: 'logo' -%}
            {%- if b.link != blank -%}
              </a>
            {%- else -%}
              </span>
            {%- endif -%}
          </li>
        {%- endfor -%}
      </ul>
    </div>
  </div>
</div>

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

  /* Header and row alignment: desktop, then mobile override. */
  .lib-logo-cloud__header { max-width: 42rem; margin: 0 0 clamp(1.75rem, 4vw, 2.75rem); text-align: left; }
  .lib-logo-cloud[data-align='center'] .lib-logo-cloud__header { margin-inline: auto; text-align: center; }
  .lib-logo-cloud[data-align='right'] .lib-logo-cloud__header { margin-inline-start: auto; text-align: right; }
  @media (max-width: 749px) {
    .lib-logo-cloud[data-align-m='left'] .lib-logo-cloud__header { margin-inline: 0 auto; text-align: left; }
    .lib-logo-cloud[data-align-m='center'] .lib-logo-cloud__header { margin-inline: auto; text-align: center; }
    .lib-logo-cloud[data-align-m='right'] .lib-logo-cloud__header { margin-inline: auto 0; text-align: right; }
  }
  .lib-logo-cloud__heading {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .lib-logo-cloud__heading--small { font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 600; }
  .lib-logo-cloud__heading--large { font-size: clamp(2rem, 4.4vw, 3.25rem); }
  .lib-logo-cloud__heading--xlarge { font-size: clamp(2.5rem, 6vw, 4.5rem); }
  .lib-logo-cloud__text { margin-top: 0.75rem; font-size: 1.0625rem; line-height: 1.6; opacity: 0.75; }
  .lib-logo-cloud__text > :first-child { margin-top: 0; }
  .lib-logo-cloud__text > :last-child { margin-bottom: 0; }

  /* Grid: columns per device. Row: logos at their own width, wrapping, aligned like the heading. */
  .lib-logo-cloud__list {
    display: grid;
    grid-template-columns: repeat(var(--lib-cols-m), minmax(0, 1fr));
    gap: var(--lib-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @media (min-width: 750px) {
    .lib-logo-cloud__list { grid-template-columns: repeat(min(var(--lib-cols), 4), minmax(0, 1fr)); }
  }
  @media (min-width: 990px) {
    .lib-logo-cloud__list { grid-template-columns: repeat(var(--lib-cols), minmax(0, 1fr)); }
  }
  .lib-logo-cloud[data-layout='row'] .lib-logo-cloud__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: calc(var(--lib-gap) * 2);
  }
  .lib-logo-cloud[data-layout='row'][data-align='center'] .lib-logo-cloud__list { justify-content: center; }
  .lib-logo-cloud[data-layout='row'][data-align='right'] .lib-logo-cloud__list { justify-content: flex-end; }
  @media (max-width: 749px) {
    .lib-logo-cloud[data-layout='row'][data-align-m='left'] .lib-logo-cloud__list { justify-content: flex-start; }
    .lib-logo-cloud[data-layout='row'][data-align-m='center'] .lib-logo-cloud__list { justify-content: center; }
    .lib-logo-cloud[data-layout='row'][data-align-m='right'] .lib-logo-cloud__list { justify-content: flex-end; }
  }

  .lib-logo-cloud__item { display: flex; align-items: center; justify-content: center; min-width: 0; }
  .lib-logo-cloud__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    color: inherit;
    border-radius: 4px;
  }
  a.lib-logo-cloud__logo:focus-visible { outline: 2px solid var(--lib-text); outline-offset: 4px; }
  .lib-logo-cloud__img {
    display: block;
    width: auto;
    max-width: 100%;
    height: var(--lib-logo-h-m);
    object-fit: contain;
    opacity: var(--lib-logo-o);
    transition: filter 0.3s ease, opacity 0.3s ease;
  }
  @media (min-width: 750px) {
    .lib-logo-cloud__img { height: var(--lib-logo-h); }
  }
  svg.lib-logo-cloud__img { width: calc(var(--lib-logo-h) * 2.5); max-width: 100%; fill: currentColor; }
  .lib-logo-cloud[data-grayscale] .lib-logo-cloud__img { filter: grayscale(1); }
  .lib-logo-cloud[data-blend] .lib-logo-cloud__img { mix-blend-mode: multiply; }
  .lib-logo-cloud[data-hover] .lib-logo-cloud__logo:hover .lib-logo-cloud__img,
  .lib-logo-cloud[data-hover] .lib-logo-cloud__logo:focus-visible .lib-logo-cloud__img { filter: none; opacity: 1; }

  /* Style: separator lines between cells. The frame clips the outer edge lines. */
  .lib-logo-cloud[data-style='lines'] .lib-logo-cloud__frame { overflow: hidden; }
  .lib-logo-cloud[data-style='lines'] .lib-logo-cloud__list {
    gap: 0;
    margin-inline-end: -1px;
    margin-block-end: -1px;
  }
  .lib-logo-cloud[data-style='lines'] .lib-logo-cloud__item {
    padding: calc(var(--lib-gap) + 0.75rem) var(--lib-gap);
    border-inline-end: 1px solid var(--lib-border);
    border-block-end: 1px solid var(--lib-border);
  }
  .lib-logo-cloud[data-style='lines'][data-layout='row'] .lib-logo-cloud__item { border-block-end: 0; }
  .lib-logo-cloud[data-style='lines'][data-layout='row'] .lib-logo-cloud__frame { overflow: visible; }
  .lib-logo-cloud[data-style='lines'][data-layout='row'] .lib-logo-cloud__list { margin: 0; row-gap: var(--lib-gap); }
  .lib-logo-cloud[data-style='lines'][data-layout='row'] .lib-logo-cloud__item { padding-block: 0.25rem; }
  .lib-logo-cloud[data-style='lines'][data-layout='row'] .lib-logo-cloud__item:last-child { border-inline-end: 0; }

  /* Style: each logo on a card. */
  .lib-logo-cloud[data-style='cards'] .lib-logo-cloud__item {
    padding: calc(var(--lib-gap) + 0.5rem) calc(var(--lib-gap) + 1rem);
    border-radius: var(--lib-radius-card);
    background: var(--lib-card);
    box-shadow: inset 0 0 0 1px var(--lib-border);
  }

  @media (prefers-reduced-motion: reduce) {
    .lib-logo-cloud__img { transition: none; }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Logo cloud",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 24,
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Stocked by independent shops we love" },
    {
      "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>Find our ceramics and linen in these stores and studios.</p>" },

    { "type": "header", "content": "Logos" },
    {
      "type": "select",
      "id": "logo_style",
      "label": "Style",
      "options": [
        { "value": "plain", "label": "Plain" },
        { "value": "lines", "label": "Separator lines" },
        { "value": "cards", "label": "Cards" }
      ],
      "default": "lines"
    },
    { "type": "range", "id": "logo_height", "label": "Logo height on desktop", "info": "Maximum height; wide logos also shrink to fit their column.", "min": 16, "max": 120, "step": 4, "unit": "px", "default": 48 },
    { "type": "range", "id": "logo_height_mobile", "label": "Logo height on mobile", "min": 16, "max": 96, "step": 4, "unit": "px", "default": 36 },
    { "type": "checkbox", "id": "grayscale", "label": "Show logos in grayscale", "default": true },
    { "type": "checkbox", "id": "hover_color", "label": "Full color and opacity on hover", "default": true },
    { "type": "range", "id": "opacity", "label": "Logo opacity", "min": 20, "max": 100, "step": 5, "unit": "%", "default": 70 },
    { "type": "checkbox", "id": "blend", "label": "Blend white logo backgrounds into the section", "info": "For JPG logos on a white box. Works on light backgrounds only.", "default": false },
    { "type": "range", "id": "card_radius", "label": "Card corner radius", "min": 0, "max": 32, "step": 2, "unit": "px", "default": 12, "visible_if": "{{ section.settings.logo_style == 'cards' }}" },

    { "type": "header", "content": "Layout" },
    {
      "type": "select",
      "id": "layout",
      "label": "Layout",
      "options": [
        { "value": "grid", "label": "Grid (equal columns)" },
        { "value": "row", "label": "Row (logos at their own width, wrapping)" }
      ],
      "default": "grid"
    },
    { "type": "range", "id": "columns", "label": "Columns on desktop", "info": "Tablets show up to 4.", "min": 2, "max": 8, "step": 1, "default": 4, "visible_if": "{{ section.settings.layout == 'grid' }}" },
    {
      "type": "select",
      "id": "columns_mobile",
      "label": "Columns on mobile",
      "options": [
        { "value": "2", "label": "2" },
        { "value": "3", "label": "3" },
        { "value": "4", "label": "4" }
      ],
      "default": "2",
      "visible_if": "{{ section.settings.layout == 'grid' }}"
    },
    { "type": "range", "id": "gap", "label": "Spacing", "min": 8, "max": 48, "step": 4, "unit": "px", "default": 24 },
    {
      "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": "Alignment on desktop", "info": "Heading, and logos in the row layout.", "default": "center" },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "center"
    },

    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "color_bg", "label": "Background", "default": "#FFFFFF" },
    { "type": "color_background", "id": "color_bg_gradient", "label": "Background gradient", "info": "Optional. Covers the background color." },
    { "type": "color", "id": "color_text", "label": "Text", "default": "#1C1917" },
    { "type": "color", "id": "color_border", "label": "Lines and card border", "default": "#E7E5E4" },
    { "type": "color", "id": "color_card", "label": "Card background", "default": "#FAFAF9", "visible_if": "{{ section.settings.logo_style == 'cards' }}" },

    { "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": 64 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 64 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 40 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 40 },
    {
      "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": "logo",
      "name": "Logo",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Logo", "info": "SVG or transparent PNG works best. Alt text comes from the image." },
        { "type": "text", "id": "name", "label": "Name", "info": "Optional. Used as the accessible name when the image has no alt text." },
        { "type": "url", "id": "link", "label": "Link" },
        { "type": "checkbox", "id": "new_tab", "label": "Open link in a new tab", "default": false }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · Logo cloud",
      "blocks": [
        { "type": "logo", "settings": { "name": "Partner 1" } },
        { "type": "logo", "settings": { "name": "Partner 2" } },
        { "type": "logo", "settings": { "name": "Partner 3" } },
        { "type": "logo", "settings": { "name": "Partner 4" } },
        { "type": "logo", "settings": { "name": "Partner 5" } },
        { "type": "logo", "settings": { "name": "Partner 6" } },
        { "type": "logo", "settings": { "name": "Partner 7" } },
        { "type": "logo", "settings": { "name": "Partner 8" } }
      ]
    }
  ]
}
{% endschema %}