/* =============================================================================
   GALLERY  —  category cards, filter pills, photo grid, lightbox
   ========================================================================== */

.featured-photo {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
/* The banner crop is already the right shape (1400 × 520), so it is shown
   whole rather than cropped again into a different frame. */
.featured-photo img { width: 100%; height: auto; display: block; }
.featured-photo__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3rem clamp(1rem, 0.6rem + 1.6vw, 2rem) clamp(1rem, 0.7rem + 1vw, 1.5rem);
  background: linear-gradient(to top, rgba(9, 46, 24, 0.9), transparent);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
}

/* ---- Category cards ------------------------------------------------------ */
.mb-cats { margin-bottom: var(--space-6); }

.cat-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  text-align: left;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.cat-card:hover:not(:disabled) {
  transform: translateY(-3px);
  border-color: var(--green-500);
  box-shadow: var(--shadow);
}
.cat-card:disabled, .cat-card.is-empty { opacity: 0.45; cursor: not-allowed; }
.cat-card__title {
  display: block;
  font-family: var(--font-head);
  font-size: 0.79rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-600);
}
.cat-card__desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-muted);
}
.cat-card__count {
  display: grid;
  place-items: center;
  min-width: 28px; height: 28px;
  padding-inline: 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--gold-tint);
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--gold-700);
}

/* ---- Filter pills -------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: var(--space-6);
}
.filter {
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.filter:hover { border-color: var(--green-500); color: var(--green-600); }
.filter.is-active {
  background: var(--green-600);
  border-color: var(--green-600);
  color: #fff;
}

/* ---- Photo grid ---------------------------------------------------------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}
.photo-item { margin: 0; }
.photo-item.is-hidden-extra,
.photo-item.is-filtered-out { display: none; }

.photo-item__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--green-tint);
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
/* Every tile is the same shape. Mixing tall and wide tiles made rows as tall as
   their tallest member and left large gaps under the shorter ones.
   Upright photographs are framed higher up instead, which keeps the whole face
   in view as a head-and-shoulders crop. */
.photo-item--upright .photo-item__btn img { object-position: center 10%; }
.photo-item__btn img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* People stand in the upper part of a photograph, so when a crop is
     unavoidable it takes it off the bottom rather than off their faces. */
  object-position: center 32%;
  transition: transform var(--dur-slow) var(--ease-out);
}
.photo-item__btn:hover img { transform: scale(1.06); }

.photo-item__zoom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(9, 60, 28, 0.42);
  color: #fff;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.photo-item__btn:hover .photo-item__zoom,
.photo-item__btn:focus-visible .photo-item__zoom { opacity: 1; }
.photo-item__zoom .icon { width: 30px; height: 30px; stroke-width: 1.8; }

.photo-item__caption {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

@media (max-width: 620px) {
  .photo-grid { grid-template-columns: 1fr; }
}

/* ---- Lightbox ------------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: clamp(0.75rem, 0.4rem + 1.6vw, 2rem);
  background: rgba(7, 26, 14, 0.94);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.lightbox.is-open { opacity: 1; }

.lightbox__figure {
  margin: 0;
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  min-width: 0;
}
.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  object-fit: contain;
}
.lightbox__caption {
  max-width: 62ch;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.92rem;
  line-height: 1.55;
}

.lightbox__close,
.lightbox__nav {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--gold-500); color: var(--ink-strong); transform: scale(1.07); }
.lightbox__close { position: absolute; top: 1rem; right: 1rem; z-index: 2; }
.lightbox__close .icon, .lightbox__nav .icon { width: 22px; height: 22px; stroke-width: 2.2; }

.lightbox__counter {
  position: absolute;
  left: 50%; bottom: 0.9rem;
  transform: translateX(-50%);
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 640px) {
  .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lightbox__figure { grid-row: 1; }
  .lightbox__nav { position: absolute; bottom: 2.6rem; }
  .lightbox__nav--prev { left: 1rem; }
  .lightbox__nav--next { right: 1rem; }
}