/* =====================================================
   UTILITIES.CSS
   -----------------------------------------------------
   PURPOSE:
   - Small, single-purpose helper classes
   - No layout systems or components
===================================================== */

/* =====================================================
   IMAGE GRID SYSTEM (UNIFIED)
   -----------------------------------------------------
   - Supports 2–5 columns
   - No clipping
   - Consistent spacing
   - Fully responsive
===================================================== */
/* =====================================================
   UTILITIES.CSS — CLEAN PRODUCTION BUILD
   -----------------------------------------------------
   PURPOSE:
   - Single-source utility styles
   - Removed duplicates and conflicting legacy rules
   - Stable responsive image grid system (2–5 columns)
===================================================== */

/* =====================================================
   GRID SYSTEM ALIGNMENT (CRITICAL FIX)
===================================================== */

.image-row-2,
.image-row-3,
.image-row-4,
.image-row-5 {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* Equal columns */
.image-row-2 .img-wrap { flex: 1 1 calc(50% - 16px); }
.image-row-3 .img-wrap { flex: 1 1 calc(33.333% - 16px); }
.image-row-4 .img-wrap { flex: 1 1 calc(25% - 16px); }
.image-row-5 .img-wrap { flex: 1 1 calc(20% - 16px); }

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

.img-wrap img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

/* hover */
.image-row-2 img:hover,
.image-row-3 img:hover,
.image-row-4 img:hover,
.image-row-5 img:hover {
  transform: scale(1.02);
}

/* responsive */
@media (max-width: 900px) {
  .image-row-3 .img-wrap,
  .image-row-4 .img-wrap,
  .image-row-5 .img-wrap {
    flex: 1 1 48%;
  }

  .img-wrap img {
    height: 240px;
  }
}

@media (max-width: 600px) {
  .image-row-2 .img-wrap,
  .image-row-3 .img-wrap,
  .image-row-4 .img-wrap,
  .image-row-5 .img-wrap {
    flex: 1 1 100%;
  }

  .img-wrap img {
    height: auto;
  }
}