{% comment %}
  Text block with optional subtitle and divider line
{% endcomment %}
<div class="{{ block.settings.visibility }}"
  {{ block.shopify_attributes }}
  style="--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;"
>
  <div
    class="product__text-container product__text-container--{{ block.settings.alignment }}{% if block.settings.mobile_alignment != blank %} product__text-container--mobile-{{ block.settings.mobile_alignment }}{% endif %} product__text-container--horizontal product__text-container--{{ block.settings.width }}{% if block.settings.enable_bg %} product__text-container--background{% endif %}{% if block.settings.width == 'full_negative' %} side-margins-negative{% endif %}"
    style="--mobile-text-size: {{ block.settings.mobile_text_size | divided_by: 10.0 }}rem;--desktop-text-size: {{ block.settings.desktop_text_size | divided_by: 10.0 }}rem;--padding:{{ block.settings.padding | divided_by: 7.0 }}em;--bg-color:{{ block.settings.bg_color }};--corner-radius:{{ block.settings.corner_radius | divided_by: 100.0 }}em;--border-size:{{ block.settings.border_size }}px;--border-color:{{ block.settings.border_color }};{% if block.settings.dashedborder %}border-style: dashed;{% endif %}{% if block.settings.enable_bg and block.settings.bg_color != blank %}background-color: {{ block.settings.bg_color }};{% endif %}{% if block.settings.corner_radius > 0 %}border-radius: {{ block.settings.corner_radius | divided_by: 100.0 }}em;{% endif %}{% if block.settings.border_size > 0 %}border: {{ block.settings.border_size }}px {% if block.settings.dashedborder %}dashed{% else %}solid{% endif %} {{ block.settings.border_color }};{% endif %}{% if block.settings.padding > 0 %}padding: {{ block.settings.padding | divided_by: 7.0 }}em;{% endif %}"
  >

    {% comment %} Circle number + text row wrapper {% endcomment %}
    <div class="product__text-row product__text-row--{{ block.settings.alignment }}" style="display:flex;align-items:center;gap:0.5em;{% if block.settings.alignment == 'center' %}justify-content:center;{% elsif block.settings.alignment == 'right' %}justify-content:flex-end;{% else %}justify-content:flex-start;{% endif %}">

      {% if block.settings.enable_circle_number and block.settings.circle_number_text != blank %}
        <span
          class="product__circle-number product__circle-number--{{ block.id }}"
          aria-hidden="true"
          style="
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: calc(var(--mobile-text-size, 1.4rem) * 1.6);
            height: calc(var(--mobile-text-size, 1.4rem) * 1.6);
            border-radius: {{ block.settings.circle_border_radius }}%;
            background-color: {{ block.settings.circle_bg_color }};
            color: {{ block.settings.circle_text_color }};
            font-size: var(--mobile-text-size, 1.4rem);
            font-weight: 700;
            line-height: 1;
            {% if block.settings.circle_border_size > 0 %}
              border: {{ block.settings.circle_border_size }}px solid {{ block.settings.circle_border_color }};
              box-sizing: border-box;
            {% endif %}
          "
        >{{ block.settings.circle_number_text }}</span>
      {% endif %}

      <div style="flex:1;min-width:0;">

        {% if block.settings.text_1 != blank %}
          <p
            class="product__text product__text-{{ block.settings.alignment }}{% if block.settings.mobile_alignment != blank %} product__text-mobile-{{ block.settings.mobile_alignment }}{% endif %}"
            style="--text-color:{{ block.settings.text_color }};{% if block.settings.text_color != blank %}color: {{ block.settings.text_color }};{% endif %}margin:0;"
          >
            {% if block.settings.show_divider %}

              {% capture text_output %}
                {% if block.settings.enable_text_highlight and block.settings.highlight_words != blank %}
                  {% assign text_content = block.settings.text_1 %}
                  {% assign words_to_highlight = block.settings.highlight_words | split: ',' %}
                  {% for word in words_to_highlight %}
                    {% assign trimmed_word = word | strip %}
                    {% assign replacement = '<span class="text-highlight-' | append: block.id | append: '">' | append: trimmed_word | append: '</span>' %}
                    {% assign text_content = text_content | replace: trimmed_word, replacement %}
                  {% endfor %}
                  {{ text_content }}
                {% else %}
                  {{- block.settings.text_1 -}}
                {% endif %}
              {% endcapture %}

              {% assign divider_pos = block.settings.divider_position | default: 'both' %}

              <span style="
                display: inline-flex;
                align-items: center;
                width: 100%;
                {% if block.settings.alignment == 'center' %}
                  justify-content: center;
                {% elsif block.settings.alignment == 'right' %}
                  justify-content: flex-end;
                {% else %}
                  justify-content: flex-start;
                {% endif %}
              ">

                {% if divider_pos == 'both' or divider_pos == 'left' %}
                  <span style="
                    flex: 1;
                    height: {{ block.settings.divider_thickness }}px;
                    background-color: {{ block.settings.divider_color }};
                    margin-right: {{ block.settings.divider_spacing | divided_by: 10.0 }}rem;
                    {% if block.settings.alignment == 'left' and divider_pos == 'both' %}
                      max-width: {{ block.settings.divider_width }}%;
                    {% endif %}
                  "></span>
                {% endif %}

                <span>{{ text_output }}</span>

                {% if divider_pos == 'both' or divider_pos == 'right' %}
                  <span style="
                    flex: 1;
                    height: {{ block.settings.divider_thickness }}px;
                    background-color: {{ block.settings.divider_color }};
                    margin-left: {{ block.settings.divider_spacing | divided_by: 10.0 }}rem;
                    {% if block.settings.alignment == 'left' and divider_pos == 'both' %}
                      max-width: {{ block.settings.divider_width }}%;
                    {% endif %}
                  "></span>
                {% endif %}

              </span>

            {% else %}
              <span>
                {% if block.settings.enable_text_highlight and block.settings.highlight_words != blank %}
                  {% assign text_content = block.settings.text_1 %}
                  {% assign words_to_highlight = block.settings.highlight_words | split: ',' %}
                  {% for word in words_to_highlight %}
                    {% assign trimmed_word = word | strip %}
                    {% assign replacement = '<span class="text-highlight-' | append: block.id | append: '">' | append: trimmed_word | append: '</span>' %}
                    {% assign text_content = text_content | replace: trimmed_word, replacement %}
                  {% endfor %}
                  {{ text_content }}
                {% else %}
                  {{- block.settings.text_1 -}}
                {% endif %}
              </span>
            {% endif %}
          </p>
        {% endif %}

        {% if block.settings.subtitle_text != blank %}
          <p
            class="product__text product__subtitle product__text-{{ block.settings.alignment }}{% if block.settings.mobile_alignment != blank %} product__text-mobile-{{ block.settings.mobile_alignment }}{% endif %}"
            style="
              --text-color:{{ block.settings.subtitle_color }};
              --mobile-text-size: {{ block.settings.subtitle_mobile_size | divided_by: 10.0 }}rem;
              --desktop-text-size: {{ block.settings.subtitle_desktop_size | divided_by: 10.0 }}rem;
              font-size: var(--mobile-text-size);
              {% if block.settings.subtitle_color != blank %}color: {{ block.settings.subtitle_color }};{% endif %}
              margin-top: {% unless block.settings.show_divider %}{{ block.settings.subtitle_spacing | divided_by: 10.0 }}rem{% else %}0{% endunless %};
              opacity: {{ block.settings.subtitle_opacity | divided_by: 100.0 }};
              margin-bottom: 0;
            "
          >
            <span>{{- block.settings.subtitle_text -}}</span>
          </p>
        {% endif %}

      </div>
    </div>

  </div>

  <style>
    @media screen and (min-width: 750px) {
      .product__subtitle {
        font-size: var(--desktop-text-size) !important;
      }
      .product__circle-number--{{ block.id }} {
        width: calc(var(--desktop-text-size, 1.6rem) * 1.6) !important;
        height: calc(var(--desktop-text-size, 1.6rem) * 1.6) !important;
        font-size: var(--desktop-text-size, 1.6rem) !important;
      }
    }
    {% if block.settings.enable_text_highlight %}
      .text-highlight-{{ block.id }} {
        {% if block.settings.highlight_type == 'gradient' %}
          background: linear-gradient({{ block.settings.gradient_angle }}deg, {{ block.settings.highlight_color_1 }}, {{ block.settings.highlight_color_2 }});
        {% else %}
          background-color: {{ block.settings.highlight_color_1 }};
        {% endif %}
        {% if block.settings.highlight_text_color != blank %}
          color: {{ block.settings.highlight_text_color }};
        {% endif %}
        padding: {{ block.settings.highlight_padding_vertical }}px {{ block.settings.highlight_padding_horizontal }}px;
        border-radius: {{ block.settings.highlight_corner_radius }}px;
        display: inline-block;
      }
    {% endif %}
  </style>
</div>