/* =====================================================
   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
===================================================== */

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

/* Smart auto-fit grid */
.image-row-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.image-row-3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.image-row-4 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.image-row-5 {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.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%;
  }
} /* ✅ CLOSE IT */

@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%;
  }
}
.logo img {
  height: 100px;
  width: auto;
  max-width: none;
}
    /* =========================
   MEDIA / IMAGE SAFETY
========================= */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.media {
  overflow: hidden;
}

.media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* =========================
   PHOTO SECTION SYSTEM
========================= */

.section {
  width: 100%;
  padding: var(--space-section) 0;
  position: relative;
}

/* NO max-width, ever */

/* TEXT BLOCK */
.photo-text {
  max-width: 700px;
  margin: 0 auto 2rem;
}

.photo-title {
  margin-bottom: 0.5rem;
}

.photo-description {
  color: #555;
  font-size: 1.05rem;
}

/* OPTIONAL TRANSITION LINE */
.photo-transition {
  margin-top: 1.5rem;
  font-style: italic;
  color: #777;
}
/* =========================
   LEGACY ISOLATION (P7 ONLY)
========================= */

.p7HMY,
.p7AGM {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}