Recipe Cards

<section class="sl-recipes" 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: 'Recipes we love' }}</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,1.75rem);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));">
      {%- for block in section.blocks -%}
        {%- assign rating = block.settings.rating | default: 4.8 -%}
        <li {{ block.shopify_attributes }}>
          <article itemscope itemtype="https://schema.org/Recipe" style="display:flex;flex-direction:column;gap:.5rem;height:100%;">
            <figure style="margin:0;position:relative;border-radius:.75rem;overflow:hidden;aspect-ratio:4/3;">
              <img itemprop="image" src="{{ block.settings.image | image_url: width: 800 | default: 'https://picsum.photos/seed/recipe-' | append: forloop.index | append: '/800/600' }}" alt="{{ block.settings.image_alt | default: block.settings.title }}" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block;" />
              {%- if block.settings.time != blank -%}
                <span aria-hidden="true" style="position:absolute;top:.5rem;right:.5rem;padding:.25rem .6rem;background:rgba(0,0,0,.6);color:#fff;border-radius:999px;font-size:.72rem;font-weight:700;">⏱ {{ block.settings.time }}</span>
              {%- endif -%}
            </figure>
            <h3 itemprop="name" style="margin:.4rem 0 0;font-size:1.1rem;font-weight:700;line-height:1.3;">
              {%- if block.settings.link != blank -%}
                <a href="{{ block.settings.link }}" style="color:inherit;text-decoration:none;">{{ block.settings.title }}</a>
              {%- else -%}{{ block.settings.title }}{%- endif -%}
            </h3>
            {%- if block.settings.description != blank -%}
              <p itemprop="description" style="margin:0;opacity:.75;line-height:1.55;font-size:.92rem;">{{ block.settings.description }}</p>
            {%- endif -%}
            <footer style="display:flex;gap:.75rem;align-items:center;margin-top:auto;padding-top:.5rem;font-size:.82rem;opacity:.8;flex-wrap:wrap;">
              <span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating" style="display:inline-flex;align-items:center;gap:.25rem;">
                <meta itemprop="ratingValue" content="{{ rating }}" />
                <meta itemprop="reviewCount" content="{{ block.settings.review_count | default: 124 }}" />
                <span aria-hidden="true" style="color:var(--sl-accent,#0a5cff);">&#9733;</span>
                <span>{{ rating }} <small style="opacity:.7;">({{ block.settings.review_count | default: 124 }})</small></span>
              </span>
              {%- if block.settings.difficulty != blank -%}
                <span style="padding:.15rem .5rem;background:rgba(127,127,127,.15);border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.04em;">{{ block.settings.difficulty }}</span>
              {%- endif -%}
            </footer>
            <meta itemprop="recipeYield" content="{{ block.settings.servings | default: '4 servings' }}" />
            <meta itemprop="totalTime" content="{{ block.settings.time | default: '30m' }}" />
          </article>
        </li>
      {%- endfor -%}
    </ul>
  </div>
</section>
{% schema %}
{
  "name": "Recipe Cards",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "From our kitchen" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Recipes we love" },
    { "type": "textarea", "id": "subheading", "label": "Subheading", "default": "Simple, seasonal, and made with ingredients you already have." }
  ],
  "blocks": [
    {
      "type": "recipe",
      "name": "Recipe",
      "settings": [
        { "type": "image_picker", "id": "image", "label": "Image" },
        { "type": "text", "id": "image_alt", "label": "Image alt text", "default": "Recipe photo" },
        { "type": "text", "id": "title", "label": "Title", "default": "One-pan roasted chicken" },
        { "type": "textarea", "id": "description", "label": "Description", "default": "A simple sheet-pan dinner with lemon, garlic, and rosemary — ready in 35 minutes." },
        { "type": "text", "id": "time", "label": "Total time", "default": "35m" },
        { "type": "text", "id": "servings", "label": "Servings", "default": "4 servings" },
        { "type": "text", "id": "difficulty", "label": "Difficulty", "default": "Easy" },
        { "type": "text", "id": "rating", "label": "Rating", "default": "4.8" },
        { "type": "number", "id": "review_count", "label": "Review count", "default": 124 },
        { "type": "url", "id": "link", "label": "Link" }
      ]
    }
  ],
  "presets": [
    {
      "name": "Recipe Cards",
      "blocks": [
        { "type": "recipe", "settings": { "title": "One-pan roasted chicken", "description": "A simple sheet-pan dinner with lemon, garlic, and rosemary.", "time": "35m", "difficulty": "Easy" } },
        { "type": "recipe", "settings": { "title": "Weeknight miso soup", "description": "Twenty-minute umami-packed soup with mushrooms and spring onions.", "time": "20m", "difficulty": "Easy" } },
        { "type": "recipe", "settings": { "title": "Blueberry skillet scones", "description": "Buttery, flaky scones with bursting summer blueberries.", "time": "45m", "difficulty": "Medium" } }
      ]
    }
  ]
}
{% endschema %}