/* image_gallery block. Grid/masonry + lightbox.
   The block emits `.images .images-{4grid|5grid|6grid|masonry}
   .images-width-{standard|full|breakout}`. The old CSS only styled the
   never-emitted `.images-grid`, so every gallery fell back to full-width stacked
   images. No literal colour, every value a token. */

.images { display: grid; gap: .7rem; }
.images-4grid { grid-template-columns: repeat(4, 1fr); }
.images-5grid { grid-template-columns: repeat(5, 1fr); }
.images-6grid { grid-template-columns: repeat(6, 1fr); }

/* Masonry: multi-column flow so portrait/landscape shots keep natural heights. */
.images-masonry { display: block; column-count: 4; column-gap: .7rem; }
.images-masonry .lightbox { aspect-ratio: auto; margin-bottom: .7rem; break-inside: avoid; }
.images-masonry .lightbox img { height: auto; }

.image-gallery .lightbox { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; border-radius: var(--radius-sm); overflow: hidden; background: repeating-linear-gradient(135deg, var(--ph-stripe-a) 0 9px, var(--ph-stripe-b) 9px 18px); font-family: var(--font-mono); color: var(--ph-ink); text-decoration: none; }
.image-gallery .lightbox img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Zoom affordance — a centred magnifier badge that fades in on hover/focus.
   (The <svg> ships without width/height, so it MUST be sized here.) */
.image-gallery__zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(var(--navy-deep-rgb), .5); color: var(--white); opacity: 0; transition: opacity var(--transition); pointer-events: none; }
.image-gallery .lightbox:hover .image-gallery__zoom,
.image-gallery .lightbox:focus-visible .image-gallery__zoom { opacity: 1; }
.image-gallery__zoom svg { width: 30px; height: 30px; }

@media (max-width: 64em) {
  .images-4grid, .images-5grid, .images-6grid { grid-template-columns: repeat(3, 1fr); }
  .images-masonry { column-count: 3; }
}
@media (max-width: 40em) {
  .images-4grid, .images-5grid, .images-6grid { grid-template-columns: repeat(2, 1fr); }
  .images-masonry { column-count: 2; }
}