{%- comment -%} MW · Editorial Split — image w/ overlay + text column with checklist. {%- endcomment -%}
{%- assign uid = section.id | replace: '_', '' | replace: '-', '' -%}
{%- assign flip = section.settings.media_position -%}
{% style %}
  #shopify-section-{{ section.id }}{ --es-bg:{{ section.settings.section_bg }}; --es-card:{{ section.settings.card_bg }}; --es-eye:{{ section.settings.eyebrow_color }}; --es-head:{{ section.settings.heading_color }}; --es-text:{{ section.settings.text_color }}; --es-box:{{ section.settings.checklist_bg }}; --es-check:{{ section.settings.check_color }}; --es-ov:{{ section.settings.overlay_text_color }}; }
  .es-{{ uid }}{ background:var(--es-bg); padding:{{ section.settings.padding_top }}px {{ section.settings.side_padding }}px {{ section.settings.padding_bottom }}px; }
  .es-{{ uid }} .es__card{ max-width:{{ section.settings.max_width }}px; margin:0 auto; background:var(--es-card); border-radius:{{ section.settings.card_radius }}px; overflow:hidden; display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:clamp(24px,4vw,56px); padding:clamp(20px,3vw,36px); }
  {% if flip == 'right' %}.es-{{ uid }} .es__media{ order:2; }{% endif %}
  .es-{{ uid }} .es__media{ position:relative; border-radius:{{ section.settings.image_radius }}px; overflow:hidden; aspect-ratio:{{ section.settings.image_ratio }}; }
  .es-{{ uid }} .es__media img{ width:100%; height:100%; object-fit:cover; display:block; }
  .es-{{ uid }} .es__ov{ position:absolute; inset:0; padding:clamp(18px,3vw,30px); color:var(--es-ov); }
  .es-{{ uid }} .es__ovh{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:500; font-size:clamp(28px,4vw,44px); line-height:1.05; margin:0; }
  .es-{{ uid }} .es__ovh em{ font-family:{{ section.settings.serif_font.family }},{{ section.settings.serif_font.fallback_families }}; font-style:italic; }
  .es-{{ uid }} .es__ovs{ font-size:14px; margin:10px 0 0; max-width:16ch; opacity:.9; }
  .es-{{ uid }} .es__badge{ position:absolute; left:clamp(18px,3vw,30px); bottom:clamp(18px,3vw,30px); display:flex; align-items:center; gap:10px; }
  .es-{{ uid }} .es__badge b{ font-family:{{ section.settings.serif_font.family }},{{ section.settings.serif_font.fallback_families }}; font-weight:600; font-size:34px; line-height:.9; background:linear-gradient(204deg,#3A3027 3%,#B79B6E 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
  .es-{{ uid }} .es__badge span{ font-size:12px; line-height:1.2; opacity:.9; }
  .es-{{ uid }} .es__thumb{ position:absolute; right:14px; bottom:14px; width:74px; height:92px; border-radius:8px; overflow:hidden; border:2px solid rgba(255,255,255,.7); box-shadow:0 8px 20px rgba(0,0,0,.18); }
  .es-{{ uid }} .es__thumb img{ width:100%; height:100%; object-fit:cover; }
  .es-{{ uid }} .es__eye{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-weight:600; font-size:13px; color:var(--es-eye); margin:0 0 8px; }
  .es-{{ uid }} .es__h{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:600; font-size:clamp(24px,2.4vw,32px); color:var(--es-head); margin:0 0 16px; line-height:1.1; }
  .es-{{ uid }} .es__body{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:15px; line-height:1.65; color:var(--es-text); }
  .es-{{ uid }} .es__body p{ margin:0 0 14px; }
  .es-{{ uid }} .es__list{ margin:20px 0 0; background:var(--es-box); border-radius:12px; padding:18px 20px; display:grid; gap:12px; }
  .es-{{ uid }} .es__li{ display:flex; align-items:center; gap:11px; font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:14px; color:var(--es-head); }
  .es-{{ uid }} .es__li svg{ width:20px; height:20px; color:var(--es-check); flex:none; }
  @media (max-width:820px){ .es-{{ uid }} .es__card{ grid-template-columns:1fr; } {% if flip == 'right' %}.es-{{ uid }} .es__media{ order:0; }{% endif %} }
{% endstyle %}
<div class="es-{{ uid }}">
  <div class="es__card">
    <div class="es__media">
      {% render 'mw-image', image: section.settings.image, url: section.settings.image_url, alt: section.settings.heading, width: 900, loading: 'eager' %}
      <div class="es__ov">
        {%- if section.settings.overlay_heading != blank -%}<h3 class="es__ovh">{{ section.settings.overlay_heading }}</h3>{%- endif -%}
        {%- if section.settings.overlay_sub != blank -%}<p class="es__ovs">{{ section.settings.overlay_sub | escape }}</p>{%- endif -%}
        {%- if section.settings.badge_number != blank -%}<div class="es__badge"><b>{{ section.settings.badge_number | escape }}</b><span>{{ section.settings.badge_text | escape }}</span></div>{%- endif -%}
      </div>
      {%- if section.settings.thumb != blank or section.settings.thumb_url != blank -%}<div class="es__thumb">{% render 'mw-image', image: section.settings.thumb, url: section.settings.thumb_url, width: 200 %}</div>{%- endif -%}
    </div>
    <div class="es__text">
      {%- if section.settings.eyebrow != blank -%}<p class="es__eye">{{ section.settings.eyebrow | escape }}</p>{%- endif -%}
      {%- if section.settings.heading != blank -%}<h2 class="es__h">{{ section.settings.heading | escape }}</h2>{%- endif -%}
      <div class="es__body">{{ section.settings.body }}</div>
      {%- if section.blocks.size > 0 -%}<div class="es__list">
        {%- for block in section.blocks -%}<div class="es__li" {{ block.shopify_attributes }}>{% render 'mw-icon', name: 'check-circle' %}<span>{{ block.settings.text | escape }}</span></div>{%- endfor -%}
      </div>{%- endif -%}
    </div>
  </div>
</div>
{% schema %}
{
  "name": "MW · Editorial Split",
  "tag": "section",
  "class": "mw-section mw-editorial-split",
  "settings": [
    { "type": "header", "content": "Image" },
    { "type": "image_picker", "id": "image", "label": "Image" },
    { "type": "text", "id": "image_url", "label": "…or image URL" },
    { "type": "select", "id": "media_position", "label": "Image side", "default": "left", "options": [ {"value":"left","label":"Left"}, {"value":"right","label":"Right"} ] },
    { "type": "select", "id": "image_ratio", "label": "Image ratio", "default": "4/5", "options": [ {"value":"4/5","label":"4:5"}, {"value":"1/1","label":"1:1"}, {"value":"3/4","label":"3:4"} ] },
    { "type": "range", "id": "image_radius", "min": 0, "max": 24, "step": 1, "unit": "px", "label": "Image radius", "default": 8 },
    { "type": "header", "content": "Image overlay (optional)" },
    { "type": "html", "id": "overlay_heading", "label": "Overlay heading", "info": "Use <em>word</em> for the serif-italic accent.", "default": "Woven to <em>shimmer.</em>" },
    { "type": "text", "id": "overlay_sub", "label": "Overlay sub", "default": "Micro sequins, knitted in by hand." },
    { "type": "text", "id": "badge_number", "label": "Badge number", "default": "8" },
    { "type": "text", "id": "badge_text", "label": "Badge text", "default": "Sizes, one silhouette" },
    { "type": "image_picker", "id": "thumb", "label": "Corner thumbnail" },
    { "type": "text", "id": "thumb_url", "label": "…or thumbnail URL" },
    { "type": "color", "id": "overlay_text_color", "label": "Overlay text", "default": "#241C15" },
    { "type": "header", "content": "Text" },
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Micro sequins, knitted by hand" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Woven to shimmer" },
    { "type": "richtext", "id": "body", "label": "Body", "default": "<p>Most sequin dresses are a mesh base with discs glued or stitched on top. They scratch, they shed, and they only ever look like eveningwear.</p><p>Ours knits the sequins into the yarn itself, so the fabric drapes and stretches like the knit it is. The shimmer is in the cloth, not stuck to it.</p>" },
    { "type": "header", "content": "Layout & colour" },
    { "type": "range", "id": "max_width", "min": 900, "max": 1300, "step": 10, "unit": "px", "label": "Content width", "default": 1160 },
    { "type": "range", "id": "card_radius", "min": 0, "max": 32, "step": 1, "unit": "px", "label": "Card radius", "default": 18 },
    { "type": "range", "id": "padding_top", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding top", "default": 56 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 160, "step": 4, "unit": "px", "label": "Padding bottom", "default": 56 },
    { "type": "range", "id": "side_padding", "min": 12, "max": 64, "step": 2, "unit": "px", "label": "Side padding", "default": 24 },
    { "type": "font_picker", "id": "heading_font", "label": "Heading font", "default": "poppins_n6" },
    { "type": "font_picker", "id": "serif_font", "label": "Serif accent font", "default": "cormorant_n6" },
    { "type": "font_picker", "id": "body_font", "label": "Body font", "default": "inter_n4" },
    { "type": "color", "id": "section_bg", "label": "Section background", "default": "#F4EEE9" },
    { "type": "color", "id": "card_bg", "label": "Card background", "default": "#FFFFFF" },
    { "type": "color", "id": "eyebrow_color", "label": "Eyebrow", "default": "#17324E" },
    { "type": "color", "id": "heading_color", "label": "Heading", "default": "#17324E" },
    { "type": "color", "id": "text_color", "label": "Body text", "default": "#5C5449" },
    { "type": "color", "id": "checklist_bg", "label": "Checklist background", "default": "#F5F0E8" },
    { "type": "color", "id": "check_color", "label": "Check icon", "default": "#B79B6E" }
  ],
  "blocks": [
    { "type": "check", "name": "Checklist item", "settings": [ { "type": "text", "id": "text", "label": "Text", "default": "Sequins knitted into the yarn, never glued on" } ] }
  ],
  "max_blocks": 6,
  "presets": [ { "name": "MW · Editorial Split", "blocks": [
    { "type": "check", "settings": { "text": "Sequins knitted into the yarn, never glued on" } },
    { "type": "check", "settings": { "text": "Fully lined through the body, no slip required" } },
    { "type": "check", "settings": { "text": "Machine washable cold, no dry-clean bill" } }
  ] } ]
}
{% endschema %}