Split Hero

<section class="sl-split-hero" style="padding:0;color:inherit;font-family:inherit;">
  <div style="display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:stretch;min-height:clamp(360px,50vw,520px);">
    <figure style="margin:0;position:relative;min-height:clamp(240px,40vw,520px);{% if section.settings.image_right %}order:2;{% endif %}">
      <img src="{{ section.settings.image | image_url: width: 1200 | default: 'https://picsum.photos/seed/split-hero/1200/1200' }}" alt="{{ section.settings.image_alt | default: section.settings.heading }}" loading="lazy" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;" />
    </figure>
    <div style="display:flex;flex-direction:column;justify-content:center;gap:.9rem;padding:clamp(2rem,5vw,4rem);background:{{ section.settings.panel_color | default: 'transparent' }};">
      {%- if section.settings.eyebrow != blank -%}
        <span style="display:inline-block;align-self:flex-start;padding:.25rem .6rem;background:var(--sl-accent,#0a5cff);color:#fff;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;border-radius:.25rem;">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h2 style="margin:0;font-size:clamp(1.6rem,3.25vw,2.5rem);line-height:1.15;">{{ section.settings.heading }}</h2>
      {%- if section.settings.body != blank -%}
        <div style="margin:0;line-height:1.6;opacity:.9;">{{ section.settings.body }}</div>
      {%- endif -%}
      <div style="display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem;">
        {%- if section.settings.cta_primary_text != blank -%}
          <a href="{{ section.settings.cta_primary_link | default: '#' }}" style="display:inline-block;padding:.85rem 1.5rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:.375rem;text-decoration:none;font-weight:700;">{{ section.settings.cta_primary_text }}</a>
        {%- endif -%}
        {%- if section.settings.cta_secondary_text != blank -%}
          <a href="{{ section.settings.cta_secondary_link | default: '#' }}" style="display:inline-block;padding:.85rem 1.5rem;border:1px solid currentColor;border-radius:.375rem;text-decoration:none;color:inherit;font-weight:600;">{{ section.settings.cta_secondary_text }}</a>
        {%- endif -%}
      </div>
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Split Hero",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Featured" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Fresh fits, clean lines" },
    { "type": "richtext", "id": "body", "label": "Body", "default": "<p>Our new drop pairs easy silhouettes with heritage fabrics.</p>" },
    { "type": "image_picker", "id": "image", "label": "Image" },
    { "type": "text", "id": "image_alt", "label": "Image alt text", "default": "Split hero image" },
    { "type": "checkbox", "id": "image_right", "label": "Image on right", "default": false },
    { "type": "color", "id": "panel_color", "label": "Panel background" },
    { "type": "text", "id": "cta_primary_text", "label": "Primary CTA text", "default": "Shop now" },
    { "type": "url", "id": "cta_primary_link", "label": "Primary CTA link" },
    { "type": "text", "id": "cta_secondary_text", "label": "Secondary CTA text", "default": "Learn more" },
    { "type": "url", "id": "cta_secondary_link", "label": "Secondary CTA link" }
  ],
  "presets": [{ "name": "Split Hero" }]
}
{% endschema %}