{%- comment -%}
  MIT License · (c) 2026 Lintel · https://lintelagency.com/resources/shopify-sections
{%- endcomment -%}
{%- comment -%}
  Hero banner: full-bleed image with eyebrow, heading, text and two buttons over it.
  Separate desktop and mobile image, overlay color and opacity, nine content positions on desktop
  and three on mobile, height per device, optional solid content box, optional whole-banner link.
  No JavaScript.
  Depends on: snippets/lib-button.liquid, snippets/lib-image.liquid
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign heading_tag = s.heading_tag | default: 'h2'
  assign eager = false
  if section.index <= 2
    assign eager = true
  endif

  assign has_buttons = false
  if s.button_label != blank or s.button2_label != blank
    assign has_buttons = true
  endif
  assign banner_link = false
  if has_buttons == false and s.banner_url != blank
    assign banner_link = true
  endif

  assign ratio_d = s.image | default: s.image_mobile
  assign ratio_m = s.image_mobile | default: s.image
  assign link_label = s.heading | strip_html | strip
  if link_label == blank
    assign link_label = s.eyebrow | strip
  endif
-%}

<div
  class="lib-hero-banner lib-hero-banner--{{ s.section_width }}"
  {% if s.anchor_id != blank %}
    id="{{ s.anchor_id | handleize }}"
  {% endif %}
  data-show="{{ s.show_on }}"
  data-height="{{ s.height }}"
  data-height-m="{{ s.height_mobile }}"
  {% if s.animate %}
    data-animate
  {% endif %}
  style="
    --lib-bg: {{ s.color_bg }};
    --lib-text: {{ s.color_text }};
    --lib-accent: {{ s.color_accent }};
    --lib-accent-text: {{ s.color_accent_text }};
    --lib-box: {{ s.color_box }};
    --lib-box-text: {{ s.color_box_text }};
    --lib-overlay: {{ s.overlay_color }};
    --lib-overlay-o: {{ s.overlay_opacity | divided_by: 100.0 }};
    --lib-content-w: {{ s.content_width }}px;
    --lib-radius-frame: {{ s.corner_radius }}px;
    {% if ratio_d != blank %}--lib-ratio: {{ ratio_d.width }} / {{ ratio_d.height }};{% endif %}
    {% if ratio_m != blank %}--lib-ratio-m: {{ ratio_m.width }} / {{ ratio_m.height }};{% endif %}
    --lib-pt: {{ s.padding_top }}px;
    --lib-pb: {{ s.padding_bottom }}px;
    --lib-pt-m: {{ s.padding_top_mobile }}px;
    --lib-pb-m: {{ s.padding_bottom_mobile }}px;
  "
>
  <div class="lib-hero-banner__frame">
    <div class="lib-hero-banner__media">
      {%- render 'lib-image',
        image: s.image,
        image_mobile: s.image_mobile,
        class: 'lib-hero-banner__img',
        sizes: '100vw',
        eager: eager
      -%}
    </div>
    <div class="lib-hero-banner__overlay" aria-hidden="true"></div>

    {%- if banner_link -%}
      <a
        class="lib-hero-banner__link"
        href="{{ s.banner_url }}"
        {% if link_label != blank %}
          aria-label="{{ link_label | escape }}"
        {% endif %}
      ></a>
    {%- endif -%}

    <div
      class="lib-hero-banner__content"
      data-pos="{{ s.content_position }}"
      data-pos-m="{{ s.content_position_mobile }}"
      data-align-m="{{ s.text_alignment_mobile }}"
    >
      <div
        class="lib-hero-banner__box"
        data-box="{{ s.content_box }}"
        data-align="{{ s.content_position | split: '-' | last }}"
        data-align-m="{{ s.text_alignment_mobile }}"
      >
        {%- if s.eyebrow != blank -%}
          <p class="lib-hero-banner__eyebrow">{{ s.eyebrow | escape }}</p>
        {%- endif -%}

        {%- if s.heading != blank -%}
          <{{ heading_tag }} class="lib-hero-banner__heading lib-hero-banner__heading--{{ s.heading_size }}">
            {{- s.heading -}}
          </{{ heading_tag }}>
        {%- endif -%}

        {%- if s.text != blank -%}
          <div class="lib-hero-banner__text">{{ s.text }}</div>
        {%- endif -%}

        {%- if has_buttons -%}
          <div class="lib-hero-banner__actions">
            {%- render 'lib-button',
              label: s.button_label,
              url: s.button_url,
              style: s.button_style,
              new_tab: s.button_new_tab
            -%}
            {%- render 'lib-button',
              label: s.button2_label,
              url: s.button2_url,
              style: s.button2_style,
              new_tab: s.button2_new_tab,
              arrow: false
            -%}
          </div>
        {%- endif -%}
      </div>
    </div>
  </div>
