/* Section 8 — Gallery (masonry via CSS columns) */
.ap-gallery__grid { columns: 3 260px; column-gap: 1rem; margin-top: 1rem; }
.ap-gallery__item {
  display: block; width: 100%; margin: 0 0 1rem; padding: 0; border: 0;
  background: none; cursor: zoom-in; position: relative;
  border-radius: var(--ap-radius); overflow: hidden;
  break-inside: avoid; box-shadow: var(--ap-shadow-sm);
}
.ap-gallery__item img {
  width: 100%; height: auto; display: block;
  transition: transform var(--ap-dur-slow) var(--ap-ease), filter var(--ap-dur) var(--ap-ease);
}
.ap-gallery__item:hover img { transform: scale(1.05); filter: brightness(0.92); }
.ap-gallery__zoom {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; opacity: 0; transition: opacity var(--ap-dur) var(--ap-ease);
}
.ap-gallery__zoom svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.ap-gallery__item:hover .ap-gallery__zoom { opacity: 1; }

/* Lightbox */
.ap-lightbox {
  position: fixed; inset: 0; z-index: var(--ap-z-modal);
  background: rgba(21,43,37,0.92);
  display: grid; grid-template-columns: auto 1fr auto; place-items: center;
  gap: 1rem; padding: clamp(1rem, 3vw, 3rem);
  opacity: 0; transition: opacity var(--ap-dur) var(--ap-ease);
}
.ap-lightbox.is-open { opacity: 1; }
.ap-lightbox[hidden] { display: none; }
.ap-lightbox__figure { margin: 0; max-width: 100%; max-height: 88vh; text-align: center; }
.ap-lightbox__figure img { max-width: 100%; max-height: 80vh; border-radius: var(--ap-radius); box-shadow: var(--ap-shadow-lg); }
.ap-lightbox__figure figcaption { color: #fff; margin-top: 1rem; font-size: 1rem; }
.ap-lightbox__close {
  position: absolute; top: 1.25rem; right: 1.5rem;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,0.14); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer;
  transition: background var(--ap-dur) var(--ap-ease);
}
.ap-lightbox__close:hover { background: rgba(255,255,255,0.28); }
.ap-lightbox__nav {
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,0.14); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
  transition: background var(--ap-dur) var(--ap-ease); flex: none;
}
.ap-lightbox__nav:hover { background: rgba(255,255,255,0.28); }

@media (max-width: 620px) {
  .ap-gallery__grid { columns: 2 150px; }
  .ap-lightbox { grid-template-columns: 1fr; }
  .ap-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
  .ap-lightbox__nav--prev { left: 0.75rem; }
  .ap-lightbox__nav--next { right: 0.75rem; }
}