{% set section_bg  = module.section_bg_color.color  if module.section_bg_color.color  else "#0e0e0e" %}
{% set card_bg     = module.card_bg_color.color     if module.card_bg_color.color     else "#222222" %}
{% set card_border = module.card_border_color.color if module.card_border_color.color else "#2e2e2e" %}
{% set card_hover  = module.card_hover_color.color  if module.card_hover_color.color  else "#E8650A" %}
{% set accent      = module.icon_accent_color.color if module.icon_accent_color.color else "#E8650A" %}
{% set title_clr   = module.title_color.color       if module.title_color.color       else "#F5F5F5" %}
{% set body_clr    = module.body_color.color        if module.body_color.color        else "#9A9A9A" %}
{% set divider_clr = module.divider_color.color     if module.divider_color.color     else "#2e2e2e" %}
{% set card_count  = module.cards | length %}

<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700&family=Barlow:wght@400;600&display=swap" rel="stylesheet">

<section style="background: ; padding: 60px 5vw;">
  <div class="fcm-grid" style="
    display: grid;
    grid-template-columns: repeat(, 1fr);
    align-items: stretch;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
    font-family: 'Barlow', sans-serif;
  ">

    {% for card in module.cards %}

    {% set card_title  = card.title  if card.title  else "Card Title" %}
    {% set card_body   = card.body   if card.body   else "<p>Add your description here.</p>" %}
    {% set show_cta    = card.show_cta %}
    {% set cta_label   = card.cta_label if card.cta_label else "Learn more" %}
    {% set cta_href    = card.cta_url.url.href if card.cta_url.url.href else "#" %}
    {% set cta_new_tab = card.cta_url.open_in_new_tab %}

    <div class="fcm-card"
      data-hover=""
      data-border=""
      data-divider=""
      style="
        background: ;
        border: 1px solid ;
        border-radius: 12px;
        padding: 28px;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
        transition: border-color 0.28s ease, transform 0.22s ease, box-shadow 0.28s ease;
        cursor: default;
    ">

      <!-- Glow overlay -->
      <div class="fcm-glow" style="
        position: absolute; inset: 0; pointer-events: none; border-radius: 12px;
        background: radial-gradient(ellipse at top left, 26 0%, transparent 65%);
        opacity: 0; transition: opacity 0.28s ease;
      "></div>

      <!-- Icon + Title row -->
      <div class="fcm-header" style="position: relative;">
        <div style="display: flex; align-items: flex-start; gap: 14px;">

          <!-- Icon box -->
          <div style="
            width: 40px; height: 40px; border-radius: 8px;
            background: 1f;
            border: 1px solid 44;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; margin-top: 2px;
          ">
            {% if card.icon and card.icon.name %}
              <i class="fa- fa-" style="color: ; font-size: 16px;"></i>
            {% else %}
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="7" y="6" width="10" height="16" rx="2"/>
                <path d="M9 3l1.5 3h3L15 3"/>
                <line x1="10" y1="10" x2="14" y2="10"/>
                <circle cx="12" cy="17" r="1.5" fill="" stroke="none"/>
              </svg>
            {% endif %}
          </div>

          <!-- Title -->
          <h4 style="
            font-family: 'Barlow Condensed', sans-serif;
            font-size: 20px; font-weight: 700;
            color: ;
            margin: 0; letter-spacing: 0.02em; line-height: 1.25;
          "></h4>

        </div>
      </div>

      <!-- Divider -->
      <div class="fcm-divider" style="
        width: 100%; height: 1px;
        background: ;
        margin: 20px 0;
        transition: background 0.28s ease;
        flex-shrink: 0;
      "></div>

      <!-- Body -->
      <div style="
        position: relative;
        color: ;
        font-size: 14px;
        line-height: 1.7;
        flex: 1;
      "></div>

      <!-- Optional CTA -->
      {% if show_cta %}
      <a href=""
        {% if cta_new_tab %}target="_blank" rel="noopener"{% endif %}
        class="fcm-cta"
        style="
          display: inline-flex; align-items: center; gap: 6px;
          margin-top: 22px; font-size: 13px; font-weight: 600;
          color: ; text-decoration: none;
          letter-spacing: 0.04em; transition: opacity 0.2s ease;
          position: relative;
        ">
        
        <svg class="fcm-arrow" width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="transition: transform 0.2s ease;">
          <line x1="2" y1="8" x2="14" y2="8"/>
          <polyline points="9,3 14,8 9,13"/>
        </svg>
      </a>
      {% endif %}

    </div>
    {% endfor %}

  </div>
</section>

<script>
(function () {

  function equaliseHeaders() {
    var headers = document.querySelectorAll('.fcm-header');
    headers.forEach(function(h) { h.style.height = 'auto'; });
    var maxH = 0;
    headers.forEach(function(h) { if (h.offsetHeight > maxH) maxH = h.offsetHeight; });
    headers.forEach(function(h) { h.style.height = maxH + 'px'; });
  }

  function init() {
    var isMobile = window.innerWidth <= 640;
    var grid = document.querySelector('.fcm-grid');
    var count = ;

    function setColumns() {
      isMobile = window.innerWidth <= 640;
      var isTablet = window.innerWidth <= 900;
      if (!grid) return;
      if (isMobile) {
        grid.style.gridTemplateColumns = '1fr';
        document.querySelectorAll('.fcm-header').forEach(function(h) { h.style.height = 'auto'; });
      } else if (isTablet) {
        grid.style.gridTemplateColumns = '1fr 1fr';
        equaliseHeaders();
      } else {
        grid.style.gridTemplateColumns = 'repeat(' + count + ', 1fr)';
        equaliseHeaders();
      }
    }

    setColumns();
    window.addEventListener('resize', setColumns);

    /* Card hover */
    document.querySelectorAll('.fcm-card').forEach(function(card) {
      var divider    = card.querySelector('.fcm-divider');
      var glow       = card.querySelector('.fcm-glow');
      var hoverClr   = card.dataset.hover   || '#E8650A';
      var borderClr  = card.dataset.border  || '#2e2e2e';
      var dividerClr = card.dataset.divider || '#2e2e2e';

      card.addEventListener('mouseenter', function() {
        card.style.borderColor = hoverClr;
        card.style.boxShadow   = '0 16px 40px rgba(0,0,0,0.5), 0 0 0 1px ' + hoverClr + '30';
        if (!isMobile) card.style.transform = 'translateY(-4px)';
        if (glow)    glow.style.opacity       = '1';
        if (divider) divider.style.background = hoverClr + '44';
      });

      card.addEventListener('mouseleave', function() {
        card.style.borderColor = borderClr;
        card.style.boxShadow   = 'none';
        card.style.transform   = 'none';
        if (glow)    glow.style.opacity       = '0';
        if (divider) divider.style.background = dividerClr;
      });
    });

    /* CTA arrow hover */
    document.querySelectorAll('.fcm-cta').forEach(function(cta) {
      var arrow = cta.querySelector('.fcm-arrow');
      cta.addEventListener('mouseenter', function() {
        cta.style.opacity = '0.8';
        if (arrow) arrow.style.transform = 'translateX(3px)';
      });
      cta.addEventListener('mouseleave', function() {
        cta.style.opacity = '1';
        if (arrow) arrow.style.transform = 'translateX(0)';
      });
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  if (document.fonts && document.fonts.ready) {
    document.fonts.ready.then(equaliseHeaders);
  }

})();
</script>