</div>

{% stylesheet %}
  .lib-hero-banner {
    background-color: var(--lib-bg);
    color: var(--lib-text);
    padding: var(--lib-pt-m) 0 var(--lib-pb-m);
  }
  .lib-hero-banner--page { padding-inline: 1rem; }
  .lib-hero-banner__frame {
    position: relative;
    display: grid;
    min-height: 480px;
    isolation: isolate;
    background: color-mix(in srgb, var(--lib-text) 12%, #1c1917);
  }
  .lib-hero-banner--page .lib-hero-banner__frame {
    max-width: 1200px;
    margin-inline: auto;
    border-radius: var(--lib-radius-frame);
  }

  /* Height: mobile first, then desktop. "adapt" follows the image's own shape. */
  .lib-hero-banner[data-height-m='small'] .lib-hero-banner__frame { min-height: 360px; }
  .lib-hero-banner[data-height-m='medium'] .lib-hero-banner__frame { min-height: 480px; }
  .lib-hero-banner[data-height-m='large'] .lib-hero-banner__frame { min-height: 600px; }
  .lib-hero-banner[data-height-m='full'] .lib-hero-banner__frame { min-height: 100vh; min-height: 100svh; }
  .lib-hero-banner[data-height-m='adapt'] .lib-hero-banner__frame { min-height: auto; aspect-ratio: var(--lib-ratio-m, 4 / 5); }
  @media (min-width: 750px) {
    .lib-hero-banner {
      padding-top: var(--lib-pt);
      padding-bottom: var(--lib-pb);
    }
    .lib-hero-banner[data-height] .lib-hero-banner__frame { aspect-ratio: auto; }
    .lib-hero-banner[data-height='small'] .lib-hero-banner__frame { min-height: 440px; }
    .lib-hero-banner[data-height='medium'] .lib-hero-banner__frame { min-height: 600px; }
    .lib-hero-banner[data-height='large'] .lib-hero-banner__frame { min-height: 760px; }
    .lib-hero-banner[data-height='full'] .lib-hero-banner__frame { min-height: 100vh; min-height: 100svh; }
    .lib-hero-banner[data-height='adapt'] .lib-hero-banner__frame { min-height: auto; aspect-ratio: var(--lib-ratio, 16 / 9); }
  }

  /* Visibility */
  @media (max-width: 749px) {
    .lib-hero-banner[data-show='desktop'] { display: none; }
  }
  @media (min-width: 750px) {
    .lib-hero-banner[data-show='mobile'] { display: none; }
  }

  /* Media and overlay fill the frame; content sits on top. */
  .lib-hero-banner__media,
  .lib-hero-banner__overlay {
    position: absolute;
    inset: 0;
  }
  .lib-hero-banner__media { z-index: -2; overflow: hidden; border-radius: inherit; }
  .lib-hero-banner__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .lib-hero-banner__img:is(svg) { fill: color-mix(in srgb, #fff 18%, transparent); background: #57534e; }
  .lib-hero-banner__overlay {
    z-index: -1;
    border-radius: inherit;
    background: var(--lib-overlay);
    opacity: var(--lib-overlay-o);
    pointer-events: none;
  }

  /* Whole-banner link (only rendered when there are no buttons). */
  .lib-hero-banner__link {
    position: absolute;
    inset: 0;
    z-index: 2;
  }
  .lib-hero-banner__link:focus-visible {
    outline: 3px solid var(--lib-text);
    outline-offset: -6px;
  }

  /* Content position: mobile uses data-pos-m (top / middle / bottom), desktop the 9-way data-pos. */
  .lib-hero-banner__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    padding: 2rem 1.25rem;
  }
  .lib-hero-banner__link ~ .lib-hero-banner__content { pointer-events: none; }
  .lib-hero-banner__content[data-pos-m='top'] { justify-content: flex-start; }
  .lib-hero-banner__content[data-pos-m='middle'] { justify-content: center; }
  .lib-hero-banner__content[data-pos-m='bottom'] { justify-content: flex-end; }
  .lib-hero-banner__content[data-align-m='left'] { align-items: flex-start; }
  .lib-hero-banner__content[data-align-m='center'] { align-items: center; }
  .lib-hero-banner__content[data-align-m='right'] { align-items: flex-end; }
  @media (min-width: 750px) {
    .lib-hero-banner__content {
      padding: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4.5rem);
    }
    .lib-hero-banner--full .lib-hero-banner__content {
      padding-inline: max(clamp(2rem, 5vw, 4.5rem), calc((100% - 1200px) / 2 + 1rem));
    }
    .lib-hero-banner__content[data-pos^='top'] { justify-content: flex-start; }
    .lib-hero-banner__content[data-pos^='middle'] { justify-content: center; }
    .lib-hero-banner__content[data-pos^='bottom'] { justify-content: flex-end; }
    .lib-hero-banner__content[data-pos$='left'] { align-items: flex-start; }
    .lib-hero-banner__content[data-pos$='center'] { align-items: center; }
    .lib-hero-banner__content[data-pos$='right'] { align-items: flex-end; }
  }

  /* Content box: transparent, or a solid card with its own colors. */
  .lib-hero-banner__box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: var(--lib-content-w);
    text-align: left;
  }
  .lib-hero-banner__box[data-box='solid'] {
    --lib-text: var(--lib-box-text);
    --lib-accent: var(--lib-box-text);
    --lib-accent-text: var(--lib-box);
    color: var(--lib-box-text);
    background: var(--lib-box);
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border-radius: 4px;
    box-shadow: 0 24px 48px -28px rgb(0 0 0 / 0.45);
  }
  .lib-hero-banner__box[data-align-m='center'] { align-items: center; text-align: center; }
  .lib-hero-banner__box[data-align-m='right'] { align-items: flex-end; text-align: right; }
  @media (min-width: 750px) {
    .lib-hero-banner__box { width: auto; }
    .lib-hero-banner__box[data-align='left'] { align-items: flex-start; text-align: left; }
    .lib-hero-banner__box[data-align='center'] { align-items: center; text-align: center; }
    .lib-hero-banner__box[data-align='right'] { align-items: flex-end; text-align: right; }
  }

  .lib-hero-banner__eyebrow {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .lib-hero-banner__heading {
    margin: 0;
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    text-wrap: balance;
    overflow-wrap: anywhere;
  }
  .lib-hero-banner__heading--small { font-size: clamp(1.75rem, 3vw, 2.5rem); }
  .lib-hero-banner__heading--medium { font-size: clamp(2rem, 4vw, 3.25rem); }
  .lib-hero-banner__heading--xlarge { font-size: clamp(2.75rem, 7vw, 5.5rem); }
  .lib-hero-banner__text {
    margin-top: 1.125rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    opacity: 0.88;
  }
  .lib-hero-banner__text > :first-child { margin-top: 0; }
  .lib-hero-banner__text > :last-child { margin-bottom: 0; }
  .lib-hero-banner__text a { color: inherit; }
  .lib-hero-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
  }
  .lib-hero-banner__box[data-align-m='center'] .lib-hero-banner__actions { justify-content: center; }
  .lib-hero-banner__box[data-align-m='right'] .lib-hero-banner__actions { justify-content: flex-end; }
  @media (min-width: 750px) {
    .lib-hero-banner__box[data-align='left'] .lib-hero-banner__actions { justify-content: flex-start; }
    .lib-hero-banner__box[data-align='center'] .lib-hero-banner__actions { justify-content: center; }
    .lib-hero-banner__box[data-align='right'] .lib-hero-banner__actions { justify-content: flex-end; }
  }

  /* Motion: image settles and copy rises once on load. */
  .lib-hero-banner[data-animate] .lib-hero-banner__img { animation: lib-hero-banner-settle 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .lib-hero-banner[data-animate] .lib-hero-banner__box > * { animation: lib-hero-banner-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .lib-hero-banner[data-animate] .lib-hero-banner__box > :nth-child(2) { animation-delay: 0.08s; }
  .lib-hero-banner[data-animate] .lib-hero-banner__box > :nth-child(3) { animation-delay: 0.16s; }
  .lib-hero-banner[data-animate] .lib-hero-banner__box > :nth-child(n + 4) { animation-delay: 0.24s; }
  @keyframes lib-hero-banner-settle {
    from { transform: scale(1.06); }
  }
  @keyframes lib-hero-banner-rise {
    from { opacity: 0; transform: translateY(14px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .lib-hero-banner[data-animate] .lib-hero-banner__img,
    .lib-hero-banner[data-animate] .lib-hero-banner__box > * { animation: none; }
  }
{% endstylesheet %}

{% schema %}
{
  "name": "Lib · Hero banner",
  "tag": "section",
  "class": "lib-section",
  "settings": [
    { "type": "header", "content": "Content" },
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "The autumn edit" },
    { "type": "inline_richtext", "id": "heading", "label": "Heading", "default": "Slow mornings, <em>warm</em> rooms" },
    {
      "type": "select",
      "id": "heading_tag",
      "label": "Heading tag",
      "info": "Use H1 only when this is the page's main heading.",
      "options": [
        { "value": "h1", "label": "H1" },
        { "value": "h2", "label": "H2" },
        { "value": "h3", "label": "H3" },
        { "value": "p", "label": "Paragraph" }
      ],
      "default": "h2"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "Heading size",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" },
        { "value": "xlarge", "label": "Extra large" }
      ],
      "default": "xlarge"
    },
    { "type": "richtext", "id": "text", "label": "Text", "default": "<p>Washed linen, hand-thrown stoneware and throws in clay and oat. Pieces made to be lived with.</p>" },

    { "type": "header", "content": "Image" },
    { "type": "image_picker", "id": "image", "label": "Desktop image", "info": "A wide image works best, at least 2000px across." },
    { "type": "image_picker", "id": "image_mobile", "label": "Mobile image", "info": "Optional. Shown below 750px; a portrait crop works best." },
    { "type": "color", "id": "overlay_color", "label": "Overlay color", "default": "#1C1917" },
    { "type": "range", "id": "overlay_opacity", "label": "Overlay opacity", "min": 0, "max": 90, "step": 5, "unit": "%", "default": 30 },
    {
      "type": "select",
      "id": "height",
      "label": "Height on desktop",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" },
        { "value": "full", "label": "Full screen" },
        { "value": "adapt", "label": "Adapt to image" }
      ],
      "default": "large"
    },
    {
      "type": "select",
      "id": "height_mobile",
      "label": "Height on mobile",
      "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" },
        { "value": "full", "label": "Full screen" },
        { "value": "adapt", "label": "Adapt to image" }
      ],
      "default": "large"
    },

    { "type": "header", "content": "Buttons" },
    { "type": "text", "id": "button_label", "label": "First button label", "default": "Shop the edit" },
    { "type": "url", "id": "button_url", "label": "First button link" },
    {
      "type": "select",
      "id": "button_style",
      "label": "First button style",
      "options": [
        { "value": "primary", "label": "Solid" },
        { "value": "outline", "label": "Outline" },
        { "value": "text", "label": "Text link" }
      ],
      "default": "primary"
    },
    { "type": "checkbox", "id": "button_new_tab", "label": "Open first link in a new tab", "default": false },
    { "type": "text", "id": "button2_label", "label": "Second button label", "default": "Visit the journal" },
    { "type": "url", "id": "button2_url", "label": "Second button link" },
    {
      "type": "select",
      "id": "button2_style",
      "label": "Second button style",
      "options": [
        { "value": "primary", "label": "Solid" },
        { "value": "outline", "label": "Outline" },
        { "value": "text", "label": "Text link" }
      ],
      "default": "outline"
    },
    { "type": "checkbox", "id": "button2_new_tab", "label": "Open second link in a new tab", "default": false },
    {
      "type": "url",
      "id": "banner_url",
      "label": "Whole banner link",
      "info": "Used only when both button labels are empty: the entire banner becomes one link."
    },

    { "type": "header", "content": "Layout" },
    {
      "type": "select",
      "id": "section_width",
      "label": "Width",
      "options": [
        { "value": "full", "label": "Full width" },
        { "value": "page", "label": "Page width" }
      ],
      "default": "full"
    },
    {
      "type": "range",
      "id": "corner_radius",
      "label": "Corner radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "default": 16,
      "visible_if": "{{ section.settings.section_width == 'page' }}"
    },
    {
      "type": "select",
      "id": "content_position",
      "label": "Content position on desktop",
      "info": "Text aligns to the same side: left, center or right.",
      "options": [
        { "value": "top-left", "label": "Top left" },
        { "value": "top-center", "label": "Top center" },
        { "value": "top-right", "label": "Top right" },
        { "value": "middle-left", "label": "Middle left" },
        { "value": "middle-center", "label": "Middle center" },
        { "value": "middle-right", "label": "Middle right" },
        { "value": "bottom-left", "label": "Bottom left" },
        { "value": "bottom-center", "label": "Bottom center" },
        { "value": "bottom-right", "label": "Bottom right" }
      ],
      "default": "middle-left"
    },
    {
      "type": "select",
      "id": "content_position_mobile",
      "label": "Content position on mobile",
      "options": [
        { "value": "top", "label": "Top" },
        { "value": "middle", "label": "Middle" },
        { "value": "bottom", "label": "Bottom" }
      ],
      "default": "bottom"
    },
    {
      "type": "select",
      "id": "text_alignment_mobile",
      "label": "Text alignment on mobile",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ],
      "default": "left"
    },
    { "type": "range", "id": "content_width", "label": "Content max width", "min": 320, "max": 960, "step": 20, "unit": "px", "default": 600 },
    {
      "type": "select",
      "id": "content_box",
      "label": "Content box",
      "options": [
        { "value": "none", "label": "None (text on image)" },
        { "value": "solid", "label": "Solid card" }
      ],
      "default": "none"
    },

    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "color_bg", "label": "Background", "info": "Shows around the banner when it has padding or page width.", "default": "#F5EFE6" },
    { "type": "color", "id": "color_text", "label": "Text", "default": "#FFFFFF" },
    { "type": "color", "id": "color_accent", "label": "Solid button", "default": "#FFFFFF" },
    { "type": "color", "id": "color_accent_text", "label": "Text on solid button", "default": "#1C1917" },
    {
      "type": "color",
      "id": "color_box",
      "label": "Content box",
      "default": "#F5EFE6",
      "visible_if": "{{ section.settings.content_box == 'solid' }}"
    },
    {
      "type": "color",
      "id": "color_box_text",
      "label": "Text in content box",
      "info": "Also used for the solid button inside the box.",
      "default": "#2A211B",
      "visible_if": "{{ section.settings.content_box == 'solid' }}"
    },

    { "type": "header", "content": "Spacing and visibility" },
    { "type": "range", "id": "padding_top", "label": "Top padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 0 },
    { "type": "range", "id": "padding_bottom", "label": "Bottom padding on desktop", "min": 0, "max": 200, "step": 4, "unit": "px", "default": 0 },
    { "type": "range", "id": "padding_top_mobile", "label": "Top padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 0 },
    { "type": "range", "id": "padding_bottom_mobile", "label": "Bottom padding on mobile", "min": 0, "max": 160, "step": 4, "unit": "px", "default": 0 },
    {
      "type": "select",
      "id": "show_on",
      "label": "Show on",
      "options": [
        { "value": "all", "label": "All devices" },
        { "value": "desktop", "label": "Desktop only" },
        { "value": "mobile", "label": "Mobile only" }
      ],
      "default": "all"
    },
    { "type": "text", "id": "anchor_id", "label": "Anchor ID", "info": "Optional. Link to this section with #your-id." },

    { "type": "header", "content": "Motion" },
    { "type": "checkbox", "id": "animate", "label": "Animate image and text on load", "default": true }
  ],
  "presets": [
    {
      "name": "Lib · Hero banner"
    }
  ]
}
{% endschema %}