{% if section.settings.italic_font_family == 'georgia-pro'
  or section.settings.italic_font_family == 'bodoni-moda'
  or section.settings.italic_font_family == 'instrument-serif'
  or section.settings.italic_font_family == 'custom_google_font'
%}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  {% if section.settings.italic_font_family == 'georgia-pro' %}
    <link
      href="https://fonts.googleapis.com/css2?family=Georgia+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap"
      rel="stylesheet"
    >
  {% endif %}
  {% if section.settings.italic_font_family == 'bodoni-moda' %}
    <link
      href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400;1,6..96,500;1,6..96,600;1,6..96,700&display=swap"
      rel="stylesheet"
    >
  {% endif %}
  {% if section.settings.italic_font_family == 'instrument-serif' %}
    <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
  {% endif %}
  {% if section.settings.italic_font_family == 'custom_google_font'
    and section.settings.custom_google_font_name != blank
  %}
    <link
      href="https://fonts.googleapis.com/css2?family={{ section.settings.custom_google_font_name | replace: ' ', '+' }}:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
      rel="stylesheet"
    >
  {% endif %}
{% endif %}

{%- style -%}
      .section-{{ section.id }}-padding {
        padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
        padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
      }

      @media screen and (min-width: 750px) {
        .section-{{ section.id }}-padding {
          padding-top: {{ section.settings.padding_top }}px;
          padding-bottom: {{ section.settings.padding_bottom }}px;
        }
      }

      .color-scheme-{{ section.id }}.color-custom {
        --color-background: {{ section.settings.custom_colors_background.red }}, {{ section.settings.custom_colors_background.green }}, {{ section.settings.custom_colors_background.blue }};
        --gradient-background: {% if section.settings.custom_gradient_background != blank %}{{ section.settings.custom_gradient_background }}{% else %}{{ section.settings.custom_colors_background }}{% endif %};
        {% if section.settings.custom_image_background != blank %}
          {% # theme-check-disable %}
          --gradient-background: url('{{ section.settings.custom_image_background | img_url: 'master' }}') center center / cover no-repeat;
          {% # theme-check-enable %}
        {% endif %}
        --color-foreground: {{ section.settings.custom_colors_text.red }}, {{ section.settings.custom_colors_text.green }}, {{ section.settings.custom_colors_text.blue }};
        --accent-color: {{ section.settings.custom_colors_accent.red }}, {{ section.settings.custom_colors_accent.green }}, {{ section.settings.custom_colors_accent.blue }};
        --color-button: {{ section.settings.custom_colors_solid_button_background.red }}, {{ section.settings.custom_colors_solid_button_background.green }}, {{ section.settings.custom_colors_solid_button_background.blue }};
        --color-button-text: {{ section.settings.custom_colors_solid_button_text.red }}, {{ section.settings.custom_colors_solid_button_text.green }}, {{ section.settings.custom_colors_solid_button_text.blue }};
        --color-base-outline-button-labels: {{ section.settings.custom_colors_outline_button.red }}, {{ section.settings.custom_colors_outline_button.green }}, {{ section.settings.custom_colors_outline_button.blue }};
      }
      {% if section.settings.custom_mobile_image_background != blank %}
        @media screen and (max-width: 740px) {
          .color-scheme-{{ section.id }}.color-custom {
            {% # theme-check-disable %}
            --gradient-background: url('{{ section.settings.custom_mobile_image_background | img_url: 'master' }}') center center / cover no-repeat;
            {% # theme-check-enable %}
          }
        }
      {% endif %}

      .photo-grid-heading {
        text-align: center;
        margin-bottom: 2rem;
      }

      .photo-grid-heading h2 {
        font-weight: bold;
        color: rgba(var(--color-foreground), 1);
        margin-bottom: 0.5rem;
        line-height: 1.2;
      }

      .photo-grid-heading h2.h0 {
        font-size: 3rem;
      }

      .photo-grid-heading h2.h1 {
        font-size: 2.5rem;
      }

      .photo-grid-heading h2.h2 {
        font-size: 2rem;
      }

      .photo-grid-heading em {
                    {% if section.settings.italic_style == 'italic' %}
                    /* Normal italic styling */
                    text-decoration: none !important;
                    font-style: italic !important;
                    {% elsif section.settings.italic_style == 'font_family' and section.settings.italic_font_family != 'inherit' %}
                      /* Font family styling - no underline */
                      text-decoration: none !important;
                      font-style: italic !important;
                      {% if section.settings.italic_font_family == 'serif' %}
                        font-family: serif !important;
                      {% elsif section.settings.italic_font_family == 'georgia-pro' %}
                        font-family: 'Georgia Pro', Georgia, serif !important;
                      {% elsif section.settings.italic_font_family == 'bodoni-moda' %}
                        font-family: 'Bodoni Moda', Georgia, serif !important;
                      {% elsif section.settings.italic_font_family == 'instrument-serif' %}
                        font-family: 'Instrument Serif', Georgia, serif !important;
                         {% elsif section.settings.italic_font_family == 'custom_google_font' and section.settings.custom_google_font_name != blank %}
                        font-family: '{{ section.settings.custom_google_font_name }}', sans-serif !important;
                      {% elsif section.settings.italic_font_family == 'cursive' %}
                        font-family: cursive !important;
                      {% endif %}
                      {% if section.settings.italic_font_weight != 'inherit' %}
                        font-weight: {{ section.settings.italic_font_weight }} !important;
                      {% endif %}
                    {% else %}
                      /* Underline styling */
                      text-decoration: underline !important;
                      font-style: normal !important;
                      text-decoration-color: {{section.settings.underlinetextcolor}} !important;
                      text-decoration-thickness: {{section.settings.underlinethickness}}px !important;
                    {% endif %}
                  }

      .photo-grid-heading p {
        font-size: 1.5rem;
        color: rgba(var(--color-foreground), 0.8);
        line-height: 1.5;
      }

      .photo-grid-container {
        max-width: 1200px;
        margin: 0 auto;
      }

      .photo-grid {
        display: grid;
        gap: {{ section.settings.gap_between_images }}px;
        grid-template-columns: repeat({{ section.settings.columns_mobile }}, 1fr);
      }

      @media screen and (min-width: 750px) {
        .photo-grid-container {
          max-width: 900px;
        }

        .photo-grid {
          grid-template-columns: repeat({{ section.settings.columns_desktop }}, minmax(180px, 220px));
          justify-content: center;
        }
      }

      .photo-grid-item {
        position: relative;
        aspect-ratio: 1;
        border-radius: {{ section.settings.border_radius }}px;
        overflow: hidden;
        {% if section.settings.border_width > 0 %}
          border: {{ section.settings.border_width }}px solid {{ section.settings.border_color }};
        {% endif %}
      }

      .photo-grid-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: {{ section.settings.default_image_position }};
      }

      .photo-grid-item--center img {
        object-position: center;
      }

      .photo-grid-item--top img {
        object-position: top;
      }

      .photo-grid-item--bottom img {
        object-position: bottom;
      }

      .photo-grid-item--left img {
        object-position: left;
      }

      .photo-grid-item--right img {
        object-position: right;
      }

      .photo-grid-item__caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 0.75rem;
        font-size: 0.9rem;
        line-height: 1.3;
        opacity: 0;
        transform: translateY(100%);
        transition: all 0.3s ease;
      }

      {% if section.settings.show_image_captions %}
        .photo-grid-item__caption {
          opacity: 1;
          transform: translateY(0);
        }
      {% else %}
        .photo-grid-item:hover .photo-grid-item__caption {
          opacity: 1;
          transform: translateY(0);
        }
      {% endif %}

      .photo-grid-item__link {
        display: block;
        width: 100%;
        height: 100%;
      }

      @media screen and (max-width: 750px) {
        .photo-grid-heading h2 {
          font-size: 2rem;
        }
      }
      {% if section.settings.enable_gradient %}
      .photo-grid-heading strong {
        background: {{ section.settings.title_gradient_background }};
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-style: normal;
      }
    {% endif %}

    .social-pill-wrapper {
    margin-bottom: 2rem;
  }
  .pill-container-photo-grid {
    padding: 6px 12px;
    background: {{ section.settings.pill_background | default: '#f8f8f8' }};
    border-radius: {{ section.settings.pill_border_radius | default: 20 }}px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    border: 1px solid {{ section.settings.pill_border_color | default: '#e0e0e0' }};
    font-size: 13px;
  }

  .pill-container-photo-grid.gradient-enabled {
    border: none;
  }

  .pill-container-photo-grid span {
    color: {{ section.settings.pill_text_color | default: '#333' }};
    font-weight: 500;
  }

  .pill-container-photo-grid img {
    vertical-align: middle;
  }

  /* Gradient borders - only when enabled */
  .pill-container-photo-grid.gradient-enabled[data-logo="tiktoklogo"]::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    z-index: -1;
    border-radius: calc({{ section.settings.pill_border_radius | default: 20 }}px + 2px);
    background: linear-gradient(45deg, #00f2ea, #ff0050);
  }

  .pill-container-photo-grid.gradient-enabled[data-logo="facebooklogo"]::before,
  .pill-container-photo-grid.gradient-enabled[data-logo="facebooklogoblue"]::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    z-index: -1;
    border-radius: calc({{ section.settings.pill_border_radius | default: 20 }}px + 2px);
    background: #1877F2;
  }

  .pill-container-photo-grid.gradient-enabled[data-logo="instagramlogo"]::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    z-index: -1;
    border-radius: calc({{ section.settings.pill_border_radius | default: 20 }}px + 2px);
    background: linear-gradient(45deg, #833ab4, #fd1d1d, #fcb045);
  }

  .pill-container-photo-grid.gradient-enabled[data-logo="youtubelogo"]::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    z-index: -1;
    border-radius: calc({{ section.settings.pill_border_radius | default: 20 }}px + 2px);
    background: linear-gradient(45deg, #FF0000, #CC0000);
  }

  .color-scheme-{{ section.id }}.color-custom {
      /* Prevent gradient shifting during scroll */
      background-attachment: scroll !important;

      /* Improve rendering performance */
      transform: translateZ(0);
      backface-visibility: hidden;

      /* Optimize for scrolling */
      will-change: auto;

      /* Ensure consistent background positioning */
      background-position: center center;
      background-repeat: no-repeat;

      /* Force hardware acceleration for smooth scrolling */
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);

      /* Smooth rendering */
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;

      /* Optimize painting */
      -webkit-perspective: 1000;
      perspective: 1000;
    }

    /* Mobile-specific optimizations for this section */
    @media screen and (max-width: 750px) {
      .color-scheme-{{ section.id }}.color-custom {
        -webkit-overflow-scrolling: touch;
        transform: translateZ(0);
      }
    }

    /* Animation fixes for this section */
    .section-{{ section.id }}-padding .animate-section,
    .section-{{ section.id }}-padding .animate-item {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-perspective: 1000;
      perspective: 1000;
    }

    /* Webkit browser fix for this section */
    @supports (-webkit-appearance: none) {
      .color-scheme-{{ section.id }}.color-custom {
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
      }
    }
{%- endstyle -%}

