/* Neue Unikate: editorial in-situ wall hangs. Tokens follow the active theme. */

.ga-shop-preview {
  overflow: hidden;
}

.ga-walls {
  display: grid;
  gap: clamp(48px, 6vw, 88px);
  margin: 0;
  width: 100%;
}

.ga-wall {
  display: grid;
  gap: 28px;
}

.ga-wall__scene {
  position: relative;
  width: 100%;
  min-height: 72vh;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ga-ink, #0e0d0c);
}

.ga-wall__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ga-wall__hangs {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ga-wall__frame {
  position: absolute;
  left: var(--ga-slot-x, 36%);
  top: var(--ga-slot-y, 14%);
  width: var(--ga-slot-w, 28%);
  aspect-ratio: var(--ga-art-ratio, 3 / 4);
  max-height: 58%;
  margin: 0;
  padding: 7px;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
  text-align: left;
  touch-action: manipulation;
  background:
    linear-gradient(145deg, #2c2926 0%, #0e0d0c 55%, #1a1816 100%);
  box-shadow:
    0 1px 0 rgba(245, 242, 236, 0.18) inset,
    0 22px 48px rgba(14, 13, 12, 0.38),
    0 4px 10px rgba(14, 13, 12, 0.28);
  transform-origin: center bottom;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.45s ease;
}

.ga-wall--dark .ga-wall__frame {
  padding: 8px;
  background:
    linear-gradient(145deg, #f8f6f2 0%, #e3ded4 48%, #cfc8bb 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 24px 50px rgba(0, 0, 0, 0.55),
    0 3px 8px rgba(0, 0, 0, 0.4);
}

.ga-wall__canvas {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.22);
}

.ga-wall__canvas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ga-wall__overlay {
  position: absolute;
  inset: 7px;
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
  background: linear-gradient(to top, rgba(14, 13, 12, 0.62), transparent 55%);
  color: var(--ga-cream, #f5f2ec);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.ga-wall--dark .ga-wall__overlay {
  inset: 8px;
}

.ga-wall__frame:hover,
.ga-wall__frame:focus-visible {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(245, 242, 236, 0.2) inset,
    0 28px 56px rgba(14, 13, 12, 0.42),
    0 6px 14px rgba(14, 13, 12, 0.3);
}

.ga-wall__frame:hover .ga-wall__overlay,
.ga-wall__frame:focus-visible .ga-wall__overlay {
  opacity: 1;
}

.ga-wall__frame:focus-visible {
  outline: 2px solid var(--ga-gold, #c8a882);
  outline-offset: 4px;
}

.ga-wall__rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 8px 48px;
  margin: 0;
  padding: 8px 0 0;
  list-style: none;
}

.ga-wall__caption {
  min-width: 0;
}

.ga-wall__caption .ga-unikat__meta {
  margin-top: 0;
}

.ga-shop-preview .ga-section__cta {
  margin-top: 40px;
}

@media (max-width: 1080px) {
  .ga-wall__scene {
    min-height: 64vh;
  }

  .ga-wall--count-2 .ga-wall__frame:nth-child(1) {
    left: 10%;
    width: 36%;
  }

  .ga-wall--count-2 .ga-wall__frame:nth-child(2) {
    left: 52%;
    width: 34%;
  }
}

@media (max-width: 760px) {
  .ga-walls {
    gap: 40px;
  }

  .ga-wall__scene {
    min-height: 82vh;
    height: 82vh;
    aspect-ratio: auto;
  }

  .ga-wall--count-1 .ga-wall__frame {
    left: 16%;
    top: 12%;
    width: 68%;
    max-height: 62%;
  }

  .ga-wall--count-2 .ga-wall__frame:nth-child(1) {
    left: 14%;
    top: 8%;
    width: 52%;
    max-height: 42%;
  }

  .ga-wall--count-2 .ga-wall__frame:nth-child(2) {
    left: 36%;
    top: 46%;
    width: 48%;
    max-height: 38%;
  }

  .ga-wall__rail {
    gap: 22px;
  }
}

/* ——— Horizontal scrolling gallery corridor (Neue Werke) ——— */
.ga-gallery-wall {
  padding: 0;
  margin: 0;
  background: #0e0d0c;
  overflow: visible;
}

/* Plate fills a shorter stage — wall reads as a band, not a full viewport. */
.ga-gallery-wall__stage {
  position: relative;
  width: 100%;
  height: min(58vh, 560px);
  max-height: 560px;
  aspect-ratio: unset;
  overflow: hidden;
  background: #161412;
}

.ga-gallery-wall__plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: center 38%;
  pointer-events: none;
  user-select: none;
}

.ga-gallery-wall__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(14, 13, 12, 0.42) 0%, rgba(14, 13, 12, 0.08) 16%, transparent 28%),
    linear-gradient(to top, rgba(14, 13, 12, 0.22) 0%, transparent 18%),
    linear-gradient(to right, rgba(14, 13, 12, 0.28), transparent 8%, transparent 92%, rgba(14, 13, 12, 0.28));
}

.ga-gallery-wall__head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 3.5vh, 36px) max(24px, calc((100vw - 1440px) / 2 + 24px)) 0;
  pointer-events: none;
}

