<section data-component-type="Content" class="relative py-24 md:py-32 lg:py-40 bg-red-600 overflow-hidden" data-component-slug="ss-sports-running-culture">
  <!-- Decorative Border Lines -->
  <div class="absolute inset-0 pointer-events-none">
    <div class="absolute top-24 left-32 right-32 h-px bg-white/30 hidden lg:block"></div>
    <div class="absolute bottom-24 left-32 right-32 h-px bg-white/30 hidden lg:block"></div>
    <div class="absolute top-24 bottom-24 left-32 w-px bg-white/30 hidden lg:block"></div>
    <div class="absolute top-24 bottom-24 right-32 w-px bg-white/30 hidden lg:block"></div>
    <!-- Corner dots --> 
    <div class="absolute top-[92px] left-[120px] w-3 h-3 bg-white rounded-full hidden lg:block"></div>
    <div class="absolute top-[92px] right-[120px] w-3 h-3 bg-white rounded-full hidden lg:block"></div>
    <div class="absolute bottom-[92px] left-[120px] w-3 h-3 bg-white rounded-full hidden lg:block"></div>
    <div class="absolute bottom-[92px] right-[120px] w-3 h-3 bg-white rounded-full hidden lg:block"></div>
  </div>

  <div class="container mx-auto px-4 relative z-10">
    <div class="max-w-3xl mx-auto text-center">
      <span data-node="culture_tagline" data-node-type="text" data-node-label="Tagline" data-node-default="A CULTURE" class="text-white font-semibold text-sm uppercase tracking-wider">
        {{culture_tagline}}
      </span>

      <h2 data-node="culture_title" data-node-type="text" data-node-label="Title" data-node-default="Your Running Routine Starts Here" class="text-3xl md:text-4xl lg:text-5xl font-semibold text-white mt-4 mb-6">
        {{culture_title}}
      </h2>

      <p data-node="culture_description" data-node-type="textarea" data-node-label="Description" data-node-default="From early-morning sprints to city-wide races, we create events that keep you moving, inspired, and connected to a community that runs with purpose." class="text-white/90 text-lg md:text-xl mb-8 leading-relaxed">
        {{culture_description}}
      </p>

      <a data-node="culture_cta_link" data-node-type="url" data-node-label="CTA Link" data-node-default="#" href="{{culture_cta_link}}" class="inline-block bg-white text-black px-10 py-4 font-medium hover:bg-gray-100 transition-colors">
        <span data-node="culture_cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="Upcoming Events">
          {{culture_cta_text}}
        </span>
      </a>
    </div>
  </div>
</section>