/* ===============================================================================
   gallery.css — public masonry photo grid
   Uses CSS multi-column layout for the masonry effect: it's native, fast, and
   needs zero JavaScript for positioning (unlike a JS masonry library). Tiles keep
   their natural aspect ratio and the columns balance automatically.
   =============================================================================== */

.gallery-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 14px 56px;
}

/* Column count steps down as the viewport narrows. break-inside: avoid keeps a
   photo from being split across two columns. Small gap keeps focus on the images. */
.gallery {
  column-count: 4;
  column-gap: 8px;
}
@media (max-width: 1100px) { .gallery { column-count: 3; } }
@media (max-width: 760px)  { .gallery { column-count: 2; } }
@media (max-width: 460px)  { .gallery { column-count: 1; } }

.gallery figure {
  break-inside: avoid;
  margin: 0 0 8px;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  cursor: pointer;
  background: var(--slate);   /* placeholder tone while a lazy image loads */
}
.gallery img {
  width: 100%;
  height: auto;               /* with the width/height attrs, the browser reserves
                                 the right space → no layout shift as images load */
  display: block;
  transition: transform 0.4s ease;
}
.gallery figure:hover img { transform: scale(1.04); }

/* Title overlay: hidden until hover, fading up from a bottom gradient so it's
   legible over any photo. */
.gallery .cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 12px 10px;
  font-family: 'Bitter', serif;
  font-size: 0.9rem;
  color: var(--cream);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery figure:hover .cap { opacity: 1; }

/* Loading / empty states, both centered and muted. */
.gallery-loading,
.gallery-empty {
  text-align: center;
  color: var(--sandstone-light);
  padding: 90px 20px;
  font-size: 1rem;
}