{% comment %}

** Rich text - White dynamic **

- Draggable section
{% endcomment %}

{% comment %} Assign object as block or section {% endcomment %}

{% if type == 'block' %}
{%- assign object = block -%}
{% else %}
{%- assign object = section -%}
{% endif %}

{% comment %} Content settings {% endcomment %}

{%- assign title = object.settings.title -%}
{%- assign subtitle = object.settings.subtitle -%}
{%- assign heading_font = object.settings.heading_font -%}
{%- assign heading_color = object.settings.heading_color -%}
{%- assign subheading_color = object.settings.subheading_color -%}
{%- assign heading_alignment = object.settings.heading_alignment -%}
{%- assign heading_size = object.settings.heading_size -%}
{%- assign subheading_size = object.settings.subheading_size -%}
{%- assign text = object.settings.text -%}
{%- assign text2 = object.settings.text2 -%}
{%- assign text3 = object.settings.text3 -%}
{%- assign finaltext = object.settings.finaltext -%}
{%- assign whitetext = object.settings.whitetext -%}
{%- assign text_font = object.settings.text_font -%}
{%- assign text_color = object.settings.text_color -%}
{%- assign text_alignment = object.settings.text_alignment -%}
{%- assign text_size = object.settings.text_size -%}
{% comment %} End content settings {% endcomment %}

{% comment %} Is the color set to transparent? {% endcomment %}

{%- assign heading_alpha = heading_color | color_extract: 'alpha' -%}
{%- assign text_alpha = text_color | color_extract: 'alpha' -%}
{%- assign background_alpha = object.settings.background | color_extract: 'alpha' -
%}
{%- assign gradient_alpha = object.settings.gradient | color_extract: 'alpha' -%}

{% comment %} Section specific CSS {% endcomment %}

{% capture section_css -%}

.section {
background-image: linear-gradient({{ object.settings.gradient_rotation }}deg,
rgba(255,255,255,0), {{ object.settings.gradient }});
background-color: {%- if background_alpha != 0 -%}{{ object.settings.background
}}{%- endif -%};
}

.rich-text__heading {
font-size: {{ heading_size }}px;
color: {%- if heading_alpha != 0 -%}{{ heading_color }}{%- else -%}
{{ settings.heading_color }}{%- endif -%};
font-family: 'SofiaPro-SemiBold', {{ heading_font.fallback_families }};
font-weight: {{ heading_font.weight }};
font-style: {{ heading_font.style }};
}

.rich-text__subheading {
 font-size: {{ subheading_size }}px;
color: {%- if heading_alpha != 0 -%}{{ subheading_color }}{%- else -%}
{{ settings.heading_color }}{%- endif -%};
font-family: 'Skizzle', {{ heading_font.fallback_families }};
font-weight: {{ heading_font.weight }};
font-style: {{ heading_font.style }};
}
.whitetext {
font-size: {{ subheading_size }}px;

font-family: 'SofiaPro-SemiBold', {{ heading_font.fallback_families }};

font-weight: {{ heading_font.weight }};
font-style: {{ heading_font.style }};
}

.rich-text__text {
font-size: {{ text_size }}px;
color: {%- if text_alpha != 0 -%}{{ text_color }}{%- else -%}
{{ settings.regular_color }}{%- endif -%};
font-family: 'SofiaPro-Regular', {{ text_font.fallback_families }};
font-weight: {{ text_font.weight }};
font-style: {{ text_font.style }};
}
.rich-text__finaltext {
font-size: {{ text_size }}px;
color: {%- if text_alpha != 0 -%}{{ text_color }}{%- else -%}
{{ settings.regular_color }}{%- endif -%};
font-family: 'SofiaPro-Regular', {{ text_font.fallback_families }};
font-weight: {{ text_font.weight }};
font-style: {{ text_font.style }};
}
{%- endcapture -%}

{% style %}
{{ heading_font | font_face }}
{{ text_font | font_face }}

#shopify-section-{{ object.id }} {
padding-top: {{ object.settings.padding_top }}px;
padding-bottom: {{ object.settings.padding_bottom }}px;
padding-left: {{ object.settings.padding_left }}px;
padding-right: {{ object.settings.padding_right }}px;
{% if object.settings.width == 'wide' %}
width: 100%;
{% elsif object.settings.width == 'half' %}
width: 50%;
{% endif %}
}
{% render 'css-loop',
css: section_css,
id: object.id
%}
{% render 'css-loop',
css: object.settings.custom_css,
id: object.id
%}
{% endstyle %}

{% comment %} HTML markup {% endcomment %}

<section class="section
{{ object.settings.css_class }}
is-width-{{ object.settings.width }}
{% if background_alpha != 0 or gradient_alpha != 0 %}
has-background
{% endif %}
"
{% if object.settings.animation != "none" %}
data-scroll-class="{{ object.settings.animation }}"
{% endif %}>
<div class="container
has-limit
">
<div class="columns one-whole">
<div class="rich-text__content card-content">

{% if title != blank %}
<h2 class="rich-text__heading title text-align-{{ heading_alignment }} {%
if heading_size > 50 %}mobile-shrink-text{% endif %}"><span>{{ title }}</span></h2>
{% endif %}

{% if subtitle != blank %}
<h2 class="rich-text__subheading title text-align-{{ heading_alignment }}
{% if heading_size > 50 %}mobile-shrink-text{% endif
%}"><span>{{ subtitle }}</span></h2>
{% endif %}

