/* Masonry Gallery */

/* Category heading */
.category-section { max-width: 1200px; margin: 0 auto 32px auto; padding: 0 20px; }
.category-title {
  margin: 26px 0 14px 0;
  font-size: 1.2rem; font-weight: 800; color: var(--text);
  position: relative; display: inline-block; padding-bottom: 6px;
}
.category-title::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  border-radius: 2px;
}

.photo-grid {
  list-style: none; margin: 0 auto; padding: 0;
  column-count: 4; column-gap: 16px; /* Masonry */
}

.photo-item {
  position: relative; break-inside: avoid; margin: 0 0 16px 0;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(15,23,42,0.10);
  transition: transform .18s ease, box-shadow .18s ease;
  background: var(--surface);
}
.photo-item:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,23,42,0.18); }

.photo-image {
  display: block; width: 100%; height: auto; object-fit: cover; background: #e9e9e9;
  max-width: 100%;
  cursor: zoom-in; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transform: scale(1); transition: transform .25s ease;
}
.photo-item:hover .photo-image { transform: scale(1.03); }

/* Title overlay */
.photo-item h1 {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 10px 12px; color: #fff; font-size: 1rem; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.35); z-index: 2; pointer-events: none;
}
.photo-item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
  opacity: 0; transition: opacity .2s ease;
}
.photo-item:hover::after { opacity: 1; }

/* No-image placeholder */
.photo-item:not(:has(.photo-image)) {
  min-height: 140px; display: flex; align-items: center; justify-content: center; color: var(--muted);
  font-style: italic; padding: 22px;
}

/* Responsive columns */
@media (max-width: 1200px) { .photo-grid { column-count: 3; } }
@media (max-width: 900px)  { .photo-grid { column-count: 2; column-gap: 14px; } }
@media (max-width: 600px)  { .photo-grid { column-count: 1; column-gap: 12px; } .category-section { padding: 0 14px; } }

/* Optional categories list */
.categories-list { max-width: 1200px; margin: 12px auto 40px auto; padding: 0 20px; }
.categories-list ul { display: flex; flex-wrap: wrap; gap: 10px 16px; list-style: disc; padding-left: 20px; }
@media (max-width: 768px) {
  .categories-list { padding: 0 16px; margin-bottom: 32px; }
  .categories-list ul { gap: 8px 12px; padding-left: 16px; }
}
@media (max-width: 480px) {
  .categories-list { padding: 0 12px; margin-bottom: 24px; }
  .categories-list ul { gap: 6px 10px; padding-left: 12px; font-size: .9rem; }
}

/* Lightbox */
.lightbox-overlay {
  position: fixed; inset: 0; backdrop-filter: blur(2px);
  background: rgba(0,0,0,0.82); display: flex; align-items: center; justify-content: center;
  padding: 24px; z-index: 1000; opacity: 1; visibility: visible; transition: opacity 200ms ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.lightbox-overlay[hidden] { opacity: 0; visibility: hidden; pointer-events: none; }
.lightbox-img { max-width: 90vw; max-height: 90vh; border-radius: 10px; box-shadow: 0 14px 48px rgba(0,0,0,0.45); transform: scale(.985); opacity: 0; transition: transform 200ms ease, opacity 200ms ease; }
.lightbox-overlay:not([hidden]) .lightbox-img { transform: scale(1); opacity: 1; }

.lightbox-close { position: absolute; top: 16px; right: 20px; background: rgba(255,255,255,0.16); color: #fff; border: none; width: 42px; height: 42px; border-radius: 50%; font-size: 26px; cursor: pointer; line-height: 1; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.lightbox-close:hover { background: rgba(255,255,255,0.26); }

.lightbox-prev, .lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.16); color: #fff; border: none; width: 48px; height: 64px; border-radius: 10px;
  font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 160ms ease;
  user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.lightbox-prev { left: 16px; } .lightbox-next { right: 16px; }
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.26); }

@media (max-width: 768px) {
  .lightbox-overlay { padding: 16px; }
  .lightbox-img { max-width: 95vw; max-height: 85vh; }
  .lightbox-close { width: 36px; height: 36px; font-size: 20px; top: 12px; right: 16px; }
  .lightbox-prev, .lightbox-next { width: 40px; height: 56px; font-size: 20px; }
  .lightbox-prev { left: 12px; } .lightbox-next { right: 12px; }
}
@media (max-width: 480px) {
  .lightbox-overlay { padding: 12px; }
  .lightbox-img { max-width: 98vw; max-height: 80vh; }
  .lightbox-close { width: 32px; height: 32px; font-size: 18px; top: 8px; right: 12px; }
  .lightbox-prev, .lightbox-next { width: 36px; height: 48px; font-size: 18px; }
  .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; }
}