Split image/text story section
for Dawn and Horizon.

{% comment %}
  Jelonyx · Split Story Section
  Compatible with Dawn 12+, Horizon, and most OS 2.0 themes
  Source: jelonyx.com/shopify/sections/split-story
{% endcomment %}

<section
  id="jlx-split-{{ section.id }}"
  class="jlx-split{% if section.settings.image_position == 'right' %} jlx-split--reverse{% endif %}"
>
  <div class="jlx-split__inner">
    
    <div class="jlx-split__media">
      {%- if section.settings.image != blank -%}
        <img
          src="{{ section.settings.image | image_url: width: 800 }}"
          alt="{{ section.settings.image.alt | escape }}"
          loading="lazy"
          width="{{ section.settings.image.width }}"
          height="{{ section.settings.image.height }}"
          class="jlx-split__image"
        >
      {%- else -%}
        {{ 'image' | placeholder_svg_tag: 'jlx-split__placeholder' }}
      {%- endif -%}
    </div>

    <div class="jlx-split__content">
      {%- if section.settings.subheading != blank -%}
        <p class="jlx-split__subheading">{{ section.settings.subheading }}</p>
      {%- endif -%}

      {%- if section.settings.heading != blank -%}
        <h2 class="jlx-split__heading">{{ section.settings.heading }}</h2>
      {%- endif -%}

      {%- if section.settings.text != blank -%}
        <div class="jlx-split__text">{{ section.settings.text }}</div>
      {%- endif -%}

      {%- if section.settings.button_label != blank -%}
        <a href="{{ section.settings.button_link | default: '#' }}" class="jlx-split__button">
          {{ section.settings.button_label }}
        </a>
      {%- endif -%}
    </div>

  </div>
</section>

<style>
  #jlx-split-{{ section.id }} {
    padding: clamp(40px, 8vw, 80px) 20px;
    background: var(--color-background, #fff);
  }
  .jlx-split__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr;
    align-items: center;
  }
  @media screen and (min-width: 768px) {
    .jlx-split__inner {
      grid-template-columns: 1fr 1fr;
      gap: 60px;
    }
  }
  .jlx-split--reverse .jlx-split__inner {
    direction: rtl;
  }
  .jlx-split--reverse .jlx-split__content,
  .jlx-split--reverse .jlx-split__media {
    direction: ltr;
  }
  .jlx-split__media {
    border-radius: 8px;
    overflow: hidden;
  }
  .jlx-split__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .jlx-split__placeholder {
    display: block;
    width: 100%;
    height: auto;
    background-color: #f3f3f3;
    fill: #ccc;
  }
  .jlx-split__subheading {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-foreground-secondary, #6b6b6b);
    margin: 0 0 10px;
  }
  .jlx-split__heading {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-foreground, #1a1a1a);
    margin: 0 0 20px;
  }
  .jlx-split__text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-foreground-secondary, #4a4a4a);
    margin: 0 0 30px;
  }
  .jlx-split__button {
    display: inline-block;
    padding: 12px 24px;
    background: var(--color-button, #1a1a1a);
    color: var(--color-button-text, #fff);
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: opacity 0.2s;
  }
  .jlx-split__button:hover {
    opacity: 0.8;
  }
</style>

{% schema %}
{
  "name": "Split story",
  "tag": "section",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "select",
      "id": "image_position",
      "label": "Desktop image placement",
      "options": [
        { "value": "left", "label": "Image first" },
        { "value": "right", "label": "Image second" }
      ],
      "default": "left"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading",
      "default": "Our Story"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Feature highlight"
    },
    {
      "type": "richtext",
      "id": "text",
      "label": "Text",
      "default": "<p>Share details about your brand, product features, or values with your customers.</p>"
    },
    {
      "type": "text",
      "id": "button_label",
      "label": "Button label",
      "default": "Learn more"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    }
  ],
  "presets": [
    {
      "name": "Split story",
      "category": "Image"
    }
  ]
}
{% endschema %}