/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 18:1 Expected identifier but found "%"
Line 49:0 Unexpected "<"
Line 55:11 Expected identifier but found "%"
Line 55:46 Expected identifier but found "%"
Line 56:10 Unexpected "{"
Line 56:11 Expected identifier but found "%"
Line 57:12 Unexpected "<"
Line 59:17 Unexpected "{"
Line 59:24 Expected ":"
... and 92 more hidden warnings

**/
<link rel="stylesheet" href="{{'section-image-textbox.css' | asset_url}}" media="print" onload="this.media='all'">

{%- liquid 
  assign default_color = 'rgba(0,0,0,0)'
  assign section_id = '#section-' | append: section.id
  assign style = section.settings.style
  assign image = section.settings.image
  assign position = section.settings.position
  assign position_mobile = section.settings.position_mobile
  assign heading = section.settings.heading
  assign subtext = section.settings.subtext
  assign subtext_2 = section.settings.subtext_2
  assign button = section.settings.button
  assign link = section.settings.link
  assign content_style_block = section.blocks | where: 'type' , 'content-style' | first
  assign layout = section.settings.layout

  if layout == 'boxed'
    assign layout_class = 'container'
    if style == 'normal'
      assign textbox_class = 'col-lg-4 col-md-5'
      assign image_class = 'col-lg-8 col-md-7'
    else
      assign textbox_class = 'col-lg-6 col-md-6'
      assign image_class = 'col-lg-6 col-md-6'
    endif
  else
    assign layout_class = ''
    assign textbox_class = 'col-lg-6 col-md-6'
    assign image_class = 'col-lg-6 col-md-6'
  endif
-%}

<div class="section-image-textbox layout-{{layout}}" id="section-{{section.id}}" data-section-id="{{section.id}}">
  <div class="{% if template == 'index' or template contains 'page' or template contains 'article' or template contains 'product' %}{{ layout_class }}{% endif %}">
    <div class="section-wrapper style-{{style}}">
      <div class="section-body">
        <div class="row">

          {%- comment -%} Desktop left image {%- endcomment -%}
          {% if image and position == 'left' %}
            <div class="{{ image_class }} col-sm-12 col-12 {% if position_mobile == 'left' %}d-none d-md-block{% else %}d-none d-md-block{% endif %}">
              <div class="block-image">
                {{ image | image_url: width: 1600 | image_tag:
                    class: "img-fluid blur-up lazyload",
                    loading: "lazy",
                    widths: "360,540,720,900,1200,1600",
                    sizes: "(max-width: 767px) 100vw, 50vw"
                }}
              </div>
            </div>
          {% endif %}

          {%- comment -%} Textbox block {%- endcomment -%}
          <div class="{{ textbox_class }} col-sm-12 col-12">
            <div class="block-textbox">
              {%- if heading != blank -%}<div class="textbox-heading">{{heading}}</div>{%- endif -%}
              {%- if subtext != blank -%}<div class="textbox-subtext">{{subtext}}</div>{%- endif -%}
              {%- if subtext_2 != blank -%}<div class="textbox-subtext-2">{{subtext_2}}</div>{%- endif -%}
              {%- if button != blank -%}<a href="{{link}}" class="btn btn-banner">{{button}}</a>{%- endif -%}
            </div>
          </div>

          {%- comment -%} Desktop right image {%- endcomment -%}
          {% if image and position == 'right' %}
            <div class="{{ image_class }} col-sm-12 col-12 {% if position_mobile == 'right' %}d-none d-md-block{% else %}d-none d-md-block{% endif %}">
              <div class="block-image">
                {{ image | image_url: width: 1600 | image_tag:
                    class: "img-fluid blur-up lazyload",
                    loading: "lazy",
                    widths: "360,540,720,900,1200,1600",
                    sizes: "(max-width: 767px) 100vw, 50vw"
                }}
              </div>
            </div>
          {% endif %}

          {%- comment -%} Mobile image {%- endcomment -%}
          {% if image %}
            <div class="col-12 d-block d-md-none {% if position_mobile == 'left' %}order-first{% else %}order-last{% endif %}">
              <div class="block-image">
                {{ image | image_url: width: 720 | image_tag:
                    class: "img-fluid blur-up lazyload",
                    loading: "lazy",
                    widths: "360,540,720",
                    sizes: "100vw"
                }}
              </div>
            </div>
          {% endif %}

        </div>
      </div>
    </div>
  </div>
</div>

{%- comment -%} Blur-up CSS {%- endcomment -%}
<style>
.blur-up {
  filter: blur(12px);
  transition: filter 0.4s ease;
}
.blur-up.lazyloaded {
  filter: blur(0);
}
</style>

