<section data-component-type="Features" class="py-16 md:py-24 lg:py-32" data-component-slug="ss-sports-running-values">
  <div class="container mx-auto px-4">
    <!-- Header -->
    <div class="text-center mb-12 md:mb-16">
      <span data-node="values_tagline" data-node-type="text" data-node-label="Tagline" data-node-default="WHAT WE STAND FOR" class="text-red-600 font-semibold text-sm uppercase tracking-wider">
        {{values_tagline}}
      </span>

      <h2 data-node="values_title" data-node-type="text" data-node-label="Title" data-node-default="Values That Keep our Club Moving Forward" class="text-3xl md:text-4xl lg:text-5xl font-semibold text-black mt-4 mb-8">
        {{values_title}}
      </h2>

      <a data-node="values_cta_link" data-node-type="url" data-node-label="CTA Link" data-node-default="#" href="{{values_cta_link}}" class="inline-block bg-red-600 text-white px-10 py-4 font-medium hover:bg-red-700 transition-colors">
        <span data-node="values_cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="Join the Club">{{values_cta_text}}</span>
      </a>
    </div>

    <!-- Values Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
      <!-- Card 1 - Wellness -->
      <div class="group">
        <img data-node="value1_image" data-node-type="file" data-node-label="Value 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527176/seltrix/templates/ss-sports-running/value-wellness.png" src="{{value1_image}}" alt="Wellness" class="w-full h-64 md:h-80 lg:h-[400px] object-cover mb-4">
        <h3 data-node="value1_title" data-node-type="text" data-node-label="Value 1 Title" data-node-default="Wellness" class="text-xl md:text-2xl font-medium text-black mb-2">
          {{value1_title}}
        </h3>
        <p data-node="value1_desc" data-node-type="text" data-node-label="Value 1 Description" data-node-default="Movement that strengthens the body and refreshes the mind." class="text-gray-600 text-lg mb-3">
          {{value1_desc}}
        </p>
        <a data-node="value1_link" data-node-type="url" data-node-label="Value 1 Link" data-node-default="#" href="{{value1_link}}" class="text-red-600 font-medium hover:text-red-700 inline-flex items-center gap-2">
          <span data-node="value1_link_text" data-node-type="text" data-node-default="Explore Now" data-node-label="Value 1 Link Text">{{value1_link_text}}</span>
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
          </svg>
        </a>
      </div>

      <!-- Card 2 - Progress -->
      <div class="group">
        <img data-node="value2_image" data-node-type="file" data-node-label="Value 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527175/seltrix/templates/ss-sports-running/value-progress.png" src="{{value2_image}}" alt="Progress" class="w-full h-64 md:h-80 lg:h-[400px] object-cover mb-4">
        <h3 data-node="value2_title" data-node-type="text" data-node-label="Value 2 Title" data-node-default="Progress" class="text-xl md:text-2xl font-medium text-black mb-2">
          {{value2_title}}
        </h3>
        <p data-node="value2_desc" data-node-type="text" data-node-label="Value 2 Description" data-node-default="Small steps, sharp discipline, steady growth." class="text-gray-600 text-lg mb-3">
          {{value2_desc}}
        </p>
        <a data-node="value2_link" data-node-type="url" data-node-label="Value 2 Link" data-node-default="#" href="{{value2_link}}" class="text-red-600 font-medium hover:text-red-700 inline-flex items-center gap-2">
          <span data-node="value2_link_text" data-node-type="text" data-node-label="Value 2 Link Text" data-node-default="Explore Now">{{value2_link_text}}</span>
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
          </svg>
        </a>
      </div>

      <!-- Card 3 - Community -->
      <div class="group md:col-span-2 lg:col-span-1">
        <img data-node="value3_image" data-node-type="file" data-node-label="Value 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765527174/seltrix/templates/ss-sports-running/value-community.png" src="{{value3_image}}" alt="Community" class="w-full h-64 md:h-80 lg:h-[400px] object-cover mb-4">
        <h3 data-node="value3_title" data-node-type="text" data-node-label="Value 3 Title" data-node-default="Community" class="text-xl md:text-2xl font-medium text-black mb-2">
          {{value3_title}}
        </h3>
        <p data-node="value3_desc" data-node-type="text" data-node-label="Value 3 Description" data-node-default="Everyone runs together. Everyone wins together." class="text-gray-600 text-lg mb-3">
          {{value3_desc}}
        </p>
        <a data-node="value3_link" data-node-type="url" data-node-label="Value 3 Link" data-node-default="#" href="{{value3_link}}" class="text-red-600 font-medium hover:text-red-700 inline-flex items-center gap-2">
          <span data-node="value3_link_text" data-node-type="text" data-node-default="Explore Now" data-node-label="Value 3 Link Text">{{value3_link_text}}</span>
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
          </svg>
        </a>
      </div>
    </div>
  </div>
</section>