Team Cards

<section class="sl-team" style="padding:clamp(48px,7vw,80px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:1200px;margin:0 auto;">
    <header style="text-align:center;margin:0 auto 2.5rem;max-width:640px;">
      {%- 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:.4rem 0 .5rem;font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.15;font-family:inherit;">{{ section.settings.heading | default: 'Meet the team' }}</h2>
      {%- if section.settings.subheading != blank -%}
        <p style="margin:0;opacity:.8;line-height:1.55;">{{ section.settings.subheading }}</p>
      {%- endif -%}
    </header>
    <ul style="list-style:none;margin:0;padding:0;display:grid;gap:clamp(1rem,2.5vw,2rem);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));">
      {%- for block in section.blocks -%}
        <li style="display:flex;flex-direction:column;gap:.5rem;text-align:center;" {{ block.shopify_attributes }}>
          <figure style="margin:0;">
            <img src="{{ block.settings.photo | image_url: width: 400 | default: 'https://picsum.photos/seed/team-' | append: forloop.index | append: '/400/400' }}" alt="{{ block.settings.photo_alt | default: block.settings.name }}" loading="lazy" style="width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:1rem;display:block;" />
          </figure>
          <h3 style="margin:.5rem 0 0;font-size:1.05rem;font-weight:700;line-height:1.3;">{{ block.settings.name }}</h3>
          {%- if block.settings.role != blank -%}
            <p style="margin:0;color:var(--sl-accent,#0a5cff);font-size:.85rem;font-weight:600;letter-spacing:.05em;">{{ block.settings.role }}</p>
          {%- endif -%}
          {%- if block.settings.bio != blank -%}
            <p style="margin:.15rem 0 0;opacity:.75;line-height:1.55;font-size:.88rem;">{{ block.settings.bio }}</p>
          {%- endif -%}
          {%- if block.settings.linkedin != blank -%}
            <a href="{{ block.settings.linkedin }}" aria-label="LinkedIn profile for {{ block.settings.name }}" style="margin-top:.35rem;color:inherit;opacity:.7;text-decoration:none;font-size:.8rem;border-bottom:1px solid currentColor;display:inline-block;align-self:center;padding-bottom:1px;">LinkedIn &rarr;</a>
          {%- endif -%}
        </li>
      {%- endfor -%}
    </ul>
  </div>
</section>
{% schema %}
{
  "name": "Team Cards",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Who we are" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Meet the team" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "The people working hard to make you love every order." }
  ],
  "blocks": [
    {
      "type": "member",
      "name": "Team member",
      "settings": [
        { "type": "image_picker", "id": "photo", "label": "Portrait photo" },
        { "type": "text", "id": "photo_alt", "label": "Photo alt text", "default": "Team member portrait" },
        { "type": "text", "id": "name", "label": "Name", "default": "Alex Chen" },
        { "type": "text", "id": "role", "label": "Role", "default": "Founder & CEO" },
        { "type": "textarea", "id": "bio", "label": "Bio", "default": "Short bio — background, fun fact, or what they love about the brand." },
        { "type": "url", "id": "linkedin", "label": "LinkedIn URL" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Team Cards",
      "blocks": [
        { "type": "member", "settings": { "name": "Alex Chen", "role": "Founder & CEO", "bio": "Former product lead at Google. Surfs every Saturday." } },
        { "type": "member", "settings": { "name": "Priya Rao", "role": "Head of Design", "bio": "Furniture-maker turned brand designer. Keeps a pottery studio at home." } },
        { "type": "member", "settings": { "name": "Marcus Stein", "role": "Head of Operations", "bio": "Built supply chains for three DTC brands. Marathon runner." } },
        { "type": "member", "settings": { "name": "Sofia Ibrahim", "role": "Customer Lead", "bio": "Personally reads every review. Three-time spelling bee champion." } }
      ]
    }
  ]
}
{% endschema %}