{%- render 'css', css: 'section-blog.css' -%}
{%- render 'css', css: 'component-card-article.css' -%}
{%- render 'css', css: 'component-card-text.css' -%}

{%- style -%}
  #shopify-section-{{ section.id }} > div {
    padding-block-start: calc(var(--section-spacing-unit-size) * {{ section.settings.spacing_top }});
    padding-block-end: calc(var(--section-spacing-unit-size) * {{ section.settings.spacing_bottom }});
    --blog-grid-spacing: calc(var(--grid-spacing) * {{ section.settings.spacing_grid }});
    --card-article-media-aspect-ratio: {{ section.settings.card_media_aspect_ratio }};
    --h6-multiplier: 2.1rem;
  }

  /* --- GRID layout card (overlay) --- */
  #shopify-section-{{ section.id }} .article-card {
    position: relative;
    display: block;
    border-radius: var(--radius-2xl, 1rem);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    isolation: isolate;
    transition: transform .2s ease, box-shadow .2s ease;
  }
  #shopify-section-{{ section.id }} .article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
  }

  #shopify-section-{{ section.id }} .article-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: var(--card-article-media-aspect-ratio);
    background: var(--color-bg, #f5f5f5);
  }
  #shopify-section-{{ section.id }} .article-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  #shopify-section-{{ section.id }} .article-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.6) 100%);
    z-index: 1;
  }

  /* content row: left (title+date) and right (arrow) bottom-aligned */
  #shopify-section-{{ section.id }} .article-card__content {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 5% 5% 5%;
    color: #fff;
  }

  #shopify-section-{{ section.id }} .article-card__left {
    display: grid;
    gap: .25rem;
    text-align: left;
    min-width: 0; /* allow wrapping */
  }

  #shopify-section-{{ section.id }} .article-card__title {
    margin: 0;
    line-height: 1.15;
    font-size: clamp(1.6rem, 2.2vw + 1rem, 2.6rem); /* big title */
    font-weight: inherit; /* not bold */
    color: #fff;
    text-wrap: balance;
  }

  #shopify-section-{{ section.id }} .article-card__date {
    margin: 0;
    font-size: clamp(.7rem, .6vw + .55rem, .85rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .9;
  }

  #shopify-section-{{ section.id }} .article-card__arrow {
    font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem);
    line-height: 1;
    translate: 0 .1rem; /* optical alignment */
    color: #fff;
  }

  #shopify-section-{{ section.id }} .blog__articles-grid {
    gap: var(--blog-grid-spacing);
  }

  /* --- LIST layout --- */
  #shopify-section-{{ section.id }} .article-list {
    display: grid;
    gap: 0; /* we use divider lines */
  }

  #shopify-section-{{ section.id }} .article-list__row {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border, rgba(0,0,0,.12));
    text-decoration: none;
    color: inherit;
  }

  #shopify-section-{{ section.id }} .article-list__media {
    width: 120px;
    aspect-ratio: 16/9;
    border-radius: .5rem;
    overflow: hidden;
    background: var(--color-bg, #f5f5f5);
  }
  #shopify-section-{{ section.id }} .article-list__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  #shopify-section-{{ section.id }} .article-list__content {
    display: grid;
    align-content: center;
    gap: .25rem;
    text-align: left;
  }

  #shopify-section-{{ section.id }} .article-list__title {
    margin: 0;
    font-size: clamp(1.125rem, 1.2vw + .75rem, 1.6rem);
    font-weight: inherit; /* not bold */
    line-height: 1.2;
  }

  #shopify-section-{{ section.id }} .article-list__date {
    margin: 0;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .8;
  }

  #shopify-section-{{ section.id }} .article-list__arrow {
    font-size: 1.5rem;
    line-height: 1;
    color: currentColor;
    opacity: .9;
  }

  /* Hover affordance */
  #shopify-section-{{ section.id }} a.article-list__row:hover .article-list__title {
    text-decoration: underline;
  }

  /* --- Mobile tweaks (YOUR REQUEST) --- */
  @media only screen and (max-width: 749px) {
    .article-card__date {
      font-size: small !important;
    }
    .article-card__title {
      font-size: x-large !important;
    }

    /* list layout mobile: stack image above text a bit tighter */
    #shopify-section-{{ section.id }} .article-list__row {
      grid-template-columns: 100px 1fr auto;
      gap: .75rem;
      padding: .85rem 0;
    }
    #shopify-section-{{ section.id }} .article-list__media {
      width: 100px;
      aspect-ratio: 16/9;
    }
    #shopify-section-{{ section.id }} .article-list__title {
      font-size: 1.1rem;
    }
    #shopify-section-{{ section.id }} .article-list__date {
      font-size: .72rem;
    }
  }
{%- endstyle -%}

{%- if section.settings.pagination_style == 'load_more' -%}
  <script src="{{- 'dynamic-load-more.js' | asset_url -}}" defer="defer"></script>
{%- endif -%}

