<?php
/**
 * The main template file
 */
get_header();
?>

<div style="font-family:'Sora',sans-serif; color:#241009; background:#FBF7EF; overflow:hidden;">

  <!-- ===================== HERO ===================== -->
  <section style="position:relative; height:320px; overflow:hidden; background:#241009; display:flex; align-items:center;">
    <div style="position:absolute; inset:0; background:linear-gradient(180deg, rgba(36,16,9,0.5) 0%, rgba(36,16,9,0.82) 100%); pointer-events:none;"></div>
    <div style="position:relative; max-width:1180px; margin:0 auto; width:100%; padding:0 56px;">
      <h1 style="font-family:'Baloo 2',sans-serif; font-weight:800; font-size:54px; line-height:1; letter-spacing:-0.02em; color:#FBF7EF; margin:0;">Actualités & Articles</h1>
    </div>
  </section>

  <!-- ===================== CONTENT GRID ===================== -->
  <section style="max-width:1180px; margin:0 auto; padding:64px 56px 96px;">
    <?php if ( have_posts() ) : ?>
        <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:28px;">
          <?php
          while ( have_posts() ) : the_post();
              ?>
              <a href="<?php the_permalink(); ?>" class="gb-card" style="background:#fff; border-radius:20px; overflow:hidden; border:1px solid #EFE2CE; display:block; height:100%;">
                <div style="height:200px; overflow:hidden; position:relative; background-color:#3A2415;">
                  <?php if (has_post_thumbnail()) { the_post_thumbnail('medium_large', array('style' => 'width:100%; height:100%; object-fit:cover;')); } ?>
                </div>
                <div style="padding:24px;">
                  <div style="display:flex; align-items:center; gap:10px; margin-bottom:14px;">
                    <span style="font-weight:600; font-size:11px; letter-spacing:0.08em; color:#E8431E; text-transform:uppercase;">Article</span>
                    <span style="width:3px; height:3px; border-radius:50%; background:#C9B79A;"></span>
                    <span style="font-weight:400; font-size:12px; color:#9A8270;"><?php echo get_the_date('d M. Y'); ?></span>
                  </div>
                  <div style="font-family:'Baloo 2',sans-serif; font-weight:700; font-size:22px; color:#241009; line-height:1.15; margin-bottom:8px;"><?php the_title(); ?></div>
                  <div style="font-weight:400; font-size:14.5px; color:#6A4A38; line-height:1.55; margin-bottom:16px;"><?php echo wp_trim_words(get_the_excerpt(), 18); ?></div>
                  <div class="gb-navlink" style="display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:#5D351C;">Découvrir
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#5D351C" stroke-width="2.2"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                  </div>
                </div>
              </a>
              <?php
          endwhile;
          ?>
        </div>
        <div style="margin-top:40px; display:flex; justify-content:center; gap:16px;">
            <?php the_posts_pagination(); ?>
        </div>
    <?php endif; ?>
  </section>

</div>

<?php
get_footer();
