{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Collection cards: up to eight collection tiles with image, title, optional label and product count.
  Text over the image on a gradient, or below the image. Two to five columns on desktop; one or two
  columns, or a swipeable row, on mobile. Each card can override the collection image and title.
  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 card_tag = 'h3'
  if heading_tag == 'h3' or heading_tag == 'p'
    assign card_tag = 'h4'
  endif
  assign cols = s.columns | plus: 0
  assign img_vw = 100 | divided_by: cols
  assign img_sizes = '(min-width: 990px) ' | append: img_vw | append: 'vw, (min-width: 750px) 33vw, '
  case s.mobile_layout
    when '2'
      assign img_sizes = img_sizes | append: '50vw'
    when 'scroll'
      assign img_sizes = img_sizes | append: '75vw'
    else
      assign img_sizes = img_sizes | append: '100vw'
  endcase
-%}

<div
  class="lib-collection-cards lib-collection-cards--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-style="{{ s.card_style }}"
  data-mobile="{{ s.mobile_layout }}"
  data-card-align="{{ s.card_text_alignment }}"
  {% if s.hover_zoom %}
    data-zoom
  {% 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-card-text: {{ s.color_card_text }};
    --lib-overlay: {{ s.color_overlay }};
    --lib-overlay-o: {{ s.overlay_opacity }}%;
    --lib-overlay-text: {{ s.color_overlay_text }};
    --lib-cols: {{ cols }};
    --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-collection-cards__inner">
    {%- if s.heading != blank or s.text != blank or s.button_label != blank -%}
      <header class="lib-collection-cards__header" data-align="{{ s.text_alignment }}" data-align-m="{{ s.text_alignment_mobile }}">
        <div class="lib-collection-cards__copy">
          {%- if s.heading != blank -%}
            <{{ heading_tag }} class="lib-collection-cards__heading lib-collection-cards__heading--{{ s.heading_size }}">
              {{- s.heading -}}
            </{{ heading_tag }}>
          {%- endif -%}
          {%- if s.text != blank -%}
            <div class="lib-collection-cards__text">{{ s.text }}</div>
          {%- endif -%}
        </div>
        {%- if s.button_label != blank -%}
          <div class="lib-collection-cards__actions">
            {%- render 'lib-button',
              label: s.button_label,
              url: s.button_url,
              style: s.button_style,
              new_tab: s.button_new_tab
            -%}
          </div>
        {%- endif -%}
      </header>
    {%- endif -%}

    <ul class="lib-collection-cards__grid" role="list">
      {%- for block in section.blocks -%}
        {%- liquid
          assign b = block.settings
          assign c = b.collection
          if c == blank and b.image == blank and b.title == blank and request.design_mode == false
            continue
          endif
          assign title = b.title | default: c.title | default: 'Collection title'
          assign img = b.image | default: c.featured_image
          assign count = 12
          if c != blank
            assign count = c.products_count
          endif
          assign count_word = s.count_label
          if count == 1
            assign count_word = s.count_label_one
          endif
          assign tag = 'div'
          if c != blank
            assign tag = 'a'
          endif
          assign eager = false
          if section.index <= 2 and forloop.index <= cols
            assign eager = true
          endif
        -%}
        <li class="lib-collection-cards__item" {{ block.shopify_attributes }}>
          <{{ tag }} class="lib-collection-cards__card" {% if tag == 'a' %}href="{{ c.url }}"{% endif %}>
            <div class="lib-collection-cards__media" data-ratio="{{ s.image_ratio }}">
              {%- render 'lib-image',
                image: img,
                class: 'lib-collection-cards__img',
                sizes: img_sizes,
                eager: eager,
                placeholder: 'collection-1'
              -%}
              {%- if b.label != blank -%}
                <span class="lib-collection-cards__label">{{ b.label | escape }}</span>
              {%- endif -%}
            </div>
            <div class="lib-collection-cards__body">
              <{{ card_tag }} class="lib-collection-cards__title">
                <span>{{ title | escape }}</span>
                <svg class="lib-collection-cards__arrow" 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>
              </{{ card_tag }}>
              {%- if s.show_count -%}
                <p class="lib-collection-cards__count">{{ count }} {{ count_word | escape }}</p>
              {%- endif -%}
            </div>
          </{{ tag }}>
        </li>
      {%- endfor -%}
    </ul>
  </div>
</div>

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

  /* Header: copy and optional button; alignment per device. */
  .lib-collection-cards__header {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
    align-items: flex-start;
    text-align: left;
  }
  .lib-collection-cards__header[data-align='center'] { align-items: center; text-align: center; }
  .lib-collection-cards__header[data-align='right'] { align-items: flex-end; text-align: right; }
  @media (min-width: 750px) {
    .lib-collection-cards__header[data-align='left'] { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  }
  @media (max-width: 749px) {
    .lib-collection-cards__header[data-align-m='left'] { align-items: flex-start; text-align: left; }
    .lib-collection-cards__header[data-align-m='center'] { align-items: center; text-align: center; }
    .lib-collection-cards__header[data-align-m='right'] { align-items: flex-end; text-align: right; }
  }
  .lib-collection-cards__copy { max-width: 40rem; }
  .lib-collection-cards__heading {
    margin: 0;
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  .lib-collection-cards__heading--small { font-size: clamp(1.5rem, 2.4vw, 2rem); }
  .lib-collection-cards__heading--large { font-size: clamp(2rem, 4.4vw, 3.5rem); }
  .lib-collection-cards__heading--xlarge { font-size: clamp(2.5rem, 6vw, 4.5rem); }
  .lib-collection-cards__text { margin-top: 0.75rem; font-size: 1.0625rem; line-height: 1.6; opacity: 0.75; }
  .lib-collection-cards__text > :first-child { margin-top: 0; }
  .lib-collection-cards__text > :last-child { margin-bottom: 0; }
  .lib-collection-cards__actions { flex: none; }

  /* Grid: columns per device, or a swipeable row on mobile. */
  .lib-collection-cards__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lib-gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .lib-collection-cards[data-mobile='2'] .lib-collection-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 749px) {
    .lib-collection-cards[data-mobile='scroll'] .lib-collection-cards__grid {
      display: flex;
      overflow-x: auto;
      margin-inline: -1rem;
      padding: 0 1rem 0.5rem;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 1rem;
      scrollbar-width: thin;
      overscroll-behavior-x: contain;
    }
    .lib-collection-cards[data-mobile='scroll'] .lib-collection-cards__item {
      flex: 0 0 76%;
      scroll-snap-align: start;
    }
  }
  @media (min-width: 750px) {
    .lib-collection-cards .lib-collection-cards__grid,
    .lib-collection-cards[data-mobile='2'] .lib-collection-cards__grid {
      grid-template-columns: repeat(min(var(--lib-cols), 3), minmax(0, 1fr));
    }
  }
  @media (min-width: 990px) {
    .lib-collection-cards .lib-collection-cards__grid,
    .lib-collection-cards[data-mobile='2'] .lib-collection-cards__grid {
      grid-template-columns: repeat(var(--lib-cols), minmax(0, 1fr));
    }
  }

  /* Card */
  .lib-collection-cards__item { display: flex; min-width: 0; }
  .lib-collection-cards__card {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--lib-radius-card);
    color: inherit;
    text-decoration: none;
    isolation: isolate;
  }
  .lib-collection-cards__card:focus-visible { outline: 2px solid var(--lib-accent); outline-offset: 3px; }
  .lib-collection-cards__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: var(--lib-radius-card);
    background: color-mix(in srgb, var(--lib-text) 7%, transparent);
  }
  .lib-collection-cards__media[data-ratio='square'] { aspect-ratio: 1; }
  .lib-collection-cards__media[data-ratio='landscape'] { aspect-ratio: 4 / 3; }
  .lib-collection-cards__media[data-ratio='tall'] { aspect-ratio: 2 / 3; }
  .lib-collection-cards__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  svg.lib-collection-cards__img { fill: color-mix(in srgb, var(--lib-text) 22%, transparent); }
  .lib-collection-cards[data-zoom] .lib-collection-cards__card:hover .lib-collection-cards__img,
  .lib-collection-cards[data-zoom] .lib-collection-cards__card:focus-visible .lib-collection-cards__img { transform: scale(1.06); }

  .lib-collection-cards__label {
    position: absolute;
    z-index: 2;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: var(--lib-accent);
    color: var(--lib-accent-text);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.2;
  }

  .lib-collection-cards__body { display: flex; flex-direction: column; gap: 0.2rem; padding-top: 0.9rem; }
  .lib-collection-cards[data-card-align='center'] .lib-collection-cards__body { align-items: center; text-align: center; }
  .lib-collection-cards__title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.25;
  }
  .lib-collection-cards__arrow { flex: none; transition: transform 0.2s ease; }
  .lib-collection-cards__card:hover .lib-collection-cards__arrow { transform: translateX(3px); }
  .lib-collection-cards__count { margin: 0; font-size: 0.875rem; opacity: 0.65; }

  /* Style: text below on a card surface. */
  .lib-collection-cards[data-style='below'] .lib-collection-cards__card {
    background: var(--lib-card);
    color: var(--lib-card-text);
  }
  .lib-collection-cards[data-style='below'] .lib-collection-cards__media { border-end-start-radius: 0; border-end-end-radius: 0; }
  .lib-collection-cards[data-style='below'] .lib-collection-cards__body { padding: 0.9rem 1rem 1rem; }

  /* Style: text over the image on a gradient. */
  .lib-collection-cards[data-style='overlay'] .lib-collection-cards__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, var(--lib-overlay) var(--lib-overlay-o), transparent) 0%, transparent 60%);
    pointer-events: none;
  }
  .lib-collection-cards[data-style='overlay'] .lib-collection-cards__body {
    position: absolute;
    z-index: 1;
    inset: auto 0 0;
    padding: 1.25rem;
    color: var(--lib-overlay-text);
  }
  .lib-collection-cards[data-style='overlay'] .lib-collection-cards__title { font-size: 1.25rem; }
  .lib-collection-cards[data-style='overlay'] .lib-collection-cards__count { opacity: 0.85; }

  @media (prefers-reduced-motion: reduce) {
    .lib-collection-cards__img,
    .lib-collection-cards__arrow { transition: none; }
    .lib-collection-cards[data-zoom] .lib-collection-cards__card:hover .lib-collection-cards__img,
    .lib-collection-cards[data-zoom] .lib-collection-cards__card:focus-visible .lib-collection-cards__img,
    .lib-collection-cards__card:hover .lib-collection-cards__arrow { transform: none; }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Collection cards",
  "tag": "section",
  "class": "lib-section",
  "max_blocks": 8,
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Shop by <em>room and ritual</em>" },
    {
      "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>Handmade pieces for the table, the sofa and the evening.</p>" },

    { "type": "header", "content": "Button" },
    { "type": "text", "id": "button_label", "label": "Button label", "info": "Optional. Shown beside or under the heading.", "default": "View all collections" },
    { "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": "text"
    },
    { "type": "checkbox", "id": "button_new_tab", "label": "Open link in a new tab", "default": false },

    { "type": "header", "content": "Cards" },
    {
      "type": "select",
      "id": "card_style",
      "label": "Card style",
      "options": [
        { "value": "overlay", "label": "Text over image" },
        { "value": "below", "label": "Text below image" }
      ],
      "default": "overlay"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "label": "Image shape",
      "options": [
        { "value": "square", "label": "Square" },
        { "value": "portrait", "label": "Portrait (4:5)" },
        { "value": "tall", "label": "Tall (2:3)" },
        { "value": "landscape", "label": "Landscape (4:3)" }
      ],
      "default": "portrait"
    },
    {
      "type": "select",
      "id": "card_text_alignment",
      "label": "Card text alignment",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" }
      ],
      "default": "left"
    },
    { "type": "checkbox", "id": "show_count", "label": "Show product count", "default": true },
    { "type": "text", "id": "count_label", "label": "Product count word", "default": "products", "visible_if": "{{ section.settings.show_count }}" },
    { "type": "text", "id": "count_label_one", "label": "Product count word for one product", "default": "product", "visible_if": "{{ section.settings.show_count }}" },
    { "type": "range", "id": "card_radius", "label": "Corner radius", "min": 0, "max": 32, "step": 2, "unit": "px", "default": 14 },

    { "type": "header", "content": "Layout" },
    { "type": "range", "id": "columns", "label": "Columns on desktop", "min": 2, "max": 5, "step": 1, "default": 4 },
    {
      "type": "select",
      "id": "mobile_layout",
      "label": "Layout on mobile",
      "options": [
        { "value": "1", "label": "1 column" },
        { "value": "2", "label": "2 columns" },
        { "value": "scroll", "label": "Swipeable row" }
      ],
      "default": "scroll"
    },
    { "type": "range", "id": "gap", "label": "Space between cards", "min": 8, "max": 40, "step": 4, "unit": "px", "default": 20 },
    {
      "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 alignment on desktop", "default": "left" },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Heading 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", "default": "#FAF8F4" },
    { "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_accent", "label": "Accent (label, solid button)", "default": "#1C1917" },
    { "type": "color", "id": "color_accent_text", "label": "Text on accent", "default": "#FAF8F4" },
    { "type": "color", "id": "color_card", "label": "Card background", "default": "#FFFFFF", "visible_if": "{{ section.settings.card_style == 'below' }}" },
    { "type": "color", "id": "color_card_text", "label": "Card text", "default": "#1C1917", "visible_if": "{{ section.settings.card_style == 'below' }}" },
    { "type": "color", "id": "color_overlay", "label": "Overlay", "default": "#000000", "visible_if": "{{ section.settings.card_style == 'overlay' }}" },
    {
      "type": "range",
      "id": "overlay_opacity",
      "label": "Overlay opacity",
      "min": 0,
      "max": 100,
      "step": 5,
      "unit": "%",
      "default": 60,
      "visible_if": "{{ section.settings.card_style == 'overlay' }}"
    },
    { "type": "color", "id": "color_overlay_text", "label": "Text on image", "default": "#FFFFFF", "visible_if": "{{ section.settings.card_style == 'overlay' }}" },

    { "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": 80 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 80 },
    { "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": 48 },
    {
      "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": "hover_zoom", "label": "Zoom image on hover", "default": true }
  ],
  "blocks": [
    {
      "type": "collection",
      "name": "Collection",
      "limit": 8,
      "settings": [
        { "type": "collection", "id": "collection", "label": "Collection" },
        { "type": "image_picker", "id": "image", "label": "Custom image", "info": "Optional. Replaces the collection image." },
        { "type": "text", "id": "title", "label": "Custom title", "info": "Optional. Replaces the collection title." },
        { "type": "text", "id": "label", "label": "Label", "info": "Optional. A small tag on the image, e.g. New." }
      ]
    }
  ],
  "presets": [
    {
      "name": "Lib · Collection cards",
      "blocks": [
        { "type": "collection", "settings": { "title": "Ceramics" } },
        { "type": "collection", "settings": { "title": "Linen and wool", "label": "New" } },
        { "type": "collection", "settings": { "title": "Lighting" } },
        { "type": "collection", "settings": { "title": "Candles" } }
      ]
    }
  ]
}
{% endschema %}