/* ========================================
   Waterfall Gallery — CSS Columns Layout
   Used by month album pages
   ======================================== */

.waterfall-gallery {
  column-count: 4;
  column-gap: 12px;
  padding: 0;
  margin: 0;
}

.waterfall-item {
  break-inside: avoid;
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--tab-botton-bg, #f0f0f0);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.waterfall-item:hover {
  transform: translateY(-2px);
}

.waterfall-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.waterfall-item:hover img {
  transform: scale(1.03);
}

/* ── responsive ── */
@media (max-width: 1100px) {
  .waterfall-gallery { column-count: 3; }
}
@media (max-width: 768px) {
  .waterfall-gallery { column-count: 2; column-gap: 8px; }
}
@media (max-width: 480px) {
  .waterfall-gallery { column-count: 1; }
}

/* ── empty state ── */
.gallery-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--minor, #999);
}
.gallery-empty .empty-icon {
  font-size: 2.5em;
  margin-bottom: 12px;
}

/* ── dark mode ── */
[data-theme="dark"] .waterfall-item {
  background: #2a2a2a;
}