<!-- 
  Club Culture Component
  Text content on left, 2x2 image grid on right
-->
<section data-component-type="Gallery" class="py-16 md:py-24">
  <div class="container mx-auto px-4">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center">
      <!-- Text Content -->
      <div class="order-2 lg:order-1">
        <span
          data-node="culture_tagline"
          data-node-type="text"
          data-node-label="Tagline"
          data-node-default="THE CULTURE"
          class="text-red-600 text-sm font-semibold uppercase tracking-wider mb-4 block"
          >{{culture_tagline}}</span
        >

        <h2
          data-node="culture_title"
          data-node-type="text"
          data-node-label="Title"
          data-node-default="A Club Built on Passion & Progress"
          class="text-3xl md:text-4xl lg:text-5xl font-bold text-black mb-6"
        >
          {{culture_title}}
        </h2>

        <p
          data-node="culture_description"
          data-node-type="textarea"
          data-node-label="Description"
          data-node-default="We run to grow, to connect, and to challenge what we think we can be. Here, every mile is shared, every win celebrated, and every runner valued."
          class="text-gray-600 text-lg md:text-xl leading-relaxed"
        >
          {{culture_description}}
        </p>
      </div>

      <!-- Image Grid -->
      <div class="order-1 lg:order-2 grid grid-cols-2 gap-4">
        <img
          data-node="culture_image1"
          data-node-type="file"
          data-node-label="Image 1"
          data-node-default="../assets/culture-1.png"
          src="{{culture_image1}}"
          alt="Club culture 1"
          class="w-full h-48 md:h-64 object-cover"
        />
        <img
          data-node="culture_image2"
          data-node-type="file"
          data-node-label="Image 2"
          data-node-default="../assets/culture-2.png"
          src="{{culture_image2}}"
          alt="Club culture 2"
          class="w-full h-48 md:h-64 object-cover"
        />
        <img
          data-node="culture_image3"
          data-node-type="file"
          data-node-label="Image 3"
          data-node-default="../assets/culture-3.png"
          src="{{culture_image3}}"
          alt="Club culture 3"
          class="w-full h-48 md:h-64 object-cover"
        />
        <img
          data-node="culture_image4"
          data-node-type="file"
          data-node-label="Image 4"
          data-node-default="../assets/culture-4.png"
          src="{{culture_image4}}"
          alt="Club culture 4"
          class="w-full h-48 md:h-64 object-cover"
        />
      </div>
    </div>
  </div>
</section>
