/* Shared image lightbox (news gallery, course cover, …) */

html.ncma-lightbox-open {
  overflow: hidden;
}

.ncma-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1.25rem;
}

.ncma-lightbox[hidden] {
  display: none !important;
}

.ncma-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
}

.ncma-lightbox__panel {
  position: relative;
  z-index: 1;
  width: min(1100px, 100%);
  max-height: min(90vh, 900px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: 0.65rem 0.75rem;
}

.ncma-lightbox__close {
  grid-column: 1 / -1;
  justify-self: end;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: #EFF6FF;
  color: #0578AB;
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

.ncma-lightbox__close:hover,
.ncma-lightbox__close:focus-visible {
  background: #0699D8;
  color: #fff;
  outline: none;
}

.ncma-lightbox__figure {
  grid-column: 2;
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.ncma-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: min(78vh, 820px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  border: 1px solid rgba(191, 219, 254, 0.45);
  background: #0F172A;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.35);
}

.ncma-lightbox__counter {
  margin: 0;
  color: #E2E8F0;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ncma-lightbox__nav {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: #0699D8;
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(6, 153, 216, 0.35);
}

.ncma-lightbox__nav:hover,
.ncma-lightbox__nav:focus-visible {
  background: #0578AB;
  outline: none;
}

.ncma-lightbox__nav:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 720px) {
  .ncma-lightbox {
    padding: 0.75rem;
  }

  .ncma-lightbox__panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    width: 100%;
  }

  .ncma-lightbox__close {
    grid-column: 1;
  }

  .ncma-lightbox__figure {
    grid-column: 1;
    order: 2;
  }

  .ncma-lightbox__nav--prev {
    order: 3;
    justify-self: start;
  }

  .ncma-lightbox__nav--next {
    order: 3;
    justify-self: end;
    margin-top: -44px;
  }

  .ncma-lightbox__img {
    max-height: min(62vh, 640px);
  }
}