<style>
  .articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    align-items: start;
  }

  .article-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  .home-list {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
  }

  .r-img1 {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #ecf0f1;
  }


  .r-img1 img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    display: block;
  }

  .article-content {
    flex: 1;
    padding-top: 14px;
  }

  .article-content h2 {
    margin: 0 0 8px;
    font-size: 1.25rem;
  }

  .article-content p {
    margin: 0 0 8px;
    color: #555;
  }

  .article-content small {
    color: #888;
  }

  @media (max-width: 768px) {
    .articles-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .article-item {
      padding: 14px;
    }

    .article-content h2 {
      font-size: 1.05rem;
    }

    .article-content p {
      font-size: 0.92rem;
    }
  }

  @media (max-width: 480px) {
    .articles-grid {
      gap: 12px;
    }

    .article-item {
      padding: 12px;
    }

    .article-content {
      padding-top: 12px;
    }

    .article-content h2 {
      font-size: 1rem;
    }

    .article-content p,
    .article-content small {
      font-size: 0.85rem;
    }
  }
</style>
<?php
include "config.php";
$category = $_GET['category'] ?? 'Latest';
$stmt = $dbh->prepare("SELECT * FROM articles WHERE category = :category ORDER BY published_at DESC");
$stmt->execute(['category' => $category]);
$articles = $stmt->fetchAll();

if (empty($articles)) {
  echo "<p>No articles found in this category.</p>";
} else {
  echo '<div class="articles-grid">';
  foreach ($articles as $article): 
    
    // 👇 PATH THEEK KARNE KA SMART LOGIC 👇
    $raw_url = trim($article['image_url']);
    
    if (empty($raw_url)) {
        // Agar DB me image nahi hai, toh default logo dikhao
        $final_img = './uploads/logo-grey.png';
    } elseif (strpos($raw_url, 'http') === 0) {
        // Agar pehle se internet ki link hai (http/https) toh wahi rakho
        $final_img = $raw_url;
    } else {
        // Agar local image hai, toh aage ka slash hata kar './' laga do
        // Isse tumhara 'dot' lagane wala kaam automatically ho jayega!
        $final_img = './' . ltrim($raw_url, '/');
    }
    // 👆 LOGIC END 👆

?>
    <a href="<?= htmlspecialchars($article['article_url']) ?>" target="_blank" class="home-list" rel="noopener noreferrer">
      <div class="article-item">
        <div class="r-img1">
          <img
            alt="<?= htmlspecialchars($article['title']) ?>"
            src="<?= htmlspecialchars($final_img) ?>"
            loading="lazy" />
        </div>
        <div class="article-content">
          <h2><?= htmlspecialchars($article['title']) ?></h2>
          <p><?= htmlspecialchars($article['summary']) ?></p>
          <small>
            <strong><?= htmlspecialchars($article['category']) ?></strong> &middot;
            <?= date('F j, Y', strtotime($article['published_at'])) ?>
          </small>
        </div>
      </div>
    </a> <?php 
  endforeach;
  echo '</div>';
}
?>