<?php get_header(); ?>

<main class="max-w-7xl mx-auto px-4 py-8 flex flex-col <?php echo esc_attr(kumibox_sidebar_class()); ?> gap-8">
    <section class="lg:w-2/3">
        
        <header class="mb-8 border-b-2 border-black dark:border-white pb-4">
            <h1 class="text-3xl font-black text-[var(--text-main)] uppercase">
                <?php the_archive_title(); ?>
            </h1>
            <?php if (get_the_archive_description()) : ?>
                <div class="mt-2 text-gray-500"><?php the_archive_description(); ?></div>
            <?php endif; ?>
        </header>

        <div class="space-y-6 mb-12">
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                
                <article id="post-<?php the_ID(); ?>" <?php post_class('flex flex-col sm:flex-row bg-[var(--bg-card)] border border-[var(--border-custom)] hover:shadow-lg transition-shadow img-zoom-container'); ?>>
                    <div class="sm:w-1/3 h-56 sm:h-auto overflow-hidden relative">
                        <a href="<?php the_permalink(); ?>">
                            <?php if (has_post_thumbnail()) : ?>
                                <?php the_post_thumbnail('medium', array('class' => 'w-full h-full object-cover img-zoom')); ?>
                            <?php else: ?>
                                <div class="w-full h-full bg-gray-200 dark:bg-gray-700 img-zoom"></div>
                            <?php endif; ?>
                        </a>
                    </div>
                    <div class="sm:w-2/3 p-5 flex flex-col justify-center">
                        <h2 class="text-xl font-bold mb-2 text-[var(--text-main)] leading-tight">
                            <a href="<?php the_permalink(); ?>" class="hover:text-[var(--color-primary)] transition-colors"><?php the_title(); ?></a>
                        </h2>
                        
                        <?php if (get_theme_mod('show_meta_date', true)) : ?>
                        <div class="text-[11px] text-gray-500 uppercase font-bold tracking-wider mb-3">
                            <span><i class="far fa-clock text-[var(--color-primary)]"></i> <?php echo get_the_date(); ?></span>
                        </div>
                        <?php endif; ?>

                        <div class="text-sm opacity-80 line-clamp-3 mb-4 leading-relaxed">
                            <?php the_excerpt(); ?>
                        </div>
                    </div>
                </article>

            <?php endwhile; else: ?>
                <p>Brak artykułów w tej kategorii.</p>
            <?php endif; ?>
        </div>

        <div class="mb-12 flex justify-center items-center gap-2 font-bold text-[var(--color-primary)] pagination-links">
            <?php 
            echo paginate_links(array(
                'prev_text' => '<i class="fas fa-angle-double-left"></i>',
                'next_text' => '<i class="fas fa-angle-double-right"></i>',
            )); 
            ?>
        </div>
    </section>

    <aside class="lg:w-1/3 space-y-8">
        <?php if (is_active_sidebar('main-sidebar')) dynamic_sidebar('main-sidebar'); ?>
    </aside>
</main>

<?php get_footer(); ?>