Luxury Storytelling

{%- comment -%} modblo. Luxury Storytelling {%- endcomment -%}
<section class="modblo-story" data-section-id="{{ section.id }}"
  style="--modblo-bg: {{ section.settings.bg }}; --modblo-fg: {{ section.settings.fg }};">
  <div class="modblo-story__inner">
    {%- for block in section.blocks -%}
      <div class="modblo-story__chapter modblo-story__chapter--{{ block.settings.layout }}" {{ block.shopify_attributes }}>
        <div class="modblo-story__media">
          {%- if block.settings.image != blank -%}
            {{ block.settings.image | image_url: width: 1600 | image_tag:
              loading: 'lazy', widths: '600,900,1200,1600',
              sizes: '(min-width: 768px) 50vw, 100vw', class: 'modblo-story__img' }}
          {%- endif -%}
        </div>
        <div class="modblo-story__body">
          {%- if block.settings.eyebrow != blank -%}
            <p class="modblo-story__eyebrow">{{ block.settings.eyebrow }}</p>
          {%- endif -%}
          <h2 class="modblo-story__title">{{ block.settings.title }}</h2>
          {%- if block.settings.text != blank -%}
            <div class="modblo-story__text">{{ block.settings.text }}</div>
          {%- endif -%}
          {%- if block.settings.cta_label != blank -%}
            <a class="modblo-story__cta" href="{{ block.settings.cta_link }}">
              {{ block.settings.cta_label }}
              <svg viewBox="0 0 16 16" width="14" height="14"><path d="M3 8h10M9 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </a>
          {%- endif -%}
        </div>
      </div>
    {%- endfor -%}
  </div>
</section>

<style>
  .modblo-story { background: var(--modblo-bg, #0b0b0c); color: var(--modblo-fg, #fafafa); padding: clamp(64px,10vw,160px) 0; overflow: clip; }
  .modblo-story__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; gap: clamp(64px, 10vw, 128px); }
  .modblo-story__chapter {
    display: grid; gap: clamp(28px, 5vw, 56px);
    grid-template-columns: 1fr 1fr; align-items: center;
  }
  .modblo-story__chapter--right { direction: rtl; }
  .modblo-story__chapter--right > * { direction: ltr; }
  .modblo-story__media { aspect-ratio: 4/5; overflow: hidden; border-radius: 4px; }
  .modblo-story__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(.16,1,.3,1); }
  .modblo-story__chapter:hover .modblo-story__img { transform: scale(1.04); }
  .modblo-story__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .24em; opacity: .6; margin: 0 0 18px; font-weight: 600; }
  .modblo-story__title {
    font-family: Georgia, "Times New Roman", serif; font-weight: 400;
    font-size: clamp(32px, 4.5vw, 56px); letter-spacing: -.015em;
    line-height: 1.05; margin: 0 0 20px;
  }
  .modblo-story__text { font-size: 17px; line-height: 1.7; opacity: .82; max-width: 460px; }
  .modblo-story__text p:not(:last-child) { margin-bottom: 14px; }
  .modblo-story__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px;
    color: inherit; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; text-decoration: none;
    border-bottom: 1px solid currentColor; padding-bottom: 4px;
  }
  @media (max-width: 768px) {
    .modblo-story__chapter, .modblo-story__chapter--right { grid-template-columns: 1fr; direction: ltr; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .modblo-story__chapter > * {
      animation: modblo-story-rise 1s cubic-bezier(.16,1,.3,1) both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }
  @keyframes modblo-story-rise {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: none; }
  }
</style>

{% schema %}
{
  "name": "Luxury Storytelling",
  "tag": "section",
  "settings": [
    { "type": "color", "id": "bg", "label": "Background", "default": "#0b0b0c" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#fafafa" }
  ],
  "blocks": [{
    "type": "chapter",
    "name": "Chapter",
    "settings": [
      { "type": "select", "id": "layout", "label": "Layout",
        "options": [
          { "value": "left", "label": "Image left" },
          { "value": "right", "label": "Image right" }
        ], "default": "left" },
      { "type": "image_picker", "id": "image", "label": "Image" },
      { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Chapter one" },
      { "type": "text", "id": "title", "label": "Title", "default": "From an island in Portugal." },
      { "type": "richtext", "id": "text", "label": "Text",
        "default": "<p>Every fiber is grown, woven, and cut on the same coast. We work with three families who've been in this craft for four generations.</p>" },
      { "type": "text", "id": "cta_label", "label": "CTA label" },
      { "type": "url", "id": "cta_link", "label": "CTA link" }
    ]
  }],
  "max_blocks": 6,
  "presets": [{
    "name": "Luxury Storytelling",
    "blocks": [{ "type": "chapter" }, { "type": "chapter", "settings": { "layout": "right" } }]
  }]
}
{% endschema %}