{%- paginate blog.articles by section.settings.articles_per_page -%}
  <div class="color-{{ section.settings.color_scheme }} gradient">
    <div class="blog">
      {%- if blog.articles.size > 0 and section.settings.enable_filtering_by_tags -%}
        <div class="blog__head no-scrollbar">
          <div class="blog__filters">
            <ul class="blog__filters-items list-unstyled h3">
              {%- liquid
                assign all_tags_visible = true
                if current_tags or current_tags.size > 0
                  assign all_tags_visible = false
                endif
              -%}

              <li class="blog__filters-item {% if all_tags_visible %}is-active{% endif %}">
                {%- if all_tags_visible -%}
                  <span>{{- 'blog.show_all' | t -}}</span>
                {%- else -%}
                  <a href="{{- blog.url -}}">{{- 'blog.show_all' | t -}}</a>
                {%- endif -%}
              </li>

              {%- for tag in blog.all_tags -%}
                {%- if current_tags contains tag -%}
                  <li class='blog__filters-item is-active'><span>{{- tag -}}</span></li>
                {%- else -%}
                  <li class='blog__filters-item'>{{- tag | link_to_tag: tag -}}</li>
                {%- endif -%}
              {%- endfor -%}
            </ul>
          </div>
        </div>
      {%- endif -%}

      <div class="container {{ section.settings.section_width }}">
        <div class="blog__articles{% if section.settings.pagination_style == 'load_more' and section.settings.enable_infinity_scroll %} infinity-scroll-active{% endif %}" id="ArticleGridContainer">
          {%- if blog.articles.size == 0 -%}
            <div class="blog__articles-empty text-center">
              <p>{{- 'blog.no_posts' | t -}}</p>
            </div>
          {%- else -%}
            {% if section.settings.pagination_style == 'load_more' and paginate.previous and paginate.pages > 1 and paginate.current_page <= paginate.pages %}
              <dynamic-load-previous class="text-center no-js-hidden color-{{ section.settings.color_scheme }}" data-current-page="{{- paginate.current_page -}}">
                {%- liquid
                  assign load_more_button_data_href = 'data-href="' | append: paginate.previous.url | append: '"'
                  assign load_previous_value = 'theme.actions.load_previous' | t
                  render 'button', class: 'button js-btn-load-previous', button_style: 'button--outlined', attr: load_more_button_data_href, value: load_previous_value, loading_spinner: true
                -%}
              </dynamic-load-previous>
            {% endif %}

            {% if section.settings.layout_mode == 'list' %}
              <!-- ====== LIST LAYOUT ====== -->
              <div class="article-list" id="article-grid">
                {%- for article in blog.articles -%}
                  <a class="article-list__row" href="{{ article.url }}" aria-label="{{ article.title | escape }}">
                    <div class="article-list__media">
                      {%- if article.image -%}
                        {{ article.image | image_url: width: 640 | image_tag: loading: 'lazy', sizes: '120px', alt: article.image.alt | default: article.title }}
                      {%- else -%}
                        {{ 'image' | placeholder_svg_tag }}
                      {%- endif -%}
                    </div>

                    <div class="article-list__content">
                      <h2 class="article-list__title">{{ article.title }}</h2>
                      <p class="article-list__date">{{ article.published_at | date: format: 'date' | upcase }}</p>
                    </div>

                    <span class="article-list__arrow" aria-hidden="true">→</span>
                  </a>
                {%- endfor -%}
              </div>
            {% else %}
              <!-- ====== GRID LAYOUT (OVERLAY) ====== -->
              <div id="article-grid" class="blog__articles-grid text-center">
                {%- for article in blog.articles -%}
                  <a class="article-card" href="{{ article.url }}" aria-label="{{ article.title | escape }}">
                    <div class="article-card__media" style="--card-article-media-aspect-ratio: {{ section.settings.card_media_aspect_ratio }};">
                      {%- if article.image -%}
                        {{ article.image | image_url: width: 1600 | image_tag: loading: 'lazy', sizes: '(min-width: 990px) 33vw, (min-width: 750px) 50vw, 100vw', alt: article.image.alt | default: article.title }}
                      {%- else -%}
                        {{ 'image' | placeholder_svg_tag }}
                      {%- endif -%}
                      <span class="article-card__scrim" aria-hidden="true"></span>

                      <div class="article-card__content">
                        <div class="article-card__left">
                          <h2 class="article-card__title">{{ article.title }}</h2>
                          <p class="article-card__date">{{ article.published_at | date: format: 'date' | upcase }}</p>
                        </div>
                        <span class="article-card__arrow" aria-hidden="true">→</span>
                      </div>
                    </div>
                  </a>
                {%- endfor -%}
              </div>
            {% endif %}
          {%- endif -%}

          {%- if paginate.pages > 1 -%}
            {% if section.settings.pagination_style == 'load_more' %}
              <dynamic-load-more class="text-center no-js-hidden{% unless paginate.next %} hidden{% endunless %} color-{{ section.settings.color_scheme }}" data-current-page="{{- paginate.current_page -}}">
                {%- liquid
                  assign load_more_button_data_href = 'data-href="' | append: paginate.next.url | append: '"'
                  assign load_more_value = 'theme.actions.load_more' | t
                  render 'button', class: 'button js-btn-load-more', button_style: 'button--outlined', attr: load_more_button_data_href, value: load_more_value, loading_spinner: true
                -%}
              </dynamic-load-more>
            {% else %}
              <div class="blog__actions">
                {%- render 'pagination', paginate: paginate, anchor: '' -%}
              </div>
            {% endif %}
          {%- endif -%}
        </div>
      </div>
    </div>
  </div>
{%- endpaginate -%}

