/* Gallery page: art-directed masonry, chrome-free full-screen viewer, CTA. */

.mt-page--gallery {
  background: var(--mt-ink);
}

.mt-gallery-title {
  background: var(--mt-ink);
  color: var(--mt-paper);
  padding-block: clamp(58px, 8vw, 118px) clamp(42px, 5.5vw, 78px);
  border-bottom: 1px solid var(--mt-rule-dark);
}

.mt-gallery-title h1 {
  font-family: var(--mt-display);
  font-weight: 900;
  font-size: clamp(4.8rem, 13vw, 11rem);
  line-height: .78;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--mt-orange);
}

.mt-gallery-title__intro {
  margin-top: clamp(28px, 3vw, 42px);
}

.mt-gallery-title__intro p {
  margin-top: 14px;
  font-size: clamp(1.26rem, 1.6875vw, 1.485rem);
  line-height: 1.62;
}

.mt-gallery {
  background: #0e1113;
  padding: clamp(8px, 1.25vw, 18px);
}

.mt-gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: 6px;
  gap: clamp(8px, 1.05vw, 15px);
  max-width: 1800px;
  margin-inline: auto;
}

.mt-gallery__item {
  grid-column: span 4;
  min-width: 0;
}

.mt-gallery__item--full { grid-column: 1 / -1; }
.mt-gallery__item--wide { grid-column: span 8; }
.mt-gallery__item--small { grid-column: span 3; }

.mt-gallery__open {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--mt-ink-raised);
}

.mt-gallery__item--small .mt-gallery__open {
  padding: clamp(7px, .8vw, 12px);
  background: #e9e6e1;
}

.mt-gallery__open img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .55s cubic-bezier(.32, .72, 0, 1), opacity .3s ease;
}

.mt-gallery__open:hover img,
.mt-gallery__open:focus-visible img {
  transform: scale(1.018);
}

.mt-gallery__open:focus-visible {
  outline-color: var(--mt-orange);
  outline-offset: -3px;
}

.mt-gallery-cta {
  position: relative;
  padding-block: clamp(78px, 10vw, 154px);
  background: var(--mt-ink);
  color: var(--mt-paper);
  border-top: 3px solid var(--mt-orange);
}

.mt-gallery-cta::after {
  content: "";
  position: absolute;
  top: 0;
  right: clamp(32px, 5vw, 80px);
  width: clamp(80px, 12vw, 180px);
  height: 3px;
  background: var(--mt-paper);
}

.mt-gallery-cta .mt-closing__copy {
  max-width: 62ch;
}

.mt-gallery-cta .mt-h2 {
  color: var(--mt-paper);
}

.mt-gallery-cta .mt-btn--primary:hover {
  background: var(--mt-paper);
  color: var(--mt-ink);
}

.mt-gallery-viewer[hidden] {
  display: none !important;
}

.mt-gallery-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #050505;
  touch-action: none;
}

.mt-gallery-viewer__image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.mt-gallery-viewer__control {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  color: var(--mt-paper);
  background: rgba(5, 5, 5, .18);
  border: 1px solid rgba(247, 245, 242, .22);
  border-radius: 50%;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.mt-gallery-viewer__control:hover,
.mt-gallery-viewer__control:focus-visible {
  color: var(--mt-orange);
  background: rgba(5, 5, 5, .62);
  border-color: var(--mt-orange);
}

.mt-gallery-viewer__control svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mt-gallery-viewer__close {
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
}

.mt-gallery-viewer__previous {
  top: 50%;
  left: max(20px, env(safe-area-inset-left));
  transform: translateY(-50%);
}

.mt-gallery-viewer__next {
  top: 50%;
  right: max(20px, env(safe-area-inset-right));
  transform: translateY(-50%);
}

body.mt-gallery-viewer-open {
  overflow: hidden;
}

@media (max-width: 1100px) {
  .mt-gallery__item { grid-column: span 4; }
  .mt-gallery__item--full { grid-column: 1 / -1; }
  .mt-gallery__item--wide { grid-column: span 8; }
  .mt-gallery__item--small { grid-column: span 4; }
}

@media (max-width: 760px) {
  .mt-gallery-title {
    padding-block: 48px 38px;
  }

  .mt-gallery-title h1 {
    font-size: clamp(3.8rem, 18vw, 5.2rem);
  }

  .mt-gallery {
    padding: 7px;
  }

  .mt-gallery__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 4px;
    gap: 7px;
  }

  .mt-gallery__item,
  .mt-gallery__item--small { grid-column: span 3; }

  .mt-gallery__item--full,
  .mt-gallery__item--wide { grid-column: 1 / -1; }

  .mt-gallery__item--small .mt-gallery__open {
    padding: 6px;
  }

  .mt-gallery-cta {
    padding-block: 72px 84px;
  }

  .mt-gallery-viewer__control {
    width: 48px;
    height: 48px;
  }

  .mt-gallery-viewer__control svg {
    width: 22px;
    height: 22px;
  }

  .mt-gallery-viewer__close {
    top: max(14px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
  }

  .mt-gallery-viewer__previous {
    left: max(10px, env(safe-area-inset-left));
  }

  .mt-gallery-viewer__next {
    right: max(10px, env(safe-area-inset-right));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mt-gallery__open img,
  .mt-gallery-viewer__control {
    transition: none;
  }
}

/* Keep the viewer limited to its image and essential controls. */
.mt-gallery-viewer-open .cookieadmin_re_consent { display: none !important; }
