/* Event photography, scoped to the gallery and its native dialog.
   The existing page canvas, films and package layout remain unchanged. */

.event-gallery {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}

.gallery-heading { margin-bottom: 26px; }
.gallery-heading h3 { max-width: 620px; }
.gallery-heading p { margin-top: 12px; font-size: 15px; max-width: 660px; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
}

.gallery-photo {
  display: block;
  grid-column: span 2;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.gallery-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: var(--gallery-position, 50% 50%);
  border-radius: 4px;
  transition: opacity .2s;
}

.gallery-photo:hover img { opacity: .88; }
.gallery-photo.is-landscape { grid-column: span 3; }
.gallery-photo.is-landscape img { aspect-ratio: 3 / 2; }
.gallery-photo-caption { display: block; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }

.gallery-dialog {
  width: min(1160px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 24px;
}

.gallery-dialog .dialog-header { align-items: center; margin-bottom: 18px; }
.gallery-dialog .dialog-title { font-size: 24px; }
.gallery-dialog-figure { margin: 0; }

.gallery-image-stage {
  display: grid;
  place-items: center;
  position: relative;
  height: min(61dvh, 650px);
  overflow: hidden;
  background: var(--panel-soft);
  border-radius: 4px;
}

.gallery-full-image { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.gallery-image-stage[data-loading=true] .gallery-full-image { opacity: 0; }
.gallery-image-status { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; color: var(--muted); font-size: 14px; text-align: center; }
.gallery-image-status[hidden] { display: none; }
.gallery-dialog-figure figcaption { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }

.gallery-dialog-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.gallery-dialog-controls .button { min-height: 44px; padding: 11px 17px; }
.gallery-counter { color: var(--muted); font-size: 13px; white-space: nowrap; }

@media (max-width: 1100px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  .gallery-photo,
  .gallery-photo.is-landscape { grid-column: auto; }
}

@media (max-width: 600px) {
  .event-gallery { padding-top: 28px; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-heading h3 { font-size: 24px; }
  .gallery-dialog { padding: 18px; width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .gallery-dialog .dialog-title { font-size: 21px; }
  .gallery-image-stage { height: 55dvh; }
  .gallery-dialog-controls { gap: 10px; }
  .gallery-dialog-controls .button { padding-inline: 13px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-photo img { transition: none; }
}

@media print {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-photo,
  .gallery-photo.is-landscape { grid-column: auto; break-inside: avoid; }
  .gallery-dialog { display: none; }
}