{% schema %}
{
  "name": "t:sections.main-blog.name",
  "tag": "section",
  "settings": [
    {
      "type": "header",
      "content": "t:sections.global.header.general.content"
    },
    {
      "type": "select",
      "id": "layout_mode",
      "label": "Layout",
      "options": [
        { "value": "grid", "label": "Grid (overlay)" },
        { "value": "list", "label": "List" }
      ],
      "default": "grid"
    },
    {
      "type": "checkbox",
      "id": "enable_filtering_by_tags",
      "default": true,
      "label": "t:sections.main-blog.settings.enable_filtering_by_tags.label"
    },
    {
      "type": "range",
      "id": "articles_per_page",
      "label": "t:sections.main-blog.settings.articles_per_page.label",
      "min": 3,
      "max": 50,
      "step": 1,
      "default": 20
    },
    {
      "type": "select",
      "id": "pagination_style",
      "label": "t:sections.global.pagination.style.label",
      "options": [
        { "value": "default", "label": "t:sections.global.pagination.style.options.default.label" },
        { "value": "load_more", "label": "t:sections.global.pagination.style.options.load_more.label" }
      ],
      "default": "load_more"
    },
    {
      "type": "checkbox",
      "id": "enable_infinity_scroll",
      "label": "t:sections.global.pagination.enable_infinity_scroll.label",
      "info": "t:sections.global.pagination.enable_infinity_scroll.info",
      "default": false
    },
    {
      "type": "header",
      "content": "t:sections.global.header.card_article.content"
    },
    {
      "type": "select",
      "id": "content_alignment",
      "label": "t:sections.global.content.alignment.label",
      "options": [
        { "value": "text-start", "label": "t:sections.global.content.alignment.options.start.label" },
        { "value": "text-center", "label": "t:sections.global.content.alignment.options.center.label" },
        { "value": "text-end", "label": "t:sections.global.content.alignment.options.end.label" }
      ],
      "default": "text-center"
    },
    {
      "type": "select",
      "id": "card_media_aspect_ratio",
      "label": "t:settings_schema.cards.settings.card_media_aspect_ratio.label",
      "options": [
        { "value": "auto", "label": "t:sections.global.aspect_ratio.options.auto.label" },
        { "value": "1/1", "label": "1:1" },
        { "value": "3/4", "label": "3:4" },
        { "value": "4/3", "label": "4:3" },
        { "value": "16/9", "label": "16:9" }
      ],
      "default": "3/4"
    },
    {
      "type": "header",
      "content": "t:sections.global.header.settings.content",
      "info": "t:sections.global.header.settings.info"
    },
    {
      "type": "select",
      "id": "section_width",
      "options": [
        { "value": "max-w-page", "label": "t:sections.global.settings.section_width.options__1.label" },
        { "value": "max-w-narrow", "label": "t:sections.global.settings.section_width.options__4.label" },
        { "value": "max-w-fluid", "label": "t:sections.global.settings.section_width.options__2.label" }
      ],
      "default": "max-w-narrow",
      "label": "t:sections.global.settings.section_width.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "default": "scheme-1",
      "label": "t:sections.global.color_scheme.label"
    },
    {
      "type": "select",
      "id": "spacing_grid",
      "label": "t:sections.global.settings.spacing.settings.spacing_grid.label",
      "options": [
        { "value": "0", "label": "No" },
        { "value": "1", "label": "S" },
        { "value": "2", "label": "M" },
        { "value": "4", "label": "L" },
        { "value": "6", "label": "XL" }
      ],
      "default": "2"
    },
    {
      "type": "select",
      "id": "spacing_top",
      "label": "t:sections.global.settings.spacing.settings.spacing_top.label",
      "options": [
        { "value": "0", "label": "No" },
        { "value": "1", "label": "S" },
        { "value": "2", "label": "M" },
        { "value": "4", "label": "L" },
        { "value": "6", "label": "XL" }
      ],
      "default": "2"
    },
    {
      "type": "select",
      "id": "spacing_bottom",
      "label": "t:sections.global.settings.spacing.settings.spacing_bottom.label",
      "options": [
        { "value": "0", "label": "No" },
        { "value": "1", "label": "S" },
        { "value": "2", "label": "M" },
        { "value": "4", "label": "L" },
        { "value": "6", "label": "XL" }
      ],
      "default": "2"
    }
  ]
}
{% endschema %}