/** Shopify CDN: Minification failed

Line 17:11 Unexpected "2"
Line 21:109 Unterminated string token
Line 26:100 Unterminated string token
Line 35:106 Unterminated string token
Line 36:109 Unterminated string token
Line 47:108 Unterminated string token
Line 49:105 Unterminated string token
Line 53:109 Unterminated string token
Line 88:24 Unterminated string token
Line 96:17 Unterminated string token
... and 3 more hidden warnings

**/
<!--
  FIX PASS 2 (the black band + white sliver above the footer, still visible after fix pass 1):
  Fix pass 1 gave .article-template__back and the comment wrapper an explicit inline background, which fixed
  the "Back to blog" row itself (it now renders navy). What's LEFT is Shopify's own automatic section wrapper
  <div id="shopify-section-{{ section.id }}">, which sits OUTSIDE everything in this file. Its own background
  (the theme's default page background) shows through in the margin/padding Shopify adds around this section,
  which is the real source of both the remaining black band above "Back to blog" and the white sliver right
  before the footer - neither of those gaps are inside our <article> box, so no inline style on anything
  inside this file could reach them.

  Fix: an inline <style> block scoped to this exact section's auto-generated wrapper ID, forcing ITS
  background to match. .article-template__back and the comment wrapper are updated to the same value so the
  whole trailing region (wrapper gap + back-to-blog row + comment wrapper if enabled) is one consistent band,
  right up to wherever the footer section begins. (v2: was intentionally set to a distinct #02121D tone,
  changed to #0D1B2A per request so it matches the main article navy instead of standing apart from it.)

  FIX PASS 3 (black band still visible between the CTA and "Back to blog" after fix pass 2):
  The shopify-section wrapper fix in pass 2 covers space OUTSIDE the whole section. This remaining band sits
  INSIDE it: .article-template__content (the div wrapping {{ article.content }}, i.e. everything pasted into
  the blog post) has its own default near-black background from the theme's base CSS, unrelated to --bg-0,
  which shows through in that div's own bottom padding/margin before .article-template__back starts. Explicit
  inline override added so it matches the main article navy instead.

  FIX PASS 4 (ROOT CAUSE - confirmed by inspecting the live DOM/CSSOM directly):
  All previous passes patched symptoms; this is the actual cause. section-blog-post.css (a separate theme
  stylesheet, not one of ours) contains:
    .article-template, .article-template.xp-theme-override, .shopify-section.section-blog-post {
      background-color: rgb(11, 13, 15) !important;
      color: rgb(244, 247, 250) !important;
    }
  That !important rule was overriding EVERY inline background we put on <article> (inline style without
  !important can never beat an author stylesheet's !important rule, regardless of specificity), which is why
  <article>'s computed background stayed rgb(11,13,15) - a near-black - no matter what we set it to. That's
  the true source of the black band between the CTA and "Back to blog": it was <article>'s own box, not a
  gap between sections.
  Fix: the inline style itself now carries !important. Per the CSS cascade, an inline !important declaration
  outranks ANY stylesheet !important declaration, which is the only thing capable of beating this rule. Fixes
  pass 1-3 are left in place since they're still correct/harmless for their own elements; this is the missing
  piece for <article> itself. Verified live via devtools before writing this: forcing
  article.style.setProperty('background-color', '#0D1B2A', 'important') makes the band disappear completely.
-->
{{ 'xp-series.css' | asset_url | stylesheet_tag }}
{{ 'xp-article.css' | asset_url | stylesheet_tag }}
{{ 'section-blog-post.css' | asset_url | stylesheet_tag }}

<style>
  #shopify-section-{{ section.id }} {
    background: #0D1B2A;
  }
</style>

<article class="article-template xp-theme-override" style="background-color: #0D1B2A !important;">
  {%- for block in section.blocks -%}
    {%- case block.type -%}
      {%- when '@app' -%}
        <div class="page-width page-width--narrow">
          {% render block %}
        </div>

      {%- when 'featured_image' -%}
        {%- if article.image -%}
          <div
            class="article-template__hero-container{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
            {{ block.shopify_attributes }}
          >
            <div
              class="article-template__hero-{{ block.settings.image_height }} media"
              {% if block.settings.image_height == 'adapt' and article.image %}
                style="padding-bottom: {{ 1 | divided_by: article.image.aspect_ratio | times: 100 }}%;"
              {% endif %}
            >
              <img
                srcset="
                  {% if article.image.width >= 350 %}{{ article.image | image_url: width: 350 }} 350w,{% endif %}
                  {% if article.image.width >= 750 %}{{ article.image | image_url: width: 750 }} 750w,{% endif %}
                  {% if article.image.width >= 1100 %}{{ article.image | image_url: width: 1100 }} 1100w,{% endif %}
                  {% if article.image.width >= 1500 %}{{ article.image | image_url: width: 1500 }} 1500w,{% endif %}
                  {% if article.image.width >= 2200 %}{{ article.image | image_url: width: 2200 }} 2200w,{% endif %}
                  {% if article.image.width >= 3000 %}{{ article.image | image_url: width: 3000 }} 3000w,{% endif %}
                  {{ article.image | image_url }} {{ article.image.width }}w
                "
                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw"
                src="{{ article.image | image_url: width: 1100 }}"
                loading="eager"
                fetchpriority="high"
                width="{{ article.image.width }}"
                height="{{ article.image.height }}"
                alt="{{ article.image.alt | escape }}"
              >
            </div>
          </div>
        {%- endif -%}

      {%- when 'content' -%}
        <!-- Removed .page-width and .rte to allow 100vw full-bleed custom HTML -->
        <!-- FIX 3: .article-template__content has its own default background from the theme's base CSS
             (near-black, not --bg-0), which was showing through in this wrapper's own bottom padding/margin -
             the black band still visible between the CTA band and the "Back to blog" row. Explicit override
             below matches it to the main article navy so that gap disappears. -->
        <div
          class="article-template__content{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
          style="background: var(--bg-0, #0D1B2A);"
          {{ block.shopify_attributes }}
        >
          {{ article.content }}
        </div>
    {%- endcase -%}
  {%- endfor -%}

  <!-- FIX 1: explicit background matching the #0D1B2A band this row now sits inside of -->
  <div class="article-template__back element-margin-top center{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" style="background: #0D1B2A;">
    <a href="{{ blog.url }}" class="article-template__link link animate-arrow" style="color: var(--tx-mid, #8A929B);">
      <span class="icon-wrap">
        <span class="svg-wrapper">
          {{- 'icon-arrow.svg' | inline_asset_content -}}
        </span>
      </span>
      {{ 'blogs.article.back_to_blog' | t: title: blog.title | escape }}
    </a>
  </div>

  {%- if blog.comments_enabled? -%}
    <!-- FIX 2: "background-secondary" is a light/near-white theme utility class - overridden to match the
         #0D1B2A band so this stays consistent with the rest of the trailing region, if comments are on. -->
    <div class="article-template__comment-wrapper background-secondary" style="background: #0D1B2A;">
      <div
        id="comments"
        class="page-width page-width--narrow{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
      >
        {%- if article.comments_count > 0 -%}
          {%- assign anchorId = '#Comments-' | append: article.id -%}
          <h2 id="Comments-{{ article.id }}" tabindex="-1">
            {{ 'blogs.article.comments' | t: count: article.comments_count }}
          </h2>
          {% paginate article.comments by 5 %}
            <div class="article-template__comments">
              {%- if comment.status == 'pending' and comment.content -%}
                <article id="{{ comment.id }}" class="article-template__comments-comment">
                  {{ comment.content }}
                  <footer class="right">
                    <span class="circle-divider caption-with-letter-spacing">{{ comment.author }}</span>
                  </footer>
                </article>
              {%- endif -%}

              {%- for comment in article.comments -%}
                <article id="{{ comment.id }}" class="article-template__comments-comment">
                  {{ comment.content }}
                  <footer class="right">
                    <span class="circle-divider caption-with-letter-spacing">{{ comment.author }}</span
                    ><span class="caption-with-letter-spacing">
                      {{- comment.created_at | time_tag: format: 'date' -}}
                    </span>
                  </footer>
                </article>
              {%- endfor -%}
              {% render 'pagination', paginate: paginate, anchor: anchorId %}
            </div>
          {% endpaginate %}
        {%- endif -%}
        {% form 'new_comment', article %}
          {%- liquid
            assign post_message = 'blogs.article.success'
            if blog.moderated? and comment.status == 'unapproved'
              assign post_message = 'blogs.article.success_moderated'
            endif
          -%}
          <h2>{{ 'blogs.article.comment_form_title' | t }}</h2>
          {%- if form.errors -%}
            <div class="form__message" role="alert">
              <h3 class="form-status caption-large text-body" tabindex="-1" autofocus>
                <span class="svg-wrapper">
                  {{- 'icon-error.svg' | inline_asset_content -}}
                </span>
                {{ 'templates.contact.form.error_heading' | t }}
              </h3>
            </div>
            <ul class="form-status-list caption-large">
              {%- for field in form.errors -%}
                <li>
                  <a href="#CommentForm-{{ field }}" class="link">
                    {%- if form.errors.translated_fields[field] contains 'author' -%}
                      {{ 'blogs.article.name' | t }}
                    {%- elsif form.errors.translated_fields[field] contains 'body' -%}
                      {{ 'blogs.article.message' | t }}
                    {%- else -%}
                      {{ form.errors.translated_fields[field] }}
                    {%- endif -%}
                    {{ form.errors.messages[field] }}
                  </a>
                </li>
              {%- endfor -%}
            </ul>
          {%- elsif form.posted_successfully? -%}
            <div class="form-status-list form__message" role="status">
              <h3 class="form-status" tabindex="-1" autofocus>
                <span class="svg-wrapper">
                  {{- 'icon-success.svg' | inline_asset_content -}}
                </span>
                {{ post_message | t }}
              </h3>
            </div>
          {%- endif -%}

          <div
            {% if blog.moderated? == false %}
              class="article-template__comments-fields"
            {% endif %}
          >
            <div class="article-template__comment-fields">
              <div class="field field--with-error">
                <input
                  type="text"
                  name="comment[author]"
                  id="CommentForm-author"
                  class="field__input"
                  autocomplete="name"
                  value="{{ form.author }}"
                  aria-required="true"
                  required
                  {% if form.errors contains 'author' %}
                    aria-invalid="true"
                    aria-describedby="CommentForm-author-error"
                  {% endif %}
                  placeholder="{{ 'blogs.article.name' | t }}"
                >
                <label class="field__label" for="CommentForm-author">
                  {{- 'blogs.article.name' | t }}
                  <span aria-hidden="true">*</span></label
                >
                {%- if form.errors contains 'author' -%}
                  <small id="CommentForm-author-error">
                    <span class="form__message">
                      <span class="svg-wrapper">
                        {{- 'icon-error.svg' | inline_asset_content -}}
                      </span>
                      {{- 'blogs.article.name' | t }}
                      {{ form.errors.messages.author }}.</span
                    >
                  </small>
                {%- endif -%}
              </div>
              <div class="field field--with-error">
                <input
                  type="email"
                  name="comment[email]"
                  id="CommentForm-email"
                  autocomplete="email"
                  class="field__input"
                  value="{{ form.email }}"
                  autocorrect="off"
                  autocapitalize="off"
                  aria-required="true"
                  required
                  {% if form.errors contains 'email' %}
                    aria-invalid="true"
                    aria-describedby="CommentForm-email-error"
                  {% endif %}
                  placeholder="{{ 'blogs.article.email' | t }}"
                >
                <label class="field__label" for="CommentForm-email">
                  {{- 'blogs.article.email' | t }}
                  <span aria-hidden="true">*</span></label
                >
                {%- if form.errors contains 'email' -%}
                  <small id="CommentForm-email-error">
                    <span class="form__message">
                      <span class="svg-wrapper">
                        {{- 'icon-error.svg' | inline_asset_content -}}
                      </span>
                      {{- 'blogs.article.email' | t }}
                      {{ form.errors.messages.email }}.</span
                    >
                  </small>
                {%- endif -%}
              </div>
            </div>
            <div class="field field--with-error">
              <textarea
                rows="5"
                name="comment[body]"
                id="CommentForm-body"
                class="text-area field__input"
                aria-required="true"
                required
                {% if form.errors contains 'body' %}
                  aria-invalid="true"
                  aria-describedby="CommentForm-body-error"
                {% endif %}
                placeholder="{{ 'blogs.article.message' | t }}"
              >{{ form.body }}</textarea>
              <label class="form__label field__label" for="CommentForm-body">
                {{- 'blogs.article.message' | t }}
                <span aria-hidden="true">*</span></label
              >
            </div>
            {%- if form.errors contains 'body' -%}
              <small id="CommentForm-body-error">
                <span class="form__message">
                  <span class="svg-wrapper">
                    {{- 'icon-error.svg' | inline_asset_content -}}
                  </span>
                  {{- 'blogs.article.message' | t }}
                  {{ form.errors.messages.body }}.</span
                >
              </small>
            {%- endif -%}
          </div>
          {%- if blog.moderated? -%}
            <p class="article-template__comment-warning caption">{{ 'blogs.article.moderated' | t }}</p>
          {%- endif -%}
          <input type="submit" class="button" value="{{ 'blogs.article.post' | t }}">
        {% endform %}
      </div>
    </div>
  {%- endif -%}
</article>

<script type="application/ld+json">
  {{ article | structured_data }}
</script>

{% schema %}
{
  "name": "XP Article Template",
  "tag": "section",
  "class": "section",
  "blocks": [
    {
      "type": "@app"
    },
    {
      "type": "featured_image",
      "name": "Featured Image",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "image_height",
          "options": [
            {
              "value": "adapt",
              "label": "Adapt"
            },
            {
              "value": "small",
              "label": "Small"
            },
            {
              "value": "medium",
              "label": "Medium"
            },
            {
              "value": "large",
              "label": "Large"
            }
          ],
          "default": "adapt",
          "label": "Image Height"
        }
      ]
    },
    {
      "type": "content",
      "name": "Article Content",
      "limit": 1
    }
  ]
}
{% endschema %}