{% if object.settings.imagewhiteimage2 != blank and

object.settings.imagewhiteimage3 == blank %}
<div class="left-img">
{% if object.settings.imagewhiteimage != blank %}
{% render 'image-element',
image: object.settings.imagewhiteimage,
stretch_width: true
%}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if object.settings.imagetext != blank %}
<span>{{ object.settings.imagetext }}</span>
{% endif %}
{% if object.settings.imagesubtitle != blank %}
<span>{{ object.settings.imagesubtitle }}</span>
{% endif %}

{% if text != blank %}
<div class="rich-text__text has-columns--
{{ object.settings.columns }} text-align-{{ text_alignment }} content {% if
text_size > 35 %}mobile-shrink-text{% endif %}">
{{ text }}
</div>
{% endif %}
</div>
<div class="right-img">
{% if object.settings.imagewhiteimage2 != blank %}
{% render 'image-element',
image: object.settings.imagewhiteimage2,
stretch_width: true
%}
 {% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if object.settings.imagetext2 != blank %}
<span>{{ object.settings.imagetext2 }}</span>
{% endif %}
{% if object.settings.imagesubtitle2 != blank %}
<span>{{ object.settings.imagesubtitle2 }}</span>
{% endif %}

{% if text2 != blank %}
<div class="rich-text__text has-columns--
{{ object.settings.columns }} text-align-{{ text_alignment }} content {% if
text_size > 35 %}mobile-shrink-text{% endif %}">
{{ text2 }}
</div>
{% endif %}
</div>
{% else object.settings.imagewhiteimage2 != blank and
object.settings.imagewhiteimage3 != blank %}

<div class="left-img">
{% if object.settings.imagewhiteimage != blank %}
{% render 'image-element',
image: object.settings.imagewhiteimage,
stretch_width: true
%}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if object.settings.imagetext != blank %}
<span>{{ object.settings.imagetext }}</span>
{% endif %}
{% if object.settings.imagesubtitle != blank %}
<span>{{ object.settings.imagesubtitle }}</span>
{% endif %}

{% if text != blank %}
<div class="rich-text__text has-columns--
{{ object.settings.columns }} text-align-{{ text_alignment }} content {% if
text_size > 35 %}mobile-shrink-text{% endif %}">
{{ text }}
</div>
{% endif %}
</div>

<div class="center-img">
{% if object.settings.imagewhiteimage2 != blank %}
{% render 'image-element',
image: object.settings.imagewhiteimage2,
stretch_width: true
%}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if object.settings.imagetext2 != blank %}
<span>{{ object.settings.imagetext2 }}</span>
{% endif %}
{% if object.settings.imagesubtitle2 != blank %}
 <span>{{ object.settings.imagesubtitle2 }}</span>
{% endif %}

{% if text2 != blank %}
<div class="rich-text__text has-columns--
{{ object.settings.columns }} text-align-{{ text_alignment }} content {% if
text_size > 35 %}mobile-shrink-text{% endif %}">
{{ text2 }}
</div>
{% endif %}
</div>

<div class="right-img">
{% if object.settings.imagewhiteimage3 != blank %}
{% render 'image-element',
image: object.settings.imagewhiteimage3,
stretch_width: true
%}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% if object.settings.imagetext3 != blank %}
<span>{{ object.settings.imagetext3 }}</span>
{% endif %}
{% if object.settings.imagesubtitle3 != blank %}
<span>{{ object.settings.imagesubtitle3 }}</span>
{% endif %}

{% if text3 != blank %}
<div class="rich-text__text has-columns--
{{ object.settings.columns }} text-align-{{ text_alignment }} content {% if
text_size > 35 %}mobile-shrink-text{% endif %}">
{{ text3 }}
</div>
{% endif %}
</div>

{% else %}
{% if object.settings.imagewhiteimage != blank %}
{% render 'image-element',
image: object.settings.imagewhiteimage,
stretch_width: true
%}
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% endif %}
{% if object.settings.imagewhiteimage2 == blank %}

{% if subtitle != blank %}
<h2 class="rich-text__subheading title text-align-{{ heading_alignment }}
{% if heading_size > 50 %}mobile-shrink-text{% endif
%}"><span>{{ subtitle }}</span></h2>
{% endif %}
{% endif %}
{% if text2 == blank %}
{% if text != blank %}
 <div class="rich-text__text has-columns--{{ object.settings.columns }}
text-align-{{ text_alignment }} content {% if text_size > 35 %}mobile-shrink-text{%
endif %}">
{{ text }}
</div>
{% endif %}
{% endif %}
{% if finaltext != blank %}
<div class="rich-text__finaltext has-columns--
{{ object.settings.columns }} text-align-{{ text_alignment }} content {% if
text_size > 35 %}mobile-shrink-text{% endif %}">
{{ finaltext }}
</div>
{% endif %}
{% if whitetext != blank %}
<div class="white-section text-align-center content {% if text_size >
35 %}mobile-shrink-text{% endif %}">
<h2 class="whitetext">{{ whitetext }}</h2>
</div>
{% endif %}

{% if object.settings.button_label != blank %}

<div class="buttons is-{{ object.settings.button_alignment }}">

{% render 'button',
label: object.settings.button_label,
href: object.settings.button_link,
style: object.settings.button_style,
type: "link"
%}

</div>

{% endif %}
</div>
</div>
</div>
</section>