/* ===========================
   PHOTO GRID / MASONRY (responsive)
   =========================== */

/* Wrapper */
.photo-grid {
  padding: 6vh 3vw;                 /* tighter on mobile */
  max-width: var(--content-max);
  margin: 0 auto;
  background: var(--color-body-bg);
}

/* Masonry via CSS columns */
#gallery .gallery-masonry {
  display: block;
  width: 100%;                      /* full width on mobile */
  margin: 0 auto;
  column-gap: 12px;                 /* tighter gap on mobile */
  column-count: 2;                  /* <- 2 columns mobile */
}

/* Items inside column layout */
#gallery .gallery-masonry .grid-item {
  break-inside: avoid;
  margin-bottom: 12px;              /* tighter spacing on mobile */
  position: relative;
}

/* Small tablets: 3 columns, slightly larger gaps */
@media (min-width: 600px) {
  .photo-grid {
    padding: 7vh 4vw;
  }
  #gallery .gallery-masonry {
    column-count: 3;
    column-gap: 16px;
    width: 92%;
  }
  #gallery .gallery-masonry .grid-item {
    margin-bottom: 16px;
  }
}

/* Desktop: 4 columns, fixed 75% width, comfortable gaps */
@media (min-width: 1024px) {
  .photo-grid {
    padding: 10vh 0;                /* no side padding at desktop */
    max-width: none;
  }
  #gallery .gallery-masonry {
    width: 75%;
    max-width: 75%;
    column-count: 4;
    column-gap: 20px;
  }
  #gallery .gallery-masonry .grid-item {
    margin-bottom: 20px;
  }
}

/* (Optional) very large screens: add a 5th column if you like */
/*
@media (min-width: 1440px) {
  #gallery .gallery-masonry { column-count: 5; }
}
*/

/* If you also use the flex-based variant somewhere, keep it responsive too */
.masonry-container {
  display: flex;
  gap: 12px;                        /* tighter on mobile */
  justify-content: center;
}
.masonry-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 160px;                 /* allow tighter columns on small screens */
  max-width: 1fr;
}
@media (min-width: 600px) {
  .masonry-container { gap: 16px; }
  .masonry-column { gap: 16px; min-width: 220px; }
}
@media (min-width: 1024px) {
  .masonry-container { gap: 20px; }
  .masonry-column { gap: 20px; min-width: 280px; max-width: 300px; }
}

/* Card visuals */
.grid-item {
  position: relative;
  overflow: visible;                /* let backlight bleed out */
  border-radius: 12px;              /* visual radius; image has clip */
  box-shadow: 0 4px 8px var(--color-shadow);
  transition: box-shadow var(--transition);
  border: 1px solid var(--color-border);
  transform-style: preserve-3d;
  will-change: transform;

  /* backlight defaults */
  --r: 255; --g: 200; --b: 120;
  --bx: 50%; --by: 50%;
  --backlight-o: 0;
}

.grid-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  position: relative;
  z-index: 2;                       /* image above backlight */
  border-radius: 12px;
  pointer-events: none;             /* keep tilt/glow tracking clean */
  user-select: none;
}

/* LED backlight BEHIND the image (tighter) */
.grid-item::before {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 16px;
  z-index: 0;                       /* behind image */
  pointer-events: none;
  opacity: var(--backlight-o, 0);
  transition: opacity 220ms ease;
  filter: blur(28px) saturate(2.5) brightness(1.15);
  background:
    radial-gradient(55% 55% at var(--bx) var(--by),
      rgba(var(--r), var(--g), var(--b), 0.95) 0%,
      rgba(var(--r), var(--g), var(--b), 0.55) 38%,
      rgba(var(--r), var(--g), var(--b), 0.00) 70%);
}

/* Optional faint ambient edge glow that scales with intensity */
.grid-item::after {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 14px;
  z-index: 0;
  pointer-events: none;
  opacity: calc(var(--backlight-o) * 0.35);
  filter: blur(22px) saturate(2.0) brightness(1.1);
  background:
    radial-gradient(85% 85% at 50% 50%,
      rgba(var(--r), var(--g), var(--b), 0.28) 15%,
      rgba(var(--r), var(--g), var(--b), 0.00) 75%);
}

/* Caption */
.grid-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: var(--color-primary);
  padding: 10px;
  text-align: center;
  font-family: 'Geologica', sans-serif;
  font-size: 16px;
  font-weight: 400;
}

/* No jump on hover */
.grid-item:hover { box-shadow: 0 8px 16px var(--color-shadow); }