<style>
  .post-image {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0;
  }

  .post-image img {
    height: auto;
    border-radius: 8px;
    border: 1.5px solid var(--light-secondary-color);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px;
    object-fit: cover;
  }

  .image-caption p {
    display: flex;
    justify-content: center;
  }

  /* Mobile - small images fit better */
  @media (max-width: 480px) {
    .post-image img {
      width: 100%;
      max-width: 300px;
    }
  }

  /* Tablet - medium size */
  @media (min-width: 481px) and (max-width: 768px) {
    .post-image img {
      width: 80%;
      max-width: 400px;
    }
  }

  /* Desktop - larger but not overwhelming */
  @media (min-width: 769px) {
    .post-image img {
      width: 60%;
      max-width: 500px;
    }
  }
</style>

<div class="post container">
    <div class="post-header-section">
        <h1>{{ .Title | markdownify }}</h1>

        {{/* Determine whether to display the date & description based on tags */}}

        {{ $displayDate := true }}
	{{ $displayDescription := true }}
	{{ $postTags := or .Params.Tags slice }}
	{{ $hiddenTags := or .Site.Params.Hidden.Tags slice }}
	{{ $tagsHidePostDate := or .Site.Params.Hidden.TagsPostDate slice }}
        {{ $tagsHidePostDescription := or .Site.Params.Hidden.TagsPostDescription slice }}

	{{ if gt ($tagsHidePostDate | intersect $postTags | len) 0 }}
	  {{ $displayDate = false }}
	{{ end }}

	{{ if gt ($tagsHidePostDescription | intersect $postTags | len) 0 }}
	  {{ $displayDescription = false }}
	{{ end }}

	{{ if $displayDescription }}
          <small role="doc-subtitle">{{ .Description }}</small>
	{{ end }}

	{{ if $displayDate }}
          <p class="post-date">{{ dateFormat (or .Site.Params.dateFormat "January 2, 2006") .Date}}
           {{ if lt .Date .Lastmod }} | Updated {{ dateFormat (or .Site.Params.dateFormat "January 2, 2006") .Lastmod }}{{ end }}
          </p>
	{{ end }}

        <ul class="post-tags">
          {{ range $tag := $postTags }}
           {{ if not (in $hiddenTags $tag) }}
             <li class="post-tag"><a href="{{ "tags/" | absLangURL }}{{ . | urlize }}">{{ . }}</a></li>
           {{ end }}
         {{ end }}
        </ul>
    </div>

    {{/* Display image if present in front matter */}}
    {{ if .Params.image }}
    <div class="post-image">
      <img src="{{ .Params.image | absURL }}" alt="{{ .Params.image_alt | default .Title }}">
    </div>
    {{ with .Params.image_caption }}
    <div class="image-caption">
      <p>{{ . }}</p>
    </div>
    {{ end }}
    {{ end }}

    <div class="post-content">
        {{ .Content }}
        {{ if .Site.Config.Services.Disqus.Shortname }}
        <div class="post-comments">
            {{ template "_internal/disqus.html" . }}
        </div>
        {{ end }}
    </div>

    <div class="prev-next">
        {{ if eq .Site.Params.TogglePreviousAndNextButtons "true" }}
            {{ if or .PrevInSection .NextInSection }}
                {{ partial "prev-next.html" . }}
            {{ end }}
        {{ end }}
    </div>

    <!-- Back to top button -->
    {{ if .Site.Params.ShowBackToTopButton }}
        {{ partial "back-to-top.html" . }}
    {{ end }}
    {{ if .Site.Params.CustomCommentHTML }}
    <div id="comments">
        {{ .Site.Params.CustomCommentHTML | safeHTML }}
    </div>
    {{ end }}
</div>
