

{%- assign block_settings = block.settings -%}

<div
  class="blog-post-card"
  style="--text-align: {{ block_settings.alignment }}"
>
  {% if article.image %}
    {% content_for 'block', id: 'image', type: '_blog-post-image', article: article %}
  {% endif %}

  <div class="blog-post-card__content">
    <a
      href="{{ article.url }}"
      data-testid="blog-post-link"
    >
      {%- content_for 'block', id: 'heading', type: '_heading', text: article.title -%}
    </a>

    {% content_for 'block',
      id: 'blog-post-details',
      type: '_blog-post-info-text',
      alignment: block_settings.alignment,
      article: article
    %}

    {% content_for 'block', id: 'content', type: '_blog-post-description', article: article, show_read_more: true %}
  </div>
</div>

{% stylesheet %}
  .blog-post-card {
    display: flex;
    flex-direction: column;
    text-align: var(--text-align);
    column-gap: var(--columns-gap);
  }

  .blog-post-item--horizontal:has(.blog-post-card__image-container) .blog-post-card {
    & > *:first-child {
      flex-basis: 70%;
    }

    & > *:last-child {
      flex-basis: 30%;
    }
  }

  .blog-post-card__content {
    padding-block-start: 0.4rem;
    display: flex;
    flex-direction: column;
  }

  .blog-post-item .blog-post-card__image-container,
  .blog-post-item .blog-post-card__content {
    width: 100%;
  }

  /**
   * Horizontal layout (image left, content right)
   * Applied to hero posts based on total article count
   * Only applies the split layout when an image is actually present
   */
  .blog-post-item--horizontal .blog-post-card {
    flex-direction: row;

    @media screen and (max-width: 749px) {
      flex-direction: column;
    }
  }

  .blog-post-card__content a {
    display: block;
    text-wrap: pretty;
    text-decoration: none;
    padding-block-start: 0.75rem;
  }

  .blog-post-card__content a:hover,
  .blog-post-card__content a:hover [style*='--color: var(--color-primary)'] {
    color: var(--color-primary-hover);
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground-heading)'] {
    color: rgb(var(--color-foreground-heading-rgb) / var(--opacity-subdued-text));
  }

  .blog-post-card__content a:hover [style*='--color: var(--color-foreground)'] {
    color: rgb(var(--color-foreground-rgb) / var(--opacity-subdued-text));
  }
{% endstylesheet %}

{% schema %}
{
  "name": "t:names.blog_post",
  "settings": [
    {
      "type": "text_alignment",
      "id": "alignment",
      "label": "t:settings.alignment",
      "default": "left"
    }
  ]
}
{% endschema %}
