/* ── Multi-column masonry gallery ──
   Photos are grouped into "blocks" (1-4 photos each) by gallery-blocks.js,
   then blocks are handed out to columns left-to-right, in order
   (block 1 -> column 1, block 2 -> column 2, ... then wraps back to column 1).
   Each column is an independent flex stack, so a tall block in one column
   doesn't push blocks in the other columns down — that's what keeps every
   column looking evenly packed instead of leaving gaps. */

.gallery-blocks-grid {
  --block-gap: var(--gallery-gap, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
}

.gallery-blocks-columns {
  display: grid;
  grid-template-columns: repeat(var(--gallery-column-count, 4), minmax(0, 1fr));
  gap: var(--block-gap);
  align-items: start;
}

.gallery-blocks-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--block-gap);
}

.gallery-block,
.gallery-block-stack,
.gallery-block-row {
  min-width: 0;
}

.gallery-block {
  display: grid;
  grid-template-columns: var(--block-columns, 1fr);
  gap: var(--block-gap);
  align-items: start;
}

.gallery-block-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  outline-offset: 3px;
}

.gallery-block-item--clickable {
  cursor: zoom-in;
}

.gallery-block-item__frame {
  display: block;
  overflow: hidden;
  background: var(--soft, #eee);
}

.gallery-block-item img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
  transition: transform 180ms ease;
}

.gallery-block-item__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.gallery-block-item:hover img {
  transform: scale(1.012);
}

.gallery-block-stack,
.gallery-block--7,
.gallery-block--8,
.gallery-block--9 {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
}

.gallery-block-row {
  display: grid;
  grid-template-columns: var(--block-columns, 1fr);
  gap: var(--block-gap);
}

.gallery-block-caption {
  display: block;
  margin: var(--caption-gap, 10px) 0 0;
  color: #222222;
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.3;
  text-align: center;
  white-space: pre-line;
}

.gallery-block-description {
  display: block;
  margin: 5px 0 0;
  color: #5a5a5a;
  font-size: clamp(13px, 0.95vw, 15px);
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
  white-space: pre-line;
}