/* ==========================================================================
   GALLERY — masonry (CSS columns) + a hand-built lightbox. Tiles are
   honest placeholders (halftone texture + category tag) until real
   project photography exists — see README → "What's not real yet".
   ========================================================================== */

.gallery__item {
  position:relative;
  overflow:hidden;
}

.gallery__item img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.gallery__item-title,
.gallery__item-tag {
  position:relative;
  z-index:2;
}
   .gallery__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xl);
}

.gallery__filter {
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.gallery__filter.is-active {
  background: var(--cp-ink);
  border-color: var(--cp-ink);
  color: var(--cream-100);
}

.gallery__masonry {
  columns: 3;
  column-gap: var(--space-md);
}

@media (max-width: 900px) {
  .gallery__masonry { columns: 2; }
}

@media (max-width: 560px) {
  .gallery__masonry { columns: 1; }
}

.gallery__item {
  position: relative;
  display: block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(15, 10, 4, 0.06) 1px, transparent 1.4px) 0 0 / 16px 16px,
    linear-gradient(155deg, var(--cream-300), var(--cream-100));
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.gallery__item:hover {
  transform: translateY(-4px);
}

.gallery__item:nth-child(3n+1) { aspect-ratio: 3 / 4; }
.gallery__item:nth-child(3n+2) { aspect-ratio: 1 / 1; }
.gallery__item:nth-child(3n)   { aspect-ratio: 4 / 5; }

.gallery__item[hidden] {
  display: none;
}

.gallery__item-tag {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--cp-ink);
  color: var(--cream-100);
}

.gallery__item-title {
  position: absolute;
  left: var(--space-sm);
  right: var(--space-sm);
  bottom: var(--space-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--cp-ink);
  text-align: left;
}

/* ---- Lightbox ---- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: rgba(15, 10, 4, 0.88);
}

.lightbox[hidden] {
  display: none;
}

.lightbox__stage {
  max-width: 640px;
  margin-inline: auto;
  width: 100%;
}

.lightbox__tile {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.4px) 0 0 / 18px 18px,
    linear-gradient(155deg, var(--orange-400), var(--orange-600));
}

.lightbox__caption {
  margin-top: var(--space-md);
  color: var(--cream-100);
  text-align: center;
}
.lightbox__tile {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  object-fit: cover;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1.4px) 0 0 / 18px 18px,
    linear-gradient(155deg, var(--orange-400), var(--orange-600));
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  color: var(--cream-100);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(245, 237, 223, 0.3);
}

.lightbox__close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
}

.lightbox__prev svg,
.lightbox__next svg,
.lightbox__close svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 700px) {
  .lightbox { grid-template-columns: 1fr; }
  .lightbox__prev, .lightbox__next { display: none; }
}