<section data-section data-component-type="Content" class="py-16 xl:py-24 bg-white" data-component-slug="marathon-programs-training">
  

  <div class="mx-auto px-6 lg:px-16 xl:px-[95px]">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 xl:gap-16 items-center">
      <!-- Left Column - Content -->
      <div class="space-y-6">
        <!-- Section Label -->
        <span data-node="training_label" data-node-type="text" data-node-label="Section Label" data-node-default="OUR PROGRAMS" class="text-sm tracking-[0.2em] text-black font-bold uppercase">{{training_label}}</span>

        <!-- Title -->
        <h2 data-node="training_title" data-node-type="text" data-node-label="Section Title" data-node-default="Training That Elevates Every Runner" class="!mt-4 text-3xl md:text-4xl xl:text-[42px] 2xl:text-[53px] leading-tight font-['Racing_Sans_One'] text-black">
          {{training_title}}
        </h2>

        <!-- Description -->
        <p data-node="training_description" data-node-type="textarea" data-node-label="Section Description" data-node-default="From beginners discovering their pace to athletes sharpening performance, our programs are designed to strengthen skills and build confidence." class="text-[#656A74] text-base leading-relaxed font-medium max-w-lg">
          {{training_description}}
        </p>

        <!-- Feature List -->
        <div class="space-y-6 pt-4">
          <!-- Feature 1 -->
          <div class="flex items-start gap-4">
            <div class="w-6 h-1 bg-[#F26522] mt-3 flex-shrink-0"></div>
            <div>
              <h3 data-node="training_feature_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Personalized Coaching" class="text-lg xl:text-xl font-['Racing_Sans_One'] text-black mb-2">
                {{training_feature_1_title}}
              </h3>
              <p data-node="training_feature_1_desc" data-node-type="textarea" data-node-label="Feature 1 Description" data-node-default="Tailored plans created by certified experts to match your pace, strengths, and goals. Guidance that evolves with your progress." class="text-[#656A74] text-sm xl:text-base leading-relaxed">
                {{training_feature_1_desc}}
              </p>
            </div>
          </div>

          <!-- Feature 2 -->
          <div class="flex items-start gap-4">
            <div class="w-6 h-1 bg-[#F26522] mt-3 flex-shrink-0"></div>
            <div>
              <h3 data-node="training_feature_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Holistic Development" class="text-lg xl:text-xl font-['Racing_Sans_One'] text-black mb-2">
                {{training_feature_2_title}}
              </h3>
              <p data-node="training_feature_2_desc" data-node-type="textarea" data-node-label="Feature 2 Description" data-node-default="A balanced approach combining technique, endurance, recovery, and mindset training. Focused on building runners for the long run." class="text-[#656A74] text-sm xl:text-base leading-relaxed">
                {{training_feature_2_desc}}
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- Right Column - Image with orange border and overlay -->
      <div class="relative">
        <!-- Orange border frame -->
        <div class="absolute left-0 top-3 bottom-0 w-2 lg:w-4 bg-[#F26522] z-1"></div>
        <div class="absolute bottom-0 left-0 right-3 h-2 lg:h-4 bg-[#F26522] z-1"></div>

        <!-- Image -->
        <div class="ml-2 lg:ml-3 mb-2 lg:mb-3 relative z-3">
          <img data-node="training_image" data-node-type="file" data-node-label="Section Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768024249/seltrix/templates/marathon-template/training-runner.png" src="{{training_image}}" alt="Runner training" class="w-full h-[350px] sm:h-[400px] md:h-[450px] lg:h-[500px] xl:h-[550px] object-cover object-center">

          <!-- Overlay Text -->
          <div class="absolute bottom-6 right-6">
            <h3 data-node="training_overlay_text" data-node-type="text" data-node-label="Overlay Text" data-node-default="Run And Know Yourself" class="font-['Racing_Sans_One'] leading-tight text-outline-white text-right" style="font-size: clamp(36px, 4.8vw, 94px)">
              {{training_overlay_text}}
            </h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>