<div class="color-scheme-{{ section.id }} color-{{ section.settings.color_scheme }} gradient content-for-grouping animate-section animate--hidden {{ section.settings.visibility }}">
  {% if section.settings.display_id %}
    <copy-button class="section-id-btn button" data-content="#shopify-section-{{ section.id }}" data-success="false">
      <span class="copy-text">Click to copy section ID</span>
      <span class="copy-success">ID copied successfully!</span>
    </copy-button>
  {% endif %}
  <div class="page-width section-{{ section.id }}-padding">
    <div class="photo-grid-container">
      {%- unless section.settings.title == blank and section.settings.subtitle == blank -%}
        <div class="photo-grid-heading animate-item animate-item--child index-0">
          {%- unless section.settings.title == blank -%}
            <h2
              class="{{ section.settings.heading_size }} title-with-highlight"
              style="--hightlight-color:{{ section.settings.title_highlight_color }};--gradient-text: {{ section.settings.title_gradient_background }};"
            >
              {{ section.settings.title }}
            </h2>
          {%- endunless -%}
          {%- unless section.settings.subtitle == blank -%}
            <div class="rte">
              {{ section.settings.subtitle }}
            </div>
          {%- endunless -%}
        </div>
      {%- endunless -%}
      {%- unless section.settings.social_pill_text == blank -%}
        <div
          class="social-pill-wrapper animate-item animate-item--child index-1"
          style="text-align: center; margin-bottom: 2rem;"
        >
          <div
            class="pill-container-photo-grid {% if section.settings.enable_gradient_border %}gradient-enabled{% endif %}"
            data-logo="{{ section.settings.social_logo }}"
          >
            {% if section.settings.social_logo == 'tiktoklogo' %}
              <img
                src="https://cdn.shopify.com/s/files/1/0557/0887/6873/files/Social-media_Tiktok.png?v=1750875207"
                width="17"
                height="17"
                alt="TikTok Logo"
              >
            {% elsif section.settings.social_logo == 'facebooklogo' %}
              <img
                src="https://cdn.shopify.com/s/files/1/0691/6820/1986/files/facebook.png?v=1717529960"
                width="17"
                height="17"
                alt="Facebook Logo"
              >
            {% elsif section.settings.social_logo == 'facebooklogoblue' %}
              <img
                src="https://cdn.shopify.com/s/files/1/0691/6820/1986/files/facebook_logo.png?v=1717464786"
                width="17"
                height="17"
                alt="Facebook Logo"
              >
            {% elsif section.settings.social_logo == 'youtubelogo' %}
              <img
                src="https://cdn.shopify.com/s/files/1/0691/6820/1986/files/Youtube_logo.png?v=1729927093"
                width="17"
                height="17"
                alt="Youtube Logo"
              >
            {% elsif section.settings.social_logo == 'instagramlogo' %}
              <img
                src="https://cdn.shopify.com/s/files/1/0691/6820/1986/files/instagram_logo.png?v=1729927093"
                width="17"
                height="17"
                alt="Instagram Logo"
              >
            {% endif %}
            <span>{{ section.settings.social_pill_text }}</span>
          </div>
        </div>
      {%- endunless -%}
      <div class="photo-grid animate-item animate-item--child index-1">
        {%- for block in section.blocks -%}
          {%- case block.type -%}
            {%- when 'image' -%}
              <div
                class="photo-grid-item photo-grid-item--{{ block.settings.image_position }}"
                {{ block.shopify_attributes }}
              >
                {%- if block.settings.link != blank -%}
                  <a href="{{ block.settings.link }}" class="photo-grid-item__link">
                {%- endif -%}
                {%- if block.settings.image != blank -%}
                  {%- capture sizes -%}
                    (min-width: 750px) calc(100vw / {{ section.settings.columns_desktop }}), calc(100vw / {{ section.settings.columns_mobile }})
                  {%- endcapture -%}
                  {{
                    block.settings.image
                    | image_url: width: 800
                    | image_tag: loading: 'lazy', sizes: sizes, widths: '200, 400, 600, 800'
                  }}
                {%- else -%}
                  <div style="background: #f0f0f0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #999;">
                    <svg width="60" height="60" viewBox="0 0 24 24" fill="currentColor">
                      <path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/>
                    </svg>
                  </div>
                {%- endif -%}
                {%- unless block.settings.caption == blank -%}
                  <div class="photo-grid-item__caption">
                    {{ block.settings.caption }}
                  </div>
                {%- endunless -%}
                {%- if block.settings.link != blank -%}
                  </a>
                {%- endif -%}
              </div>
          {%- endcase -%}
        {%- endfor -%}
      </div>

      {%- if section.settings.button_label != blank -%}
        <div
          class="photo-grid-button animate-item animate-item--child index-2"
          style="text-align: center; margin-top: 2rem;"
        >
          <a
            {% if section.settings.link %}
              href="{{ section.settings.link }}"
            {% else %}
              role="link" aria-disabled="true"
            {% endif %}
            class="button btn--mt-center {% if section.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}"
          >
            {{- section.settings.button_label | escape -}}
          </a>
        </div>
      {%- endif -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Photo grid",
  "settings": [
    {
      "type": "checkbox",
      "id": "display_id",
      "label": "Display section ID",
      "info": "ID is used in the Sections group section to merge 2 sections. ID can also be put inside any button link and the button will scroll to this section.",
      "default": false
    },
    {
      "type": "select",
      "id": "visibility",
      "options": [
        {
          "value": "desktop-hidden",
          "label": "Mobile only"
        },
        {
          "value": "mobile-hidden",
          "label": "Desktop only"
        },
        {
          "value": "always-display",
          "label": "All devices"
        }
      ],
      "label": "Display on",
      "default": "always-display"
    },
    {
      "type": "header",
      "content": "General"
    },
    {
      "type": "inline_richtext",
      "id": "title",
      "default": "Loved By Thousands!",
      "label": "Heading",
      "info": "Bold certain words to highlight them with a different color. Italic to underline the text."
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "Small"
        },
        {
          "value": "h1",
          "label": "Medium"
        },
        {
          "value": "h0",
          "label": "Large"
        }
      ],
      "default": "h1",
      "label": "Heading size"
    },
    {
      "type": "color",
      "id": "title_highlight_color",
      "label": "Heading highlight color",
      "default": "#6D388B"
    },
    {
      "type": "checkbox",
      "id": "enable_gradient",
      "label": "Enable gradient for bold text",
      "default": false,
      "info": "Override solid color with gradient for bold text"
    },
    {
      "type": "color_background",
      "id": "title_gradient_background",
      "label": "Gradient highlight",
      "default": "linear-gradient(45deg, #5d5aaf 0%, #ff6b9d 100%)",
      "info": "Used when gradient is enabled"
    },
    {
      "type": "header",
      "content": "Italic Text Styling",
      "info": "Choose how italic text (created with *text*) should be displayed"
    },
    {
      "type": "select",
      "id": "italic_style",
      "label": "Italic Text Style",
      "options": [
        {
          "value": "italic",
          "label": "Normal Italic"
        },
        {
          "value": "underline",
          "label": "Underline"
        },
        {
          "value": "font_family",
          "label": "Custom Font Family"
        }
      ],
      "default": "underline",
      "info": "Choose to either underline italic text or use a custom font family"
    },
    {
      "type": "color",
      "id": "underlinetextcolor",
      "label": "Underline color",
      "default": "#FF0000",
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "range",
      "id": "underlinethickness",
      "min": 1,
      "max": 8,
      "step": 1,
      "unit": "px",
      "label": "Underline thickness",
      "default": 3,
      "info": "Used when 'Underline' style is selected"
    },
    {
      "type": "select",
      "id": "italic_font_family",
      "label": "Italic Text Font Family",
      "options": [
        {
          "value": "inherit",
          "label": "Default (Inherit)"
        },
        {
          "value": "serif",
          "label": "Serif"
        },
        {
          "value": "instrument-serif",
          "label": "Instrument Serif"
        },
        {
          "value": "georgia-pro",
          "label": "Georgia Pro"
        },
        {
          "value": "bodoni-moda",
          "label": "Bodoni Moda"
        },
        {
          "value": "cursive",
          "label": "Cursive"
        },
        {
          "value": "custom_google_font",
          "label": "Custom Google Font"
        }
      ],
      "default": "serif",
      "info": "Used when 'Custom Font Family' style is selected"
    },
    {
      "type": "text",
      "id": "custom_google_font_name",
      "label": "Custom Google Font Name",
      "info": "Enter the exact Google Font family name (e.g., 'Roboto', 'Open Sans', 'Playfair Display'). Font will be loaded from Google Fonts automatically. Browse fonts at https://fonts.google.com/"
    },
    {
      "type": "select",
      "id": "italic_font_weight",
      "label": "Italic Text Font Weight",
      "options": [
        {
          "value": "inherit",
          "label": "Default (Inherit)"
        },
        {
          "value": "300",
          "label": "Light (300)"
        },
        {
          "value": "400",
          "label": "Normal (400)"
        },
        {
          "value": "500",
          "label": "Medium (500)"
        },
        {
          "value": "600",
          "label": "Semi Bold (600)"
        },
        {
          "value": "700",
          "label": "Bold (700)"
        },
        {
          "value": "800",
          "label": "Extra Bold (800)"
        },
        {
          "value": "900",
          "label": "Black (900)"
        }
      ],
      "default": "inherit",
      "info": "Used when 'Custom Font Family' style is selected"
    },
    {
      "type": "richtext",
      "id": "subtitle",
      "label": "Subtitle"
    },
    {
      "type": "header",
      "content": "Social Media Pill"
    },
    {
      "type": "text",
      "id": "social_pill_text",
      "label": "Social pill text",
      "default": "Over 4M Views on TikTok",
      "info": "Leave empty to hide the social media pill"
    },
    {
      "type": "select",
      "id": "social_logo",
      "options": [
        {
          "value": "tiktoklogo",
          "label": "TikTok"
        },
        {
          "value": "facebooklogo",
          "label": "Facebook"
        },
        {
          "value": "facebooklogoblue",
          "label": "Facebook Blue"
        },
        {
          "value": "youtubelogo",
          "label": "YouTube"
        },
        {
          "value": "instagramlogo",
          "label": "Instagram"
        }
      ],
      "default": "tiktoklogo",
      "label": "Social media logo"
    },
    {
      "type": "checkbox",
      "id": "enable_gradient_border",
      "label": "Enable gradient border",
      "default": true,
      "info": "Use platform-specific gradient border instead of solid border"
    },
    {
      "type": "color",
      "id": "pill_background",
      "label": "Pill background color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "pill_text_color",
      "label": "Pill text color",
      "default": "#333333"
    },
    {
      "type": "color",
      "id": "pill_border_color",
      "label": "Pill border color",
      "default": "#e0e0e0",
      "info": "Only used when gradient border is disabled"
    },
    {
      "type": "range",
      "id": "pill_border_radius",
      "min": 0,
      "max": 30,
      "step": 2,
      "unit": "px",
      "label": "Pill border radius",
      "default": 20
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "Accent 1"
        },
        {
          "value": "accent-2",
          "label": "Accent 2"
        },
        {
          "value": "background-1",
          "label": "Background 1"
        },
        {
          "value": "background-2",
          "label": "Background 2"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "custom",
          "label": "Custom"
        }
      ],
      "default": "background-1",
      "label": "Color scheme",
      "info": "Custom color scheme is edited at the bottom of section settings."
    },
    {
      "type": "header",
      "content": "Grid Layout"
    },
    {
      "type": "range",
      "id": "gap_between_images",
      "min": 0,
      "max": 50,
      "step": 2,
      "unit": "px",
      "label": "Gap between images",
      "default": 8
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "1 column"
        },
        {
          "value": "2",
          "label": "2 columns"
        },
        {
          "value": "3",
          "label": "3 columns"
        }
      ],
      "default": "2",
      "label": "Number of columns on mobile"
    },
    {
      "type": "select",
      "id": "columns_desktop",
      "options": [
        {
          "value": "2",
          "label": "2 columns"
        },
        {
          "value": "3",
          "label": "3 columns"
        },
        {
          "value": "4",
          "label": "4 columns"
        },
        {
          "value": "5",
          "label": "5 columns"
        },
        {
          "value": "6",
          "label": "6 columns"
        }
      ],
      "default": "3",
      "label": "Number of columns on desktop"
    },
    {
      "type": "header",
      "content": "Image Settings"
    },
    {
      "type": "select",
      "id": "default_image_position",
      "options": [
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "top",
          "label": "Top"
        },
        {
          "value": "bottom",
          "label": "Bottom"
        },
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ],
      "default": "center",
      "label": "Default image position",
      "info": "Sets the default focal point when using 'cover' fit"
    },
    {
      "type": "checkbox",
      "id": "show_image_captions",
      "label": "Show image captions",
      "default": false,
      "info": "If disabled, captions will show on hover"
    },
    {
      "type": "header",
      "content": "Border Settings"
    },
    {
      "type": "range",
      "id": "border_width",
      "min": 0,
      "max": 10,
      "step": 1,
      "unit": "px",
      "label": "Border width",
      "default": 1
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border color",
      "default": "#DDDDDD"
    },
    {
      "type": "range",
      "id": "border_radius",
      "min": 0,
      "max": 30,
      "step": 2,
      "unit": "px",
      "label": "Border radius",
      "default": 0
    },
    {
      "type": "header",
      "content": "Button"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label"
    },
    {
      "type": "url",
      "id": "link",
      "label": "Button link"
    },
    {
      "type": "checkbox",
      "id": "button_style_secondary",
      "label": "Use outline button style",
      "default": false
    },
    {
      "type": "header",
      "content": "Section padding"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Top padding",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "Bottom padding",
      "default": 36
    },
    {
      "type": "header",
      "content": "Custom color scheme",
      "info": "Applied if Color scheme setting is set to Custom."
    },
    {
      "type": "color",
      "id": "custom_colors_background",
      "default": "#FFFFFF",
      "label": "Background color"
    },
    {
      "type": "color_background",
      "id": "custom_gradient_background",
      "label": "Gradient background",
      "info": "If added, replaces Background color when applicable."
    },
    {
      "type": "image_picker",
      "id": "custom_image_background",
      "label": "Image background"
    },
    {
      "type": "image_picker",
      "id": "custom_mobile_image_background",
      "label": "Mobile image background",
      "info": "If empty, the Image background will also be applied to mobile devices"
    },
    {
      "type": "color",
      "id": "custom_colors_text",
      "default": "#2E2A39",
      "label": "Text"
    },
    {
      "type": "color",
      "id": "custom_colors_accent",
      "default": "#dd1d1d",
      "label": "Accents"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_background",
      "default": "#dd1d1d",
      "label": "Solid button background"
    },
    {
      "type": "color",
      "id": "custom_colors_solid_button_text",
      "default": "#ffffff",
      "label": "Solid button label"
    },
    {
      "type": "color",
      "id": "custom_colors_outline_button",
      "default": "#dd1d1d",
      "label": "Outline button"
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "select",
          "id": "image_position",
          "options": [
            {
              "value": "center",
              "label": "Center"
            },
            {
              "value": "top",
              "label": "Top"
            },
            {
              "value": "bottom",
              "label": "Bottom"
            },
            {
              "value": "left",
              "label": "Left"
            },
            {
              "value": "right",
              "label": "Right"
            }
          ],
          "default": "center",
          "label": "Image position",
          "info": "Controls which part of the image is visible in the grid"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link (Optional)",
          "info": "Make the image clickable"
        },
        {
          "type": "text",
          "id": "caption",
          "label": "Caption (Optional)",
          "info": "Text overlay on the image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Photo grid",
      "category": "Media",
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }
  ],
  "disabled_on": {
    "groups": ["header", "footer"]
  }
}
{% endschema %}
