Stat Callout Grid

<section class="sl-stat-grid" style="padding:clamp(40px,7vw,80px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1200px;margin:0 auto;">
    <header style="max-width:760px;margin:0 auto 2.5rem;text-align:center;">
      {%- if section.settings.eyebrow != blank -%}
        <span style="font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h2 style="margin:.5rem 0 .75rem;font-size:clamp(1.75rem,4vw,2.75rem);line-height:1.15;font-family:inherit;">{{ section.settings.heading }}</h2>
      {%- if section.settings.subheading != blank -%}
        <p style="margin:0;opacity:.8;line-height:1.55;font-size:clamp(1rem,1.8vw,1.1rem);">{{ section.settings.subheading }}</p>
      {%- endif -%}
    </header>
    {%- assign has_image = false -%}
    {%- if section.settings.center_image != blank -%}{%- assign has_image = true -%}{%- endif -%}
    <style>
      .sl-stat-grid-wrap { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
      .sl-stat-grid-wrap .sl-stat-img { grid-column: 1 / -1; order: 0; }
      @media (min-width: 900px) {
        .sl-stat-grid-wrap.has-image { grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; }
        .sl-stat-grid-wrap.has-image .sl-stat-img { grid-column: 2 / 3; grid-row: 1 / span 2; order: 0; width: clamp(220px, 22vw, 320px); }
        .sl-stat-grid-wrap.no-image { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      }
    </style>
    <div class="sl-stat-grid-wrap {% if has_image %}has-image{% else %}no-image{% endif %}">
      {%- if has_image -%}
        <figure class="sl-stat-img" style="margin:0;text-align:center;">
          <img src="{{ section.settings.center_image | image_url: width: 640 | default: 'https://picsum.photos/seed/stat-center/640/640' }}" alt="{{ section.settings.image_alt | default: section.settings.heading }}" loading="lazy" style="width:100%;height:auto;max-width:320px;object-fit:contain;" />
        </figure>
      {%- endif -%}
      {%- for block in section.blocks -%}
        <article style="text-align:center;padding:0 .5rem;font-family:inherit;color:inherit;" {{ block.shopify_attributes }}>
          <p style="margin:0;font-size:clamp(2.75rem,7vw,4.5rem);font-weight:800;line-height:1;color:var(--sl-accent,#0a5cff);letter-spacing:-.02em;">{{ block.settings.value }}</p>
          {%- if block.settings.heading != blank -%}
            <h3 style="margin:.65rem 0 .35rem;font-size:clamp(1rem,1.8vw,1.15rem);font-weight:700;line-height:1.3;">{{ block.settings.heading }}</h3>
          {%- endif -%}
          {%- if block.settings.description != blank -%}
            <p style="margin:0;opacity:.75;line-height:1.5;font-size:.92rem;max-width:22ch;margin-inline:auto;">{{ block.settings.description }}</p>
          {%- endif -%}
          {%- if block.settings.footnote != blank -%}
            <small style="display:block;margin-top:.5rem;opacity:.55;font-size:.7rem;letter-spacing:.04em;">{{ block.settings.footnote }}</small>
          {%- endif -%}
        </article>
      {%- endfor -%}
    </div>
    {%- if section.settings.footer_note != blank -%}
      <p style="margin:2rem auto 0;text-align:center;opacity:.6;font-size:.78rem;max-width:640px;line-height:1.55;">{{ section.settings.footer_note }}</p>
    {%- endif -%}
  </div>
</section>
{% schema %}
{
  "name": "Stat Callout Grid",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Clinically proven" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Results that speak for themselves" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Independent research shows our customers see measurable improvements in the first week of use." },
    { "type": "image_picker", "id": "center_image", "label": "Center image (optional)" },
    { "type": "text", "id": "image_alt", "label": "Image alt text", "default": "Product hero image" },
    { "type": "textarea", "id": "footer_note", "label": "Footer note (optional)", "default": "Based on a 30-day user study with 2,400 participants. Individual results may vary." }
  ],
  "blocks": [
    {
      "type": "stat",
      "name": "Stat",
      "settings": [
        { "type": "text", "id": "value", "label": "Big number", "default": "78%" },
        { "type": "text", "id": "heading", "label": "Sub-heading", "default": "sleep better" },
        { "type": "textarea", "id": "description", "label": "Description", "default": "Users reported deeper, more restorative sleep within the first two weeks." },
        { "type": "text", "id": "footnote", "label": "Footnote (optional)" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Stat Callout Grid",
      "blocks": [
        { "type": "stat", "settings": { "value": "78%", "heading": "sleep better", "description": "Users reported deeper, more restorative sleep within the first two weeks." } },
        { "type": "stat", "settings": { "value": "75%", "heading": "breathe easier", "description": "Improved nasal airflow measured in independent clinical testing." } },
        { "type": "stat", "settings": { "value": "73%", "heading": "feel more rested", "description": "Wake up with more energy compared to their pre-trial baseline." } },
        { "type": "stat", "settings": { "value": "38%", "heading": "less snoring", "description": "Average reduction in snoring volume reported by bed partners." } }
      ]
    }
  ]
}
{% endschema %}