/* ---- Filter bar ---- */
.gallery-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.gallery-filter-chip {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 10px 22px;
  border-radius: 50px;
  border: 1px solid var(--at-neutral-100, #dfdfdf);
  background: transparent;
  color: var(--at-neutral-900, #1d1d1d);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.gallery-filter-chip:hover {
  border-color: var(--at-theme-white, #fff);
  transform: translateY(-1px);
}
.gallery-filter-chip:focus-visible {
  outline: 2px solid var(--at-theme-white, #ffffff);
  outline-offset: 2px;
}
.gallery-filter-chip.is-active {
  background: var(--at-theme-white, #fff);
  border-color: var(--at-theme-white, #fff);
  color: var(--at-theme-black, #000);
}

/* ---- Column masonry — plain CSS multi-column flow, no JS layout engine.
   Each .gallery-tile keeps its image's natural aspect ratio and is placed
   into whichever column comes next in source order; break-inside: avoid
   keeps a tile from splitting across two columns. ---- */
.gallery-masonry {
  column-count: 2;
  column-gap: 14px;
}
@media (min-width: 576px) {
  .gallery-masonry {
    column-count: 3;
  }
}
@media (min-width: 992px) {
  .gallery-masonry {
    column-count: 4;
  }
}
@media (min-width: 1400px) {
  .gallery-masonry {
    column-count: 5;
  }
}

.gallery-tile {
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 14px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--at-neutral-100, #dfdfdf);
  background: var(--at-neutral-50, #f2f2f2);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
  animation: galleryTileIn 0.4s ease both;
}
@keyframes galleryTileIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.gallery-tile:hover,
.gallery-tile:focus-visible {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.35),
        0 0 20px rgba(255, 255, 255, 0.12),
        0 20px 40px -20px rgba(15, 15, 15, 0.35);

    border-color: rgba(255, 255, 255, 0.4);
}
/* .gallery-tile:hover,
.gallery-tile:focus-visible {
  box-shadow: 0 0 0 1px rgba(240, 70, 14, 0.4), 0 20px 40px -20px rgba(15, 15, 15, 0.35);
  border-color: rgba(240, 70, 14, 0.4);
} */
.gallery-tile:focus-visible {
  outline: 2px solid var(--at-theme-white, #ffffff);
  outline-offset: 3px;
}
.gallery-tile img {
  display: block;
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.gallery-tile:hover img {
  transform: scale(1.06);
}

/* Our source photos all share roughly the same landscape aspect ratio, so
   plain height:auto packs every tile to nearly the same height and the
   "masonry" look disappears — it reads as a plain uniform grid instead of
   the varied Pinterest-style layout. Force a repeating cycle of different
   crop heights instead, independent of each image's real aspect ratio, so
   neighboring tiles are never the same height. */
.gallery-tile:nth-child(5n + 1) img {
  height: 220px;
}
.gallery-tile:nth-child(5n + 2) img {
  height: 320px;
}
.gallery-tile:nth-child(5n + 3) img {
  height: 260px;
}
.gallery-tile:nth-child(5n + 4) img {
  height: 380px;
}
.gallery-tile:nth-child(5n + 5) img {
  height: 300px;
}
@media (max-width: 575.98px) {
  .gallery-tile:nth-child(5n + 1) img {
    height: 160px;
  }
  .gallery-tile:nth-child(5n + 2) img {
    height: 230px;
  }
  .gallery-tile:nth-child(5n + 3) img {
    height: 190px;
  }
  .gallery-tile:nth-child(5n + 4) img {
    height: 270px;
  }
  .gallery-tile:nth-child(5n + 5) img {
    height: 210px;
  }
}

.gallery-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-tile,
  .gallery-tile img {
    transition: none;
    animation: none;
  }
}
@media (max-width: 649.98px) {
  .gallery-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 10px;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  .gallery-filter-bar::-webkit-scrollbar {
    display: none;
  }

  .gallery-filter-chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}