/* ==========================================================================
   Gallery (Masonry Layout)
   Classes: single-project.php, template-parts/content-project-gallery.php
   ========================================================================== */

/* ---------- Section ---------- */
.gallery {
  overflow: hidden;
}

/* ---------- Section Heading ---------- */
.gallery__heading {
  font-family: var(--font-body);
  font-size: 1.875rem;
  font-weight: var(--font-weight-normal);
  text-align: center;
  margin-bottom: 2rem;
}

/* ---------- Masonry Grid ---------- */
/*
 * Layout: first 2 images at 50% width (large), remaining at 33.33% (small).
 * Uses flex-wrap so items flow naturally into rows.
 */
.gallery__masonry {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* All items: full-width on mobile */
.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-bg-muted);
  cursor: pointer;
  flex: 0 0 100%;
  aspect-ratio: 4 / 3;
  display: block;
}

/* Tablet: 2-col for everything */
@media (min-width: 768px) {
  .gallery__item {
    flex: 0 0 calc(50% - 0.5rem);
  }
}

/* Desktop: first 2 items stay at 50%, remaining switch to 33.33% */
@media (min-width: 1024px) {
  .gallery__item {
    flex: 0 0 calc(33.333% - 0.667rem);
    aspect-ratio: 3 / 2;
  }

  /* First two items: large (50% each, taller aspect ratio) */
  .gallery__item:nth-child(1),
  .gallery__item:nth-child(2) {
    flex: 0 0 calc(50% - 0.5rem);
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Image ---------- */
.gallery__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  transition: filter var(--transition-slow), transform var(--transition-slow);
}

.gallery__item:hover .gallery__image {
  filter: grayscale(0%);
  transform: scale(1.03);
}

/* ---------- Caption ---------- */
.gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
  pointer-events: none;
}

.gallery__item:hover .gallery__caption {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- GLightbox Link ---------- */
.gallery__item.glightbox {
  text-decoration: none;
  color: inherit;
}

/* ---------- GLightbox z-index fix ---------- */
/* GLightbox default: overlay=100000, container=9999. Flip so content is on top. */
.goverlay {
  z-index: 9999 !important;
}
.glightbox-container {
  z-index: 10000 !important;
}

/* ---------- Elementor Overrides ---------- */
/* Elementor resets img max-width/height which prevents object-fit: cover
   from filling the absolutely-positioned container. Force our rules. */
.elementor .gallery__item {
  position: relative !important;
  overflow: hidden !important;
}

.elementor .gallery__image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}