/* ==========================================================================
   WP Block Gallery → Responsive Grid with Lightbox
   Scoped to .wp-block-gallery.wp-block-gallery-grid so we don't affect
   other gallery/figure or slideshow usage.
   ========================================================================== */

/* --- Reset the flex/flow layout that WP sets on the gallery and apply grid --- */

.wp-block-gallery.wp-block-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;          /* override: in case WP renders as <ul> */
  align-items: unset;        /* override: align-items: center / normal */
}

/* --- Override the column-width calc on child figures --- */

.wp-block-gallery.wp-block-gallery-grid figure.wp-block-image {
  width: 100% !important;    /* override: column width calcs like calc(33.33% - …) */
  max-width: 100%;
  margin: 0;                 /* override: margin: 1em 0 / 1em 40px */
  flex-grow: unset;
}

/* --- Image styles scoped under the grid --- */

.wp-block-gallery.wp-block-gallery-grid figure.wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wp-block-gallery.wp-block-gallery-grid figure.wp-block-image img:hover {
  opacity: 0.88;
  transform: scale(1.015);
}

/* --- Lightbox anchor wrapper (injected by JS) --- */

.wp-block-gallery.wp-block-gallery-grid figure.wp-block-image a.wp-block-gallery-grid__lightbox-link {
  display: block;
  line-height: 0;            /* remove inline spacing beneath img */
  text-decoration: none;
}

/* --- Ensure .is-layout-flex / .is-layout-grid on the gallery itself doesn't interfere --- */

.wp-block-gallery.wp-block-gallery-grid.is-layout-flex,
.wp-block-gallery.wp-block-gallery-grid.is-layout-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* --- Override any post-template specific margin on images inside gallery --- */

.post-default-template .wp-block-gallery.wp-block-gallery-grid .wp-block-image {
  margin-top: 0;
}

/* --- Figcaption styling --- */

.wp-block-gallery.wp-block-gallery-grid figure.wp-block-image figcaption {
  margin-top: 6px;
  font-size: 0.85em;
  color: #555;
  text-align: center;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Tablet: 2 columns */
@media (max-width: 768px) {
  .wp-block-gallery.wp-block-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* Mobile: 1 column */
@media (max-width: 480px) {
  .wp-block-gallery.wp-block-gallery-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}