[user3615851]

I know this might not be the solution for this but instead of using offset for highlighting a different container for a post I decided to break down the query with $count and add different wrappers instead due to the difficulty of offset pagination. Here’s what I ended up using:

   <?php $args = array(
      'posts_per_page' => 13,
      'post_type'      => 'post',
      'paged'          => get_query_var( 'paged' ), 
    );
  $wp_query = new WP_Query( $args );
  $count = 0; while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
  <?php if($count == 0): ?><!-- first highlighted post we show with categories on side -->
    <div class="mb-4 flex flex-col flex-col-reverse gap-4 md:mb-10 md:flex-row md:gap-10 ">
      <aside class="flex flex-col items-baseline gap-2 no-gap:mt-4 md:max-w-[200px] md:gap-4 no-gap:md:mt-0 no-gap:md:mr-10">
        <h2 class="flex-none font-denim-semibold text-sm xs:text-lg no-gap:mb-2 no-gap:md:mb-4">Categories</h2>
          <?php 
            $terms = get_terms( 'category' );
            echo '<ul class="flex flex-wrap gap-2 no-gap:-m-1">';
            echo '<li class="no-gap:m-1"><button class="flex justify-center items-center gap-2 rounded-xl select-none min-w-fit px-3 py-1 xs:px-3.5 xs:py-2 bg-brand-black ring-1 ring-inset ring-brand-black focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-brand-black/20 text-white text-xs xs:text-sm rounded-xl" tabindex="0" type="button"><span class="no-gap:ml-2 no-gap:first:ml-0">All</span></button></li>';
            foreach ( $terms as $term ) {
              $class = ( is_category( $term->name ) ) ? 'active' : ''; // assign this class if we're on the same category page as $term->name
              if($class == 'active'): 
                echo '<li class="no-gap:m-1"><a href="' . get_term_link( $term ) . '" class="' . $class . '"><button class="flex justify-center items-center gap-2 rounded-xl select-none min-w-fit px-3 py-1 xs:px-3.5 xs:py-2 bg-brand-black ring-1 ring-inset ring-brand-black focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-brand-black/20 text-white text-xs xs:text-sm rounded-xl" tabindex="0" type="button"><span class="no-gap:ml-2 no-gap:first:ml-0">' . $term->name . '</span></button></a></li>';
              else:
                echo '<li class="no-gap:m-1"><a href="' . get_term_link( $term ) . '" class="' . $class . '"><button class="flex justify-center items-center gap-2 rounded-xl select-none min-w-fit px-3 py-1 xs:px-3.5 xs:py-2 bg-transparent hover:bg-brand-black/10 active:bg-brand-black ring-1 ring-inset ring-brand-black focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-brand-black/20 text-brand-black active:text-white text-xs xs:text-sm rounded-xl" tabindex="0" type="button"><span class="no-gap:ml-2 no-gap:first:ml-0">' . $term->name . '</span></button></a></li>';
              endif;
            }
            echo '</ul>'; 
          ?>
      </aside>
      <a class="w-full " href="<?php the_permalink(); ?>">
          <article class="group isolate relative w-full rounded-3xl bg-brand-black shadow-lg transition overflow-hidden duration-300 overflow-border-transition will-change-contents hover:cursor-pointer hover:shadow-xl hover:scale-[1.025] active:scale-[0.975] active:shadow-md active:transform-none active:outline-none focus:outline-4 focus:outline-brand-blue focus:outline-offset-0 focus:outline">
            <div class="mx-auto flex w-60 flex-col text-center py-28 md:p-16 lg:p-28 transition duration-300 group-hover:scale-[1.025] md:w-4/5 lg:w-3/4">
              <span class="z-10 text-white opacity-70">4 min read</span>
              <h2 class="z-10 text-3xl text-white md:text-4xl "><span class="font-reckless-neue"><?php the_title(); ?></span></h2>
            </div>
            <div class="absolute right-1/2 top-1/2 -translate-y-1/2 translate-x-1/2 select-none transition duration-300 group-hover:scale-[1.05]">
              <object aria-label="Tuum blue thick wheel" class="pointer-events-none h-[1000px] min-w-[1000px] max-w-[1000px] animate-spin-slow md:h-[1250px] md:min-w-[1250px] md:max-w-[1250px] lg:h-[1500px] lg:min-w-[1500px] lg:max-w-[1500px]" data="<?php if(get_field('wheel')): ?><?php the_field('wheel'); ?><?php else: ?><?php bloginfo('template_url'); ?>/assets/img/about-us-bg.svg<?php endif; ?>" tabindex="-1" type="image/svg+xml"></object>
            </div>
          </article>
        </a>
      </div><!-- first loop -->
    <?php elseif($count == 1): ?><!-- second post we open up with new wrapper and section -->
      <section>
        <ul class="grid gap-4 md:gap-x-8 md:gap-y-10 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 pb-10 border-b-2 border-solid border-brand-beige-600">
            <?php get_template_part( 'templates/partials/component','postSmall'); ?>
          <?php else: ?><!-- from there we continue as normal -->
                <?php get_template_part( 'templates/partials/component','postSmall'); ?>
          <?php endif; ?>
          <?php $count++; endwhile; ?>
          <?php wp_reset_postdata(); ?>
        </ul><!-- close the post small boxes list -->
        <div class="navigation-wrap flex justify-center items-center gap-2 rounded-xl select-none min-w-fit tracking-normal px-7 py-4 bg-transparent ring-transparent text-brand-black text-xl rounded-xl font-denim-semibold w-full mt-4 justify-center col-span-2 md:col-span-3 lg:col-span-4">
          <?php echo paginate_links(array(
              'base' => get_pagenum_link(1) . '%_%',
              'format' => 'page/%#%',
              'prev_text' => '',
              'next_text' => ''
          )); ?>
        </div>
      </section><!-- close the small posts section wrap -->

Using Tailwind css but query tested and working to show 1st post highlighted aside with category filter and other posts in a 4post grid. Hope this helps someone struggling with this since I spent a lot of time with the offset solution and decided to still solve with a single loop for simplicity

[Author]

Posts