/* ==========================================================================
   Component: badge gallery (.cm-gallery-grid)
   /badges-gallery — a plain CSS Grid so every row has the same number of
   items and aligns cleanly (each row simply takes the height of its
   tallest photo). Images keep their natural, uncropped proportions.
   Replaces the page's original jQuery Masonry plugin, which packed items
   column-first and left rows uneven.
   ========================================================================== */

.cm-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--cm-container);
  margin-inline: auto;
  padding: 0 var(--cm-gutter) 88px;
}

.cm-gallery-item {
  margin: 0;
  border: 1px solid var(--cm-hairline);
  border-radius: var(--cm-radius-card);
  box-shadow: var(--cm-shadow);
  background: #fff;
  overflow: hidden;
  cursor: zoom-in;
}
.cm-gallery-item:focus-visible {
  outline: 2px solid var(--cm-red);
  outline-offset: 2px;
}

.cm-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--cm-dur) var(--cm-ease);
}

.cm-gallery-item:hover img {
  transform: scale(1.03);
}

@media (max-width: 900px) {
  .cm-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .cm-gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Lightbox (see js/gallery-lightbox.js) --------------------------------- */
.cm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(10, 21, 32, 0.92);
}
.cm-lightbox[hidden] {
  display: none;
}

body.cm-lightbox-open {
  overflow: hidden;
}

.cm-lightbox__img {
  display: block;
  max-width: min(1100px, 90vw);
  max-height: 85vh;
  width: auto;
  height: auto;
  border-radius: var(--cm-radius-card);
  box-shadow: var(--cm-shadow);
}

.cm-lightbox__close,
.cm-lightbox__prev,
.cm-lightbox__next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: opacity var(--cm-dur) var(--cm-ease);
}

.cm-lightbox__close {
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: background var(--cm-dur) var(--cm-ease);
}
.cm-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.cm-lightbox__prev,
.cm-lightbox__next {
  opacity: 0.8;
}
.cm-lightbox__prev:hover,
.cm-lightbox__next:hover {
  opacity: 1;
}
.cm-lightbox__close:focus-visible,
.cm-lightbox__prev:focus-visible,
.cm-lightbox__next:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.cm-lightbox__close {
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
}

.cm-lightbox__prev,
.cm-lightbox__next {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
}
.cm-lightbox__prev {
  left: 24px;
}
.cm-lightbox__next {
  right: 24px;
}

.cm-lightbox__count {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 640px) {
  .cm-lightbox {
    padding: 16px;
  }
  .cm-lightbox__prev,
  .cm-lightbox__next {
    width: 42px;
    height: 42px;
  }
  .cm-lightbox__prev {
    left: 8px;
  }
  .cm-lightbox__next {
    right: 8px;
  }
  .cm-lightbox__close {
    top: 12px;
    right: 12px;
  }
}