/* Shared lightbox behavior; About keeps its layout, other galleries use the industry-style strip. */
.industry-page .ui-image-gallery,
.financial-page .ui-image-gallery {
  position: relative;
  min-height: 0;
}

.ui-image-gallery .ui-image-strip__viewport {
  scroll-padding-inline: 0;
  overscroll-behavior-x: contain;
}

.ui-image-gallery--industry .ui-image-strip__track {
  display: flex;
  width: 100%;
  min-width: 100%;
  gap: 13px;
  padding: 32px 0;
}

.ui-image-gallery .ui-image-strip__item {
  display: block;
  cursor: zoom-in;
}

.ui-image-gallery--industry .ui-image-strip__item {
  flex: 0 0 calc((100% - 39px) / 4);
  width: calc((100% - 39px) / 4);
}

.ui-image-gallery .ui-image-strip__viewport.is-dragging {
  scroll-snap-type: none;
  user-select: none;
}

.ui-image-gallery .ui-image-strip__viewport.is-dragging * { cursor: grabbing; }

.ui-image-gallery__control {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 50%;
  color: #111;
  background: #fff;
  cursor: pointer;
}

.ui-image-gallery__control img {
  width: 8px;
  height: 14px;
}

.ui-image-gallery__previous img {
  transform: rotate(180deg);
}

.ui-image-gallery__control:focus-visible,
.ui-image-gallery__open:focus-visible {
  outline: 3px solid var(--ui-red);
  outline-offset: -3px;
}

.ui-image-gallery__dialog {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 100%;
  height: 100dvh;
  max-height: 100%;
  max-height: 100dvh;
  margin: auto;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  overflow: hidden;
}

.ui-image-gallery__dialog:not([open]) { display: none; }
.ui-image-gallery__dialog[open] { display: block; }
.ui-image-gallery__dialog::backdrop { background: rgb(0 0 0 / 88%); }

.ui-image-gallery__toolbar {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ui-image-gallery__counter { font-size: 20px; font-weight: 700; }
.ui-image-gallery__close { border: 0; color: #fff; background: transparent; font: 36px/1 sans-serif; }

.ui-image-gallery__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  height: 100%;
  min-height: 0;
}

.ui-image-gallery__stage .ui-image-gallery__control {
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
}

.ui-image-gallery__stage .ui-image-gallery__previous { left: 24px; }
.ui-image-gallery__stage .ui-image-gallery__next { right: 24px; }

.ui-image-gallery__enlarged {
  display: block;
  min-width: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  touch-action: pan-y pinch-zoom;
}

@media (max-width: 1200px) {
  .ui-image-gallery--industry .ui-image-strip__item {
    flex-basis: calc((100% - 26px) / 3);
    width: calc((100% - 26px) / 3);
  }
}

@media (max-width: 700px) {
  .ui-image-gallery--industry .ui-image-strip__viewport { width: calc(100% - 40px); margin-inline: 20px; }
  .ui-image-gallery--industry .ui-image-strip__track { gap: 10px; padding: 35px 0; }
  .ui-image-gallery--industry .ui-image-strip__item { flex-basis: calc((100% - 10px) / 2); width: calc((100% - 10px) / 2); }
  .ui-image-gallery__toolbar { top: 12px; left: 12px; right: 12px; }
  .ui-image-gallery__counter { font-size: 16px; }
  .ui-image-gallery__stage .ui-image-gallery__previous { left: 12px; }
  .ui-image-gallery__stage .ui-image-gallery__next { right: 12px; }
}

@media print {
  .ui-image-gallery__control,
  .ui-image-gallery__dialog { display: none !important; }
}
