<!-- 
  Culture Section Component
  Red banner with CTA for events
-->
<section data-component-type="Content" class="relative py-24 md:py-32 lg:py-40 bg-red-600 overflow-hidden">
  <!-- 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>
