<section class="bg-cream py-20 relative z-30 border-b border-gray-200">
  <div class="max-w-[1600px] mx-auto px-6 md:px-10 relative z-10">

    <div class="text-center mb-16">
      {% if paragraph.field_badge.value %}
        <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-teal/10 border border-teal/20 text-teal text-xs font-bold uppercase tracking-widest mb-3">
          <span class="w-2 h-2 rounded-full bg-teal animate-pulse"></span>
          <span>{{ paragraph.field_badge.value }}</span>
        </div>
      {% endif %}
      <h2 class="text-3xl md:text-4xl font-extrabold text-navy tracking-tight m-0">{{ paragraph.field_title.value }}</h2>
      <div class="w-16 h-1 bg-navy rounded-full mx-auto mt-4"></div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-10">
      {% for cardItem in paragraph.field_cards %}
        {% set card = cardItem.entity %}
        {% set cardHref = card.field_link.0 ? card.field_link.0.url.toString : '' %}
        {% set btnHref = card.field_button_link.0 ? card.field_button_link.0.url.toString : (cardHref ?: '#') %}

        <div class="bg-white rounded-[2rem] shadow-md border border-gray-200/90 flex flex-col h-full overflow-hidden transition-all duration-300 hover:-translate-y-1.5 hover:shadow-2xl hover:border-teal/40 group/card">
          <div class="bg-white border-b border-gray-100 py-5 px-6 relative flex items-center justify-between">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-xl bg-teal/10 border border-teal/20 flex items-center justify-center text-teal">
                <span class="material-symbols-outlined text-2xl">{{ card.field_icon.value }}</span>
              </div>
              <h3 class="text-navy font-bold text-lg tracking-wide m-0">{{ card.field_title.value }}</h3>
            </div>
            <span class="material-symbols-outlined text-gray-400 group-hover/card:text-teal group-hover/card:translate-x-1 transition-all text-xl">arrow_forward_ios</span>
          </div>

          <div class="p-6 flex-grow flex flex-col justify-between bg-white">
            <div class="grid grid-cols-2 gap-3 mb-6">
              {% for linkItem in card.field_links %}
                {% set l = linkItem.entity %}
                {% set href = l.field_link.0 ? l.field_link.0.url.toString : '#' %}
                <a href="{{ href }}" class="flex flex-col items-center text-center p-3 rounded-2xl bg-gray-50/80 hover:bg-white border border-gray-200/60 hover:border-teal/40 shadow-xs hover:shadow-md transition-all duration-300 group/item no-underline">
                  <div class="w-[3.25rem] h-[3.25rem] rounded-2xl bg-white border border-gray-200/60 group-hover/item:bg-navy group-hover/item:border-navy mb-2.5 flex items-center justify-center shadow-xs transition-all duration-300 group-hover/item:-translate-y-1">
                    <span class="material-symbols-outlined text-[26px] text-navy group-hover/item:text-teal transition-colors">{{ l.field_icon.value }}</span>
                  </div>
                  <span class="text-xs font-bold text-gray-700 group-hover/item:text-navy transition-colors leading-snug">{{ l.field_label.value }}</span>
                </a>
              {% endfor %}
            </div>

            {% if card.field_button_label.value %}
              <div class="pt-2 text-center">
                <a href="{{ btnHref }}" class="w-full inline-flex items-center justify-center gap-2 py-3 px-6 rounded-xl bg-navy text-white text-xs font-bold uppercase tracking-wider hover:bg-teal hover:text-navy transition-all duration-300 shadow-sm hover:shadow-md group/btn no-underline">
                  <span>{{ card.field_button_label.value }}</span>
                  <span class="material-symbols-outlined text-base group-hover/btn:translate-x-1.5 transition-transform">arrow_forward</span>
                </a>
              </div>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>