<?php
include 'includes/header.php';
include_once __DIR__ . '/admin/config/db.php';

$result = mysqli_query($conn, "SELECT image FROM case_studies ORDER BY id DESC");
?>

<style>
/* ===== GALLERY PAGE ===== */
.gallery-page {
  background: linear-gradient(180deg, #fff7ec 0%, #ffffff 100%);
}

/* SECTION TITLE */
.section-title h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 34px;
  font-weight: 900;
  background: linear-gradient(90deg,#ff9933,#ff6a00);
  -webkit-background-clip: text;
 
}

.section-title p {
  color: #1faa06;
  font-weight: 600;
}

/* ===== GALLERY ITEM (NO BLANK SPACE) ===== */
.gallery-item {
  width: 100%;
  aspect-ratio: 16 / 9;          /* 🔥 MATCH BANNER IMAGES */
  border-radius: 16px;
  border: 4px solid #ff9933;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

/* IMAGE – FULL FILL */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* 🔥 NO WHITE SPACE */
  object-position: center;
  display: block;
}

/* HOVER (DESKTOP ONLY) */
@media (hover:hover) {
  .gallery-item:hover img {
    transform: scale(1.05);
    transition: 0.4s ease;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .section-title h2 { font-size: 26px; }
  .section-title p { font-size: 14px; }

  .gallery-item {
    border-width: 3px;
    border-radius: 14px;
    aspect-ratio: 4 / 3;   /* better for mobile */
  }
}
</style>

<main class="main">
  <div class="gallery-page">
    <section class="section py-5">
      <div class="container">

        <div class="section-title text-center mb-4">
          <h2>गैलरी</h2>
          <p>हमारी हाल की गतिविधियाँ</p>
        </div>

        <div class="row g-4">

          <?php if(mysqli_num_rows($result) > 0): ?>
            <?php while($row = mysqli_fetch_assoc($result)): ?>

              <?php
              $img = trim($row['image']);
              if (file_exists(__DIR__."/admin/uploads/case_studies/".$img)) {
                $path = "admin/uploads/case_studies/".$img;
              } elseif (file_exists(__DIR__."/uploads/case_studies/".$img)) {
                $path = "uploads/case_studies/".$img;
              } else {
                $path = "assets/img/placeholder.jpg";
              }
              ?>

              <!-- ✅ 2 BOXES PER ROW ON DESKTOP -->
              <div class="col-6 col-md-6 col-lg-6">
                <div class="gallery-item">
                  <img src="<?= $path ?>" alt="Gallery Image">
                </div>
              </div>

            <?php endwhile; ?>
          <?php else: ?>
            <div class="col-12 text-center text-muted">
              कोई छवि उपलब्ध नहीं है
            </div>
          <?php endif; ?>

        </div>

      </div>
    </section>
  </div>
</main>

<?php include 'includes/footer.php'; ?>