{%- capture section_css -%}
  {%- if content_style_block != blank -%}
    {%- liquid 
      assign title_color = content_style_block.settings.title_color | default: default_color
      assign title_font_size = content_style_block.settings.title_font_size
      assign title_line_height = content_style_block.settings.title_line_height
      assign subtext_color = content_style_block.settings.subtext_color | default: default_color
      assign subtext_font_size = content_style_block.settings.subtext_font_size
      assign subtext_line_height = content_style_block.settings.subtext_line_height
      assign subtext_2_color = content_style_block.settings.subtext_2_color | default: default_color
      assign subtext_2_font_size = content_style_block.settings.subtext_2_font_size
      assign subtext_2_line_height = content_style_block.settings.subtext_2_line_height
      assign button_color = content_style_block.settings.button_color | default: default_color
      assign button_bg_color = content_style_block.settings.button_bg_color | default: default_color
      assign button_font_weight = content_style_block.settings.button_font_weight
    -%}
    {%- render 'css-responsive' preClassID: section_id, classID: ' .textbox-heading', 
      value_1: title_color, property_1: 'color'
      value_2: title_font_size, property_2: 'font-size'
      value_3: title_line_height, property_3: 'line-height' -%}
    {%- render 'css-responsive' preClassID: section_id, classID: ' .textbox-subtext', 
      value_1: subtext_color, property_1: 'color'
      value_2: subtext_font_size, property_2: 'font-size'
      value_3: subtext_line_height, property_3: 'line-height' -%}
    {%- render 'css-responsive' preClassID: section_id, classID: ' .textbox-subtext-2', 
      value_1: subtext_2_color, property_1: 'color'
      value_2: subtext_2_font_size, property_2: 'font-size'
      value_3: subtext_2_line_height, property_3: 'line-height' -%}
    {%- render 'css-responsive' preClassID: section_id, classID: ' .btn-banner', 
      value_1: button_color, property_1: 'color'
      value_2: button_bg_color, property_2: 'background'
      value_3: button_font_weight, property_3: 'font-weight' -%}
  {%- endif -%}
  {%- render 'snippet-theme' type: 'section-style', preClassID: section_id, config: section.settings -%}
{%- endcapture -%}

{%- style -%}{{section_css | strip | strip_newlines | remove: '  '}}{%- endstyle -%}

{%- schema -%}
{
  "name": "t:sections.image-textbox.name",
  "tag": "section",
  "disabled_on": {
    "groups": ["aside", "header", "footer"]
  },
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.image-textbox.settings.created_by"
    },
    {
      "type": "select",
      "id": "layout",
      "label": "t:sections.common.layout_mode",
      "default": "boxed",
      "options": [
        {
          "value": "boxed",
          "label": "t:settings_schema.general_settings.settings.layout_mode.options__1.label"
        },
        {
          "value": "full",
          "label": "t:settings_schema.general_settings.settings.layout_mode.options__2.label"
        }
      ]
    },
    {
      "type": "select",
      "id": "style",
      "label": "t:sections.common.style",
      "options": [
        {
          "value": "normal",
          "label": "t:sections.common.normal"
        },
        {
          "value": "special",
          "label": "t:sections.common.special"
        }
      ]
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.common.image"
    },
    {
      "type": "select",
      "id": "position",
      "label": "Textbox position (Desktop)",
      "default": "left",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "select",
      "id": "position_mobile",
      "label": "Textbox position (Mobile)",
      "default": "left",
      "options": [
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "right",
          "label": "Right"
        }
      ]
    },
    {
      "type": "richtext",
      "id": "heading",
      "label": "t:sections.common.heading"
    },
    {
      "type": "richtext",
      "id": "subtext",
      "label": "t:sections.common.subtext"
    },
    {
      "type": "richtext",
      "id": "subtext_2",
      "label": "t:sections.common.subtext_2"
    },
    {
      "type": "text",
      "id": "button",
      "label": "t:sections.common.button_label"
    },
    {
      "type": "url",
      "id": "link",
      "label": "t:sections.common.link"
    }
  ],
  "blocks": [
    {
      "type": "content-style",
      "limit": 1,
      "name": "t:sections.announcement-bar.blocks.content_style.name",
      "settings": [
        {
          "type": "color",
          "id": "title_color",
          "label": "t:sections.common.color",
          "default": "#000000"
        },
        {
          "type": "text",
          "id": "title_font_size",
          "label": "t:sections.common.font_size"
        },
        {
          "type": "text",
          "id": "title_line_height",
          "label": "t:sections.common.line_height"
        },
        {
          "type": "color",
          "id": "subtext_color",
          "label": "t:sections.common.color",
          "default": "#000000"
        },
        {
          "type": "text",
          "id": "subtext_font_size",
          "label": "t:sections.common.font_size"
        },
        {
          "type": "text",
          "id": "subtext_line_height",
          "label": "t:sections.common.line_height"
        },
        {
          "type": "color",
          "id": "subtext_2_color",
          "label": "t:sections.common.color",
          "default": "#000000"
        },
        {
          "type": "text",
          "id": "subtext_2_font_size",
          "label": "t:sections.common.font_size"
        },
        {
          "type": "text",
          "id": "subtext_2_line_height",
          "label": "t:sections.common.line_height"
        },
        {
          "type": "color",
          "id": "button_color",
          "label": "t:sections.common.button_label",
          "default": "#ffffff"
        },
        {
          "type": "color",
          "id": "button_bg_color",
          "label": "t:sections.common.button_background",
          "default": "#06bec7"
        },
        {
          "type" : "range",
          "id": "button_font_weight",
          "label": "t:sections.common.font_weight",
          "step": 100,
          "min" : 100,
          "max" : 900,
          "default" : 400
        }
      ]
    }
  ],
  "presets": [
    {
      "name" : "t:sections.image-textbox.name"
    }
  ]
}
{%- endschema -%}