{%- comment -%} MW · Hero — full-width image banner with overlay content + CTAs. {%- endcomment -%}
{%- assign uid = section.id | replace: '_', '' | replace: '-', '' -%}
{% style %}
  #shopify-section-{{ section.id }}{ --hr-eye:{{ section.settings.eyebrow_color }}; --hr-head:{{ section.settings.heading_color }}; --hr-sub:{{ section.settings.sub_color }}; --hr-b1:{{ section.settings.button_bg }}; --hr-b1t:{{ section.settings.button_text }}; --hr-b2:{{ section.settings.button2_text_color }}; }
  .hr-{{ uid }}{ position:relative; min-height:{{ section.settings.height }}px; display:flex; overflow:hidden; }
  .hr-{{ uid }} .hr__bg{ position:absolute; inset:0; }
  .hr-{{ uid }} .hr__bg img,.hr-{{ uid }} .hr__bg .mw-img-ph{ width:100%; height:100%; object-fit:cover; display:block; }
  .hr-{{ uid }} .hr__ov{ position:absolute; inset:0; background:linear-gradient({{ section.settings.overlay_angle }}deg, rgba(0,0,0,{{ section.settings.overlay_opacity | divided_by: 100.0 }}), rgba(0,0,0,{{ section.settings.overlay_opacity | divided_by: 100.0 | times: 0.3 }})); }
  .hr-{{ uid }} .hr__inner{ position:relative; z-index:1; max-width:{{ section.settings.max_width }}px; width:100%; margin:0 auto; padding:clamp(40px,7vw,90px) {{ section.settings.side_padding }}px; display:flex; }
  .hr-{{ uid }} .hr__content{ max-width:560px; margin-{{ section.settings.content_align }}:{% if section.settings.content_align == 'right' %}0{% else %}auto{% endif %}; {% if section.settings.content_align == 'center' %}margin-inline:auto; text-align:center;{% endif %} align-self:{{ section.settings.content_valign }}; }
  .hr-{{ uid }} .hr__eye{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-weight:600; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--hr-eye); margin:0 0 12px; }
  .hr-{{ uid }} .hr__h{ font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:700; font-size:clamp(32px,5vw,{{ section.settings.heading_size }}px); line-height:1.05; letter-spacing:-.01em; color:var(--hr-head); margin:0; }
  .hr-{{ uid }} .hr__h em{ font-family:{{ section.settings.serif_font.family }},{{ section.settings.serif_font.fallback_families }}; font-style:italic; }
  .hr-{{ uid }} .hr__sub{ font-family:{{ section.settings.body_font.family }},{{ section.settings.body_font.fallback_families }}; font-size:16px; line-height:1.6; color:var(--hr-sub); margin:16px 0 0; }
  .hr-{{ uid }} .hr__btns{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; {% if section.settings.content_align == 'center' %}justify-content:center;{% endif %} }
  .hr-{{ uid }} .hr__btn{ display:inline-flex; align-items:center; justify-content:center; font-family:{{ section.settings.heading_font.family }},{{ section.settings.heading_font.fallback_families }}; font-weight:600; letter-spacing:.03em; text-transform:uppercase; font-size:14px; padding:15px 30px; border-radius:{{ section.settings.button_radius }}px; text-decoration:none; transition:transform .18s,filter .18s; }
  .hr-{{ uid }} .hr__btn--1{ background:linear-gradient(99deg,var(--hr-b1),color-mix(in srgb,var(--hr-b1),#fff 18%)); color:var(--hr-b1t); }
  .hr-{{ uid }} .hr__btn--2{ background:transparent; color:var(--hr-b2); border:1.5px solid var(--hr-b2); }
  .hr-{{ uid }} .hr__btn:hover{ transform:translateY(-1px); filter:brightness(1.06); }
  @media (max-width:640px){ .hr-{{ uid }} .hr__content{ margin:0; text-align:{% if section.settings.content_align == 'center' %}center{% else %}left{% endif %}; } }
{% endstyle %}
<div class="hr-{{ uid }}">
  <div class="hr__bg">{% render 'mw-image', image: section.settings.image, url: section.settings.image_url, alt: section.settings.heading, width: 2000, loading: 'eager' %}</div>
  <div class="hr__ov"></div>
  <div class="hr__inner">
    <div class="hr__content">
      {%- if section.settings.eyebrow != blank -%}<p class="hr__eye">{{ section.settings.eyebrow | escape }}</p>{%- endif -%}
      {%- if section.settings.heading != blank -%}<h2 class="hr__h">{{ section.settings.heading }}</h2>{%- endif -%}
      {%- if section.settings.sub != blank -%}<p class="hr__sub">{{ section.settings.sub | escape }}</p>{%- endif -%}
      {%- if section.settings.button_label != blank or section.settings.button2_label != blank -%}
      <div class="hr__btns">
        {%- if section.settings.button_label != blank -%}<a class="hr__btn hr__btn--1" href="{{ section.settings.button_link | default: '#' }}">{{ section.settings.button_label | escape }}</a>{%- endif -%}
        {%- if section.settings.button2_label != blank -%}<a class="hr__btn hr__btn--2" href="{{ section.settings.button2_link | default: '#' }}">{{ section.settings.button2_label | escape }}</a>{%- endif -%}
      </div>
      {%- endif -%}
    </div>
  </div>
</div>
{% schema %}
{
  "name": "MW · Hero",
  "tag": "section",
  "class": "mw-section mw-hero",
  "settings": [
    { "type": "image_picker", "id": "image", "label": "Background image" },
    { "type": "text", "id": "image_url", "label": "…or image URL" },
    { "type": "html", "id": "heading", "label": "Heading", "info": "Use <em>word</em> for a serif-italic accent.", "default": "Elegant at 11am, <em>not costume.</em>" },
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "New — the sequin knit" },
    { "type": "textarea", "id": "sub", "label": "Sub", "default": "A hand-finished dress you actually wear more than once." },
    { "type": "text", "id": "button_label", "label": "Button 1 label", "default": "Shop the dress" },
    { "type": "url", "id": "button_link", "label": "Button 1 link" },
    { "type": "text", "id": "button2_label", "label": "Button 2 label", "default": "See the fit" },
    { "type": "url", "id": "button2_link", "label": "Button 2 link" },
    { "type": "header", "content": "Layout" },
    { "type": "range", "id": "height", "min": 320, "max": 820, "step": 10, "unit": "px", "label": "Min height", "default": 560 },
    { "type": "range", "id": "max_width", "min": 900, "max": 1500, "step": 10, "unit": "px", "label": "Content width", "default": 1250 },
    { "type": "range", "id": "side_padding", "min": 16, "max": 80, "step": 2, "unit": "px", "label": "Side padding", "default": 40 },
    { "type": "range", "id": "heading_size", "min": 32, "max": 80, "step": 2, "unit": "px", "label": "Heading max size", "default": 56 },
    { "type": "select", "id": "content_align", "label": "Content align", "default": "left", "options": [ {"value":"left","label":"Left"}, {"value":"center","label":"Center"}, {"value":"right","label":"Right"} ] },
    { "type": "select", "id": "content_valign", "label": "Vertical align", "default": "center", "options": [ {"value":"flex-start","label":"Top"}, {"value":"center","label":"Middle"}, {"value":"flex-end","label":"Bottom"} ] },
    { "type": "range", "id": "button_radius", "min": 0, "max": 30, "step": 1, "unit": "px", "label": "Button radius", "default": 4 },
    { "type": "range", "id": "overlay_opacity", "min": 0, "max": 80, "step": 5, "unit": "%", "label": "Overlay darkness", "default": 35 },
    { "type": "range", "id": "overlay_angle", "min": 0, "max": 360, "step": 15, "unit": "deg", "label": "Overlay angle", "default": 90 },
    { "type": "header", "content": "Type & colour" },
    { "type": "font_picker", "id": "heading_font", "label": "Heading font", "default": "poppins_n7" },
    { "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": "eyebrow_color", "label": "Eyebrow", "default": "#E9DEC9" },
    { "type": "color", "id": "heading_color", "label": "Heading", "default": "#FFFFFF" },
    { "type": "color", "id": "sub_color", "label": "Sub", "default": "#EDE4DC" },
    { "type": "color", "id": "button_bg", "label": "Button 1", "default": "#B79B6E" },
    { "type": "color", "id": "button_text", "label": "Button 1 text", "default": "#241C15" },
    { "type": "color", "id": "button2_text_color", "label": "Button 2 (outline) colour", "default": "#FFFFFF" }
  ],
  "presets": [ { "name": "MW · Hero" } ]
}
{% endschema %}