/* ── MASONRY GALLERY ── */
.photo-gallery {
  columns: 4 200px;
  column-gap: 1rem;
}

.photo-item {
  break-inside: avoid;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 1rem;
  display: block;
  outline: 1px solid var(--border);
  outline-offset: -1px;
}

.photo-item-img,
.photo-item-placeholder {
  width: 100%;
  display: block;
  transition: transform .55s var(--ease);
}
.photo-item-img { object-fit: cover; }

.photo-item:hover .photo-item-img,
.photo-item:hover .photo-item-placeholder {
  transform: scale(1.05);
}

.photo-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.15) 50%, transparent 100%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
}
.photo-item:hover .photo-item-overlay { opacity: 1; }

.photo-item-title {
  font-family: 'Syne', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  transform: translateY(5px);
  transition: transform .35s var(--ease);
}
.photo-item-meta {
  font-size: .7rem;
  color: rgba(255,255,255,.6);
  margin-top: .2rem;
  letter-spacing: .03em;
  transform: translateY(5px);
  transition: transform .35s .05s var(--ease);
}
.photo-item:hover .photo-item-title,
.photo-item:hover .photo-item-meta { transform: translateY(0); }

.photo-item-badge {
  position: absolute;
  top: .7rem; left: .7rem;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  padding: .18rem .55rem;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .3s, transform .3s var(--ease);
}
.photo-item:hover .photo-item-badge { opacity: 1; transform: translateY(0); }

.photo-item-zoom {
  position: absolute;
  top: .7rem; right: .7rem;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s, transform .3s var(--ease-back);
}
.photo-item-zoom svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; }
.photo-item:hover .photo-item-zoom { opacity: 1; transform: scale(1); }

/* ── PHOTO LIGHTBOX ── */
.photo-lightbox {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,.96);
  backdrop-filter: blur(28px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.photo-lightbox.open { opacity: 1; pointer-events: all; }

.photo-lightbox-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
  max-width: min(92vw, 1100px);
}

.photo-lightbox-media {
  max-width: 100%;
  max-height: 78svh;
  border-radius: 10px;
  object-fit: contain;
  display: block;
  transform: scale(.92);
  transition: transform .4s var(--ease-back);
}
.photo-lightbox-placeholder-lg {
  max-width: min(88vw, 900px);
  border-radius: 10px;
  display: block;
  transform: scale(.92);
  transition: transform .4s var(--ease-back);
}
.photo-lightbox.open .photo-lightbox-media,
.photo-lightbox.open .photo-lightbox-placeholder-lg { transform: scale(1); }

.photo-lightbox-caption { text-align: center; }
.photo-lightbox-caption h3 { font-family: 'Syne', sans-serif; font-size: 1.1rem; font-weight: 700; color: #fff; }
.photo-lightbox-caption p { font-size: .78rem; color: rgba(255,255,255,.45); margin-top: .2rem; }

.photo-lightbox-close {
  position: fixed; top: 1.4rem; right: 1.4rem;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.07);
  color: #fff; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s var(--ease-back);
}
.photo-lightbox-close:hover { background: var(--accent); transform: scale(1.1) rotate(90deg); }

.photo-lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.07);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.photo-lightbox-nav:hover { background: rgba(255,255,255,.16); }
.photo-lightbox-nav.prev { left: 1.2rem; }
.photo-lightbox-nav.next { right: 1.2rem; }
.photo-lightbox-nav svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 768px) {
  .photo-gallery { columns: 2 160px; }
  .photo-lightbox-nav { display: none; }
}
@media (max-width: 500px) {
  .photo-gallery { columns: 2 130px; }
}