{%- comment -%}
  Image Hero — House of CB inspired.

  houseofcb.com runs its homepage with ZERO headings in the main blocks —
  the imagery carries everything and the only type is a small link. This
  section is deliberately type-light: full-bleed image, optional single
  line, one understated CTA.

  Supports an external image URL so demo templates can be populated
  before real assets are uploaded. A picked image always wins.
{%- endcomment -%}

{%- liquid
  assign s = section.settings
  assign uid = section.id
-%}

{% style %}
  .hcb-{{ uid }} { position: relative; overflow: hidden; }
  .hcb-{{ uid }}__media { position: relative; width: 100%; }
  .hcb-{{ uid }}__media img,
  .hcb-{{ uid }}__media .placeholder-svg {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .hcb-{{ uid }}__scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to {{ s.scrim_from }}, rgba(0,0,0,{{ s.scrim | divided_by: 100.0 }}), rgba(0,0,0,0) 60%);
  }
  .hcb-{{ uid }}__body {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; gap: 14px;
    padding: {{ s.pad }}px;
    color: {{ s.text_color }};
    justify-content: {{ s.v_pos }};
    align-items: {{ s.h_pos }};
    text-align: {{ s.text_align }};
  }
  .hcb-{{ uid }}__line {
    margin: 0; font-size: {{ s.line_size }}px; line-height: 1.05;
    {% if s.line_uppercase %}text-transform: uppercase; letter-spacing: .06em;{% endif %}
    max-width: 20ch;
  }
  .hcb-{{ uid }}__cta {
    display: inline-block; color: inherit; text-decoration: none;
    font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
    border-bottom: 1px solid currentColor; padding-bottom: 4px;
  }
  .hcb-{{ uid }}__media { height: {{ s.height }}px; }
  @media screen and (max-width: 749px) {
    .hcb-{{ uid }}__media { height: {{ s.height_mobile }}px; }
    .hcb-{{ uid }}__line { font-size: {{ s.line_size | times: 0.55 | round }}px; }
    .hcb-{{ uid }}__body { padding: {{ s.pad | times: 0.55 | round }}px; }
  }
{% endstyle %}

{%- capture hero_media -%}
  {%- if s.image != blank -%}
    {{ s.image | image_url: width: 2400 | image_tag:
         loading: "eager", fetchpriority: "high",
         widths: "600,900,1200,1800,2400", alt: s.image.alt | default: s.line }}
  {%- elsif s.image_url != blank -%}
    <img src="{{ s.image_url }}" alt="{{ s.line | escape }}" loading="eager" width="2400" height="1600">
  {%- else -%}
    {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
  {%- endif -%}
{%- endcapture -%}

<div class="hcb-{{ uid }}">
  {%- if s.link != blank and s.whole_clickable -%}
    <a href="{{ s.link }}" style="display:block;color:inherit;text-decoration:none">
  {%- endif -%}

  <div class="hcb-{{ uid }}__media">
    {{ hero_media }}
    {%- if s.scrim > 0 -%}<div class="hcb-{{ uid }}__scrim"></div>{%- endif -%}
    <div class="hcb-{{ uid }}__body">
      {%- if s.line != blank -%}
        <h2 class="hcb-{{ uid }}__line">{{ s.line | escape }}</h2>
      {%- endif -%}
      {%- if s.cta_label != blank -%}
        {%- if s.whole_clickable -%}
          <span class="hcb-{{ uid }}__cta">{{ s.cta_label | escape }}</span>
        {%- else -%}
          <a class="hcb-{{ uid }}__cta" href="{{ s.link | default: '#' }}">{{ s.cta_label | escape }}</a>
        {%- endif -%}
      {%- endif -%}
    </div>
  </div>

  {%- if s.link != blank and s.whole_clickable -%}</a>{%- endif -%}
</div>

{% schema %}
{
  "name": "Hero (houseofcb)",
  "tag": "section",
  "class": "section",
  "settings": [
    { "type": "paragraph", "content": "House of CB leads with imagery and almost no type. Leaving the line blank is a valid choice." },
    { "type": "image_picker", "id": "image", "label": "Image" },
    { "type": "text", "id": "image_url", "label": "Image URL", "info": "Used only when no image is picked. Handy for demo content." },
    { "type": "text", "id": "line", "label": "Single line" },
    { "type": "text", "id": "cta_label", "label": "Link label", "default": "Shop now" },
    { "type": "url", "id": "link", "label": "Link" },
    { "type": "checkbox", "id": "whole_clickable", "label": "Make the whole hero clickable", "default": true },
    { "type": "header", "content": "Size" },
    { "type": "range", "id": "height", "min": 300, "max": 1000, "step": 20, "unit": "px", "label": "Height", "default": 720 },
    { "type": "range", "id": "height_mobile", "min": 240, "max": 800, "step": 20, "unit": "px", "label": "Height (mobile)", "default": 460 },
    { "type": "header", "content": "Text placement" },
    { "type": "select", "id": "v_pos", "label": "Vertical", "default": "flex-end",
      "options": [ {"value":"flex-start","label":"Top"}, {"value":"center","label":"Middle"}, {"value":"flex-end","label":"Bottom"} ] },
    { "type": "select", "id": "h_pos", "label": "Horizontal", "default": "flex-start",
      "options": [ {"value":"flex-start","label":"Left"}, {"value":"center","label":"Centre"}, {"value":"flex-end","label":"Right"} ] },
    { "type": "select", "id": "text_align", "label": "Text alignment", "default": "left",
      "options": [ {"value":"left","label":"Left"}, {"value":"center","label":"Centre"}, {"value":"right","label":"Right"} ] },
    { "type": "range", "id": "pad", "min": 12, "max": 120, "step": 4, "unit": "px", "label": "Padding", "default": 52 },
    { "type": "range", "id": "line_size", "min": 18, "max": 96, "step": 2, "unit": "px", "label": "Line size", "default": 46 },
    { "type": "checkbox", "id": "line_uppercase", "label": "Uppercase line", "default": false },
    { "type": "color", "id": "text_color", "label": "Text colour", "default": "#ffffff" },
    { "type": "select", "id": "scrim_from", "label": "Scrim direction", "default": "top",
      "options": [ {"value":"top","label":"From bottom"}, {"value":"bottom","label":"From top"} ] },
    { "type": "range", "id": "scrim", "min": 0, "max": 80, "step": 5, "unit": "%", "label": "Scrim strength", "default": 30 }
  ],
  "presets": [ { "name": "Hero (houseofcb)" } ]
}
{% endschema %}
