Research Callout

<section class="sl-research" style="padding:clamp(48px,8vw,96px) clamp(1rem,3vw,2rem);color:inherit;font-family:inherit;background:{{ section.settings.bg_color | default: 'transparent' }};">
  <div style="max-width:1200px;margin:0 auto;display:grid;gap:clamp(1.75rem,4vw,3.5rem);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start;">
    <header style="color:inherit;font-family:inherit;">
      {%- if section.settings.eyebrow != blank -%}
        <span style="display:inline-block;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;margin-bottom:1rem;">{{ section.settings.eyebrow }}</span>
      {%- endif -%}
      <h2 style="margin:0;font-size:clamp(2rem,5vw,3.5rem);line-height:1.05;letter-spacing:-.015em;font-family:inherit;">{{ section.settings.heading }}</h2>
    </header>
    <aside style="display:flex;flex-direction:column;gap:1.25rem;color:inherit;font-family:inherit;">
      {%- if section.settings.body_1 != blank -%}
        <p style="margin:0;line-height:1.65;font-size:clamp(1rem,1.75vw,1.1rem);opacity:.9;">{{ section.settings.body_1 }}</p>
      {%- endif -%}
      {%- if section.settings.body_2 != blank -%}
        <p style="margin:0;line-height:1.65;font-size:clamp(1rem,1.75vw,1.1rem);opacity:.9;">{{ section.settings.body_2 }}</p>
      {%- endif -%}
      <nav aria-label="Research actions" style="display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.35rem;">
        {%- if section.settings.cta_primary_text != blank -%}
          <a href="{{ section.settings.cta_primary_link | default: '#' }}" style="display:inline-block;padding:.9rem 1.5rem;background:var(--sl-accent,#0a5cff);color:#fff;border-radius:.375rem;text-decoration:none;font-family:inherit;font-weight:700;font-size:.95rem;">{{ section.settings.cta_primary_text }}</a>
        {%- endif -%}
        {%- if section.settings.cta_secondary_text != blank -%}
          <a href="{{ section.settings.cta_secondary_link | default: '#' }}" style="display:inline-block;padding:.9rem 1.5rem;background:transparent;color:inherit;border:1px solid currentColor;border-radius:.375rem;text-decoration:none;font-family:inherit;font-weight:600;font-size:.95rem;">{{ section.settings.cta_secondary_text }}</a>
        {%- endif -%}
      </nav>
      {%- if section.settings.footnote != blank -%}
        <small style="margin-top:.35rem;opacity:.6;font-size:.78rem;line-height:1.5;">{{ section.settings.footnote }}</small>
      {%- endif -%}
    </aside>
  </div>
</section>
{% schema %}
{
  "name": "Research Callout",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "The science" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Backed by research" },
    { "type": "textarea", "id": "body_1", "label": "First paragraph", "default": "Every product we make is tested in independent clinical trials before it leaves our lab. We publish the data — the good, the bad, and the surprising — so you can decide for yourself." },
    { "type": "textarea", "id": "body_2", "label": "Second paragraph", "default": "We partner with sleep scientists, ENT specialists, and athletic coaches to keep pushing the boundaries of what nasal breathing can do for your health and performance." },
    { "type": "text", "id": "cta_primary_text", "label": "Primary CTA text", "default": "Read the studies" },
    { "type": "url", "id": "cta_primary_link", "label": "Primary CTA link" },
    { "type": "text", "id": "cta_secondary_text", "label": "Secondary CTA text", "default": "Meet the team" },
    { "type": "url", "id": "cta_secondary_link", "label": "Secondary CTA link" },
    { "type": "textarea", "id": "footnote", "label": "Footnote", "default": "All trial data is peer-reviewed and available on request. Results may vary." },
    { "type": "color", "id": "bg_color", "label": "Background color" }
  ],
  "presets": [{ "name": "Research Callout" }]
}
{% endschema %}