<section class="py-5 bg-light">
  <div class="">
    <div class="text-center mb-5">
      <h2 class="fw-bold">
        <?php echo esc_html( get_theme_mod( 'howcan_blog_title', 'Latest Blog & Resources' ) ); ?>
      </h2>
      <p class="text-muted">
        <?php echo esc_html( get_theme_mod( 'howcan_blog_subtitle', 'Read our latest tips, guides and resources to grow your knowledge.' ) ); ?>
      </p>
    </div>
    
    <div class="row g-4">
      <?php
      $args = array(
          'post_type' => 'post',
          'posts_per_page' => get_theme_mod( 'howcan_blog_count', 3 ),
      );
      $blog_query = new WP_Query( $args );
      if ( $blog_query->have_posts() ) :
          while ( $blog_query->have_posts() ) : $blog_query->the_post();
      ?>
      <div class="col-md-4">
        <div class="card h-100 shadow-sm border-0">
          <?php if ( has_post_thumbnail() ) : ?>
            <a href="<?php the_permalink(); ?>">
              <?php the_post_thumbnail( 'medium', array( 'class' => 'card-img-top' ) ); ?>
            </a>
          <?php else : ?>
            <img src="https://via.placeholder.com/600x400" class="card-img-top" alt="<?php the_title_attribute(); ?>">
          <?php endif; ?>
          
          <div class="card-body">
            <h5 class="card-title"><?php the_title(); ?></h5>
            <p class="card-text text-muted"><?php echo wp_trim_words( get_the_excerpt(), 15 ); ?></p>
            <a href="<?php the_permalink(); ?>" class="btn btn-dark btn-sm">Read More</a>
          </div>
        </div>
      </div>
      <?php
          endwhile;
          wp_reset_postdata();
      else :
          echo '<p class="text-center">No posts found.</p>';
      endif;
      ?>
    </div>
  </div>
</section>

