---
### ALL PAGES ###
layout: themes/[ site.theme.id ]/frontend/core/base
asset_path: blog/post

### THEME CONFIG ###
theme:
  post:
    image:
      class: "img-fluid rounded-3 w-100 my-5"

### WEB MANAGER CONFIG ###
web_manager:
  socialSharing:
    enabled: true

### PAGE CONFIG ###
author_section:
  author_position: "Staff Writer"

related_posts:
  headline: "Read"
  headline_accent: "next"
  limit: 3

newsletter:
  superheadline:
    icon: "envelope"
    text: "Newsletter"
  headline: "Stay in the"
  headline_accent: "loop"
  subheadline: "Join our newsletter and get resources, curated content, and inspiration delivered straight to your inbox."
  button:
    text: "Submit"
  form:
    placeholder: "jonsnow@gmail.com"
---

{% comment %}
  NEWSFLASH BLOG POST
  The editorial article: a reading-progress bar, centered article head
  (kicker, serif display headline, byline row with share buttons), framed
  hero image, drop-cap body with serif crossheads and volt highlights, tag
  pills, a framed author card, comments, read-next tiles, and the vermilion
  newsletter slab. Preserves classy's contracts: asset_path blog/post, the
  load-bearing .blog-post-content class (main-layer ad injection), the
  data-social-share div, giscus + adsense includes, author_section /
  related_posts / newsletter frontmatter.
{% endcomment %}

<!-- Reading progress — filled by the theme page JS (pages/blog/post.js) -->
<div class="reading-progress" aria-hidden="true"><span></span></div>

<!-- Article Header & Content -->
<article class="pt-8">
  <div class="container">
    <!-- Article head — centered editorial opening -->
    <div class="row justify-content-center">
      <div class="col-xl-9 col-lg-10 col-md-12 col-12">
        <header class="text-center mb-4" data-lazy="@class animation-slide-up">
          {% if page.post.categories[0] %}
            <span class="kicker mb-3">{{ page.post.categories[0] | uj_title_case }}</span>
          {% else %}
            <span class="kicker mb-3">Dispatch</span>
          {% endif %}
          <h1 class="display-4 mt-2 mb-0">{{ page.post.title }}</h1>
        </header>

        <!-- Byline row -->
        <div class="d-flex flex-wrap justify-content-center align-items-center gap-3 mb-5" data-lazy="@class animation-slide-up">
          <div class="d-flex align-items-center">
            <a href="{%- uj_member page.post.author, "url" -%}" class="text-decoration-none me-2">
              <div class="avatar avatar-md">
                {%- uj_member page.post.author, "image-tag", class="rounded-circle" -%}
              </div>
            </a>
            <div class="text-start">
              <a href="{%- uj_member page.post.author, "url" -%}" class="text-decoration-none text-body fw-semibold d-block">
                {%- uj_member page.post.author, "name" -%}
              </a>
              <span class="text-body-secondary small">
                {% iftruthy page.resolved.author_section.author_position %}
                  {{ page.resolved.author_section.author_position }} ·
                {% endiftruthy %}
                <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%b %d, %Y" }}</time>
              </span>
            </div>
          </div>
          <div class="vr d-none d-sm-block"></div>
          <div class="d-flex align-items-center gap-2">
            <span class="badge bg-primary">{% uj_readtime content %} min read</span>
            <div data-social-share
                  data-platforms=""
                  data-title=""
                  data-description=""
                  data-url=""
                  data-size="sm"
                  data-labels="false">
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Hero image — the framed splash -->
    <div class="row justify-content-center">
      <div class="col-xl-10 col-lg-10 col-md-12 col-12 mb-5" data-lazy="@class animation-slide-up">
        <div class="art-frame article-hero shadow">
          {%- uj_post page.post.id, "image-tag", class="w-100 blog-post-image" -%}
        </div>
      </div>
    </div>

    <!-- Body — drop cap, serif crossheads, volt marks -->
    <div class="row justify-content-center mb-3">
      <div class="blog-post-content col-xl-8 col-lg-8 col-md-12 col-12" data-lazy="@class animation-slide-up">
        {{ content | uj_content_format }}
      </div>
    </div>

    <!-- Ad -->
    <div class="row justify-content-center mb-3">
      <div class="col-xl-8 col-lg-8 col-md-12 col-12" data-lazy="@class animation-slide-up">
        {% include /modules/adunits/adsense.html type="in-article" %}
      </div>
    </div>
  </div>
</article>

