/* Component: lightbox — photo viewer built by assets/js/custom-media.js for every a[data-lightbox]
   (gallery section, product / project / article singles). The element is created by JS and appended to <body>;
   it does not exist without JS (the links then open the full image). Not in the mockups — needs approval. */

.ex-lightbox {
  position: fixed;
  inset: 0;
  z-index: calc(var(--ex-z-modal) + 20);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(56px, 6vw, 80px) clamp(12px, 6vw, 96px);
  background: rgba(35, 31, 32, .94);
  color: var(--ex-white);
  font-family: var(--ex-font);
  touch-action: pan-y;
}
.ex-lightbox[hidden] { display: none; }

.ex-lightbox__figure { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 100%; min-height: 0; margin: 0; }
.ex-lightbox__image {
  display: block;
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  opacity: 1;
  transition: opacity var(--ex-t-slow) var(--ex-ease);
  user-select: none;
  -webkit-user-drag: none;
}
.ex-lightbox.is-loading .ex-lightbox__image { opacity: 0; }
.ex-lightbox__caption { flex: none; max-width: 80ch; margin: 0; font-size: 13px; line-height: 1.5; text-align: center; color: rgba(255, 255, 255, .86); }
.ex-lightbox__caption[hidden] { display: none; }
.ex-lightbox__counter { position: absolute; top: 18px; left: clamp(12px, 3vw, 28px); margin: 0; font-size: 11px; font-weight: 700; line-height: var(--ex-touch); letter-spacing: .14em; color: rgba(255, 255, 255, .8); }
.ex-lightbox__counter[hidden] { display: none; }

.ex-lightbox__button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ex-touch);
  height: var(--ex-touch);
  margin: 0;
  padding: 0;
  border: var(--ex-border-w) solid rgba(255, 255, 255, .45);
  border-radius: 0;
  background: rgba(35, 31, 32, .6);
  color: var(--ex-white);
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--ex-t-base), border-color var(--ex-t-base);
}
.ex-lightbox__button:hover,
.ex-lightbox__button:focus-visible { border-color: var(--ex-red); background: var(--ex-red); }
.ex-lightbox__button:focus-visible { outline: 2px solid var(--ex-white); outline-offset: 2px; }
.ex-lightbox__button[hidden] { display: none; }
.ex-lightbox__button--close { top: 18px; right: clamp(12px, 3vw, 28px); }
.ex-lightbox__button--prev { top: 50%; left: clamp(8px, 2vw, 28px); transform: translateY(-50%); }
.ex-lightbox__button--next { top: 50%; right: clamp(8px, 2vw, 28px); transform: translateY(-50%); }

@media (max-width: 599px) {
  .ex-lightbox { padding: 72px 8px 84px; }
  .ex-lightbox__button--prev,
  .ex-lightbox__button--next { top: auto; bottom: 18px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-lightbox__image { transition: none; }
}