Press Mentions

<section class="sl-press" style="padding:clamp(32px,5vw,56px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1200px;margin:0 auto;">
    <h2 style="margin:0 0 1.5rem;text-align:center;font-size:clamp(1.25rem,2.5vw,1.75rem);">{{ section.settings.heading }}</h2>
    <div style="display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));">
      {%- for block in section.blocks -%}
        <figure style="margin:0;padding:clamp(1rem,2.5vw,1.5rem);border:1px solid currentColor;border-radius:.5rem;display:flex;flex-direction:column;gap:.75rem;" {{ block.shopify_attributes }}>
          {%- if block.settings.logo != blank -%}
            <img src="{{ block.settings.logo | image_url: width: 240 }}" alt="{{ block.settings.source | default: 'Press logo' }}" loading="lazy" style="height:2rem;width:auto;object-fit:contain;align-self:flex-start;opacity:.9;" />
          {%- else -%}
            <span style="font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ block.settings.source | default: 'As seen in' }}</span>
          {%- endif -%}
          <blockquote style="margin:0;font-size:clamp(1rem,1.75vw,1.1rem);line-height:1.5;font-style:italic;">&ldquo;{{ block.settings.quote }}&rdquo;</blockquote>
          <figcaption style="font-size:.85rem;opacity:.75;">
            {%- if block.settings.source_url != blank -%}
              <a href="{{ block.settings.source_url }}" rel="noopener" target="_blank" style="color:inherit;text-decoration:none;border-bottom:1px solid currentColor;">{{ block.settings.source }}</a>
            {%- else -%}
              {{ block.settings.source }}
            {%- endif -%}
            {%- if block.settings.date != blank -%}
              &middot; <time datetime="{{ block.settings.date }}">{{ block.settings.date | date: '%b %Y' }}</time>
            {%- endif -%}
          </figcaption>
        </figure>
      {%- endfor -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Press Mentions",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "As featured in" }
  ],
  "blocks": [
    {
      "type": "mention",
      "name": "Mention",
      "settings": [
        { "type": "image_picker", "id": "logo", "label": "Publication logo" },
        { "type": "text", "id": "source", "label": "Source", "default": "Vogue" },
        { "type": "textarea", "id": "quote", "label": "Quote", "default": "A must-have for every wardrobe." },
        { "type": "url", "id": "source_url", "label": "Article URL" },
        { "type": "text", "id": "date", "label": "Date (YYYY-MM-DD)", "default": "2025-09-01" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Press Mentions",
      "blocks": [
        { "type": "mention" },
        { "type": "mention" },
        { "type": "mention" }
      ]
    }
  ]
}
{% endschema %}