<!-- Tags, Author & Comments -->
<section class="pt-0">
  <div class="container">
    <!-- Tags -->
    <div class="row justify-content-center mb-4">
      <div class="col-xl-8 col-lg-8 col-md-12 col-12" data-lazy="@class animation-slide-up">
        <div class="tag-row d-flex flex-wrap gap-2 pt-4">
          {% assign tags = '' | split: ',' %}
            {% for tag in page.post.tags %}
              {% assign tag_fixed = tag | uj_title_case %}

              {% unless tags contains tag_fixed %}
                {% assign tags = tags | push: tag_fixed %}
              {% endunless %}
            {% endfor %}
          {% for tag in tags %}
            <a href="{{ site.url }}/blog/tags/{{ tag | slugify }}" class="btn btn-outline-dark btn-sm">{% uj_icon "tag", "me-1" %}{{ tag }}</a>
          {% endfor %}
        </div>
      </div>
    </div>

    <!-- Author card -->
    <div class="row justify-content-center mb-5">
      <div class="col-xl-8 col-lg-8 col-md-12 col-12" data-lazy="@class animation-slide-up">
        <div class="card p-4">
          <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center gap-3">
            <div class="d-flex">
              <div class="flex-shrink-0">
                <a href="{% uj_member page.post.author, "url" %}">
                  <div class="avatar avatar-lg">
                    {% uj_member page.post.author, "image-tag", class="rounded-circle" %}
                  </div>
                </a>
              </div>
              <div class="ms-3">
                <a href="{% uj_member page.post.author, "url" %}" class="text-body text-decoration-none">
                  <div class="h5 mb-0">
                    {%- uj_member page.post.author, "name" -%}
                  </div>
                </a>
                {% iftruthy page.resolved.author_section.author_position %}
                  <div class="text-body-secondary small">
                    {{ page.resolved.author_section.author_position }}
                  </div>
                {% endiftruthy %}
                <a href="{% uj_member page.post.author, "url" %}" class="small fw-bold text-decoration-none">
                  More from this author {% uj_icon "arrow-right", "ms-1" %}
                </a>
              </div>
            </div>
            <div data-social-share
                  data-platforms=""
                  data-title=""
                  data-description=""
                  data-url=""
                  data-size="sm"
                  data-labels="false">
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Comments -->
    <div class="row justify-content-center mb-5">
      <div class="col-xl-8 col-lg-8 col-md-12 col-12" data-lazy="@class animation-slide-up">
        {%- include modules/engagement/giscus.html -%}
      </div>
    </div>
  </div>
</section>

<!-- Read Next -->
<section class="pt-0">
  <div class="container">
    <div class="section-head" data-lazy="@class animation-slide-up">
      <h2>
        {{ page.resolved.related_posts.headline }}
        {% iftruthy page.resolved.related_posts.headline_accent %}
          {{ page.resolved.related_posts.headline_accent }}
        {% endiftruthy %}
      </h2>
      <span class="rule"></span>
      <a href="{{ site.url }}/blog">View all {% uj_icon "arrow-right", "ms-1" %}</a>
    </div>
    <div class="row g-4">
      <!-- Loop through posts based on configured limit -->
      {% assign count = 0 %}
      {% assign limit = page.resolved.related_posts.limit | default: 3 %}
      {% for post in site.posts %}
        {% if count < limit %}
          {% if post.id != page.post.id %}
            {% assign count = count | plus: 1 %}
            <div class="col-xl-4 col-lg-6 col-md-12" data-lazy="@class animation-slide-up">
              <a href="{{ site.url }}{{ post.url }}" class="story-card">
                <div class="art-frame mb-3">
                  {%- uj_post post.post.id, "image-tag", class="w-100" -%}
                </div>
                {% if post.post.categories[0] %}
                  <span class="kicker mb-1">{{ post.post.categories[0] | uj_title_case }}</span>
                {% endif %}
                <h3 class="h5 my-2">{{ post.post.title }}</h3>
                <p class="small text-body-secondary mb-0">
                  <b class="text-body">{%- uj_member post.post.author, "name" -%}</b>
                  · {% uj_readtime post.content %} min read
                </p>
              </a>
            </div>
          {% endif %}
        {% endif %}
      {% endfor %}
    </div>
  </div>
</section>

<!-- Newsletter — the vermilion slab -->
<section class="pt-0">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-8 col-lg-8 col-md-12 col-12">
        <div class="card bg-primary text-white p-4 p-md-5 text-center position-relative overflow-hidden" data-lazy="@class animation-slide-up">
          <div class="position-relative">
            {% iftruthy page.resolved.newsletter.superheadline.text %}
              <span class="badge bg-body-tertiary p-2 mb-3">
                {% iftruthy page.resolved.newsletter.superheadline.icon %}
                  {% uj_icon page.resolved.newsletter.superheadline.icon, "me-1" %}
                {% endiftruthy %}
                {{ page.resolved.newsletter.superheadline.text }}
              </span>
            {% endiftruthy %}

            {% iftruthy page.resolved.newsletter.headline %}
              <h2 class="h2 fst-italic mb-3">
                {{ page.resolved.newsletter.headline }}
                {% iftruthy page.resolved.newsletter.headline_accent %}
                  {{ page.resolved.newsletter.headline_accent }}
                {% endiftruthy %}
              </h2>
            {% endiftruthy %}

            {% iftruthy page.resolved.newsletter.subheadline %}
              <p class="lead text-white mb-4">{{ page.resolved.newsletter.subheadline }}</p>
            {% endiftruthy %}

            <form class="row g-3 justify-content-center needs-validation" action="{{ site.url }}/email-subscription">
              <div class="col-md-7">
                <label for="newsletter-email" class="visually-hidden">Email address</label>
                <input type="email" name="email" id="newsletter-email" class="form-control form-control-lg" placeholder="{% iftruthy page.resolved.newsletter.form.placeholder %}{{ page.resolved.newsletter.form.placeholder }}{% endiftruthy %}" autocomplete="email" required>
              </div>
              <div class="col-md-auto">
                <button type="submit" class="btn btn-dark btn-lg px-4">{% iftruthy page.resolved.newsletter.button.text %}{{ page.resolved.newsletter.button.text }}{% endiftruthy %}</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>