<?php get_header('blog'); ?>

<div class="container">
    <div class="row results-grid">
        <?php

        if (have_posts()) :
            $counter = 1;
            while (have_posts()) :
                the_post();

                // Adjust image size and card style based on post position
                if ($counter === 1) {
                    $colClass = 'col-12 col-md-6 col-lg-4';
                    $cardClass = 'card card-lg';
                    $featuredImage = get_the_post_thumbnail_url(get_the_ID(), 'large');
                } elseif ($counter === 2) {
                    $colClass = 'col-12 col-md-6 col-lg-4';
                    $cardClass = 'card card-md';
                    $featuredImage = get_the_post_thumbnail_url(get_the_ID(), 'medium');
                } else {
                    $colClass = 'col-12 col-md-6 col-lg-4';
                    $cardClass = 'card card-sm';
                    $featuredImage = get_the_post_thumbnail_url(get_the_ID(), 'small');
                }
                ?>
                <div class="<?php echo $colClass; ?>">
                    <div class="card mb-2">
                        <a href="<?php the_permalink(); ?>" aria-label="<?php the_title(); ?>">
                            <img src="<?php echo $featuredImage; ?>" class="card-img-top" alt="<?php the_title(); ?>">
                        </a>
                        <div class="card-body">
                            <h5 class="card-title">
                                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                            </h5>
                            <div class="card-text">
                                <?php the_excerpt(); ?>
                            </div>
                            <div class="card-meta">
                                <span><?php echo get_the_date("F jS, Y"); ?></span>
                            </div>
                        </div>
                    </div>
                </div>
            <?php
            endwhile;
        else:
            ?>
            <div class="error">
                No Posts
            </div>
        <?php endif; ?>

        <?php wp_reset_query(); ?>
    </div>

    <div class="text-center pb-4">
        <button class="js-load-posts d-inline-block btn btn-success">More Posts</button>
    </div>

</div>
<!-- End off-canvas-container -->

<script type='text/javascript'>
  /* <![CDATA[ */
  var yqhoro_config = {
    'yqhoro_page_number_max': 0,
    'yqhoro_page_number_next': '2',
    'yqhoro_page_link_next': '<?php echo get_bloginfo('url'); ?>\/blog\/page\/9999999999\/',
    'yqhoro_load_more': 'More Posts',
    'yqhoro_loading': 'Loading',
  };
  /* ]]> */
</script>
<?php
get_footer('blog');
?>