.ga-gallery-wall__head .ga-h2 {
  color: #f2ebe0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.ga-gallery-wall__head .ga-textlink,
.ga-gallery-wall__head .ga-textlink--on-dark {
  pointer-events: auto;
  color: #f2ebe0;
  border-color: rgba(242, 235, 224, 0.35);
}

.ga-gallery-wall__viewport {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ga-gallery-wall__viewport::-webkit-scrollbar {
  display: none;
}

.ga-gallery-wall__viewport.is-dragging {
  cursor: grabbing;
}

.ga-gallery-wall__track {
  display: flex;
  align-items: center;
  gap: clamp(28px, 3.5vw, 56px);
  width: max-content;
  min-width: 100%;
  height: 100%;
  /* Fixed vertical padding — % padding is width-based and crushed hangs in the compact stage. */
  padding:
    56px
    max(48px, calc((100vw - 1440px) / 2 + 48px))
    72px
    max(72px, 6vw);
  box-sizing: border-box;
}

.ga-gallery-wall__hang {
  position: relative;
  display: block;
  flex: 0 0 auto;
  height: 62%;
  width: auto;
  aspect-ratio: var(--ga-art-ratio, 3 / 4);
  max-height: 100%;
  text-decoration: none;
  color: inherit;
  transform-origin: center bottom;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ga-gallery-wall__hang:nth-child(3n) {
  height: 70%;
}

.ga-gallery-wall__hang:nth-child(4n) {
  height: 54%;
}

.ga-gallery-wall__frame {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 8px;
  background:
    linear-gradient(145deg, #f8f6f2 0%, #e3ded4 48%, #cfc8bb 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 22px 48px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.4s ease;
}

.ga-gallery-wall__canvas {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #111;
}

.ga-gallery-wall__canvas img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: #1a1612;
}

.ga-gallery-wall__meta {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: grid;
  gap: 2px;
  padding: 28px 14px 12px;
  background: linear-gradient(
    to top,
    rgba(14, 13, 12, 0.92) 0%,
    rgba(14, 13, 12, 0.72) 55%,
    rgba(14, 13, 12, 0) 100%
  );
  color: #f2ebe0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ga-gallery-wall__meta strong {
  font-family: "Instrument Serif", "Times New Roman", serif;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 400;
  line-height: 1.15;
}

.ga-gallery-wall__artist,
.ga-gallery-wall__meta em,
.ga-gallery-wall__price {
  font-family: Outfit, "Helvetica Neue", sans-serif;
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.04em;
  color: rgba(242, 235, 224, 0.82);
}

.ga-gallery-wall__price {
  margin-top: 4px;
  color: #f2ebe0;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.ga-gallery-wall__hang:hover,
.ga-gallery-wall__hang:focus-visible {
  transform: translateY(-6px);
}

.ga-gallery-wall__hang:hover .ga-gallery-wall__frame,
.ga-gallery-wall__hang:focus-visible .ga-gallery-wall__frame {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 28px 56px rgba(0, 0, 0, 0.55),
    0 6px 16px rgba(0, 0, 0, 0.4);
}

.ga-gallery-wall__hang:hover .ga-gallery-wall__meta,
.ga-gallery-wall__hang:focus-visible .ga-gallery-wall__meta {
  opacity: 1;
  transform: none;
}

.ga-gallery-wall__hang:focus-visible {
  outline: none;
}

.ga-gallery-wall__hang:focus-visible .ga-gallery-wall__frame {
  outline: 2px solid #f2ebe0;
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .ga-gallery-wall__head {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px 0;
  }

  .ga-gallery-wall__track {
    padding: 40px 24px 52px max(48px, 10vw);
    gap: 22px;
  }

  .ga-gallery-wall__hang,
  .ga-gallery-wall__hang:nth-child(3n),
  .ga-gallery-wall__hang:nth-child(4n) {
    height: 58%;
  }

  .ga-gallery-wall__meta {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ga-gallery-wall__hang,
  .ga-gallery-wall__meta,
  .ga-gallery-wall__frame {
    transition: none;
  }
}

/* ArtPlacer virtual exhibition — sits above the Bilderwand. */
.ga-digital-exhibit {
  margin: 0;
  padding: clamp(36px, 5vw, 64px) 0 0;
  background: #0e0d0c;
  color: #f2ebe0;
}

.ga-digital-exhibit__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
}

.ga-digital-exhibit__lead {
  margin: 10px 0 0;
  max-width: 42ch;
  color: rgba(242, 235, 224, 0.72);
  font-size: 1.02rem;
  line-height: 1.45;
}

.ga-digital-exhibit__frame {
  position: relative;
  width: min(1680px, calc(100% - 24px));
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  min-height: min(86vh, 920px);
  overflow: hidden;
  background: #161412;
  border: 1px solid rgba(242, 235, 224, 0.12);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
}

.ga-digital-exhibit__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0e0d0c;
}

/* Outside the iframe so Unity pointer-lock cannot swallow the click. */
.ga-digital-exhibit__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(14, 13, 12, 0.82);
  color: #f2ebe0;
  font: 500 13px/1 Outfit, system-ui, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.ga-digital-exhibit__close span[aria-hidden="true"] {
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}

.ga-digital-exhibit__close:hover,
.ga-digital-exhibit__close:focus-visible {
  background: rgba(30, 28, 26, 0.94);
  border-color: rgba(255, 255, 255, 0.45);
  outline: none;
}

.ga-digital-exhibit.is-closed .ga-digital-exhibit__frame {
  display: none;
}

.ga-digital-exhibit__reopen {
  padding: 28px 0 8px;
}

.ga-digital-exhibit__reopen[hidden] {
  display: none !important;
}

@media (max-width: 720px) {
  .ga-digital-exhibit__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .ga-digital-exhibit__frame {
    width: 100%;
    min-height: 78vh;
    aspect-ratio: 3 / 4;
    border-left: 0;
    border-right: 0;
  }

  .ga-digital-exhibit__close-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .ga-digital-exhibit__close {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    justify-content: center;
  }
}