/*
 * Native Carousel Lightbox — gallery-specific styles.
 */

/* Prevent horizontal layout shift when carousel locks scroll */
@supports (scrollbar-gutter: stable) {
  html {
    scrollbar-gutter: stable;
  }
}
body[data-frozen] {
  padding-inline-end: var(--nui-scrollbar-comp, 0px);
}

/* Lightbox carousel layout */
.n-carousel.n-carousel--thumbnails > .n-carousel__index > * span {
  padding: 0;
}

.n-carousel.n-carousel--lightbox > .n-carousel__content {
  grid-row: 1/-2;
}

.n-carousel.n-carousel--lightbox.n-carousel--overlay {
  margin: 0;
  z-index: 2147483646;
  --wp--style--global--content-size: 100%;
}
.n-carousel.n-carousel--lightbox.n-carousel--overlay > .n-carousel__content {
  grid-row: 1/-1;
}
.n-carousel.n-carousel--lightbox.n-carousel--overlay .gallery {
  flex-wrap: nowrap;
  margin: 0;
  overflow: auto;
  overflow-y: hidden;
  height: 2em;
  justify-content: flex-start;
}
.n-carousel.n-carousel--lightbox.n-carousel--overlay .gallery a {
  width: 2em;
}

/* Fullscreen (webkit + standard) */
.n-carousel.n-carousel--lightbox:-webkit-full-screen {
  margin: 0;
}
.n-carousel.n-carousel--lightbox:-webkit-full-screen > .n-carousel__content {
  grid-row: 1/-1;
}
.n-carousel.n-carousel--lightbox:-webkit-full-screen .gallery {
  flex-wrap: nowrap;
  margin: 0;
}
.n-carousel.n-carousel--lightbox:-webkit-full-screen .gallery a {
  width: 2em;
}
.n-carousel.n-carousel--lightbox:fullscreen {
  margin: 0;
}
.n-carousel.n-carousel--lightbox:fullscreen > .n-carousel__content {
  grid-row: 1/-1;
}
.n-carousel.n-carousel--lightbox:fullscreen .gallery {
  flex-wrap: nowrap;
  margin: 0;
}
.n-carousel.n-carousel--lightbox:fullscreen .gallery a {
  width: 2em;
}

/* Gallery lightbox spacing and thumbnail grid */
.n-carousel--lightbox {
  margin-top: 1.5em;
}
.n-carousel--lightbox .n-aspect {
  max-height: 100%;
  display: flex;
}
.n-carousel--lightbox .gallery {
  --gallery-columns: 9;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  margin: 1rem 0;
  justify-content: flex-start;
  max-height: 20em;
  position: relative;
  width: 100%;
  -webkit-mask-image: -webkit-linear-gradient(270deg, black, black 95%, transparent);
  -webkit-mask-size: 100% 20em;
  -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(180deg, black, black 95%, transparent);
  mask-size: 100% 20em;
  mask-repeat: no-repeat;
}

.n-carousel--lightbox .gallery a {
  display: block;
  width: calc(100% / var(--gallery-columns));
  margin: 0;
  border: 1px solid transparent;
  box-sizing: border-box;
}
@media (min-width: 600px) {
  .n-carousel--lightbox .gallery a {
    width: 10%;
  }
}
.n-carousel--lightbox .gallery a:not([aria-current]) {
  --nui-control-bg: transparent;
}

.n-carousel--lightbox .gallery a img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  max-width: none;
  max-height: none;
}
.n-carousel--lightbox.n-carousel--overlay .gallery {
  justify-content: center;
}
.n-carousel--lightbox.n-carousel--inline:not(.n-carousel--overlay) .gallery [aria-current] {
  --nui-control-bg: transparent;
}

/* Thumbnail index controls */
.n-carousel--lightbox.n-carousel--thumbnails > .n-carousel__index > * {
  --nui-control-bg: transparent;
  --nui-border-size: 0px;
  --nui-shadow-size: 0px;
}
.n-carousel--lightbox.n-carousel--thumbnails > .n-carousel__index [aria-current] {
  box-shadow: 0 0 0 1px var(--nui-control-highlight, currentColor);
}

/* Empty figcaption hiding */
.n-carousel--lightbox figcaption:empty {
  display: none;
}

/* Placeholder loading state */
.n-carousel--lightbox > .n-carousel__content picture:not([data-loaded]) > * {
  --placeholder: inherit !important;
}
.n-carousel--lightbox > .n-carousel__content picture:not([data-loaded]):before {
  display: none;
}

/* Zoom cursor for clickable lightbox pictures */
.n-carousel:not(.n-carousel--overlay):has(.n-carousel__close) picture {
  cursor: zoom-in;
}

/* Mobile: inline gallery as horizontal scroll strip */
@media (max-width: 599.9px) {
  .n-carousel--inline .gallery {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 4rem;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .n-carousel--inline .gallery a {
    flex: 0 0 3.25rem;
    width: 3.25rem;
  }
  .n-carousel--inline .gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}