Apple-Style Hero

{%- comment -%}
  modblo. Apple-style Hero
  Editorial hero with oversized headline, soft background image and dual CTA.
  Drop in /sections/modblo-apple-hero.liquid then add the section in the theme editor.
{%- endcomment -%}

<section
  class="modblo-apple-hero"
  style="--modblo-bg: {{ section.settings.bg_color }}; --modblo-fg: {{ section.settings.text_color }};"
  data-section-id="{{ section.id }}"
>
  {%- if section.settings.background_image != blank -%}
    <div class="modblo-apple-hero__bg" aria-hidden="true">
      {{ section.settings.background_image | image_url: width: 2400 | image_tag:
        loading: 'eager',
        widths: '600, 900, 1200, 1600, 2000, 2400',
        sizes: '100vw',
        class: 'modblo-apple-hero__img'
      }}
    </div>
  {%- endif -%}

  <div class="modblo-apple-hero__inner page-width">
    {%- if section.settings.eyebrow != blank -%}
      <p class="modblo-apple-hero__eyebrow">{{ section.settings.eyebrow }}</p>
    {%- endif -%}

    {%- if section.settings.heading != blank -%}
      <h1 class="modblo-apple-hero__heading">{{ section.settings.heading }}</h1>
    {%- endif -%}

    {%- if section.settings.subheading != blank -%}
      <p class="modblo-apple-hero__sub">{{ section.settings.subheading }}</p>
    {%- endif -%}

    {%- if section.settings.cta_primary_label != blank or section.settings.cta_secondary_label != blank -%}
      <div class="modblo-apple-hero__ctas">
        {%- if section.settings.cta_primary_label != blank -%}
          <a class="modblo-apple-hero__btn modblo-apple-hero__btn--primary"
             href="{{ section.settings.cta_primary_link }}">
            {{ section.settings.cta_primary_label }}
            <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
              <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 -%}
        {%- if section.settings.cta_secondary_label != blank -%}
          <a class="modblo-apple-hero__btn modblo-apple-hero__btn--ghost"
             href="{{ section.settings.cta_secondary_link }}">
            {{ section.settings.cta_secondary_label }}
          </a>
        {%- endif -%}
      </div>
    {%- endif -%}
  </div>
</section>

<style>
  .modblo-apple-hero {
    position: relative;
    isolation: isolate;
    color: var(--modblo-fg, #0b0b0c);
    background: var(--modblo-bg, #f5f5f7);
    overflow: hidden;
    padding: clamp(64px, 14vw, 160px) 0;
    text-align: center;
  }
  .modblo-apple-hero__bg {
    position: absolute; inset: 0; z-index: -1;
  }
  .modblo-apple-hero__img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.05);
    will-change: transform;
  }
  .modblo-apple-hero__inner {
    max-width: 1100px; margin: 0 auto; padding: 0 24px;
  }
  .modblo-apple-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.7;
    margin: 0 0 18px;
  }
  .modblo-apple-hero__heading {
    font-size: clamp(40px, 7vw, 96px);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1.02;
    margin: 0;
  }
  .modblo-apple-hero__sub {
    font-size: clamp(17px, 1.6vw, 22px);
    line-height: 1.45;
    max-width: 640px;
    margin: 22px auto 0;
    opacity: 0.78;
  }
  .modblo-apple-hero__ctas {
    display: flex; gap: 12px; justify-content: center;
    margin-top: 36px; flex-wrap: wrap;
  }
  .modblo-apple-hero__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 26px; border-radius: 999px;
    font-weight: 600; font-size: 15px;
    transition: transform .2s ease, background .2s ease, color .2s ease;
    text-decoration: none;
  }
  .modblo-apple-hero__btn:active { transform: scale(.98); }
  .modblo-apple-hero__btn--primary {
    background: var(--modblo-fg); color: var(--modblo-bg);
  }
  .modblo-apple-hero__btn--primary:hover { opacity: .9; }
  .modblo-apple-hero__btn--ghost {
    color: var(--modblo-fg);
    border: 1px solid color-mix(in oklab, var(--modblo-fg) 25%, transparent);
  }
  .modblo-apple-hero__btn--ghost:hover {
    background: color-mix(in oklab, var(--modblo-fg) 8%, transparent);
  }

  @media (prefers-reduced-motion: no-preference) {
    .modblo-apple-hero__heading,
    .modblo-apple-hero__sub,
    .modblo-apple-hero__eyebrow,
    .modblo-apple-hero__ctas {
      animation: modblo-apple-rise 800ms cubic-bezier(.16,1,.3,1) both;
    }
    .modblo-apple-hero__heading { animation-delay: 80ms; }
    .modblo-apple-hero__sub { animation-delay: 180ms; }
    .modblo-apple-hero__ctas { animation-delay: 280ms; }
  }
  @keyframes modblo-apple-rise {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to { opacity: 1; transform: none; }
  }
</style>

{% schema %}
{
  "name": "Apple Hero",
  "tag": "section",
  "class": "modblo-section",
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "New collection" },
    { "type": "text", "id": "heading", "label": "Headline", "default": "Designed beyond." },
    { "type": "textarea", "id": "subheading", "label": "Subheading",
      "default": "A new chapter for the modern wardrobe, engineered with the materials of tomorrow." },
    { "type": "header", "content": "Calls to action" },
    { "type": "text", "id": "cta_primary_label", "label": "Primary CTA label", "default": "Shop the drop" },
    { "type": "url", "id": "cta_primary_link", "label": "Primary CTA link" },
    { "type": "text", "id": "cta_secondary_label", "label": "Secondary CTA label", "default": "Watch the film" },
    { "type": "url", "id": "cta_secondary_link", "label": "Secondary CTA link" },
    { "type": "header", "content": "Style" },
    { "type": "image_picker", "id": "background_image", "label": "Background image" },
    { "type": "color", "id": "bg_color", "label": "Background color", "default": "#f5f5f7" },
    { "type": "color", "id": "text_color", "label": "Text color", "default": "#0b0b0c" }
  ],
  "presets": [{ "name": "Apple Hero" }]
}
{% endschema %}