/* =========================================================
   Masonry Image Gallery (Gallery page)
   - No cropping: every image keeps its natural aspect ratio
   - JS (gallery-masonry.js) switches to a grid with row-spans
     so items flow left → right; without JS it falls back to
     CSS columns (still masonry, top → bottom).
   ========================================================= */
.naman-masonry {
  --nm-gap: 24px;
  --nm-cols: 4;
  --nm-row: 8px;
  position: relative;
  display: block !important;
  column-count: var(--nm-cols);
  column-gap: var(--nm-gap);
}

/* JS-enhanced layout */
.naman-masonry.is-masonry {
  display: grid !important;
  column-count: initial;
  grid-template-columns: repeat(var(--nm-cols), minmax(0, 1fr));
  grid-auto-rows: var(--nm-row);
  grid-gap: 0 var(--nm-gap) !important;
  gap: 0 var(--nm-gap) !important;
  align-items: start;
}

.naman-masonry .nm-item {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--nm-gap);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
.naman-masonry.is-masonry .nm-item {
  display: block;
  margin: 0;
}

.naman-masonry .nm-item__link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: var(--gray-2, #f4f5fa);
  box-shadow: 0 10px 30px rgba(3, 36, 18, 0.08);
}
.naman-masonry .nm-item__link img {
  display: block;
  width: 100%;
  height: auto !important;
  max-width: 100%;
  object-fit: initial; /* keep natural ratio (width/height attrs reserve space before load) */
  border-radius: 16px;
  transition: transform 0.6s ease, opacity 0.4s ease;
}

/* Hover overlay */
.naman-masonry .nm-item__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  color: var(--white, #fff);
  background: linear-gradient(180deg, rgba(3, 36, 18, 0.15) 0%, rgba(3, 36, 18, 0.75) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.naman-masonry .nm-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 18px;
  color: var(--white, #fff);
  background: var(--main-color-one, #b69974);
  border-radius: 50%;
  transform: scale(0.6);
  transition: transform 0.35s ease;
}
.naman-masonry .nm-item__caption {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
.naman-masonry .nm-item__link:hover img,
.naman-masonry .nm-item__link:focus-visible img { transform: scale(1.06); }
.naman-masonry .nm-item__link:hover .nm-item__overlay,
.naman-masonry .nm-item__link:focus-visible .nm-item__overlay { opacity: 1; }
.naman-masonry .nm-item__link:hover .nm-item__icon,
.naman-masonry .nm-item__link:focus-visible .nm-item__icon { transform: scale(1); }
.naman-masonry .nm-item__link:focus-visible {
  outline: 3px solid var(--main-color-one, #b69974);
  outline-offset: 3px;
}

/* Fade-in once each image has loaded */
.naman-masonry.is-masonry .nm-item { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.naman-masonry.is-masonry .nm-item.is-loaded { opacity: 1; transform: none; }

/* Responsive column count */
@media (max-width: 1199px) { .naman-masonry { --nm-cols: 3; } }
@media (max-width: 767px)  { .naman-masonry { --nm-cols: 2; --nm-gap: 14px; } }
@media (max-width: 400px)  { .naman-masonry { --nm-cols: 1; } }

@media (prefers-reduced-motion: reduce) {
  .naman-masonry .nm-item,
  .naman-masonry .nm-item__link img,
  .naman-masonry .nm-item__overlay,
  .naman-masonry .nm-item__icon { transition: none !important; }
  .naman-masonry.is-masonry .nm-item { opacity: 1; transform: none; }
}