{%- comment -%}
  Editorial Split — Reformation inspired.

  Observed on thereformation.com: a stack of full-bleed blocks, each one
  image with almost no type, alternating which side the copy sits on.
  The restraint is the point — one image, one line, one link.

  Each block is a row. Image side alternates automatically unless you
  pin it. Text can overlay the image or sit beside it.
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign uid = section.id
-%}

{% style %}
  .ed-{{ uid }} { padding-top: {{ s.padding_top }}px; padding-bottom: {{ s.padding_bottom }}px; }
  .ed-{{ uid }}__row { display: grid; align-items: stretch; }
  .ed-{{ uid }}__row + .ed-{{ uid }}__row { margin-top: {{ s.row_gap }}px; }
  .ed-{{ uid }}__media { position: relative; overflow: hidden; }
  .ed-{{ uid }}__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .9s cubic-bezier(.2,.6,.2,1);
  }
  {%- if s.zoom_on_hover -%}
  .ed-{{ uid }}__row:hover .ed-{{ uid }}__media img { transform: scale(1.04); }
  {%- endif -%}
  .ed-{{ uid }}__body {
    display: flex; flex-direction: column; justify-content: {{ s.v_align }};
    gap: 12px; padding: {{ s.text_padding }}px;
    text-align: {{ s.text_align }};
    align-items: {% if s.text_align == 'center' %}center{% elsif s.text_align == 'right' %}flex-end{% else %}flex-start{% endif %};
  }
  .ed-{{ uid }}__eyebrow {
    margin: 0; font-size: {{ s.eyebrow_size }}px; letter-spacing: .14em;
    text-transform: uppercase; opacity: .7;
  }
  .ed-{{ uid }}__title { margin: 0; font-size: {{ s.title_size }}px; line-height: 1.1; }
  .ed-{{ uid }}__text { margin: 0; max-width: 46ch; }
  .ed-{{ uid }}__cta {
    display: inline-block; margin-top: 4px;
    font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
    border-bottom: 1px solid currentColor; padding-bottom: 3px;
    text-decoration: none; color: inherit;
  }
  /* overlay variant */
  .ed-{{ uid }}__row--overlay { position: relative; }
  .ed-{{ uid }}__row--overlay .ed-{{ uid }}__body {
    position: absolute; inset: 0; z-index: 2;
    color: {{ s.overlay_text }};
    justify-content: {{ s.v_align }};
  }
  .ed-{{ uid }}__scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,{{ s.scrim | divided_by: 100.0 }}), rgba(0,0,0,0) 62%);
  }
  @media screen and (min-width: 750px) {
    .ed-{{ uid }}__row--split { grid-template-columns: 1fr 1fr; }
    .ed-{{ uid }}__row--split.is-flipped .ed-{{ uid }}__media { order: 2; }
    .ed-{{ uid }}__media { min-height: {{ s.min_height }}px; }
  }
  @media screen and (max-width: 749px) {
    .ed-{{ uid }}__media { aspect-ratio: {{ s.mobile_ratio }}; }
    .ed-{{ uid }}__title { font-size: {{ s.title_size | times: 0.62 | round }}px; }
    .ed-{{ uid }}__body { padding: {{ s.text_padding | times: 0.6 | round }}px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ed-{{ uid }}__media img { transition: none; }
  }
{% endstyle %}

<div class="ed-{{ uid }} color-{{ s.color_scheme }} gradient">
  <div class="{% if s.full_bleed == false %}page-width{% endif %}">
    {%- for block in section.blocks -%}
      {%- liquid
        assign bs = block.settings
        assign flip = false
        if bs.image_side == 'auto'
          assign mod = forloop.index0 | modulo: 2
          if mod == 1
            assign flip = true
          endif
        elsif bs.image_side == 'right'
          assign flip = true
        endif
      -%}
      <div class="ed-{{ uid }}__row ed-{{ uid }}__row--{{ s.layout }}{% if flip %} is-flipped{% endif %}"
           {{ block.shopify_attributes }}>
        <div class="ed-{{ uid }}__media">
          {%- if bs.image != blank -%}
            {{ bs.image | image_url: width: 2000 | image_tag:
                 loading: "lazy", widths: "500,800,1200,1600,2000",
                 alt: bs.image.alt | default: bs.title }}
          {%- elsif bs.image_url != blank -%}
            <img src="{{ bs.image_url }}" alt="{{ bs.title | escape }}" loading="lazy" width="2000" height="1400">
          {%- else -%}
            {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}
          {%- if s.layout == 'overlay' and s.scrim > 0 -%}
            <div class="ed-{{ uid }}__scrim"></div>
          {%- endif -%}
        </div>

        <div class="ed-{{ uid }}__body">
          {%- if bs.eyebrow != blank -%}
            <p class="ed-{{ uid }}__eyebrow">{{ bs.eyebrow | escape }}</p>
          {%- endif -%}
          {%- if bs.title != blank -%}
            <h2 class="ed-{{ uid }}__title">{{ bs.title | escape }}</h2>
          {%- endif -%}
          {%- if bs.text != blank -%}
            <div class="ed-{{ uid }}__text">{{ bs.text }}</div>
          {%- endif -%}
          {%- if bs.cta_label != blank -%}
            <a class="ed-{{ uid }}__cta" href="{{ bs.cta_link | default: '#' }}">{{ bs.cta_label | escape }}</a>
          {%- endif -%}
        </div>
      </div>
    {%- endfor -%}
  </div>
</div>

{% schema %}
{
  "name": "Editorial (reformation)",
  "tag": "section",
  "class": "section",
  "disabled_on": { "groups": ["header", "footer"] },
  "settings": [
    { "type": "select", "id": "layout", "label": "Layout", "default": "split",
      "options": [
        {"value":"split","label":"Image beside text"},
        {"value":"overlay","label":"Text over image"}
      ] },
    { "type": "checkbox", "id": "full_bleed", "label": "Full bleed", "default": true },
    { "type": "range", "id": "min_height", "min": 300, "max": 900, "step": 20, "unit": "px", "label": "Row height (desktop)", "default": 620 },
    { "type": "select", "id": "mobile_ratio", "label": "Mobile image ratio", "default": "3 / 4",
      "options": [ {"value":"1 / 1","label":"Square"}, {"value":"3 / 4","label":"Portrait"}, {"value":"4 / 5","label":"Tall"}, {"value":"16 / 9","label":"Wide"} ] },
    { "type": "range", "id": "row_gap", "min": 0, "max": 120, "step": 4, "unit": "px", "label": "Gap between rows", "default": 0 },
    { "type": "checkbox", "id": "zoom_on_hover", "label": "Zoom image on hover", "default": true },
    { "type": "header", "content": "Text" },
    { "type": "select", "id": "text_align", "label": "Alignment", "default": "left",
      "options": [ {"value":"left","label":"Left"}, {"value":"center","label":"Centre"}, {"value":"right","label":"Right"} ] },
    { "type": "select", "id": "v_align", "label": "Vertical position", "default": "center",
      "options": [ {"value":"flex-start","label":"Top"}, {"value":"center","label":"Middle"}, {"value":"flex-end","label":"Bottom"} ] },
    { "type": "range", "id": "text_padding", "min": 12, "max": 100, "step": 4, "unit": "px", "label": "Text padding", "default": 48 },
    { "type": "range", "id": "title_size", "min": 20, "max": 90, "step": 2, "unit": "px", "label": "Title size", "default": 44 },
    { "type": "range", "id": "eyebrow_size", "min": 9, "max": 18, "step": 1, "unit": "px", "label": "Eyebrow size", "default": 11 },
    { "type": "color", "id": "overlay_text", "label": "Overlay text colour", "default": "#ffffff" },
    { "type": "range", "id": "scrim", "min": 0, "max": 80, "step": 5, "unit": "%", "label": "Overlay scrim", "default": 35 },
    { "type": "header", "content": "Section" },
    { "type": "color_scheme", "id": "color_scheme", "label": "Colour scheme", "default": "scheme-1" },
    { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Top padding", "default": 0 },
    { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "Bottom padding", "default": 0 }
  ],
  "blocks": [
    {
      "type": "row",
      "name": "Row",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Image" },
        { "type": "text", "id": "image_url", "label": "Image URL", "info": "Used only when no image is picked." },
        { "type": "select", "id": "image_side", "label": "Image side", "default": "auto",
          "options": [ {"value":"auto","label":"Alternate automatically"}, {"value":"left","label":"Left"}, {"value":"right","label":"Right"} ] },
        { "type": "text", "id": "eyebrow", "label": "Eyebrow" },
        { "type": "text", "id": "title", "label": "Title", "default": "New arrivals" },
        { "type": "richtext", "id": "text", "label": "Text" },
        { "type": "text", "id": "cta_label", "label": "Link label", "default": "Shop now" },
        { "type": "url", "id": "cta_link", "label": "Link" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Editorial (reformation)",
      "blocks": [ {"type":"row"}, {"type":"row"} ]
    }
  ]
}
{% endschema %}
