{%- comment -%}
  Snippet: trust-card-block.liquid
  Rendered via: {% render 'trust-card-block', block: block %}
{%- endcomment -%}

{%- style -%}
  /* ── Trust Card – {{ block.id }} ─────────────────────────────── */
  .trust-card-{{ block.id }} {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;
    margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;
    border-radius: {{ block.settings.border_radius }}px;
    border: {{ block.settings.border_width }}px solid {{ block.settings.border_color }};
    padding: {{ block.settings.padding_y_mobile | divided_by: 10.0 }}rem {{ block.settings.padding_x_mobile | divided_by: 10.0 }}rem;
  }

  @media screen and (min-width: 750px) {
    .trust-card-{{ block.id }} {
      padding: {{ block.settings.padding_y_desktop | divided_by: 10.0 }}rem {{ block.settings.padding_x_desktop | divided_by: 10.0 }}rem;
    }
  }

  /* Background gradient/color layer */
  .trust-card-{{ block.id }}__bg-layer {
    position: absolute;
    inset: 0;
    z-index: -2;
    {% if block.settings.bg_style == 'gradient' %}
      background: linear-gradient(
        {{ block.settings.gradient_angle }}deg,
        {{ block.settings.gradient_color_start }} {{ block.settings.gradient_stop_start }}%,
        {{ block.settings.gradient_color_end }} {{ block.settings.gradient_stop_end }}%
      );
    {% else %}
      background: {{ block.settings.bg_color }};
    {% endif %}
    opacity: {{ block.settings.bg_opacity | divided_by: 100.0 }};
  }

  /* Background image layer */
  {% if block.settings.bg_image != blank %}
    {% # theme-check-disable %}
    .trust-card-{{ block.id }}__media-bg {
      position: absolute;
      inset: 0;
      z-index: -1;
      background-image: url('{{ block.settings.bg_image | img_url: 'master' }}');
      background-repeat: no-repeat;
      background-size: {{ block.settings.bg_image_size }};
      background-position: {{ block.settings.bg_image_position }};
      opacity: {{ block.settings.bg_image_opacity | divided_by: 100.0 }};
    }
    {% # theme-check-enable %}
  {% endif %}

  /* Content wrapper sits above bg layers */
  .trust-card-{{ block.id }}__content {
    position: relative;
    z-index: 1;
  }

  /* Heading */
  .trust-card-{{ block.id }}__heading {
    margin-top: 0;
    margin-bottom: {{ block.settings.heading_margin_bottom | divided_by: 10.0 }}rem;
    text-align: {{ block.settings.heading_alignment }};
    color: {{ block.settings.heading_color }};
    font-size: calc(var(--font-heading-scale) * {{ block.settings.heading_size_mobile | divided_by: 10.0 }}rem);
  }

  @media screen and (min-width: 750px) {
    .trust-card-{{ block.id }}__heading {
      font-size: calc(var(--font-heading-scale) * {{ block.settings.heading_size_desktop | divided_by: 10.0 }}rem);
    }
  }

  .trust-card-{{ block.id }}__heading strong {
    color: {{ block.settings.heading_highlight_color }};
  }

  /* Badge grid */
  .trust-card-{{ block.id }}__badge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: {{ block.settings.badge_column_gap | divided_by: 10.0 }}rem;
    row-gap: {{ block.settings.badge_row_gap | divided_by: 10.0 }}rem;
    margin-top: {{ block.settings.badge_grid_margin_top | divided_by: 10.0 }}rem;
    margin-bottom: {{ block.settings.badge_grid_margin_bottom | divided_by: 10.0 }}rem;
    font-size: {{ block.settings.badge_text_size_mobile | divided_by: 10.0 }}rem;
  }

  @media screen and (min-width: 750px) {
    .trust-card-{{ block.id }}__badge-grid {
      font-size: {{ block.settings.badge_text_size_desktop | divided_by: 10.0 }}rem;
    }
  }

  .trust-card-{{ block.id }}__badge-item {
    display: flex;
    align-items: center;
    gap: 0.4em;
    color: {{ block.settings.badge_text_color }};
    line-height: 1.3;
    margin: 0;
  }

  .trust-card-{{ block.id }}__badge-icon {
    font-size: calc(1em * {{ block.settings.badge_icon_scale | divided_by: 100.0 }});
    color: {{ block.settings.badge_icon_color }};
    flex-shrink: 0;
    font-variation-settings: 'FILL' 1;
  }

  /* Caption */
  .trust-card-{{ block.id }}__caption {
    margin-top: {{ block.settings.caption_margin_top | divided_by: 10.0 }}rem;
    margin-bottom: 0;
    text-align: {{ block.settings.caption_alignment }};
    font-size: {{ block.settings.caption_text_size | divided_by: 10.0 }}rem;
    color: {{ block.settings.caption_text_color }};
  }
{%- endstyle -%}

<div
  class="trust-card-{{ block.id }} {{ block.settings.visibility }}"
  {{ block.shopify_attributes }}
>
  <div class="trust-card-{{ block.id }}__bg-layer">&nbsp;</div>

  {%- if block.settings.bg_image != blank -%}
    <div class="trust-card-{{ block.id }}__media-bg">&nbsp;</div>
  {%- endif -%}

  <div class="trust-card-{{ block.id }}__content">

    {%- unless block.settings.heading == blank -%}
      {%- if block.settings.heading_two_lines and block.settings.heading_line_two != blank -%}
        {%- assign heading_output = block.settings.heading | replace: block.settings.heading_line_two, '<br>' | append: block.settings.heading_line_two -%}
      {%- else -%}
        {%- assign heading_output = block.settings.heading -%}
      {%- endif -%}
      <h2 class="trust-card-{{ block.id }}__heading">
        {{ heading_output }}
      </h2>
    {%- endunless -%}

    {%- comment -%} Badge grid — up to 8 badges {%- endcomment -%}
    {%- assign has_badges = false -%}
    {%- for i in (1..8) -%}
      {%- assign badge_key = 'badge_' | append: i -%}
      {%- if block.settings[badge_key] != blank -%}
        {%- assign has_badges = true -%}
      {%- endif -%}
    {%- endfor -%}

    {%- if has_badges -%}
      <div class="trust-card-{{ block.id }}__badge-grid">
        {%- for i in (1..8) -%}
          {%- assign badge_key = 'badge_' | append: i -%}
          {%- assign badge_label = block.settings[badge_key] -%}
          {%- if badge_label != blank -%}
            <p class="trust-card-{{ block.id }}__badge-item">
              <span class="material-symbols-outlined trust-card-{{ block.id }}__badge-icon" aria-hidden="true">
                {{- block.settings.badge_icon -}}
              </span>
              <span>{{ badge_label }}</span>
            </p>
          {%- endif -%}
        {%- endfor -%}
      </div>
    {%- endif -%}

    {%- unless block.settings.caption == blank -%}
      <div class="trust-card-{{ block.id }}__caption rte">
        {{ block.settings.caption }}
      </div>
    {%- endunless -%}

  </div>
</div>