/* Gallery block */

.gallery {
  --gallery-cols: 3;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: calc(var(--content-max) + var(--page-pad) * 2);
  margin: 0 auto;
  padding: 0 var(--page-pad) var(--space-14);
}

.gallery[data-columns="1"] { --gallery-cols: 1; }
.gallery[data-columns="2"] { --gallery-cols: 2; }
.gallery[data-columns="3"] { --gallery-cols: 3; }
.gallery[data-columns="4"] { --gallery-cols: 4; }
.gallery[data-columns="5"] { --gallery-cols: 5; }
.gallery[data-columns="6"] { --gallery-cols: 6; }

/* Default: row-wise CSS grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--gallery-cols, 3), minmax(0, 1fr));
  gap: var(--space-7);
}

.gallery-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  min-width: 0;
}

/* Masonry: CSS multi-column packing */
.gallery--masonry .gallery-grid {
  display: block;
  column-count: var(--gallery-cols, 3);
  /* column-gap only — gap shorthand would zero column-gap too */
  column-gap: var(--space-7);
  /* Cancel last-item margin so bottom edges sit flush */
  margin-bottom: calc(var(--space-7) * -1);
}

.gallery--masonry .gallery-card {
  margin-bottom: var(--space-7);
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.gallery[data-align="left"] .gallery-card {
  align-items: flex-start;
}

.gallery[data-align="center"] .gallery-card {
  align-items: center;
}

.gallery[data-align="right"] .gallery-card {
  align-items: flex-end;
}

.gallery[data-align="left"] .gallery-card__caption {
  text-align: left;
}

.gallery[data-align="center"] .gallery-card__caption {
  text-align: center;
}

.gallery[data-align="right"] .gallery-card__caption {
  text-align: right;
}

.gallery-card__viewport {
  overflow: hidden;
  border-radius: 8px;
  background: #f4f3f0;
  box-shadow: 0 2px 16px rgba(23, 23, 31, 0.08);
  transition:
    box-shadow var(--duration) var(--ease),
    transform var(--duration) var(--ease);
  width: 100%;
  max-width: var(--gallery-img-max, none);
}

.gallery.gallery--no-shadows .gallery-card__viewport {
  background: transparent;
  box-shadow: none;
}

.gallery-card__img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

/* Fixed aspect presets — crop to frame */
.gallery[data-aspect="14:9"] .gallery-card__viewport {
  aspect-ratio: 14 / 9;
}

.gallery[data-aspect="16:10"] .gallery-card__viewport {
  aspect-ratio: 16 / 10;
}

.gallery[data-aspect="16:9"] .gallery-card__viewport {
  aspect-ratio: 16 / 9;
}

.gallery[data-aspect="16:12"] .gallery-card__viewport {
  aspect-ratio: 16 / 12;
}

.gallery[data-aspect="14:9"] .gallery-card__img,
.gallery[data-aspect="16:10"] .gallery-card__img,
.gallery[data-aspect="16:9"] .gallery-card__img,
.gallery[data-aspect="16:12"] .gallery-card__img {
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* As is — keep original image proportions, no crop */
.gallery[data-aspect="natural"] .gallery-card__viewport {
  aspect-ratio: auto;
  height: auto;
}

.gallery[data-aspect="natural"] .gallery-card__img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: unset;
}

.gallery-card__caption {
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  line-height: 1.3;
  width: 100%;
  max-width: var(--gallery-img-max, none);
}

@media (hover: hover) {
  /* Lift viewport only — transform on the card can reflow CSS columns */
  .gallery .gallery-card:hover .gallery-card__viewport {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(23, 23, 31, 0.12);
  }

  .gallery.gallery--no-shadows .gallery-card:hover .gallery-card__viewport {
    transform: none;
    box-shadow: none;
  }
}

.accordion__panel-inner .gallery {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Negative column margin is for page-level flush; inside accordion it eats the last row. */
.accordion__panel-inner .gallery--masonry .gallery-grid {
  margin-bottom: 0;
}

/* Tablet: collapse to 2 columns */
@media (max-width: 1024px) {
  .gallery[data-columns="2"],
  .gallery[data-columns="3"],
  .gallery[data-columns="4"],
  .gallery[data-columns="5"],
  .gallery[data-columns="6"] {
    --gallery-cols: 2;
  }
}

/* Mobile: single column */
@media (max-width: 720px) {
  .gallery[data-columns="2"],
  .gallery[data-columns="3"],
  .gallery[data-columns="4"],
  .gallery[data-columns="5"],
  .gallery[data-columns="6"] {
    --gallery-cols: 1;
  }
}